@sebgroup/green-core 3.17.4 → 3.18.0-rc.20260813141101783

package/custom-elements.json

@@ -29999,806 +29999,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/menu-button/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/menu-button/menu-button"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "GdsMenuButton",
-          "cssParts": [
-            {
-              "description": "The main slot of the button, between the lead and trail slots.",
-              "name": "main-slot"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Content to be displayed as the button label.",
-              "name": ""
-            },
-            {
-              "description": "An optional slot that allows a `gds-icon` element to be placed before the label.",
-              "name": "lead"
-            },
-            {
-              "description": "An optional slot that allows a `gds-icon` element to be placed after the label.",
-              "name": "trail"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "ShadowRootInit"
-              },
-              "static": true,
-              "default": "{ mode: 'open', delegatesFocus: true, }"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the menu-button is disabled.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "When set, the underlying button will be rendered as an anchor element.",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
-              },
-              "description": "Where to display the linked URL. Only used when href is present.",
-              "attribute": "target"
-            },
-            {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to \"noreferrer noopener\" for security reasons when target is set.",
-              "attribute": "rel"
-            },
-            {
-              "kind": "field",
-              "name": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.",
-              "attribute": "download"
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
-              "attribute": "compact",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the menu button is selected",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `width` property.\nSupports space tokens and all valid CSS `width` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'min-width'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `min-width` property.\nSupports space tokens and all valid CSS `min-width` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'max-width'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `max-width` property.\nSupports space tokens and all valid CSS `max-width` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'inline-size'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `inline-size` property.\nSupports space tokens and all valid CSS `inline-size` values",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'min-inline-size'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `min-inline-size` property.\nSupports space tokens and all valid CSS `min-inline-size` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'max-inline-size'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `max-inline-size` property.\nSupports space tokens and all valid CSS `max-inline-size` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withSizeXProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'align-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'justify-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'place-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-column'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-row'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-area'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "flex",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "order",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "define",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Defines the custom element in the custom element registry.\nThis method needs to be called once before the element can be used.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isDefined",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "false",
-              "description": "Whether the element is defined in the custom element registry.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "styleExpressionBaseSelector",
-              "type": {
-                "text": "string"
-              },
-              "static": true,
-              "default": "':host'",
-              "description": "Style expression properties for this element will use this selector by default.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "semanticVersion",
-              "type": {
-                "text": "string"
-              },
-              "readonly": true,
-              "default": "'__GDS_SEM_VER__'",
-              "description": "The semantic version of this element. Can be used for troubleshooting to verify the version being used.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "syncFirstRender",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.\n\nThis guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and\nrun the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM\nis projected.\n\nNote: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the\nelement needs to be measured synchronously after being added to the DOM.",
-              "attribute": "sync-first-render",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "gdsElementName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
-              "readonly": true,
-              "attribute": "gds-element",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchStandardEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "EventInit"
-                  }
-                }
-              ],
-              "description": "Dispatches a standard event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchCustomEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "CustomEventInit<T>"
-                  }
-                }
-              ],
-              "description": "Dispatches a custom event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the button is clicked.",
-              "name": "click"
-            },
-            {
-              "name": "gds-element-disconnected",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "When the element is disconnected from the DOM",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the menu-button is disabled.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
-              "fieldName": "label"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "When set, the underlying button will be rendered as an anchor element.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
-              },
-              "description": "Where to display the linked URL. Only used when href is present.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to \"noreferrer noopener\" for security reasons when target is set.",
-              "fieldName": "rel"
-            },
-            {
-              "name": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.",
-              "fieldName": "download"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
-              "fieldName": "compact"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the menu button is selected",
-              "fieldName": "selected"
-            },
-            {
-              "name": "gds-element",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
-              "readonly": true,
-              "fieldName": "gdsElementName",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "name": "sync-first-render",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.\n\nThis guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and\nrun the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM\nis projected.\n\nNote: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the\nelement needs to be measured synchronously after being added to the DOM.",
-              "fieldName": "syncFirstRender",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "withSizeXProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
-            },
-            {
-              "name": "withLayoutChildProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-menu-button",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsMenuButton",
-          "declaration": {
-            "name": "GdsMenuButton",
-            "module": "src/components/menu-button/menu-button.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Menu button', component: 'gds-menu-button', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-datepicker'), }, }",
-          "description": "A menu button combines button and link behaviors for navigation menus."
-        },
-        {
-          "kind": "variable",
-          "name": "Basic",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Selected_state",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html`<gds-menu-button selected> <gds-icon-people solid slot=\"trail\"></gds-icon-people> Profile </gds-menu-button>`, }",
-          "description": "Selected state is used to indicate that the button is currently selected, for example to indicate the current page."
-        },
-        {
-          "kind": "variable",
-          "name": "Only_text",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html`<gds-menu-button>Search</gds-menu-button>`, }",
-          "description": "The menu button can be used without an icon as well."
-        },
-        {
-          "kind": "variable",
-          "name": "Example_menu_bar",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html`<gds-div display=\"flex\" height=\"70px\" width=\"700px\" border-color=\"strong\" border-width=\"0 0 4xs 0\" > <div style=\"flex-basis:50%;\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Search </gds-menu-button> </div> <gds-flex style=\"flex-basis:50%;\" justify-content=\"flex-end\"> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-card>`, }",
-          "description": "An example of a menu bar with a search button, a notification button, a profile button, and an external link button.\n\nThe profile buitton shows an example of using a popover together with a menu button.\n\nExternal link is an example of using a menu button as a link to a URL."
-        },
-        {
-          "kind": "variable",
-          "name": "Compact_menu_bar",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html`<gds-flex width=\"700px\" background=\"neutral-01\" border=\"0 0 3xs/subtle-01 0\" align-items=\"center\" > <gds-flex flex=\"1\"> <gds-menu-button compact> <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex justify-content=\"flex-end\"> <gds-menu-button compact> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\" compact> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button compact selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex>`, }",
-          "description": "Same as above, but using the compact style. This is mainly intended for use in a mobile viewport."
-        },
-        {
-          "kind": "variable",
-          "name": "Dark",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Dark Mode', render: () => html` <gds-flex flex-direction=\"column\" gap=\"l\"> <gds-theme color-scheme=\"dark\"> <gds-flex width=\"700px\" background=\"neutral-01\" height=\"80px\" border=\"0 0 3xs/secondary 0\" > <gds-flex flex=\"1\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\" ></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex> </gds-theme> <gds-theme color-scheme=\"light\"> <gds-flex width=\"700px\" background=\"neutral-01\" height=\"80px\" border=\"0 0 3xs/secondary 0\" > <gds-flex flex=\"1\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\" ></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex style=\"flex-basis:50%;\" justify-content=\"flex-end\"> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex> </gds-theme> </gds-flex> `, }",
-          "description": "Same as above, but using the compact style. This is mainly intended for use in a mobile viewport."
-        },
-        {
-          "kind": "variable",
-          "name": "AriaForwarding",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ name: 'ARIA Forwarding', render: () => html` <gds-flex flex-direction=\"column\" gap=\"s\" width=\"400px\"> <div id=\"menubutton-label\">Main Menu</div> <div id=\"menubutton-description\">Toggle the main navigation menu</div> <div id=\"menu-controlled\">Menu controlled element</div> <gds-menu-button gds-aria-labelledby=\"menubutton-label\" gds-aria-describedby=\"menubutton-description\" gds-aria-controls=\"menu-controlled\" > <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Menu </gds-menu-button> </gds-flex> `, }",
-          "description": "Demonstrates ARIA forwarding, allowing external labels, descriptions, and controls to be associated with the internal button element.\nUses `gds-aria-labelledby`, `gds-aria-describedby`, and `gds-aria-controls` to wire up external accessibility text."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Basic",
-          "declaration": {
-            "name": "Basic",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Selected_state",
-          "declaration": {
-            "name": "Selected_state",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Only_text",
-          "declaration": {
-            "name": "Only_text",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Example_menu_bar",
-          "declaration": {
-            "name": "Example_menu_bar",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Compact_menu_bar",
-          "declaration": {
-            "name": "Compact_menu_bar",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Dark",
-          "declaration": {
-            "name": "Dark",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "AriaForwarding",
-          "declaration": {
-            "name": "AriaForwarding",
-            "module": "src/components/menu-button/menu-button.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "style",
-          "default": "css` @layer tokens, core, a11y, disabled, variants, sizes, sets; @layer tokens { :host { --_gap: var(--gds-sys-space-xs); --_padding-inline: var(--gds-sys-space-m); --_padding-block: var(--gds-sys-space-xs); --_color-bg: transparent; --_color-text: var(--gds-sys-color-content-neutral-01); --_color-border: transparent; --_font-size: 1rem; --_font-weight: 400; --_line-height: 1.25; display: inline-block; isolation: isolate; max-width: 100%; height: 100%; } } @layer core { .button { align-items: center; background-color: var(--_color-bg); border-bottom-width: 2px; border-style: none; border-color: var(--_color-border); border-bottom-style: solid; box-sizing: border-box; color-scheme: dark light; color: var(--_color-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--_font-size); font-weight: var(--_font-weight); gap: var(--_gap); height: 100%; inline-size: 100%; justify-content: space-between; justify-items: center; line-height: var(--_line-height); outline-color: transparent; outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); position: relative; transition-property: color, border-color; transition: all var(--gds-sys-motion-duration-fastest); &:focus-visible { border-color: transparent; border-radius: 6px; outline-color: currentColor; overflow: visible; } &:hover, &.selected:hover, &:active { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-05) ); --_color-border: var(--gds-sys-color-border-neutral-01); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-neutral-04); } slot:not([name]) { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .compact { display: flex; flex-direction: column; --_padding-inline: var(--gds-sys-space-s); --_gap: 1px; font-size: 0.875rem; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } @media (max-width: 576px) { font: var(--gds-sys-text-detail-xs-book); --_padding-inline: var(--gds-sys-space-xs); } } a { text-decoration: none; } } :disabled { border-color: var(--_color-bg); color: var(--gds-sys-color-content-disabled-01); pointer-events: none; } @layer a11y { @media (prefers-reduced-motion: reduce) { .button { transition: none; } } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "style",
-            "module": "src/components/menu-button/menu-button.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsMenuButton",
-          "declaration": {
-            "name": "GdsMenuButton",
-            "module": "src/components/menu-button/menu-button.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/mask/index.ts",
@@ -31844,54 +31044,752 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "gds-element-disconnected",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "When the element is disconnected from the DOM",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
+          "events": [
+            {
+              "name": "gds-element-disconnected",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsMask",
+          "declaration": {
+            "name": "GdsMask",
+            "module": "src/components/mask/mask.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mask/mask.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{ title: 'Components/Mask', component: 'gds-mask', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-mask'), }, }",
+          "description": "The Mask component creates a gradient overlay effect that can be used to improve content visibility\nor create visual hierarchy. It's particularly useful when placing text over images or creating\nfade effects.\n\n\n### Basic Usage\n\nThe mask component is typically used in combination with images or videos to create gradient overlays:\n\n```html\n<gds-card position=\"relative\" padding=\"0\" overflow=\"hidden\">\n  <gds-img src=\"path/to/image.jpg\"></gds-img>\n  <gds-mask\n    background=\"neutral-01/0.9\"\n    mask-image=\"top\"\n    position=\"absolute\"\n    inset=\"50% 0 0 0\"\n    level=\"3\"\n  >\n    <!-- Content within the mask -->\n  </gds-mask>\n</gds-card>\n```\n\n### Common Use Cases\n\n1. Image Overlays: <br>\n   Create readable text over images by adding a gradient mask\n\n2. Content Fading: <br>\n   Add fade effects to content edges\n\n3. Visual Hierarchy: <br>\n   Draw attention to specific areas using gradient masks\n\n### Accessibility\n\nWhen using masks over content, ensure sufficient contrast for text readability.\nConsider using the dark theme for content within masks over light images.\n\n```html\n<gds-mask>\n  <gds-theme color-scheme=\"dark\">\n    <!-- Content -->\n  </gds-theme>\n</gds-mask>\n```"
+        },
+        {
+          "kind": "variable",
+          "name": "Mask",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: (args) => html` <gds-card position=\"relative\" padding=\"0\" overflow=\"hidden\"> <gds-img src=\"https://api.seb.io/assets/woods-cabin.jpeg\"></gds-img> <gds-mask background=\"neutral-01/0.9\" mask-image=\"top\" position=\"absolute\" inset=\"0; m{50% 0 0 0}\" level=\"3\" color=\"03\" flex-direction=\"column\" justify-content=\"flex-end\" align-items=\"flex-start\" gap=\"xl\" padding=\"xl; s{2xl} m{6xl}\" > <gds-theme color-scheme=\"dark\" design-version=\"2023\"> <gds-flex flex-direction=\"column\" gap=\"s\" width=\"100%\"> <gds-text font=\"display-s; m{display-l}\" font-weight=\"light\"> Sustainability </gds-text> <gds-text font=\"body-xs; body-s\"> Actively supporting the net zero transition. </gds-text> </gds-flex> <gds-button>Our impact</gds-button> </gds-theme> </gds-mask> </gds-card> `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/components/mask/mask.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Mask",
+          "declaration": {
+            "name": "Mask",
+            "module": "src/components/mask/mask.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mask/mask.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "style",
+          "default": "css` :host { contain: strict; } [part='mask'] { position: absolute; inset: 0; z-index: -1; pointer-events: none; mask-composite: intersect; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "style",
+            "module": "src/components/mask/mask.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/mask/mask.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsMask",
+          "declaration": {
+            "name": "GdsMask",
+            "module": "src/components/mask/mask.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/menu-button/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/menu-button/menu-button"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/menu-button/menu-button.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GdsMenuButton",
+          "cssParts": [
+            {
+              "description": "The main slot of the button, between the lead and trail slots.",
+              "name": "main-slot"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content to be displayed as the button label.",
+              "name": ""
+            },
+            {
+              "description": "An optional slot that allows a `gds-icon` element to be placed before the label.",
+              "name": "lead"
+            },
+            {
+              "description": "An optional slot that allows a `gds-icon` element to be placed after the label.",
+              "name": "trail"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ mode: 'open', delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu-button is disabled.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "When set, the underlying button will be rendered as an anchor element.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+              },
+              "description": "Where to display the linked URL. Only used when href is present.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to \"noreferrer noopener\" for security reasons when target is set.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.",
+              "attribute": "download"
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
+              "attribute": "compact",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu button is selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `width` property.\nSupports space tokens and all valid CSS `width` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'min-width'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `min-width` property.\nSupports space tokens and all valid CSS `min-width` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'max-width'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `max-width` property.\nSupports space tokens and all valid CSS `max-width` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'inline-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `inline-size` property.\nSupports space tokens and all valid CSS `inline-size` values",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'min-inline-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `min-inline-size` property.\nSupports space tokens and all valid CSS `min-inline-size` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'max-inline-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `max-inline-size` property.\nSupports space tokens and all valid CSS `max-inline-size` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'align-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'justify-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'place-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-column'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-row'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-area'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "flex",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "order",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Defines the custom element in the custom element registry.\nThis method needs to be called once before the element can be used.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isDefined",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "false",
+              "description": "Whether the element is defined in the custom element registry.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styleExpressionBaseSelector",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "':host'",
+              "description": "Style expression properties for this element will use this selector by default.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "semanticVersion",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "default": "'__GDS_SEM_VER__'",
+              "description": "The semantic version of this element. Can be used for troubleshooting to verify the version being used.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "syncFirstRender",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.\n\nThis guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and\nrun the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM\nis projected.\n\nNote: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the\nelement needs to be measured synchronously after being added to the DOM.",
+              "attribute": "sync-first-render",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "gdsElementName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
+              "readonly": true,
+              "attribute": "gds-element",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchStandardEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "EventInit"
+                  }
+                }
+              ],
+              "description": "Dispatches a standard event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "CustomEventInit<T>"
+                  }
+                }
+              ],
+              "description": "Dispatches a custom event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the button is clicked.",
+              "name": "click"
+            },
+            {
+              "name": "gds-element-disconnected",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu-button is disabled.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
+              "fieldName": "label"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "When set, the underlying button will be rendered as an anchor element.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+              },
+              "description": "Where to display the linked URL. Only used when href is present.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to \"noreferrer noopener\" for security reasons when target is set.",
+              "fieldName": "rel"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.",
+              "fieldName": "download"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot.",
+              "fieldName": "compact"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the menu button is selected",
+              "fieldName": "selected"
+            },
+            {
+              "name": "gds-element",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
+              "readonly": true,
+              "fieldName": "gdsElementName",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "sync-first-render",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.\n\nThis guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and\nrun the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM\nis projected.\n\nNote: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the\nelement needs to be measured synchronously after being added to the DOM.",
+              "fieldName": "syncFirstRender",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
+          "mixins": [
             {
-              "name": "name",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
+              "name": "withSizeXProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
             },
             {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
+              "name": "withLayoutChildProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-menu-button",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsMask",
+          "name": "GdsMenuButton",
           "declaration": {
-            "name": "GdsMask",
-            "module": "src/components/mask/mask.component.ts"
+            "name": "GdsMenuButton",
+            "module": "src/components/menu-button/menu-button.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mask/mask.stories.ts",
+      "path": "src/components/menu-button/menu-button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -31899,16 +31797,70 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Mask', component: 'gds-mask', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-mask'), }, }",
-          "description": "The Mask component creates a gradient overlay effect that can be used to improve content visibility\nor create visual hierarchy. It's particularly useful when placing text over images or creating\nfade effects.\n\n\n### Basic Usage\n\nThe mask component is typically used in combination with images or videos to create gradient overlays:\n\n```html\n<gds-card position=\"relative\" padding=\"0\" overflow=\"hidden\">\n  <gds-img src=\"path/to/image.jpg\"></gds-img>\n  <gds-mask\n    background=\"neutral-01/0.9\"\n    mask-image=\"top\"\n    position=\"absolute\"\n    inset=\"50% 0 0 0\"\n    level=\"3\"\n  >\n    <!-- Content within the mask -->\n  </gds-mask>\n</gds-card>\n```\n\n### Common Use Cases\n\n1. Image Overlays: <br>\n   Create readable text over images by adding a gradient mask\n\n2. Content Fading: <br>\n   Add fade effects to content edges\n\n3. Visual Hierarchy: <br>\n   Draw attention to specific areas using gradient masks\n\n### Accessibility\n\nWhen using masks over content, ensure sufficient contrast for text readability.\nConsider using the dark theme for content within masks over light images.\n\n```html\n<gds-mask>\n  <gds-theme color-scheme=\"dark\">\n    <!-- Content -->\n  </gds-theme>\n</gds-mask>\n```"
+          "default": "{ title: 'Components/Menu button', component: 'gds-menu-button', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-datepicker'), }, }",
+          "description": "A menu button combines button and link behaviors for navigation menus."
         },
         {
           "kind": "variable",
-          "name": "Mask",
+          "name": "Basic",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html` <gds-card position=\"relative\" padding=\"0\" overflow=\"hidden\"> <gds-img src=\"https://api.seb.io/assets/woods-cabin.jpeg\"></gds-img> <gds-mask background=\"neutral-01/0.9\" mask-image=\"top\" position=\"absolute\" inset=\"0; m{50% 0 0 0}\" level=\"3\" color=\"03\" flex-direction=\"column\" justify-content=\"flex-end\" align-items=\"flex-start\" gap=\"xl\" padding=\"xl; s{2xl} m{6xl}\" > <gds-theme color-scheme=\"dark\" design-version=\"2023\"> <gds-flex flex-direction=\"column\" gap=\"s\" width=\"100%\"> <gds-text font=\"display-s; m{display-l}\" font-weight=\"light\"> Sustainability </gds-text> <gds-text font=\"body-xs; body-s\"> Actively supporting the net zero transition. </gds-text> </gds-flex> <gds-button>Our impact</gds-button> </gds-theme> </gds-mask> </gds-card> `, }"
+          "default": "{ ...DefaultParams, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Selected_state",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-menu-button selected> <gds-icon-people solid slot=\"trail\"></gds-icon-people> Profile </gds-menu-button>`, }",
+          "description": "Selected state is used to indicate that the button is currently selected, for example to indicate the current page."
+        },
+        {
+          "kind": "variable",
+          "name": "Only_text",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-menu-button>Search</gds-menu-button>`, }",
+          "description": "The menu button can be used without an icon as well."
+        },
+        {
+          "kind": "variable",
+          "name": "Example_menu_bar",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-div display=\"flex\" height=\"70px\" width=\"700px\" border-color=\"strong\" border-width=\"0 0 4xs 0\" > <div style=\"flex-basis:50%;\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Search </gds-menu-button> </div> <gds-flex style=\"flex-basis:50%;\" justify-content=\"flex-end\"> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-card>`, }",
+          "description": "An example of a menu bar with a search button, a notification button, a profile button, and an external link button.\n\nThe profile buitton shows an example of using a popover together with a menu button.\n\nExternal link is an example of using a menu button as a link to a URL."
+        },
+        {
+          "kind": "variable",
+          "name": "Compact_menu_bar",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-flex width=\"700px\" background=\"neutral-01\" border=\"0 0 3xs/subtle-01 0\" align-items=\"center\" > <gds-flex flex=\"1\"> <gds-menu-button compact> <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex justify-content=\"flex-end\"> <gds-menu-button compact> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\" compact> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button compact selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex>`, }",
+          "description": "Same as above, but using the compact style. This is mainly intended for use in a mobile viewport."
+        },
+        {
+          "kind": "variable",
+          "name": "Dark",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Dark Mode', render: () => html` <gds-flex flex-direction=\"column\" gap=\"l\"> <gds-theme color-scheme=\"dark\"> <gds-flex width=\"700px\" background=\"neutral-01\" height=\"80px\" border=\"0 0 3xs/secondary 0\" > <gds-flex flex=\"1\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\" ></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex> </gds-theme> <gds-theme color-scheme=\"light\"> <gds-flex width=\"700px\" background=\"neutral-01\" height=\"80px\" border=\"0 0 3xs/secondary 0\" > <gds-flex flex=\"1\"> <gds-menu-button> <gds-icon-magnifying-glass slot=\"lead\" ></gds-icon-magnifying-glass> Search </gds-menu-button> </gds-flex> <gds-flex style=\"flex-basis:50%;\" justify-content=\"flex-end\"> <gds-menu-button> <gds-icon-bell slot=\"trail\"></gds-icon-bell> Notification </gds-menu-button> <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-people slot=\"trail\"></gds-icon-people> Profile </gds-menu-button> <div style=\"padding: 1rem;\">Profile stuff</div> </gds-popover> <gds-menu-button selected href=\"https://github.com/seb-oss/green\" target=\"_blank\" > <gds-icon-square-arrow-top-right slot=\"trail\" ></gds-icon-square-arrow-top-right> External link </gds-menu-button> </gds-flex> </gds-flex> </gds-theme> </gds-flex> `, }",
+          "description": "Same as above, but using the compact style. This is mainly intended for use in a mobile viewport."
+        },
+        {
+          "kind": "variable",
+          "name": "AriaForwarding",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'ARIA Forwarding', render: () => html` <gds-flex flex-direction=\"column\" gap=\"s\" width=\"400px\"> <div id=\"menubutton-label\">Main Menu</div> <div id=\"menubutton-description\">Toggle the main navigation menu</div> <div id=\"menu-controlled\">Menu controlled element</div> <gds-menu-button gds-aria-labelledby=\"menubutton-label\" gds-aria-describedby=\"menubutton-description\" gds-aria-controls=\"menu-controlled\" > <gds-icon-magnifying-glass slot=\"lead\"></gds-icon-magnifying-glass> Menu </gds-menu-button> </gds-flex> `, }",
+          "description": "Demonstrates ARIA forwarding, allowing external labels, descriptions, and controls to be associated with the internal button element.\nUses `gds-aria-labelledby`, `gds-aria-describedby`, and `gds-aria-controls` to wire up external accessibility text."
         }
       ],
       "exports": [
@@ -31917,27 +31869,75 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/mask/mask.stories.ts"
+            "module": "src/components/menu-button/menu-button.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Mask",
+          "name": "Basic",
           "declaration": {
-            "name": "Mask",
-            "module": "src/components/mask/mask.stories.ts"
+            "name": "Basic",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Selected_state",
+          "declaration": {
+            "name": "Selected_state",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Only_text",
+          "declaration": {
+            "name": "Only_text",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Example_menu_bar",
+          "declaration": {
+            "name": "Example_menu_bar",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Compact_menu_bar",
+          "declaration": {
+            "name": "Compact_menu_bar",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Dark",
+          "declaration": {
+            "name": "Dark",
+            "module": "src/components/menu-button/menu-button.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AriaForwarding",
+          "declaration": {
+            "name": "AriaForwarding",
+            "module": "src/components/menu-button/menu-button.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mask/mask.styles.ts",
+      "path": "src/components/menu-button/menu-button.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` :host { contain: strict; } [part='mask'] { position: absolute; inset: 0; z-index: -1; pointer-events: none; mask-composite: intersect; } `"
+          "default": "css` @layer tokens, core, a11y, disabled, variants, sizes, sets; @layer tokens { :host { --_gap: var(--gds-sys-space-xs); --_padding-inline: var(--gds-sys-space-m); --_padding-block: var(--gds-sys-space-xs); --_color-bg: transparent; --_color-text: var(--gds-sys-color-content-neutral-01); --_color-border: transparent; --_font-size: 1rem; --_font-weight: 400; --_line-height: 1.25; display: inline-block; isolation: isolate; max-width: 100%; height: 100%; } } @layer core { .button { align-items: center; background-color: var(--_color-bg); border-bottom-width: 2px; border-style: none; border-color: var(--_color-border); border-bottom-style: solid; box-sizing: border-box; color-scheme: dark light; color: var(--_color-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--_font-size); font-weight: var(--_font-weight); gap: var(--_gap); height: 100%; inline-size: 100%; justify-content: space-between; justify-items: center; line-height: var(--_line-height); outline-color: transparent; outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); position: relative; transition-property: color, border-color; transition: all var(--gds-sys-motion-duration-fastest); &:focus-visible { border-color: transparent; border-radius: 6px; outline-color: currentColor; overflow: visible; } &:hover, &.selected:hover, &:active { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-05) ); --_color-border: var(--gds-sys-color-border-neutral-01); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-neutral-04); } slot:not([name]) { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .compact { display: flex; flex-direction: column; --_padding-inline: var(--gds-sys-space-s); --_gap: 1px; font-size: 0.875rem; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } @media (max-width: 576px) { font: var(--gds-sys-text-detail-xs-book); --_padding-inline: var(--gds-sys-space-xs); } } a { text-decoration: none; } } :disabled { border-color: var(--_color-bg); color: var(--gds-sys-color-content-disabled-01); pointer-events: none; } @layer a11y { @media (prefers-reduced-motion: reduce) { .button { transition: none; } } } `"
         }
       ],
       "exports": [
@@ -31946,22 +31946,22 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/mask/mask.styles.ts"
+            "module": "src/components/menu-button/menu-button.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/mask/mask.ts",
+      "path": "src/components/menu-button/menu-button.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsMask",
+          "name": "GdsMenuButton",
           "declaration": {
-            "name": "GdsMask",
-            "module": "src/components/mask/mask.ts"
+            "name": "GdsMenuButton",
+            "module": "src/components/menu-button/menu-button.ts"
           }
         }
       ]
@@ -46108,7 +46108,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/avatar/index.js"
+            "module": "src/generated/react/badge/index.js"
           }
         },
         {
@@ -46116,7 +46116,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/badge/index.js"
+            "module": "src/generated/react/avatar/index.js"
           }
         },
         {
@@ -46148,7 +46148,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/card/index.js"
+            "module": "src/generated/react/calendar/index.js"
           }
         },
         {
@@ -46156,7 +46156,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/calendar/index.js"
+            "module": "src/generated/react/card/index.js"
           }
         },
         {
@@ -46196,7 +46196,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/details/index.js"
+            "module": "src/generated/react/datepicker/index.js"
           }
         },
         {
@@ -46204,7 +46204,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/datepicker/index.js"
+            "module": "src/generated/react/details/index.js"
           }
         },
         {
@@ -46316,7 +46316,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/mask/index.js"
+            "module": "src/generated/react/list/index.js"
           }
         },
         {
@@ -46324,7 +46324,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/list/index.js"
+            "module": "src/generated/react/mask/index.js"
           }
         },
         {
@@ -46428,7 +46428,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/text/index.js"
+            "module": "src/generated/react/tabs/index.js"
           }
         },
         {
@@ -46436,7 +46436,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/tabs/index.js"
+            "module": "src/generated/react/text/index.js"
           }
         },
         {
@@ -49204,6 +49204,16 @@
               "description": "Aspect ratio/format of the card's media section\n- landscape: 16:9 or similar horizontal format\n- square: 1:1 square format",
               "attribute": "aspect-ratio"
             },
+            {
+              "kind": "field",
+              "name": "horizontal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables horizontal layout: media on the left, content on the right.\nReverts to the default stacked layout on small screens.",
+              "attribute": "horizontal"
+            },
             {
               "kind": "field",
               "name": "category",
@@ -49244,6 +49254,84 @@
               "description": "Locale for date formatting (e.g., 'sv-SE', 'en-GB', 'en-US')",
               "attribute": "locale"
             },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `height` property.\nSupports space tokens and all valid CSS `height` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'min-height'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `min-height` property.\nSupports space tokens and all valid CSS `min-height` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'max-height'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `max-height` property.\nSupports space tokens and all valid CSS `max-height` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'block-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `block-size` property.\nSupports space tokens and all valid CSS `block-size` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'min-block-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `min-block-size` property.\nSupports space tokens and all valid CSS `min-block-size` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'max-block-size'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `max-block-size` property.\nSupports space tokens and all valid CSS `max-block-size` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withSizeYProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "width",
@@ -49821,6 +49909,15 @@
               "description": "Aspect ratio/format of the card's media section\n- landscape: 16:9 or similar horizontal format\n- square: 1:1 square format",
               "fieldName": "ratio"
             },
+            {
+              "name": "horizontal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables horizontal layout: media on the left, content on the right.\nReverts to the default stacked layout on small screens.",
+              "fieldName": "horizontal"
+            },
             {
               "name": "category",
               "type": {
@@ -50019,6 +50116,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "withSizeYProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
             {
               "name": "withSizeXProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
@@ -50168,6 +50269,22 @@
           },
           "default": "{ render: () => html` <gds-grid columns=\"1; m{2}\" padding=\"xl\"> <gds-theme color-scheme=\"light\"> <gds-flex level=\"1\" flex-direction=\"column\" gap=\"xl\" padding=\"4xl\" background=\"neutral-01\" > <gds-badge width=\"max-content\">Light</gds-badge> <gds-card-pattern-01 title=\"Light mode\" excerpt=\"Card on light mode\" href=\"#\" label=\"Learn more\" src=\"https://api.seb.io/assets/launch-hero.jpg\" ></gds-card-pattern-01> </gds-flex> </gds-theme> <gds-theme color-scheme=\"dark\"> <gds-flex level=\"1\" flex-direction=\"column\" gap=\"xl\" background=\"neutral-01\" padding=\"4xl\" border-radius=\"s\" > <gds-badge width=\"max-content\">Dark</gds-badge> <gds-card-pattern-01 title=\"Dark mode\" excerpt=\"Card on dark mode\" href=\"#\" label=\"Learn more\" src=\"https://api.seb.io/assets/launch-hero.jpg\" ></gds-card-pattern-01> </gds-flex> </gds-theme> </gds-grid> `, parameters: { docs: { description: { story: 'Cards automatically adapt to light and dark themes when wrapped in `gds-theme` provider.', }, source: { code: ` <!-- Light theme --> <gds-theme color-scheme=\"light\"> <gds-card-pattern-01 title=\"Light mode\" excerpt=\"Card on light mode\" variant=\"outlined\" href=\"#\" label=\"Learn more\" ></gds-card-pattern-01> </gds-theme> <!-- Dark theme --> <gds-theme color-scheme=\"dark\"> <gds-card-pattern-01 title=\"Dark mode\" excerpt=\"Card on dark mode\" variant=\"outlined\" href=\"#\" label=\"Learn more\" ></gds-card-pattern-01> </gds-theme>`, language: 'html', type: 'code', }, }, }, }"
         },
+        {
+          "kind": "variable",
+          "name": "Horizontal",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <gds-flex flex-direction=\"column\" gap=\"xl\" max-width=\"800px\"> <!-- Basic horizontal: title + excerpt only, no media --> <gds-card-pattern-01 horizontal title=\"Basic horizontal\" excerpt=\"Media area is absent — just title and excerpt side by side in a clean layout.\" href=\"#\" label=\"Read more\" ></gds-card-pattern-01> <!-- Horizontal with image --> <gds-card-pattern-01 horizontal title=\"Horizontal with image\" excerpt=\"The image sits to the left of the content on larger screens.\" src=\"https://api.seb.io/assets/launch-hero.jpg\" href=\"#\" label=\"Read more\" ></gds-card-pattern-01> <!-- Horizontal with video in the media slot --> <gds-card-pattern-01 horizontal title=\"Horizontal with video\" excerpt=\"A video is rendered in the media slot to the left, content sits to the right.\" href=\"#\" label=\"Watch now\" > <gds-video src=\"https://api.seb.io/components/video/video.mp4\" slot=\"media\" ratio=\"16/9\" border-radius=\"xs\" autoplay playsinline loop muted ></gds-video> </gds-card-pattern-01> <!-- Horizontal with icon in header slot --> <gds-card-pattern-01 horizontal title=\"Horizontal with icon header\" excerpt=\"Header slot content is placed on the left in horizontal mode. Footer actions remain fully interactive.\" > <gds-card slot=\"header\" variant=\"neutral-02\" width=\"100%\" height=\"100%\" display=\"flex\" align-items=\"center\" justify-content=\"center\" border-radius=\"xs\" > <gds-icon-cloudy-sun size=\"xl\"></gds-icon-cloudy-sun> </gds-card> <gds-button slot=\"footer\">Primary</gds-button> <gds-button slot=\"footer\" rank=\"secondary\">Secondary</gds-button> </gds-card-pattern-01> </gds-flex> `, parameters: { docs: { description: { story: 'The `horizontal` attribute places the media to the left and content to the right. On screens narrower than 600 px the layout reverts to the default stacked arrangement.', }, source: { code: ` <!-- Basic horizontal --> <gds-card-pattern-01 horizontal title=\"Basic horizontal\" excerpt=\"Just title and excerpt, no media.\" href=\"#\" label=\"Read more\" ></gds-card-pattern-01> <!-- Horizontal with image --> <gds-card-pattern-01 horizontal title=\"Horizontal with image\" excerpt=\"Image on the left, content on the right.\" src=\"image.jpg\" href=\"#\" label=\"Read more\" ></gds-card-pattern-01> <!-- Horizontal with video --> <gds-card-pattern-01 horizontal title=\"Horizontal with video\" excerpt=\"Video rendered in the media slot.\" href=\"#\" label=\"Watch now\" > <gds-video src=\"video.mp4\" slot=\"media\" ratio=\"16/9\" border-radius=\"xs\" autoplay playsinline loop muted ></gds-video> </gds-card-pattern-01> <!-- Horizontal with icon in header slot --> <gds-card-pattern-01 horizontal title=\"Horizontal with icon header\" excerpt=\"Header slot renders on the left in horizontal mode.\" > <gds-card slot=\"header\" variant=\"neutral-02\" width=\"100%\" height=\"100%\" display=\"flex\" align-items=\"center\" justify-content=\"center\" border-radius=\"xs\" > <gds-icon-cloudy-sun size=\"xl\"></gds-icon-cloudy-sun> </gds-card> <gds-button slot=\"footer\">Primary</gds-button> <gds-button slot=\"footer\" rank=\"secondary\">Secondary</gds-button> </gds-card-pattern-01>`, language: 'html', type: 'code', }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GridFullHeight",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <gds-grid columns=\"1; m{3}\" gap=\"xl\"> <gds-card-pattern-01 height=\"100%\" title=\"Short title\" excerpt=\"Brief text.\" src=\"https://api.seb.io/assets/launch-hero.jpg\" href=\"#\" label=\"Read more\" ></gds-card-pattern-01> <gds-card-pattern-01 height=\"100%\" title=\"A card with a longer title to demonstrate equal heights\" excerpt=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.\" src=\"https://api.seb.io/assets/launch-hero.jpg\" > <gds-button slot=\"footer\">Action</gds-button> <gds-button slot=\"footer\" rank=\"secondary\">Details</gds-button> </gds-card-pattern-01> <gds-card-pattern-01 height=\"100%\" title=\"Medium title\" excerpt=\"Some excerpt text for the third card.\" > <gds-card slot=\"header\" variant=\"neutral-02\" width=\"100%\" height=\"auto\" display=\"flex\" align-items=\"center\" justify-content=\"center\" border-radius=\"xs\" aspect-ratio=\"16/9\" > <gds-icon-cloudy-sun size=\"xl\"></gds-icon-cloudy-sun> </gds-card> <gds-button slot=\"footer\">Learn more</gds-button> </gds-card-pattern-01> </gds-grid> `, parameters: { docs: { description: { story: 'Using `height=\"100%\"` on each card inside a grid ensures all cards stretch to equal height regardless of content length.', }, }, }, }"
+        },
         {
           "kind": "variable",
           "name": "Metadata",
@@ -50250,6 +50367,22 @@
             "module": "src/patterns/card-pattern-01/card-pattern-01.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "Horizontal",
+          "declaration": {
+            "name": "Horizontal",
+            "module": "src/patterns/card-pattern-01/card-pattern-01.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridFullHeight",
+          "declaration": {
+            "name": "GridFullHeight",
+            "module": "src/patterns/card-pattern-01/card-pattern-01.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Metadata",
@@ -68834,91 +68967,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/generated/react/backdrop/index.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "GdsBackdrop",
-          "parameters": [
-            {
-              "name": "props",
-              "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBackdropClass>>\n  > & { ref?: React.Ref<GdsBackdropClass> }"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsBackdrop",
-          "declaration": {
-            "name": "GdsBackdrop",
-            "module": "src/generated/react/backdrop/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/generated/react/badge/index.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "GdsBadge",
-          "parameters": [
-            {
-              "name": "props",
-              "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBadgeClass>>\n  > & { ref?: React.Ref<GdsBadgeClass> }"
-              }
-            }
-          ],
-          "description": "`gds-badge`"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsBadge",
-          "declaration": {
-            "name": "GdsBadge",
-            "module": "src/generated/react/badge/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/generated/react/blur/index.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "GdsBlur",
-          "parameters": [
-            {
-              "name": "props",
-              "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBlurClass>>\n  > & { ref?: React.Ref<GdsBlurClass> }"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsBlur",
-          "declaration": {
-            "name": "GdsBlur",
-            "module": "src/generated/react/blur/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/icon/icons/ai.component.ts",
@@ -239050,6 +239098,91 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/generated/react/backdrop/index.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "GdsBackdrop",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBackdropClass>>\n  > & { ref?: React.Ref<GdsBackdropClass> }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBackdrop",
+          "declaration": {
+            "name": "GdsBackdrop",
+            "module": "src/generated/react/backdrop/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/generated/react/blur/index.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "GdsBlur",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBlurClass>>\n  > & { ref?: React.Ref<GdsBlurClass> }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBlur",
+          "declaration": {
+            "name": "GdsBlur",
+            "module": "src/generated/react/blur/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/generated/react/badge/index.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "GdsBadge",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBadgeClass>>\n  > & { ref?: React.Ref<GdsBadgeClass> }"
+              }
+            }
+          ],
+          "description": "`gds-badge`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBadge",
+          "declaration": {
+            "name": "GdsBadge",
+            "module": "src/generated/react/badge/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/generated/react/breadcrumb/index.ts",
@@ -239462,16 +239595,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/div/index.ts",
+      "path": "src/generated/react/divider/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
               }
             }
           ]
@@ -239480,70 +239613,70 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "declaration": {
-            "name": "GdsDiv",
-            "module": "src/generated/react/div/index.ts"
+            "name": "GdsDivider",
+            "module": "src/generated/react/divider/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/divider/index.ts",
+      "path": "src/generated/react/dropdown/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDivider",
+          "name": "GdsDropdown",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
+                "text": "GdsDropdownProps & { ref?: React.Ref<GdsDropdownClass> }"
               }
             }
           ]
+        },
+        {
+          "kind": "variable",
+          "name": "ref"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDivider",
+          "name": "GdsDropdown",
           "declaration": {
-            "name": "GdsDivider",
-            "module": "src/generated/react/divider/index.ts"
+            "name": "GdsDropdown",
+            "module": "src/generated/react/dropdown/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/dropdown/index.ts",
+      "path": "src/generated/react/div/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDropdown",
+          "name": "GdsDiv",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "GdsDropdownProps & { ref?: React.Ref<GdsDropdownClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
               }
             }
           ]
-        },
-        {
-          "kind": "variable",
-          "name": "ref"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDropdown",
+          "name": "GdsDiv",
           "declaration": {
-            "name": "GdsDropdown",
-            "module": "src/generated/react/dropdown/index.ts"
+            "name": "GdsDiv",
+            "module": "src/generated/react/div/index.ts"
           }
         }
       ]
@@ -239782,57 +239915,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/grouped-list/index.ts",
+      "path": "src/generated/react/grid/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsGroupedList",
+          "name": "GdsGrid",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsGroupedListClass>>\n  > & { ref?: React.Ref<GdsGroupedListClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsGridClass>>\n  > & { ref?: React.Ref<GdsGridClass> }"
               }
             }
-          ]
+          ],
+          "description": "The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsGroupedList",
+          "name": "GdsGrid",
           "declaration": {
-            "name": "GdsGroupedList",
-            "module": "src/generated/react/grouped-list/index.ts"
+            "name": "GdsGrid",
+            "module": "src/generated/react/grid/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/grid/index.ts",
+      "path": "src/generated/react/grouped-list/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsGrid",
+          "name": "GdsGroupedList",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsGridClass>>\n  > & { ref?: React.Ref<GdsGridClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsGroupedListClass>>\n  > & { ref?: React.Ref<GdsGroupedListClass> }"
               }
             }
-          ],
-          "description": "The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute."
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsGrid",
+          "name": "GdsGroupedList",
           "declaration": {
-            "name": "GdsGrid",
-            "module": "src/generated/react/grid/index.ts"
+            "name": "GdsGroupedList",
+            "module": "src/generated/react/grouped-list/index.ts"
           }
         }
       ]
@@ -240123,6 +240256,34 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/generated/react/option/index.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "GdsOption",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "GdsOptionProps & { ref?: React.Ref<GdsOptionClass> }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsOption",
+          "declaration": {
+            "name": "GdsOption",
+            "module": "src/generated/react/option/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/generated/react/pagination/index.ts",
@@ -241233,34 +241394,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-rotate-clockwise/index.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "IconArrowRotateClockwise",
-          "parameters": [
-            {
-              "name": "props",
-              "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateClockwiseClass>>\n  > & { ref?: React.Ref<IconArrowRotateClockwiseClass> }"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "IconArrowRotateClockwise",
-          "declaration": {
-            "name": "IconArrowRotateClockwise",
-            "module": "src/generated/react/icons/icon-arrow-rotate-clockwise/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/generated/react/icons/icon-arrow-rotate-counter-clockwise/index.ts",
@@ -241319,16 +241452,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-rotate-clockwise/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowRotateRightLeft",
+          "name": "IconArrowRotateClockwise",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateRightLeftClass>>\n  > & { ref?: React.Ref<IconArrowRotateRightLeftClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateClockwiseClass>>\n  > & { ref?: React.Ref<IconArrowRotateClockwiseClass> }"
               }
             }
           ]
@@ -241337,26 +241470,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowRotateRightLeft",
+          "name": "IconArrowRotateClockwise",
           "declaration": {
-            "name": "IconArrowRotateRightLeft",
-            "module": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts"
+            "name": "IconArrowRotateClockwise",
+            "module": "src/generated/react/icons/icon-arrow-rotate-clockwise/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-share-left/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowShareLeft",
+          "name": "IconArrowRotateRightLeft",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowShareLeftClass>>\n  > & { ref?: React.Ref<IconArrowShareLeftClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateRightLeftClass>>\n  > & { ref?: React.Ref<IconArrowRotateRightLeftClass> }"
               }
             }
           ]
@@ -241365,10 +241498,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowShareLeft",
+          "name": "IconArrowRotateRightLeft",
           "declaration": {
-            "name": "IconArrowShareLeft",
-            "module": "src/generated/react/icons/icon-arrow-share-left/index.ts"
+            "name": "IconArrowRotateRightLeft",
+            "module": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts"
           }
         }
       ]
@@ -241403,16 +241536,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-split/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-share-left/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowSplit",
+          "name": "IconArrowShareLeft",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowSplitClass>>\n  > & { ref?: React.Ref<IconArrowSplitClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowShareLeftClass>>\n  > & { ref?: React.Ref<IconArrowShareLeftClass> }"
               }
             }
           ]
@@ -241421,26 +241554,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowSplit",
+          "name": "IconArrowShareLeft",
           "declaration": {
-            "name": "IconArrowSplit",
-            "module": "src/generated/react/icons/icon-arrow-split/index.ts"
+            "name": "IconArrowShareLeft",
+            "module": "src/generated/react/icons/icon-arrow-share-left/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-wall-down/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-split/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowWallDown",
+          "name": "IconArrowSplit",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowWallDownClass>>\n  > & { ref?: React.Ref<IconArrowWallDownClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowSplitClass>>\n  > & { ref?: React.Ref<IconArrowSplitClass> }"
               }
             }
           ]
@@ -241449,10 +241582,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowWallDown",
+          "name": "IconArrowSplit",
           "declaration": {
-            "name": "IconArrowWallDown",
-            "module": "src/generated/react/icons/icon-arrow-wall-down/index.ts"
+            "name": "IconArrowSplit",
+            "module": "src/generated/react/icons/icon-arrow-split/index.ts"
           }
         }
       ]
@@ -241485,6 +241618,34 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/generated/react/icons/icon-arrow-wall-down/index.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "IconArrowWallDown",
+          "parameters": [
+            {
+              "name": "props",
+              "type": {
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowWallDownClass>>\n  > & { ref?: React.Ref<IconArrowWallDownClass> }"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconArrowWallDown",
+          "declaration": {
+            "name": "IconArrowWallDown",
+            "module": "src/generated/react/icons/icon-arrow-wall-down/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/generated/react/icons/icon-arrow-wall-left/index.ts",
@@ -241543,16 +241704,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrows-repeat-right/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-wall-up/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowsRepeatRight",
+          "name": "IconArrowWallUp",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowsRepeatRightClass>>\n  > & { ref?: React.Ref<IconArrowsRepeatRightClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowWallUpClass>>\n  > & { ref?: React.Ref<IconArrowWallUpClass> }"
               }
             }
           ]
@@ -241561,26 +241722,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowsRepeatRight",
+          "name": "IconArrowWallUp",
           "declaration": {
-            "name": "IconArrowsRepeatRight",
-            "module": "src/generated/react/icons/icon-arrows-repeat-right/index.ts"
+            "name": "IconArrowWallUp",
+            "module": "src/generated/react/icons/icon-arrow-wall-up/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-asterisk/index.ts",
+      "path": "src/generated/react/icons/icon-arrows-repeat-right/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconAsterisk",
+          "name": "IconArrowsRepeatRight",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAsteriskClass>>\n  > & { ref?: React.Ref<IconAsteriskClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowsRepeatRightClass>>\n  > & { ref?: React.Ref<IconArrowsRepeatRightClass> }"
               }
             }
           ]
@@ -241589,26 +241750,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconAsterisk",
+          "name": "IconArrowsRepeatRight",
           "declaration": {
-            "name": "IconAsterisk",
-            "module": "src/generated/react/icons/icon-asterisk/index.ts"
+            "name": "IconArrowsRepeatRight",
+            "module": "src/generated/react/icons/icon-arrows-repeat-right/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-wall-up/index.ts",
+      "path": "src/generated/react/icons/icon-asterisk/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowWallUp",
+          "name": "IconAsterisk",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowWallUpClass>>\n  > & { ref?: React.Ref<IconArrowWallUpClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAsteriskClass>>\n  > & { ref?: React.Ref<IconAsteriskClass> }"
               }
             }
           ]
@@ -241617,10 +241778,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowWallUp",
+          "name": "IconAsterisk",
           "declaration": {
-            "name": "IconArrowWallUp",
-            "module": "src/generated/react/icons/icon-arrow-wall-up/index.ts"
+            "name": "IconAsterisk",
+            "module": "src/generated/react/icons/icon-asterisk/index.ts"
           }
         }
       ]
@@ -244007,16 +244168,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-code-brackets/index.ts",
+      "path": "src/generated/react/icons/icon-code/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCodeBrackets",
+          "name": "IconCode",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeBracketsClass>>\n  > & { ref?: React.Ref<IconCodeBracketsClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeClass>>\n  > & { ref?: React.Ref<IconCodeClass> }"
               }
             }
           ]
@@ -244025,26 +244186,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCodeBrackets",
+          "name": "IconCode",
           "declaration": {
-            "name": "IconCodeBrackets",
-            "module": "src/generated/react/icons/icon-code-brackets/index.ts"
+            "name": "IconCode",
+            "module": "src/generated/react/icons/icon-code/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-code/index.ts",
+      "path": "src/generated/react/icons/icon-code-brackets/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCode",
+          "name": "IconCodeBrackets",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeClass>>\n  > & { ref?: React.Ref<IconCodeClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeBracketsClass>>\n  > & { ref?: React.Ref<IconCodeBracketsClass> }"
               }
             }
           ]
@@ -244053,10 +244214,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCode",
+          "name": "IconCodeBrackets",
           "declaration": {
-            "name": "IconCode",
-            "module": "src/generated/react/icons/icon-code/index.ts"
+            "name": "IconCodeBrackets",
+            "module": "src/generated/react/icons/icon-code-brackets/index.ts"
           }
         }
       ]
@@ -244091,16 +244252,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-copy/index.ts",
+      "path": "src/generated/react/icons/icon-cookies/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCopy",
+          "name": "IconCookies",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCopyClass>>\n  > & { ref?: React.Ref<IconCopyClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCookiesClass>>\n  > & { ref?: React.Ref<IconCookiesClass> }"
               }
             }
           ]
@@ -244109,26 +244270,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCopy",
+          "name": "IconCookies",
           "declaration": {
-            "name": "IconCopy",
-            "module": "src/generated/react/icons/icon-copy/index.ts"
+            "name": "IconCookies",
+            "module": "src/generated/react/icons/icon-cookies/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-cookies/index.ts",
+      "path": "src/generated/react/icons/icon-copy/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCookies",
+          "name": "IconCopy",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCookiesClass>>\n  > & { ref?: React.Ref<IconCookiesClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCopyClass>>\n  > & { ref?: React.Ref<IconCopyClass> }"
               }
             }
           ]
@@ -244137,10 +244298,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCookies",
+          "name": "IconCopy",
           "declaration": {
-            "name": "IconCookies",
-            "module": "src/generated/react/icons/icon-cookies/index.ts"
+            "name": "IconCopy",
+            "module": "src/generated/react/icons/icon-copy/index.ts"
           }
         }
       ]
@@ -245211,16 +245372,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-graduate-cap/index.ts",
+      "path": "src/generated/react/icons/icon-globus/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconGraduateCap",
+          "name": "IconGlobus",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconGraduateCapClass>>\n  > & { ref?: React.Ref<IconGraduateCapClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconGlobusClass>>\n  > & { ref?: React.Ref<IconGlobusClass> }"
               }
             }
           ]
@@ -245229,26 +245390,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconGraduateCap",
+          "name": "IconGlobus",
           "declaration": {
-            "name": "IconGraduateCap",
-            "module": "src/generated/react/icons/icon-graduate-cap/index.ts"
+            "name": "IconGlobus",
+            "module": "src/generated/react/icons/icon-globus/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-globus/index.ts",
+      "path": "src/generated/react/icons/icon-graduate-cap/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconGlobus",
+          "name": "IconGraduateCap",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconGlobusClass>>\n  > & { ref?: React.Ref<IconGlobusClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconGraduateCapClass>>\n  > & { ref?: React.Ref<IconGraduateCapClass> }"
               }
             }
           ]
@@ -245257,10 +245418,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconGlobus",
+          "name": "IconGraduateCap",
           "declaration": {
-            "name": "IconGlobus",
-            "module": "src/generated/react/icons/icon-globus/index.ts"
+            "name": "IconGraduateCap",
+            "module": "src/generated/react/icons/icon-graduate-cap/index.ts"
           }
         }
       ]
@@ -247311,16 +247472,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-postcard/index.ts",
+      "path": "src/generated/react/icons/icon-poop/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPostcard",
+          "name": "IconPoop",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPostcardClass>>\n  > & { ref?: React.Ref<IconPostcardClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPoopClass>>\n  > & { ref?: React.Ref<IconPoopClass> }"
               }
             }
           ]
@@ -247329,26 +247490,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPostcard",
+          "name": "IconPoop",
           "declaration": {
-            "name": "IconPostcard",
-            "module": "src/generated/react/icons/icon-postcard/index.ts"
+            "name": "IconPoop",
+            "module": "src/generated/react/icons/icon-poop/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-poop/index.ts",
+      "path": "src/generated/react/icons/icon-postcard/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPoop",
+          "name": "IconPostcard",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPoopClass>>\n  > & { ref?: React.Ref<IconPoopClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPostcardClass>>\n  > & { ref?: React.Ref<IconPostcardClass> }"
               }
             }
           ]
@@ -247357,26 +247518,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPoop",
+          "name": "IconPostcard",
           "declaration": {
-            "name": "IconPoop",
-            "module": "src/generated/react/icons/icon-poop/index.ts"
+            "name": "IconPostcard",
+            "module": "src/generated/react/icons/icon-postcard/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-power/index.ts",
+      "path": "src/generated/react/icons/icon-pound/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPower",
+          "name": "IconPound",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPowerClass>>\n  > & { ref?: React.Ref<IconPowerClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPoundClass>>\n  > & { ref?: React.Ref<IconPoundClass> }"
               }
             }
           ]
@@ -247385,26 +247546,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPower",
+          "name": "IconPound",
           "declaration": {
-            "name": "IconPower",
-            "module": "src/generated/react/icons/icon-power/index.ts"
+            "name": "IconPound",
+            "module": "src/generated/react/icons/icon-pound/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pound/index.ts",
+      "path": "src/generated/react/icons/icon-power/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPound",
+          "name": "IconPower",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPoundClass>>\n  > & { ref?: React.Ref<IconPoundClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPowerClass>>\n  > & { ref?: React.Ref<IconPowerClass> }"
               }
             }
           ]
@@ -247413,10 +247574,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPound",
+          "name": "IconPower",
           "declaration": {
-            "name": "IconPound",
-            "module": "src/generated/react/icons/icon-pound/index.ts"
+            "name": "IconPower",
+            "module": "src/generated/react/icons/icon-power/index.ts"
           }
         }
       ]
@@ -250174,34 +250335,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/generated/react/option/index.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "GdsOption",
-          "parameters": [
-            {
-              "name": "props",
-              "type": {
-                "text": "GdsOptionProps & { ref?: React.Ref<GdsOptionClass> }"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsOption",
-          "declaration": {
-            "name": "GdsOption",
-            "module": "src/generated/react/option/index.ts"
-          }
-        }
-      ]
     }
   ]
 }