@sebgroup/green-core 2.19.0-rc.20251217092059691 → 2.19.0-rc.20251217101215078

package/custom-elements.json

@@ -24146,7 +24146,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/link/index.ts",
+      "path": "src/components/mask/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -24154,99 +24154,113 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/link/link"
+            "module": "src/components/mask/mask"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/link/link.component.ts",
+      "path": "src/components/mask/mask.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsLink",
-          "slots": [
+          "name": "GdsMask",
+          "members": [
             {
-              "description": "Content to be displayed as the link string.",
-              "name": "main"
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `background` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div background=\"neutral-01/0.2\"></gds-div>\n```",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
-              "description": "An optional slot that allows a `gds-icon` element to be placed before the label.",
-              "name": "lead"
+              "kind": "field",
+              "name": "'mask-image'",
+              "type": {
+                "text": "string | undefined"
+              }
             },
             {
-              "description": "An optional slot that allows a `gds-icon` element to be placed after the label.",
-              "name": "trail"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "'mask-size'",
+              "type": {
+                "text": "string"
+              },
+              "default": "'cover'"
+            },
             {
               "kind": "field",
-              "name": "shadowRootOptions",
+              "name": "'mask-repeat'",
               "type": {
-                "text": "ShadowRootInit"
+                "text": "string"
               },
-              "static": true,
-              "default": "{ mode: 'open', delegatesFocus: true, }"
+              "default": "'no-repeat'"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "'mask-position'",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Provides an accessible name for the link that will be read by screen readers.\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility",
-              "attribute": "label"
+              "default": "'center'"
             },
             {
               "kind": "field",
-              "name": "'text-decoration'",
+              "name": "'backdrop-filter'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Controls the text-decoration property of the link.\nSupports all valid CSS text-decoration values.\n\nSetting `text-decoration` on hover you can do it like this:\n```html\n<gds-link text-decoration=\"hover:underline\">Underline on Hover</gds-link>\n```"
+              "description": "Controls the backdrop-filter property of the container.\nWhen you want to apply a backdrop blur filter to the container you can use this property.\n\n```html\n<gds-mask backdrop-filter=\"20px\"></gds-mask>\n```\n\nThe above example will apply a backdrop blur filter of `20px`.\n\n The filter also support breakpoint syntax like this:\n\n```html\n<gds-mask backdrop-filter=\"s{20px} m{40px} l{60px}\"></gds-mask>\n```\n\nThe above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices."
             },
             {
               "kind": "field",
-              "name": "margin",
+              "name": "position",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin` property.\nOnly accepts space tokens.",
+              "description": "Style Expression Property that controls the `position` property.\nSupports all valid CSS `position` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withMarginProps",
+                "name": "withPositioningProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+              },
+              "default": "'relative'"
             },
             {
               "kind": "field",
-              "name": "'margin-inline'",
+              "name": "display",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin-inline` property.\nOnly accepts space tokens.",
+              "description": "Controls the display property.\nSupports all valid CSS display values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withMarginProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              },
+              "default": "'flex'"
             },
             {
               "kind": "field",
-              "name": "'margin-block'",
+              "name": "inset",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
+              "description": "Style Expression Property that controls the `inset` property.\nSupports all valid CSS `inset` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withMarginProps",
+                "name": "withPositioningProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+              },
+              "default": "'0'"
             },
             {
               "kind": "field",
@@ -24328,648 +24342,453 @@
             },
             {
               "kind": "field",
-              "name": "'align-self'",
+              "name": "height",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'justify-self'",
+              "name": "'min-height'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'place-self'",
+              "name": "'max-height'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'grid-column'",
+              "name": "'block-size'",
               "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",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'grid-row'",
+              "name": "'min-block-size'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'grid-area'",
+              "name": "'max-block-size'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
+              "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": "withLayoutChildProps",
+                "name": "withSizeYProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "flex",
+              "name": "margin",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "description": "Style Expression Property that controls the `margin` property.\nOnly accepts space tokens.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
+                "name": "withMarginProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "order",
+              "name": "'margin-inline'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "description": "Style Expression Property that controls the `margin-inline` property.\nOnly accepts space tokens.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
+                "name": "withMarginProps",
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "'margin-block'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "URL that the link points to\nCan be absolute, relative, or fragment identifier",
-              "attribute": "href",
+              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "padding",
               "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specifies where to open the linked document",
-              "attribute": "target",
+              "description": "Style Expression Property that controls the `padding` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withPaddingProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "'padding-inline'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specifies the relationship between the current document and the linked document\nAutomatically adds security-related values when target=\"_blank\"",
-              "attribute": "rel",
+              "description": "Style Expression Property that controls the `padding-inline` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withPaddingProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "#rel",
-              "privacy": "private",
+              "name": "'padding-block'",
               "type": {
                 "text": "string | undefined"
               },
+              "description": "Style Expression Property that controls the `padding-block` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withPaddingProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "'align-self'",
               "type": {
-                "text": "string | boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "When present, indicates that the linked resource should be downloaded",
-              "attribute": "download",
+              "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": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "ping",
+              "name": "'justify-self'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specifies a space-separated list of URLs to which, when the link is followed,\nPOST requests with the body ping will be sent by the browser.",
-              "attribute": "ping",
+              "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": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "define",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "'place-self'",
+              "type": {
+                "text": "string | undefined"
               },
-              "description": "Defines the custom element in the custom element registry.\nThis method needs to be called once before the element can be used.",
+              "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": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "isDefined",
+              "name": "'grid-column'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "static": true,
-              "default": "false",
-              "description": "Whether the element is defined in the custom element registry.",
+              "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": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "styleExpressionBaseSelector",
+              "name": "'grid-row'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "static": true,
-              "default": "':host'",
-              "description": "Style expression properties for this element will use this selector by default.",
+              "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": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "semanticVersion",
+              "name": "'grid-area'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "readonly": true,
-              "default": "'__GDS_SEM_VER__'",
-              "description": "The semantic version of this element. Can be used for troubleshooting to verify the version being used.",
+              "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": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "gdsElementName",
+              "name": "flex",
               "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",
+              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "dispatchStandardEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "kind": "field",
+              "name": "order",
+              "type": {
+                "text": "string | undefined"
               },
-              "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.",
+              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "dispatchCustomEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "kind": "field",
+              "name": "transform",
+              "type": {
+                "text": "string | undefined"
               },
-              "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.",
+              "description": "Style Expression Property that controls the `transform` property.\nSupports all valid CSS `transform` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "withPositioningProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the link is clicked.",
-              "name": "click"
             },
             {
-              "name": "gds-element-disconnected",
+              "kind": "field",
+              "name": "level",
               "type": {
-                "text": "CustomEvent"
+                "text": "GdsColorLevel"
               },
-              "description": "When the element is disconnected from the DOM",
+              "default": "'2'",
+              "description": "The level of the container is used to resolve the color tokens from the corresponding level.\nCheck the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.\n\nDefault for `gds-div` is level 2.",
+              "attribute": "level",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "color",
               "type": {
-                "text": "Event"
+                "text": "string | undefined"
               },
+              "description": "Style Expression Property that controls the `color` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div color=\"neutral-01/0.2\"></gds-div>\n```",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
+              "kind": "field",
+              "name": "border",
               "type": {
-                "text": "Event"
+                "text": "string | undefined"
               },
+              "description": "Style Expression Property that controls the `border` property.\nAccepts a string of the same format as the CSS border property.\n\n```html\n<gds-div border=\"4xs solid subtle-01/0.2\"></gds-div>\n```\n\nWhere the size value accepts space tokens and the color value accepts color tokens and an optional transparency value.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "'border-color'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Provides an accessible name for the link that will be read by screen readers.\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility",
-              "fieldName": "label"
+              "description": "Style Expression Property that controls the `border-color` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div border-color=\"subtle-01/0.2\"></gds-div>\n```",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
-              "name": "href",
+              "kind": "field",
+              "name": "'border-width'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "URL that the link points to\nCan be absolute, relative, or fragment identifier",
-              "fieldName": "href",
+              "description": "Style Expression Property that controls the `border-width` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "target",
+              "kind": "field",
+              "name": "'border-style'",
               "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specifies where to open the linked document",
-              "fieldName": "target",
+              "description": "Style Expression Property that controls the `border-style` property.\nSupports all valid CSS `border-style` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "rel",
+              "kind": "field",
+              "name": "'border-radius'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specifies the relationship between the current document and the linked document\nAutomatically adds security-related values when target=\"_blank\"",
-              "fieldName": "rel",
+              "description": "Style Expression Property that controls the `border-radius` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "download",
+              "kind": "field",
+              "name": "'box-shadow'",
               "type": {
-                "text": "string | boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "When present, indicates that the linked resource should be downloaded",
-              "fieldName": "download",
+              "description": "Style Expression Property for the `box-shadow` property.\n\nAccepts shadow tokens from the design system.\n\n`xs`, `s`, `m`, `l`, `xl`",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "ping",
+              "kind": "field",
+              "name": "opacity",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Specifies a space-separated list of URLs to which, when the link is followed,\nPOST requests with the body ping will be sent by the browser.",
-              "fieldName": "ping",
+              "description": "Style Expression Property that controls the `opacity` property.\nSupports all valid CSS `opacity` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withLinkProps",
-                "module": "src/utils/mixins/props-link.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "name": "gds-element",
+              "kind": "field",
+              "name": "overflow",
               "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",
+              "description": "Style Expression Property that controls the `overflow` property.\nSupports all valid CSS `overflow` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "withMarginProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
+              "kind": "field",
+              "name": "'box-sizing'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `box-sizing` property.\nSupports all valid CSS `box-sizing` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
-              "name": "withSizeXProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
+              "kind": "field",
+              "name": "'z-index'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `z-index` property.\nSupports all valid CSS `z-index` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
-              "name": "withLayoutChildProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
+              "kind": "field",
+              "name": "'font'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `font` property.\nSupports all font tokens from the design system.",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
-            {
-              "name": "withLinkProps",
-              "module": "/src/utils/mixins/props-link"
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-link",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsLink",
-          "declaration": {
-            "name": "GdsLink",
-            "module": "src/components/link/link.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/link/link.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Link', component: 'gds-link', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-link'), }, }",
-          "description": "A link navigates users to other pages or sections of content."
-        },
-        {
-          "kind": "variable",
-          "name": "Basic",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Lead",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Icon: Lead', render: () => html` <gds-link href=\"#\"> <gds-icon-chain-link slot=\"lead\"></gds-icon-chain-link> Link text </gds-link>`, }",
-          "description": "A link component with a leading icon."
-        },
-        {
-          "kind": "variable",
-          "name": "Trail",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Icon: Trail', render: () => html` <gds-link href=\"#\"> Link text <gds-icon-arrow-right slot=\"trail\"></gds-icon-arrow-right> </gds-link>`, }",
-          "description": "A link component with a trailing icon."
-        },
-        {
-          "kind": "variable",
-          "name": "TextDecoration",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Text Decoration', render: () => html` <gds-flex gap=\"4xl\" width=\"600px\" flex-direction=\"column\"> <gds-flex gap=\"xl\"> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with Underline</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"underline\"> Link text </gds-link> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link without Underline</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"none\"> Link text </gds-link> </gds-flex> </gds-flex> <gds-flex gap=\"xl\"> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with Underline on Hover and Icon</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\"> Link text <gds-icon-arrow-right slot=\"trail\"></gds-icon-arrow-right> </gds-link> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with No Underline on Hover</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"underline; hover:none\"> Link text </gds-link> </gds-flex> </gds-flex> </gds-flex> `, }",
-          "description": "A link component has a `text-decoration` property that accepts all valid CSS `text-decoration` values.\n\nIt also supports setting `text-decoration` or disable on hover by using the `hover:` prefix.\n\n```html\n<gds-link text-decoration=\"hover:none\">\n   Underline on Hover\n</gds-link>\n```"
-        },
-        {
-          "kind": "variable",
-          "name": "Label",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Label', render: () => html` <gds-link href=\"#\" label=\"Aria label is used\"> Link with aria-label </gds-link> `, }",
-          "description": "On the `gds-link` component, the `label` attribute is used to provide an accessible name for the link.\n\nIt will be forwarded to the `aria-label` attribute of the underlying anchor element.\n\n\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility\n\n```html\n<!-- Icon-only link -->\n<gds-link href=\"/settings\" label=\"Open settings\">\n <gds-icon-settings></gds-icon-settings>\n</gds-link>\n\n<!-- Different screen reader text -->\n<gds-link href=\"/article\" label=\"Read full article about climate change\">\n Read more\n</gds-link>\n```"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/link/link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Basic",
-          "declaration": {
-            "name": "Basic",
-            "module": "src/components/link/link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Lead",
-          "declaration": {
-            "name": "Lead",
-            "module": "src/components/link/link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Trail",
-          "declaration": {
-            "name": "Trail",
-            "module": "src/components/link/link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextDecoration",
-          "declaration": {
-            "name": "TextDecoration",
-            "module": "src/components/link/link.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Label",
-          "declaration": {
-            "name": "Label",
-            "module": "src/components/link/link.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/link/link.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "style",
-          "default": "css` @layer core, link; @layer core { :host { display: inline-block; white-space: normal; } } @layer link { a { display: flex; align-items: center; gap: 1ch; text-decoration: none; text-underline-offset: 0.2lh; color: currentColor; cursor: pointer; border-radius: var(--gds-sys-radius-3xs); outline-offset: var(--gds-sys-space-3xs); outline-color: currentColor; font-weight: var(--gds-sys-text-weight-book); will-change: text-underline-offset; transition-property: text-underline-offset; transition-duration: var(--gds-sys-motion-duration-fastest); transition-timing-function: var(--gds-sys-motion-easing-ease-in-out); @media (pointer: fine) { &:hover { text-decoration: underline; text-underline-offset: 0.16lh; &:active { text-underline-offset: 0.08lh; } } } } } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "style",
-            "module": "src/components/link/link.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/link/link.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsLink",
-          "declaration": {
-            "name": "GdsLink",
-            "module": "src/components/link/link.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mask/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/mask/mask"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/mask/mask.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "GdsMask",
-          "members": [
             {
               "kind": "field",
-              "name": "background",
+              "name": "'font-weight'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `background` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div background=\"neutral-01/0.2\"></gds-div>\n```",
+              "description": "Style Expression Property that controls the `font-weight` property.\nSupports all typography weight tokens from the design system.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
                 "name": "GdsDiv",
@@ -24978,819 +24797,806 @@
             },
             {
               "kind": "field",
-              "name": "'mask-image'",
+              "name": "'text-align'",
               "type": {
                 "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `text-align` property.\nSupports all valid CSS `text-align` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'mask-size'",
+              "name": "'text-wrap'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'cover'"
+              "description": "Style Expression Property that controls the `text-wrap` property.\nSupports all valid CSS `text-wrap` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "'mask-repeat'",
+              "name": "'overflow-wrap'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'no-repeat'"
+              "description": "Style Expression Property that controls the `overflow-wrap` property.\nSupports all valid CSS `overflow-wrap` values.",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "'mask-position'",
+              "name": "'white-space'",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'center'"
+              "description": "Style Expression Property that controls the `white-space` property.\nSupports all valid CSS `white-space` values.",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "'backdrop-filter'",
+              "name": "gap",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Controls the backdrop-filter property of the container.\nWhen you want to apply a backdrop blur filter to the container you can use this property.\n\n```html\n<gds-mask backdrop-filter=\"20px\"></gds-mask>\n```\n\nThe above example will apply a backdrop blur filter of `20px`.\n\n The filter also support breakpoint syntax like this:\n\n```html\n<gds-mask backdrop-filter=\"s{20px} m{40px} l{60px}\"></gds-mask>\n```\n\nThe above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices."
+              "description": "Style Expression Property that controls the `gap` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "'align-items'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `position` property.\nSupports all valid CSS `position` values.",
+              "description": "Style Expression Property that controls the `align-items` property.\nSupports all valid CSS `align-items` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withPositioningProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              },
-              "default": "'relative'"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "display",
+              "name": "'align-content'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Controls the display property.\nSupports all valid CSS display values.",
+              "description": "Style Expression Property that controls the `align-content` property.\nSupports all valid CSS `align-content` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
                 "name": "GdsDiv",
                 "module": "src/components/div/div.component.ts"
-              },
-              "default": "'flex'"
+              }
             },
             {
               "kind": "field",
-              "name": "inset",
+              "name": "'justify-content'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `inset` property.\nSupports all valid CSS `inset` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withPositioningProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              },
-              "default": "'0'"
-            },
-            {
-              "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": "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.",
+              "description": "Style Expression Property that controls the `justify-content` property.\nSupports all valid CSS `justify-content` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withSizeYProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'max-height'",
+              "name": "'justify-items'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `max-height` property.\nSupports space tokens and all valid CSS `max-height` values.",
+              "description": "Style Expression Property that controls the `justify-items` property.\nSupports all valid CSS `justify-items` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withSizeYProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'block-size'",
+              "name": "'flex-direction'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `block-size` property.\nSupports space tokens and all valid CSS `block-size` values.",
+              "description": "Style Expression Property that controls the `flex-direction` property.\nSupports all valid CSS `flex-direction` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withSizeYProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'min-block-size'",
+              "name": "'flex-wrap'",
               "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.",
+              "description": "Style Expression Property that controls the `flex-wrap` property.\nSupports all valid CSS `flex-wrap` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withSizeYProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'max-block-size'",
+              "name": "'place-items'",
               "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.",
+              "description": "Style Expression Property that controls the `place-items` property.\nSupports all valid CSS `place-items` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withSizeYProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "margin",
+              "name": "'place-content'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin` property.\nOnly accepts space tokens.",
+              "description": "Style Expression Property that controls the `place-content` property.\nSupports all valid CSS `place-content` values.",
               "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withMarginProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'margin-inline'",
+              "name": "'aspect-ratio'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin-inline` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
+              "description": "Style Expression Property that controls the `aspect-ratio` property.\nSupports all valid CSS `aspect-ratio` values.",
               "inheritedFrom": {
-                "name": "withMarginProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'margin-block'",
+              "name": "cursor",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
+              "description": "Style Expression Property that controls the `cursor` property.\nSupports all valid CSS `cursor` values.",
               "inheritedFrom": {
-                "name": "withMarginProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "'pointer-events'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `padding` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
+              "description": "Style Expression Property that controls the `pointer-events` property.\nSupports all valid CSS `pointer-events` values.",
               "inheritedFrom": {
-                "name": "withPaddingProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "'padding-inline'",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Style Expression Property that controls the `padding-inline` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
+              "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": "withPaddingProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'padding-block'",
+              "name": "isDefined",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `padding-block` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
+              "static": true,
+              "default": "false",
+              "description": "Whether the element is defined in the custom element registry.",
               "inheritedFrom": {
-                "name": "withPaddingProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'align-self'",
+              "name": "styleExpressionBaseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
-              "category": "Declarative layout / Style expression properties",
+              "static": true,
+              "default": "':host'",
+              "description": "Style expression properties for this element will use this selector by default.",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'justify-self'",
+              "name": "semanticVersion",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
-              "category": "Declarative layout / Style expression properties",
+              "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": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'place-self'",
+              "name": "gdsElementName",
               "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",
+              "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": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "'grid-column'",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "dispatchStandardEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "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",
+              "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": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "'grid-row'",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
-              "category": "Declarative layout / Style expression properties",
+              "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": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
-            },
+            }
+          ],
+          "superclass": {
+            "name": "GdsFlex",
+            "module": "/src/components/flex/flex.component"
+          },
+          "tagName": "gds-mask",
+          "customElement": true,
+          "attributes": [
             {
-              "kind": "field",
-              "name": "'grid-area'",
+              "name": "level",
               "type": {
-                "text": "string | undefined"
+                "text": "GdsColorLevel"
               },
-              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
-              "category": "Declarative layout / Style expression properties",
+              "default": "'2'",
+              "description": "The level of the container is used to resolve the color tokens from the corresponding level.\nCheck the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.\n\nDefault for `gds-div` is level 2.",
+              "fieldName": "level",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsDiv",
+                "module": "src/components/div/div.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "flex",
+              "name": "gds-element",
               "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",
+              "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": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "order",
+              "name": "gds-element-disconnected",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
-              "category": "Declarative layout / Style expression properties",
+              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "transform",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "Event"
               },
-              "description": "Style Expression Property that controls the `transform` property.\nSupports all valid CSS `transform` values.",
-              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "withPositioningProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "level",
               "type": {
-                "text": "GdsColorLevel"
+                "text": "Event"
               },
-              "default": "'2'",
-              "description": "The level of the container is used to resolve the color tokens from the corresponding level.\nCheck the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.\n\nDefault for `gds-div` is level 2.",
-              "attribute": "level",
               "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "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-xl}\" 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": [
             {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `color` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div color=\"neutral-01/0.2\"></gds-div>\n```",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
-            },
+              "description": "The main slot of the button, between the lead and trail slots.",
+              "name": "main-slot"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `border` property.\nAccepts a string of the same format as the CSS border property.\n\n```html\n<gds-div border=\"4xs solid subtle-01/0.2\"></gds-div>\n```\n\nWhere the size value accepts space tokens and the color value accepts color tokens and an optional transparency value.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "description": "Content to be displayed as the button label.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "'border-color'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `border-color` property.\nOnly accepts color tokens and an optional transparency value, in the format tokenName/transparency.\n\n```html\n<gds-div border-color=\"subtle-01/0.2\"></gds-div>\n```",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "description": "An optional slot that allows a `gds-icon` element to be placed before the label.",
+              "name": "lead"
             },
             {
-              "kind": "field",
-              "name": "'border-width'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `border-width` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
-            },
+              "description": "An optional slot that allows a `gds-icon` element to be placed after the label.",
+              "name": "trail"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "'border-style'",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "string | undefined"
+                "text": "ShadowRootInit"
               },
-              "description": "Style Expression Property that controls the `border-style` property.\nSupports all valid CSS `border-style` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "static": true,
+              "default": "{ mode: 'open', delegatesFocus: true, }"
             },
             {
               "kind": "field",
-              "name": "'border-radius'",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `border-radius` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "default": "false",
+              "description": "Whether the menu-button is disabled.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "'box-shadow'",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Style Expression Property for the `box-shadow` property.\n\nAccepts shadow tokens from the design system.\n\n`xs`, `s`, `m`, `l`, `xl`",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "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": "opacity",
+              "name": "href",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Style Expression Property that controls the `opacity` property.\nSupports all valid CSS `opacity` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "default": "''",
+              "description": "When set, the underlying button will be rendered as an anchor element.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "overflow",
+              "name": "target",
               "type": {
-                "text": "string | undefined"
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
               },
-              "description": "Style Expression Property that controls the `overflow` property.\nSupports all valid CSS `overflow` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "description": "Where to display the linked URL. Only used when href is present.",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "'box-sizing'",
+              "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `box-sizing` property.\nSupports all valid CSS `box-sizing` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "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": "'z-index'",
+              "name": "download",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `z-index` property.\nSupports all valid CSS `z-index` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "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": "'font'",
+              "name": "compact",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `font` property.\nSupports all font tokens from the design system.",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "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": "'font-weight'",
+              "name": "selected",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `font-weight` property.\nSupports all typography weight tokens from the design system.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "default": "false",
+              "description": "Whether the menu button is selected",
+              "attribute": "selected",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "'text-align'",
+              "name": "width",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `text-align` property.\nSupports all valid CSS `text-align` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'text-wrap'",
+              "name": "'min-width'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `text-wrap` property.\nSupports all valid CSS `text-wrap` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'overflow-wrap'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `overflow-wrap` property.\nSupports all valid CSS `overflow-wrap` values.",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'white-space'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `white-space` property.\nSupports all valid CSS `white-space` values.",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "'max-width'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `gap` property.\nOnly accepts space tokens.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'align-items'",
+              "name": "'inline-size'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `align-items` property.\nSupports all valid CSS `align-items` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'align-content'",
+              "name": "'min-inline-size'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `align-content` property.\nSupports all valid CSS `align-content` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'justify-content'",
+              "name": "'max-inline-size'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `justify-content` property.\nSupports all valid CSS `justify-content` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withSizeXProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'justify-items'",
+              "name": "'align-self'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `justify-items` property.\nSupports all valid CSS `justify-items` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'flex-direction'",
+              "name": "'justify-self'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `flex-direction` property.\nSupports all valid CSS `flex-direction` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'flex-wrap'",
+              "name": "'place-self'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `flex-wrap` property.\nSupports all valid CSS `flex-wrap` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'place-items'",
+              "name": "'grid-column'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `place-items` property.\nSupports all valid CSS `place-items` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'place-content'",
+              "name": "'grid-row'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `place-content` property.\nSupports all valid CSS `place-content` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'aspect-ratio'",
+              "name": "'grid-area'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `aspect-ratio` property.\nSupports all valid CSS `aspect-ratio` values.",
+              "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": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "cursor",
+              "name": "flex",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `cursor` property.\nSupports all valid CSS `cursor` values.",
+              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
               "kind": "field",
-              "name": "'pointer-events'",
+              "name": "order",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `pointer-events` property.\nSupports all valid CSS `pointer-events` values.",
+              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "category": "Declarative layout / Style expression properties",
               "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
             {
@@ -25923,54 +25729,33 @@
               }
             }
           ],
-          "superclass": {
-            "name": "GdsFlex",
-            "module": "/src/components/flex/flex.component"
-          },
-          "tagName": "gds-mask",
-          "customElement": true,
-          "attributes": [
+          "events": [
             {
-              "name": "level",
-              "type": {
-                "text": "GdsColorLevel"
-              },
-              "default": "'2'",
-              "description": "The level of the container is used to resolve the color tokens from the corresponding level.\nCheck the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.\n\nDefault for `gds-div` is level 2.",
-              "fieldName": "level",
-              "inheritedFrom": {
-                "name": "GdsDiv",
-                "module": "src/components/div/div.component.ts"
-              }
+              "description": "Fired when the button is clicked.",
+              "name": "click"
             },
             {
-              "name": "gds-element",
+              "name": "gds-element-disconnected",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "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",
+              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "name": "gds-element-disconnected",
+              "name": "name",
               "type": {
-                "text": "CustomEvent"
+                "text": "Event"
               },
-              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
             },
             {
-              "name": "name",
               "type": {
                 "text": "Event"
               },
@@ -25978,50 +25763,186 @@
                 "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": "Event"
+                "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"
               }
             }
-          ]
+          ],
+          "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": "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",
-          "name": "meta",
+          "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": "Meta"
+            "text": "Story"
           },
-          "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": "{ ...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": "Mask",
+          "name": "Compact_menu_bar",
           "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-xl}\" 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, 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."
         }
       ],
       "exports": [
@@ -26030,27 +25951,67 @@
           "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": "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-interactive); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-strong); } 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; height: 56px; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } } 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": [
@@ -26059,29 +26020,29 @@
           "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"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/menu-button/index.ts",
+      "path": "src/components/link/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -26089,29 +26050,23 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/menu-button/menu-button"
+            "module": "src/components/link/link"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.component.ts",
+      "path": "src/components/link/link.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"
-            }
-          ],
+          "name": "GdsLink",
           "slots": [
             {
-              "description": "Content to be displayed as the button label.",
-              "name": ""
+              "description": "Content to be displayed as the link string.",
+              "name": "main"
             },
             {
               "description": "An optional slot that allows a `gds-icon` element to be placed before the label.",
@@ -26132,17 +26087,6 @@
               "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",
@@ -26150,67 +26094,55 @@
                 "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.",
+              "description": "Provides an accessible name for the link that will be read by screen readers.\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility",
               "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",
+              "name": "'text-decoration'",
               "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"
+              "description": "Controls the text-decoration property of the link.\nSupports all valid CSS text-decoration values.\n\nSetting `text-decoration` on hover you can do it like this:\n```html\n<gds-link text-decoration=\"hover:underline\">Underline on Hover</gds-link>\n```"
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "margin",
               "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"
+              "description": "Style Expression Property that controls the `margin` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "compact",
+              "name": "'margin-inline'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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
+              "description": "Style Expression Property that controls the `margin-inline` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "'margin-block'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the menu button is selected",
-              "attribute": "selected",
-              "reflects": true
+              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
             },
             {
               "kind": "field",
@@ -26377,21 +26309,98 @@
               "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"
+                "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": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL that the link points to\nCan be absolute, relative, or fragment identifier",
+              "attribute": "href",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+              },
+              "description": "Specifies where to open the linked document",
+              "attribute": "target",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specifies the relationship between the current document and the linked document\nAutomatically adds security-related values when target=\"_blank\"",
+              "attribute": "rel",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#rel",
+              "privacy": "private",
+              "type": {
+                "text": "string | undefined"
+              },
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string | boolean | undefined"
+              },
+              "description": "When present, indicates that the linked resource should be downloaded",
+              "attribute": "download",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
               }
             },
             {
               "kind": "field",
-              "name": "order",
+              "name": "ping",
               "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",
+              "description": "Specifies a space-separated list of URLs to which, when the link is followed,\nPOST requests with the body ping will be sent by the browser.",
+              "attribute": "ping",
               "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
               }
             },
             {
@@ -26526,7 +26535,7 @@
           ],
           "events": [
             {
-              "description": "Fired when the button is clicked.",
+              "description": "Fired when the link is clicked.",
               "name": "click"
             },
             {
@@ -26561,74 +26570,74 @@
             }
           ],
           "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.",
+              "description": "Provides an accessible name for the link that will be read by screen readers.\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility",
               "fieldName": "label"
             },
             {
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "When set, the underlying button will be rendered as an anchor element.",
-              "fieldName": "href"
+              "description": "URL that the link points to\nCan be absolute, relative, or fragment identifier",
+              "fieldName": "href",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
             },
             {
               "name": "target",
               "type": {
                 "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
               },
-              "description": "Where to display the linked URL. Only used when href is present.",
-              "fieldName": "target"
+              "description": "Specifies where to open the linked document",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
             },
             {
               "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"
+              "description": "Specifies the relationship between the current document and the linked document\nAutomatically adds security-related values when target=\"_blank\"",
+              "fieldName": "rel",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
             },
             {
               "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"
+                "text": "string | boolean | undefined"
               },
-              "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"
+              "description": "When present, indicates that the linked resource should be downloaded",
+              "fieldName": "download",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
             },
             {
-              "name": "selected",
+              "name": "ping",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the menu button is selected",
-              "fieldName": "selected"
+              "description": "Specifies a space-separated list of URLs to which, when the link is followed,\nPOST requests with the body ping will be sent by the browser.",
+              "fieldName": "ping",
+              "inheritedFrom": {
+                "name": "withLinkProps",
+                "module": "src/utils/mixins/props-link.ts"
+              }
             },
             {
               "name": "gds-element",
@@ -26645,6 +26654,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "withMarginProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
             {
               "name": "withSizeXProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
@@ -26652,30 +26665,34 @@
             {
               "name": "withLayoutChildProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
+            {
+              "name": "withLinkProps",
+              "module": "/src/utils/mixins/props-link"
             }
           ],
           "superclass": {
             "name": "GdsElement",
             "module": "/src/gds-element"
           },
-          "tagName": "gds-menu-button",
+          "tagName": "gds-link",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsMenuButton",
+          "name": "GdsLink",
           "declaration": {
-            "name": "GdsMenuButton",
-            "module": "src/components/menu-button/menu-button.component.ts"
+            "name": "GdsLink",
+            "module": "src/components/link/link.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.stories.ts",
+      "path": "src/components/link/link.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -26683,8 +26700,8 @@
           "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."
+          "default": "{ title: 'Components/Link', component: 'gds-link', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-link'), }, }",
+          "description": "A link navigates users to other pages or sections of content."
         },
         {
           "kind": "variable",
@@ -26696,48 +26713,39 @@
         },
         {
           "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",
+          "name": "Lead",
           "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."
+          "default": "{ ...DefaultParams, name: 'Icon: Lead', render: () => html` <gds-link href=\"#\"> <gds-icon-chain-link slot=\"lead\"></gds-icon-chain-link> Link text </gds-link>`, }",
+          "description": "A link component with a leading icon."
         },
         {
           "kind": "variable",
-          "name": "Example_menu_bar",
+          "name": "Trail",
           "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."
+          "default": "{ ...DefaultParams, name: 'Icon: Trail', render: () => html` <gds-link href=\"#\"> Link text <gds-icon-arrow-right slot=\"trail\"></gds-icon-arrow-right> </gds-link>`, }",
+          "description": "A link component with a trailing icon."
         },
         {
           "kind": "variable",
-          "name": "Compact_menu_bar",
+          "name": "TextDecoration",
           "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."
+          "default": "{ ...DefaultParams, name: 'Text Decoration', render: () => html` <gds-flex gap=\"4xl\" width=\"600px\" flex-direction=\"column\"> <gds-flex gap=\"xl\"> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with Underline</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"underline\"> Link text </gds-link> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link without Underline</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"none\"> Link text </gds-link> </gds-flex> </gds-flex> <gds-flex gap=\"xl\"> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with Underline on Hover and Icon</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\"> Link text <gds-icon-arrow-right slot=\"trail\"></gds-icon-arrow-right> </gds-link> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"m\" flex=\"1\"> <gds-text tag=\"small\">Link with No Underline on Hover</gds-text> <gds-divider opacity=\"0.2\"></gds-divider> <gds-link href=\"#\" text-decoration=\"underline; hover:none\"> Link text </gds-link> </gds-flex> </gds-flex> </gds-flex> `, }",
+          "description": "A link component has a `text-decoration` property that accepts all valid CSS `text-decoration` values.\n\nIt also supports setting `text-decoration` or disable on hover by using the `hover:` prefix.\n\n```html\n<gds-link text-decoration=\"hover:none\">\n   Underline on Hover\n</gds-link>\n```"
         },
         {
           "kind": "variable",
-          "name": "Dark",
+          "name": "Label",
           "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."
+          "default": "{ ...DefaultParams, name: 'Label', render: () => html` <gds-link href=\"#\" label=\"Aria label is used\"> Link with aria-label </gds-link> `, }",
+          "description": "On the `gds-link` component, the `label` attribute is used to provide an accessible name for the link.\n\nIt will be forwarded to the `aria-label` attribute of the underlying anchor element.\n\n\nUse this when:\n- The link contains only an icon\n- The visual text needs a different description for screen readers\n- Additional context is needed for accessibility\n\n```html\n<!-- Icon-only link -->\n<gds-link href=\"/settings\" label=\"Open settings\">\n <gds-icon-settings></gds-icon-settings>\n</gds-link>\n\n<!-- Different screen reader text -->\n<gds-link href=\"/article\" label=\"Read full article about climate change\">\n Read more\n</gds-link>\n```"
         }
       ],
       "exports": [
@@ -26746,7 +26754,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/menu-button/menu-button.stories.ts"
+            "module": "src/components/link/link.stories.ts"
           }
         },
         {
@@ -26754,59 +26762,51 @@
           "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"
+            "module": "src/components/link/link.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Only_text",
+          "name": "Lead",
           "declaration": {
-            "name": "Only_text",
-            "module": "src/components/menu-button/menu-button.stories.ts"
+            "name": "Lead",
+            "module": "src/components/link/link.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Example_menu_bar",
+          "name": "Trail",
           "declaration": {
-            "name": "Example_menu_bar",
-            "module": "src/components/menu-button/menu-button.stories.ts"
+            "name": "Trail",
+            "module": "src/components/link/link.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Compact_menu_bar",
+          "name": "TextDecoration",
           "declaration": {
-            "name": "Compact_menu_bar",
-            "module": "src/components/menu-button/menu-button.stories.ts"
+            "name": "TextDecoration",
+            "module": "src/components/link/link.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Dark",
+          "name": "Label",
           "declaration": {
-            "name": "Dark",
-            "module": "src/components/menu-button/menu-button.stories.ts"
+            "name": "Label",
+            "module": "src/components/link/link.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.styles.ts",
+      "path": "src/components/link/link.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-interactive); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-strong); } 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; height: 56px; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } } 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; } } } `"
+          "default": "css` @layer core, link; @layer core { :host { display: inline-block; white-space: normal; } } @layer link { a { display: flex; align-items: center; gap: 1ch; text-decoration: none; text-underline-offset: 0.2lh; color: currentColor; cursor: pointer; border-radius: var(--gds-sys-radius-3xs); outline-offset: var(--gds-sys-space-3xs); outline-color: currentColor; font-weight: var(--gds-sys-text-weight-book); will-change: text-underline-offset; transition-property: text-underline-offset; transition-duration: var(--gds-sys-motion-duration-fastest); transition-timing-function: var(--gds-sys-motion-easing-ease-in-out); @media (pointer: fine) { &:hover { text-decoration: underline; text-underline-offset: 0.16lh; &:active { text-underline-offset: 0.08lh; } } } } } `"
         }
       ],
       "exports": [
@@ -26815,22 +26815,22 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/menu-button/menu-button.styles.ts"
+            "module": "src/components/link/link.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/menu-button/menu-button.ts",
+      "path": "src/components/link/link.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsMenuButton",
+          "name": "GdsLink",
           "declaration": {
-            "name": "GdsMenuButton",
-            "module": "src/components/menu-button/menu-button.ts"
+            "name": "GdsLink",
+            "module": "src/components/link/link.ts"
           }
         }
       ]
@@ -44344,22 +44344,42 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/details/details-icon/details-icon.component.ts",
+      "path": "src/components/filter-chips/filter-chip/filter-chip.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsIconDetails",
+          "name": "GdsFilterChip",
           "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls if the details is open",
-              "attribute": "open",
+              "description": "Whether the chip is selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "ValueT | undefined"
+              },
+              "description": "The value of the chip",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'large'"
+              },
+              "default": "'large'",
+              "description": "The size of the chip",
+              "attribute": "size",
               "reflects": true
             },
             {
@@ -44494,13 +44514,30 @@
           ],
           "attributes": [
             {
-              "name": "open",
+              "name": "selected",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls if the details is open",
-              "fieldName": "open"
+              "description": "Whether the chip is selected",
+              "fieldName": "selected"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "ValueT | undefined"
+              },
+              "description": "The value of the chip",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'large'"
+              },
+              "default": "'large'",
+              "description": "The size of the chip",
+              "fieldName": "size"
             },
             {
               "name": "gds-element",
@@ -44520,7 +44557,7 @@
             "name": "GdsElement",
             "module": "/src/gds-element"
           },
-          "tagName": "gds-icon-details",
+          "tagName": "gds-filter-chip",
           "customElement": true,
           "events": [
             {
@@ -44559,22 +44596,63 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsIconDetails",
+          "name": "GdsFilterChip",
+          "declaration": {
+            "name": "GdsFilterChip",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/filter-chips/filter-chip/filter-chip.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{ title: 'Components/Filter Chips/Filter Chip', component: 'gds-filter-chip', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-filter-chip'), size: { options: ['small', 'large'], control: { type: 'select' }, }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/filter-chips)\n&nbsp;|&nbsp;\n[Usage guidelines](https://designlibrary.sebgroup.com/components/component-filter-chip)\n\nThe filter chip is a sub-component of the filter chips component, and should generally not be used on its own."
+        },
+        {
+          "kind": "variable",
+          "name": "Basic",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
           "declaration": {
-            "name": "GdsIconDetails",
-            "module": "src/components/details/details-icon/details-icon.component.ts"
+            "name": "meta",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Basic",
+          "declaration": {
+            "name": "Basic",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/details/details-icon/details-icon.style.ts",
+      "path": "src/components/filter-chips/filter-chip/filter-chip.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css` :host { display: contents; } `"
+          "default": "css` @layer base, reset, transitional-styles; @layer base { .icon { width: 1rem; } } `"
         }
       ],
       "exports": [
@@ -44583,64 +44661,87 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/components/details/details-icon/details-icon.style.ts"
+            "module": "src/components/filter-chips/filter-chip/filter-chip.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/details/details-icon/details-icon.ts",
+      "path": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "register"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "register",
+          "declaration": {
+            "name": "register",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "register",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/filter-chips/filter-chip/filter-chip.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsIconDetails",
+          "name": "GdsFilterChip",
           "declaration": {
-            "name": "GdsIconDetails",
-            "module": "src/components/details/details-icon/details-icon.ts"
+            "name": "GdsFilterChip",
+            "module": "src/components/filter-chips/filter-chip/filter-chip.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/filter-chip.component.ts",
+      "path": "src/components/filter-chips/filter-chip/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/filter-chips/filter-chip/filter-chip"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/details/details-icon/details-icon.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsFilterChip",
+          "name": "GdsIconDetails",
           "members": [
             {
               "kind": "field",
-              "name": "selected",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the chip is selected",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "ValueT | undefined"
-              },
-              "description": "The value of the chip",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'large'"
-              },
-              "default": "'large'",
-              "description": "The size of the chip",
-              "attribute": "size",
+              "description": "Controls if the details is open",
+              "attribute": "open",
               "reflects": true
             },
             {
@@ -44775,30 +44876,13 @@
           ],
           "attributes": [
             {
-              "name": "selected",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the chip is selected",
-              "fieldName": "selected"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "ValueT | undefined"
-              },
-              "description": "The value of the chip",
-              "fieldName": "value"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'large'"
-              },
-              "default": "'large'",
-              "description": "The size of the chip",
-              "fieldName": "size"
+              "description": "Controls if the details is open",
+              "fieldName": "open"
             },
             {
               "name": "gds-element",
@@ -44818,7 +44902,7 @@
             "name": "GdsElement",
             "module": "/src/gds-element"
           },
-          "tagName": "gds-filter-chip",
+          "tagName": "gds-icon-details",
           "customElement": true,
           "events": [
             {
@@ -44857,63 +44941,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsFilterChip",
-          "declaration": {
-            "name": "GdsFilterChip",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/filter-chip.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Filter Chips/Filter Chip', component: 'gds-filter-chip', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-filter-chip'), size: { options: ['small', 'large'], control: { type: 'select' }, }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/filter-chips)\n&nbsp;|&nbsp;\n[Usage guidelines](https://designlibrary.sebgroup.com/components/component-filter-chip)\n\nThe filter chip is a sub-component of the filter chips component, and should generally not be used on its own."
-        },
-        {
-          "kind": "variable",
-          "name": "Basic",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Basic",
+          "name": "GdsIconDetails",
           "declaration": {
-            "name": "Basic",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.stories.ts"
+            "name": "GdsIconDetails",
+            "module": "src/components/details/details-icon/details-icon.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/filter-chip.styles.ts",
+      "path": "src/components/details/details-icon/details-icon.style.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css` @layer base, reset, transitional-styles; @layer base { .icon { width: 1rem; } } `"
+          "default": "css` :host { display: contents; } `"
         }
       ],
       "exports": [
@@ -44922,65 +44965,22 @@
           "name": "styles",
           "declaration": {
             "name": "styles",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "register"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "register",
-          "declaration": {
-            "name": "register",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "register",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.trans.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/filter-chip.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsFilterChip",
-          "declaration": {
-            "name": "GdsFilterChip",
-            "module": "src/components/filter-chips/filter-chip/filter-chip.ts"
+            "module": "src/components/details/details-icon/details-icon.style.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/filter-chips/filter-chip/index.ts",
+      "path": "src/components/details/details-icon/details-icon.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "GdsIconDetails",
           "declaration": {
-            "name": "*",
-            "module": "src/components/filter-chips/filter-chip/filter-chip"
+            "name": "GdsIconDetails",
+            "module": "src/components/details/details-icon/details-icon.ts"
           }
         }
       ]