@sebgroup/green-core 2.37.0 → 2.37.2

package/custom-elements.json

@@ -3439,6 +3439,309 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/blur/blur.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GdsBlur",
+          "slots": [
+            {
+              "description": "Content to be blurred.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "define",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Defines the custom element in the custom element registry.\nThis method needs to be called once before the element can be used.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isDefined",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "false",
+              "description": "Whether the element is defined in the custom element registry.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styleExpressionBaseSelector",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "':host'",
+              "description": "Style expression properties for this element will use this selector by default.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "semanticVersion",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "default": "'__GDS_SEM_VER__'",
+              "description": "The semantic version of this element. Can be used for troubleshooting to verify the version being used.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "gdsElementName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
+              "readonly": true,
+              "attribute": "gds-element",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchStandardEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "EventInit"
+                  }
+                }
+              ],
+              "description": "Dispatches a standard event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchCustomEvent",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "CustomEventInit<T>"
+                  }
+                }
+              ],
+              "description": "Dispatches a custom event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-blur",
+          "customElement": true,
+          "attributes": [
+            {
+              "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"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "gds-element-disconnected",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBlur",
+          "declaration": {
+            "name": "GdsBlur",
+            "module": "src/components/blur/blur.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/blur/blur.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{ title: 'Components/Blur', component: 'gds-blur', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-blur'), }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/blur)\n\nThe Blur component is used to apply a blur effect over content,\noften used to obscure sensitive or background information."
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html` <gds-blur> <gds-text>Blur</gds-text> </gds-blur> `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/components/blur/blur.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/components/blur/blur.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/blur/blur.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "style",
+          "default": "css` :host { --_blur: 5px; } .blur { filter: blur(var(--_blur)); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "style",
+            "module": "src/components/blur/blur.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/blur/blur.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBlur",
+          "declaration": {
+            "name": "GdsBlur",
+            "module": "src/components/blur/blur.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/blur/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/blur/blur"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/badge/badge.component.ts",
@@ -4142,309 +4445,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/blur/blur.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "GdsBlur",
-          "slots": [
-            {
-              "description": "Content to be blurred.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "define",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Defines the custom element in the custom element registry.\nThis method needs to be called once before the element can be used.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isDefined",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "false",
-              "description": "Whether the element is defined in the custom element registry.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "styleExpressionBaseSelector",
-              "type": {
-                "text": "string"
-              },
-              "static": true,
-              "default": "':host'",
-              "description": "Style expression properties for this element will use this selector by default.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "semanticVersion",
-              "type": {
-                "text": "string"
-              },
-              "readonly": true,
-              "default": "'__GDS_SEM_VER__'",
-              "description": "The semantic version of this element. Can be used for troubleshooting to verify the version being used.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "gdsElementName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
-              "readonly": true,
-              "attribute": "gds-element",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchStandardEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "EventInit"
-                  }
-                }
-              ],
-              "description": "Dispatches a standard event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "dispatchCustomEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "CustomEventInit<T>"
-                  }
-                }
-              ],
-              "description": "Dispatches a custom event with the given name and options.\nA pascal cased version of the event name is also dispatched for compatibility.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-blur",
-          "customElement": true,
-          "attributes": [
-            {
-              "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"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "gds-element-disconnected",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "When the element is disconnected from the DOM",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsBlur",
-          "declaration": {
-            "name": "GdsBlur",
-            "module": "src/components/blur/blur.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/blur/blur.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Blur', component: 'gds-blur', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-blur'), }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/blur)\n\nThe Blur component is used to apply a blur effect over content,\noften used to obscure sensitive or background information."
-        },
-        {
-          "kind": "variable",
-          "name": "Default",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html` <gds-blur> <gds-text>Blur</gds-text> </gds-blur> `, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/blur/blur.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Default",
-          "declaration": {
-            "name": "Default",
-            "module": "src/components/blur/blur.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/blur/blur.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "style",
-          "default": "css` :host { --_blur: 5px; } .blur { filter: blur(var(--_blur)); } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "style",
-            "module": "src/components/blur/blur.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/blur/blur.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsBlur",
-          "declaration": {
-            "name": "GdsBlur",
-            "module": "src/components/blur/blur.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/blur/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/blur/blur"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/breadcrumbs/breadcrumbs.component.ts",
@@ -13647,134 +13647,295 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dialog/dialog.component.ts",
+      "path": "src/components/div/div.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsDialog",
-          "slots": [
+          "name": "GdsDiv",
+          "members": [
             {
-              "description": "The content of the dialog",
-              "name": ""
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Controls the display property.\nSupports all valid CSS display values.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
-              "description": "The trigger button for the dialog",
-              "name": "trigger"
+              "kind": "field",
+              "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.",
+              "attribute": "level"
             },
             {
-              "description": "The footer of the dialog",
-              "name": "footer"
+              "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"
             },
             {
-              "description": "Complete override of the dialog content, including header and footer",
-              "name": "dialog"
-            }
-          ],
-          "members": [
+              "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"
+            },
             {
               "kind": "field",
-              "name": "styleExpressionBaseSelector",
+              "name": "border",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "static": true,
-              "default": "'dialog'",
-              "description": "Style expression properties for this element will use this selector by default.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
+              "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"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "'border-color'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the dialog is open. The state of the dialog can be controlled either\nby setting this property or by calling the `show()` and `close()` methods.\n\nWhen the state is explicitly changed by setting this prop, the state change cannot\nbe cancelled by events.",
-              "attribute": "open",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "name": "heading",
+              "name": "'border-width'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The dialog's heading.",
-              "attribute": "heading"
+              "description": "Style Expression Property that controls the `border-width` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "'border-style'",
               "type": {
-                "text": "'default' | 'slide-out'"
+                "text": "string | undefined"
               },
-              "default": "'default'",
-              "description": "The dialog's variant.",
-              "attribute": "variant"
+              "description": "Style Expression Property that controls the `border-style` property.\nSupports all valid CSS `border-style` values.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "'border-radius'",
               "type": {
-                "text": "'initial' | 'top' | 'bottom' | 'left' | 'right'"
+                "text": "string | undefined"
               },
-              "default": "'initial'",
-              "description": "The dialog's placement.",
-              "attribute": "placement"
+              "description": "Style Expression Property that controls the `border-radius` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
               "kind": "field",
-              "name": "scrollable",
+              "name": "'box-shadow'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if\nthe content exceeds the dialog's height, which can be controlled using the `height` property.\n\nThis property have no effect if the `dialog` slot is used. In that case, you need to add overflow\nstyles to the content inside the `dialog` slot.",
-              "attribute": "scrollable"
+              "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"
             },
             {
               "kind": "field",
-              "name": "closedby",
+              "name": "opacity",
               "type": {
-                "text": "'closerequest' | 'none' | 'any'"
+                "text": "string | undefined"
               },
-              "default": "'closerequest'",
-              "description": "Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.\n\n- `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).\n  The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations\n  require a user activation in between. This ensures the best mobile UX.\n- `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).\n  A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).\n  Mobile platform close gestures may not work in this mode.\n- `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already\n  handles click-outside via its own mechanism.",
-              "attribute": "closedby",
-              "reflects": true
+              "description": "Style Expression Property that controls the `opacity` property.\nSupports all valid CSS `opacity` values.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
-              "kind": "method",
-              "name": "show",
-              "parameters": [
-                {
-                  "name": "reason",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Opens the dialog.\nThis is a programmatic API that always opens the dialog.\nEvents are dispatched for notification when a reason is provided, but cancellation is not honored."
+              "kind": "field",
+              "name": "overflow",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `overflow` property.\nSupports all valid CSS `overflow` values.",
+              "category": "Declarative layout / Style expression properties"
             },
             {
-              "kind": "method",
-              "name": "close",
-              "parameters": [
-                {
-                  "name": "reason",
-                  "optional": true,
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The reason for closing the dialog."
-                }
-              ],
-              "description": "Closes the dialog.\nThis is a programmatic API that always closes the dialog.\nEvents are dispatched for notification when a reason is provided, but cancellation is not honored."
+              "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"
+            },
+            {
+              "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"
+            },
+            {
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "'font-weight'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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"
+            },
+            {
+              "kind": "field",
+              "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"
+            },
+            {
+              "kind": "field",
+              "name": "'text-wrap'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `text-wrap` property.\nSupports all valid CSS `text-wrap` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "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."
+            },
+            {
+              "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."
+            },
+            {
+              "kind": "field",
+              "name": "gap",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `gap` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'align-items'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `align-items` property.\nSupports all valid CSS `align-items` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'align-content'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `align-content` property.\nSupports all valid CSS `align-content` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'justify-content'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `justify-content` property.\nSupports all valid CSS `justify-content` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'justify-items'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `justify-items` property.\nSupports all valid CSS `justify-items` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'flex-direction'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `flex-direction` property.\nSupports all valid CSS `flex-direction` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'flex-wrap'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `flex-wrap` property.\nSupports all valid CSS `flex-wrap` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'place-items'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `place-items` property.\nSupports all valid CSS `place-items` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'place-content'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `place-content` property.\nSupports all valid CSS `place-content` values.",
+              "category": "Declarative layout / Style expression properties"
+            },
+            {
+              "kind": "field",
+              "name": "'aspect-ratio'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `aspect-ratio` property.\nSupports all valid CSS `aspect-ratio` values."
+            },
+            {
+              "kind": "field",
+              "name": "cursor",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `cursor` property.\nSupports all valid CSS `cursor` values."
+            },
+            {
+              "kind": "field",
+              "name": "'pointer-events'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `pointer-events` property.\nSupports all valid CSS `pointer-events` values."
             },
             {
               "kind": "field",
@@ -13932,6 +14093,45 @@
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "margin",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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": "'margin-inline'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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": "'margin-block'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
               "name": "padding",
@@ -13971,6 +14171,149 @@
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "'align-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'justify-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'place-self'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-column'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-row'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-area'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "flex",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "order",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `position` property.\nSupports all valid CSS `position` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withPositioningProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "transform",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inset",
+              "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"
+              }
+            },
             {
               "kind": "method",
               "name": "define",
@@ -14000,6 +14343,20 @@
                 "module": "src/gds-element.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "styleExpressionBaseSelector",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "':host'",
+              "description": "Style expression properties for this element will use this selector by default.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "semanticVersion",
@@ -14087,103 +14444,15 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing.",
-              "name": "gds-ui-state"
-            },
-            {
-              "description": "Fired when the dialog is closed",
-              "name": "gds-close"
-            },
-            {
-              "description": "Fired when the dialog is opened",
-              "name": "gds-show"
-            },
-            {
-              "name": "gds-element-disconnected",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "When the element is disconnected from the DOM",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the dialog is open. The state of the dialog can be controlled either\nby setting this property or by calling the `show()` and `close()` methods.\n\nWhen the state is explicitly changed by setting this prop, the state change cannot\nbe cancelled by events.",
-              "fieldName": "open"
-            },
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The dialog's heading.",
-              "fieldName": "heading"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "'default' | 'slide-out'"
-              },
-              "default": "'default'",
-              "description": "The dialog's variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "'initial' | 'top' | 'bottom' | 'left' | 'right'"
-              },
-              "default": "'initial'",
-              "description": "The dialog's placement.",
-              "fieldName": "placement"
-            },
-            {
-              "name": "scrollable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if\nthe content exceeds the dialog's height, which can be controlled using the `height` property.\n\nThis property have no effect if the `dialog` slot is used. In that case, you need to add overflow\nstyles to the content inside the `dialog` slot.",
-              "fieldName": "scrollable"
-            },
-            {
-              "name": "closedby",
+              "name": "level",
               "type": {
-                "text": "'closerequest' | 'none' | 'any'"
+                "text": "GdsColorLevel"
               },
-              "default": "'closerequest'",
-              "description": "Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.\n\n- `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).\n  The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations\n  require a user activation in between. This ensures the best mobile UX.\n- `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).\n  A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).\n  Mobile platform close gestures may not work in this mode.\n- `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already\n  handles click-outside via its own mechanism.",
-              "fieldName": "closedby"
+              "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"
             },
             {
               "name": "gds-element",
@@ -14208,33 +14477,77 @@
               "name": "withSizeYProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
             },
+            {
+              "name": "withMarginProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
             {
               "name": "withPaddingProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
+            {
+              "name": "withLayoutChildProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
+            },
+            {
+              "name": "withPositioningProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
             }
           ],
           "superclass": {
             "name": "GdsElement",
             "module": "/src/gds-element"
           },
-          "tagName": "gds-dialog",
-          "customElement": true
+          "tagName": "gds-div",
+          "customElement": true,
+          "events": [
+            {
+              "name": "gds-element-disconnected",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDialog",
+          "name": "GdsDiv",
           "declaration": {
-            "name": "GdsDialog",
-            "module": "src/components/dialog/dialog.component.ts"
+            "name": "GdsDiv",
+            "module": "src/components/div/div.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dialog/dialog.stories.ts",
+      "path": "src/components/div/div.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -14242,8 +14555,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Dialog', component: 'gds-dialog', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-dialog'), }, parameters: { layout: 'centered', }, }",
-          "description": "A dialog appears in front of content to provide critical information or ask for a decision."
+          "default": "{ title: 'Components/Div', component: 'gds-div', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-div'), }, }",
+          "description": "\n`gds-div` is a base element in the declarative layout system.\n\nDiv accepts all available style expression properties, and is also the base class for `gds-flex`, `gds-grid`, `gds-card` and `gds-text`"
         },
         {
           "kind": "variable",
@@ -14251,62 +14564,34 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, }",
-          "description": "The easiest way to set up a dialog is to put a button in the trigger slot. This will\nautomatically open the dialog when the button is clicked."
-        },
-        {
-          "kind": "variable",
-          "name": "SlideOut",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, args: { ...DefaultParams.args, variant: 'slide-out', }, }",
-          "description": "You can set the `variant` attribute to `slide-out` to make the dialog slide in from the right."
-        },
-        {
-          "kind": "variable",
-          "name": "Scrollable",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, args: { ...DefaultParams.args, height: '400px', scrollable: true, }, }",
-          "description": "To enable scroll for overflowing content, you can set the `scrollable` property to `true`.\n\nThis only has an effect of the default content slot."
-        },
-        {
-          "kind": "variable",
-          "name": "CustomButtons",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, render: () => html`<gds-button aria-haspopup=\"dialog\" onclick=\"document.getElementById('my-dialog').show()\" >Open dialog</gds-button > <gds-dialog heading=\"Dialog heading\" id=\"my-dialog\"> This is the content of the dialog. <gds-button slot=\"footer\" onclick=\"document.getElementById('my-dialog').close('custom close')\" >Custom close button</gds-button > </gds-dialog>`, }",
-          "description": "You can also open and close the dialog programmatically by calling the `show()` and `close()` methods.\nIn this case you should add `aria-haspopup=\"dialog\"` to the trigger element. Slotted triggers will get\nthis attribute automatically.\n\nInside the dialog, you can use the `slot=\"footer\"` to add buttons to the footer of the dialog."
+          "default": "{ ...DefaultParams, args: { background: '01', border: '2xs', 'border-radius': 'm', 'border-color': 'subtle-01', width: '4xl', height: '4xl', }, }"
         },
         {
           "kind": "variable",
-          "name": "Events",
+          "name": "Example",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: () => html`<gds-dialog @gds-close=${console.log} @gds-show=${console.log} @gds-ui-state=${console.log} heading=\"Dialog heading\" id=\"my-dialog-events\" > <gds-button slot=\"trigger\">Open dialog</gds-button> This is the content of the dialog. <gds-button rank=\"secondary\" slot=\"footer\">Custom btn</gds-button> <gds-button slot=\"footer\" onclick=\"document.getElementById('my-dialog-events').close('custom close')\" >Custom btn 2</gds-button > </gds-dialog>`, }",
-          "description": "You can listen to the `gds-show`, `gds-close` and `gds-ui-state` events to know when the dialog is opened or closed.\n\nWhen `close()` or `show()` is called without a parameter, the event will not be emitted. If a parameter is passed, the\nevent will be emitted with the parameter as the event detail. Also when any of the built-in methods are used to open or\nclose the dialog, the event will be emitted with the parameter as the event detail.\n\nAll the emitted events will have a `detail` object with a reason property that can be used to determine the reason for the event.\n\nPossible reasons are:\n- `btn-close`: The dialog was closed by the user clicking the close button.\n- `btn-cancel`: The dialog was closed by the user clicking the default cancel button.\n- `btn-ok`: The dialog was closed by the user clicking the default OK button.\n- `native-close`: The dialog was closed by the user pressing the Escape key.\n- `click-outside`: The dialog was closed by the user clicking outside the dialog.\n- `slotted-trigger`: The dialog was opened by the user clicking the slotted trigger button.\n\nThe reason can also be a custom string supplied when calling the `close()` or `show()` methods.\n\n### Preventing close\nThe `gds-ui-state` event can be cancelled by calling `preventDefault()` on the event to prevent the dialog from closing.\nWhen using built-in triggers (buttons, Escape, click outside, trigger slot), cancelling `gds-ui-state` fully prevents the action.\nWhen calling `close()` or `show()` programmatically, events are dispatched for notification but cancellation does not prevent the state change."
+          "default": "{ ...DefaultParams, render: (args) => html` <!-- This is equivalent to 'gds-flex' --> <gds-div display=\"flex\" gap=\"xl\" justify-content=\"center\" align-items=\"center\" > <!-- Some properties, like 'width' and 'height', accepts either tokens or arbitrary values --> <gds-div width=\"4xl\" height=\"4xl\" background=\"neutral-01\"></gds-div> <!-- All style expressions properties accepts multi-viewport expressions --> <gds-div width=\"4xl; l{ 6xl }\" height=\"4xl; l{ 6xl }\" background=\"neutral-02\" border=\"4xs\" ></gds-div> <!-- Instead of adding 'background' and 'border-radius', take a look at 'gds-card', which provides pre-configured configurations of these properties --> <gds-div width=\"4xl\" height=\"4xl\" background=\"03\" border-radius=\"s\" ></gds-div> </gds-div> `, }",
+          "description": "Here is an example of a simple layout structure using `gds-div`:"
         },
         {
           "kind": "variable",
-          "name": "CustomDialog",
+          "name": "CardBorder",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: () => html`<gds-dialog @gds-close=${console.log} @gds-show=${console.log} @gds-ui-state=${console.log} heading=\"Dialog heading\" id=\"my-dialog-events\" > <gds-button slot=\"trigger\">Open dialog</gds-button> This is the content of the dialog. <div slot=\"dialog\"> If you put stuff here, you can customize the entire dialog, including header and footer. </div> </gds-dialog>`, }",
-          "description": "You can customize the dialog completely by putting content in the `dialog` slot.\nThis will replace the default content of the dialog, including the header and footer.\n\nWhen this slot is used, the footer slot will not be rendered, so you need to add a custom footer manually.\n\n**Important:** Make sure to still use the `heading` property, as it is used to give the dialog an accessible name."
+          "default": "{ ...DefaultParams, name: 'Border Style', render: (args) => html`<gds-grid columns=\"5\" gap=\"4xl\"> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"2xs 0 0 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Top </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 2xs 0 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\">Right</gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 0 2xs 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Bottom </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 0 0 2xs\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Left </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border=\"2xs\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> All </gds-flex> </gds-card> </gds-grid>`, }",
+          "description": "Border styling follows the same patterns as CSS and can be controlled using the shorthand properties `border`, `border-width`, `border-style`, `border-color`\n\n- `border-color` defaults to subtle-01\n- `border-width` defaults to 0 (supports all spacing tokens)\n- `border-style` defaults to solid\n\nTo add a 1px primary border around the element:\n\n```html\n<gds-div border=\"4xs\"></gds-div>\n```\n\nTo only add border bottom:\n\n```html\n<gds-div border-width=\"0 0 4xs 0\"></gds-div>\n```\n\nTo add a 1px secodary color border on the bottom:\n\n```html\n<gds-div border-width=\"0 0 4xs 0\" border-color=\"subtle-01\"></gds-div>\n```"
         },
         {
           "kind": "variable",
-          "name": "CancelableClose",
+          "name": "BorderRadius",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: () => html`<gds-dialog heading=\"Terms and conditions\" id=\"my-dialog-cancel\" closedby=\"none\" @gds-ui-state=${(e: Event) => { const detail = (e as CustomEvent).detail // Only gate close attempts, not open if (detail.open) { const checkbox = document .getElementById('my-dialog-cancel') ?.querySelector('#agree-checkbox') as HTMLInputElement | null if (!checkbox?.checked) { e.preventDefault() } } }} > <gds-button slot=\"trigger\">Open dialog</gds-button> <gds-rich-text> <p> You must agree to the terms before closing this dialog. Try pressing Escape, clicking outside, or using the close button — the dialog will stay open until the checkbox is checked. </p> </gds-rich-text> <label style=\"display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; cursor: pointer;\" > <input type=\"checkbox\" id=\"agree-checkbox\" /> I agree to the terms and conditions </label> </gds-dialog>`, }",
-          "description": "You can prevent the dialog from closing by cancelling the `gds-ui-state` event.\n\nIn this example, the dialog contains a checkbox that must be checked before the dialog can be closed.\nAny built-in close trigger (close button, Escape, click outside) is blocked until the condition is met.\n\nNote the use of `closedby=\"none\"` — this disables the browser's native close request handling (including\nthe anti-abuse mechanism that would force-close the dialog on repeated Escape presses). With `closedby=\"none\"`,\nthe component adds its own Escape key listener so desktop users can still close via keyboard, and cancellation\nis always honored. Mobile platform close gestures (e.g. iOS swipe) will not work in this mode."
+          "default": "{ ...DefaultParams, args: { background: 'neutral-02', border: '2xs', 'border-radius': 'm', 'border-color': 'strong', width: '8xl', height: '4xl', }, }",
+          "description": "\nValues are mapped directly from our radius tokens to maintain proportional scaling. <br />\nView all available radius tokens and their values in Green Studio:\nhttps://seb.io/studio/radius\n\n\n##### Single value\n```html\n<gds-div border-radius=\"m\">...</gds-div>\n```\n\n##### Multiple corners / (top-left, top-right, bottom-right, bottom-left)\n```html\n<gds-div border-radius=\"s m l xl\">...</gds-div>\n```"
         }
       ],
       "exports": [
@@ -14315,7 +14600,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/dialog/dialog.stories.ts"
+            "module": "src/components/div/div.stories.ts"
           }
         },
         {
@@ -14323,67 +14608,43 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/dialog/dialog.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SlideOut",
-          "declaration": {
-            "name": "SlideOut",
-            "module": "src/components/dialog/dialog.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Scrollable",
-          "declaration": {
-            "name": "Scrollable",
-            "module": "src/components/dialog/dialog.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CustomButtons",
-          "declaration": {
-            "name": "CustomButtons",
-            "module": "src/components/dialog/dialog.stories.ts"
+            "module": "src/components/div/div.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Events",
+          "name": "Example",
           "declaration": {
-            "name": "Events",
-            "module": "src/components/dialog/dialog.stories.ts"
+            "name": "Example",
+            "module": "src/components/div/div.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CustomDialog",
+          "name": "CardBorder",
           "declaration": {
-            "name": "CustomDialog",
-            "module": "src/components/dialog/dialog.stories.ts"
+            "name": "CardBorder",
+            "module": "src/components/div/div.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CancelableClose",
+          "name": "BorderRadius",
           "declaration": {
-            "name": "CancelableClose",
-            "module": "src/components/dialog/dialog.stories.ts"
+            "name": "BorderRadius",
+            "module": "src/components/div/div.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dialog/dialog.styles.ts",
+      "path": "src/components/div/div.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` @layer base, reset, transitional-styles; @layer base { :host { display: contents; --_margin: var(--gds-sys-space-l); } dialog { transition: transform var(--gds-sys-motion-duration-fast) cubic-bezier(var(--gds-sys-motion-easing-ease-out)); background: transparent; padding: 0; border-width: 0; overflow: visible; max-width: calc(100vw - var(--_margin)); max-height: 100vh; display: flex; width: 400px; @starting-style { opacity: 0; transform: translateY(-16px); &::backdrop { opacity: 0; } } &::backdrop { transition: all var(--gds-sys-motion-duration-fast) cubic-bezier(var(--gds-sys-motion-easing-ease-out)); background: rgba(100, 100, 100, 0.4); } } dialog > * { flex-grow: 1; } dialog.default.placement-initial { margin: auto; --_margin: 0px; } dialog.default.placement-top { margin: var(--gds-sys-space-l) auto auto; } dialog.default.placement-bottom { margin: auto auto var(--gds-sys-space-l) auto; } dialog.default.placement-left { margin: auto var(--gds-sys-space-l) auto auto; } dialog.default.placement-right { margin: auto auto auto var(--gds-sys-space-l); } dialog.slide-out { --_in: var(--gds-sys-space-m); --_margin: var(--gds-sys-space-l); height: auto; &.placement-initial, &.placement-right { inset: var(--_in); @media (min-width: 648px) { --_in: var(--gds-sys-space-l); inset: var(--_in) var(--_in) var(--_in) auto; } @starting-style { transform: translateX(var(--gds-sys-space-6xl)); } } &.placement-left { @starting-style { transform: translateX(calc(-1 * var(--gds-sys-space-6xl))); } inset: var(--_in); @media (min-width: 648px) { --_in: var(--gds-sys-space-l); inset: var(--_in) auto var(--_in) var(--_in); } } &.placement-top { @starting-style { transform: translateY(calc(-1 * var(--gds-sys-space-6xl))); } inset: var(--_in) var(--_in) auto var(--_in); } &.placement-bottom { @starting-style { transform: translateY(calc(var(--gds-sys-space-6xl))); } inset: auto var(--_in) var(--_in) var(--_in); } } dialog:focus { outline: none; } .card { flex-direction: column; } slot[name='footer'] > *, slot[name='footer']::slotted(*) { flex: 1; } h2 { margin: 0; padding: 0; font: var(--gds-sys-text-heading-s); margin-block-start: var(--gds-sys-space-4xs); } } `"
+          "default": "css` :host { display: block; box-sizing: border-box; border-style: solid; border-width: 0; border-color: var(--gds-sys-color-border-subtle-01); } `"
         }
       ],
       "exports": [
@@ -14392,29 +14653,29 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/dialog/dialog.styles.ts"
+            "module": "src/components/div/div.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dialog/dialog.ts",
+      "path": "src/components/div/div.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDialog",
+          "name": "GdsDiv",
           "declaration": {
-            "name": "GdsDialog",
-            "module": "src/components/dialog/dialog.ts"
+            "name": "GdsDiv",
+            "module": "src/components/div/div.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/dialog/index.ts",
+      "path": "src/components/div/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -14422,364 +14683,141 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/dialog/dialog"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/dialog/scroll-lock.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "registerGlobalScrollLockStyles"
-        },
-        {
-          "kind": "function",
-          "name": "lockBodyScrolling",
-          "parameters": [
-            {
-              "name": "lockingEl",
-              "type": {
-                "text": "HTMLElement"
-              }
-            }
-          ],
-          "description": "Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\nwithout premature unlocking."
-        },
-        {
-          "kind": "function",
-          "name": "unlockBodyScrolling",
-          "parameters": [
-            {
-              "name": "lockingEl",
-              "type": {
-                "text": "HTMLElement"
-              }
-            }
-          ],
-          "description": "Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerGlobalScrollLockStyles",
-          "declaration": {
-            "name": "registerGlobalScrollLockStyles",
-            "module": "src/components/dialog/scroll-lock.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "lockBodyScrolling",
-          "declaration": {
-            "name": "lockBodyScrolling",
-            "module": "src/components/dialog/scroll-lock.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "unlockBodyScrolling",
-          "declaration": {
-            "name": "unlockBodyScrolling",
-            "module": "src/components/dialog/scroll-lock.ts"
+            "module": "src/components/div/div"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/div/div.component.ts",
+      "path": "src/components/dialog/dialog.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsDiv",
-          "members": [
-            {
-              "kind": "field",
-              "name": "display",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Controls the display property.\nSupports all valid CSS display values.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "kind": "field",
-              "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.",
-              "attribute": "level"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "kind": "field",
-              "name": "'border-style'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `border-style` property.\nSupports all valid CSS `border-style` values.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "kind": "field",
-              "name": "'border-radius'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `border-radius` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "kind": "field",
-              "name": "'box-shadow'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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"
-            },
-            {
-              "kind": "field",
-              "name": "opacity",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `opacity` property.\nSupports all valid CSS `opacity` values.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "kind": "field",
-              "name": "overflow",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `overflow` property.\nSupports all valid CSS `overflow` values.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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."
-            },
-            {
-              "kind": "field",
-              "name": "'font-weight'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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"
-            },
-            {
-              "kind": "field",
-              "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"
-            },
-            {
-              "kind": "field",
-              "name": "'text-wrap'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `text-wrap` property.\nSupports all valid CSS `text-wrap` values.",
-              "category": "Declarative layout / Style expression properties"
-            },
-            {
-              "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."
-            },
+          "name": "GdsDialog",
+          "slots": [
             {
-              "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."
+              "description": "The content of the dialog",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `gap` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties"
+              "description": "The trigger button for the dialog",
+              "name": "trigger"
             },
             {
-              "kind": "field",
-              "name": "'align-items'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `align-items` property.\nSupports all valid CSS `align-items` values.",
-              "category": "Declarative layout / Style expression properties"
+              "description": "The footer of the dialog",
+              "name": "footer"
             },
             {
-              "kind": "field",
-              "name": "'align-content'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `align-content` property.\nSupports all valid CSS `align-content` values.",
-              "category": "Declarative layout / Style expression properties"
-            },
+              "description": "Complete override of the dialog content, including header and footer",
+              "name": "dialog"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "'justify-content'",
+              "name": "styleExpressionBaseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Style Expression Property that controls the `justify-content` property.\nSupports all valid CSS `justify-content` values.",
-              "category": "Declarative layout / Style expression properties"
+              "static": true,
+              "default": "'dialog'",
+              "description": "Style expression properties for this element will use this selector by default.",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "'justify-items'",
+              "name": "open",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `justify-items` property.\nSupports all valid CSS `justify-items` values.",
-              "category": "Declarative layout / Style expression properties"
+              "default": "false",
+              "description": "Whether the dialog is open. The state of the dialog can be controlled either\nby setting this property or by calling the `show()` and `close()` methods.\n\nWhen the state is explicitly changed by setting this prop, the state change cannot\nbe cancelled by events.",
+              "attribute": "open",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "'flex-direction'",
+              "name": "heading",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `flex-direction` property.\nSupports all valid CSS `flex-direction` values.",
-              "category": "Declarative layout / Style expression properties"
+              "description": "The dialog's heading.",
+              "attribute": "heading"
             },
             {
               "kind": "field",
-              "name": "'flex-wrap'",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "'default' | 'slide-out'"
               },
-              "description": "Style Expression Property that controls the `flex-wrap` property.\nSupports all valid CSS `flex-wrap` values.",
-              "category": "Declarative layout / Style expression properties"
+              "default": "'default'",
+              "description": "The dialog's variant.",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "'place-items'",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "'initial' | 'top' | 'bottom' | 'left' | 'right'"
               },
-              "description": "Style Expression Property that controls the `place-items` property.\nSupports all valid CSS `place-items` values.",
-              "category": "Declarative layout / Style expression properties"
+              "default": "'initial'",
+              "description": "The dialog's placement.",
+              "attribute": "placement"
             },
             {
               "kind": "field",
-              "name": "'place-content'",
+              "name": "scrollable",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `place-content` property.\nSupports all valid CSS `place-content` values.",
-              "category": "Declarative layout / Style expression properties"
+              "default": "false",
+              "description": "Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if\nthe content exceeds the dialog's height, which can be controlled using the `height` property.\n\nThis property have no effect if the `dialog` slot is used. In that case, you need to add overflow\nstyles to the content inside the `dialog` slot.",
+              "attribute": "scrollable"
             },
             {
               "kind": "field",
-              "name": "'aspect-ratio'",
+              "name": "closedby",
               "type": {
-                "text": "string | undefined"
+                "text": "'closerequest' | 'none' | 'any'"
               },
-              "description": "Style Expression Property that controls the `aspect-ratio` property.\nSupports all valid CSS `aspect-ratio` values."
+              "default": "'closerequest'",
+              "description": "Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.\n\n- `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).\n  The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations\n  require a user activation in between. This ensures the best mobile UX.\n- `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).\n  A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).\n  Mobile platform close gestures may not work in this mode.\n- `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already\n  handles click-outside via its own mechanism.",
+              "attribute": "closedby",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "cursor",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `cursor` property.\nSupports all valid CSS `cursor` values."
+              "kind": "method",
+              "name": "show",
+              "parameters": [
+                {
+                  "name": "reason",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Opens the dialog.\nThis is a programmatic API that always opens the dialog.\nEvents are dispatched for notification when a reason is provided, but cancellation is not honored."
             },
             {
-              "kind": "field",
-              "name": "'pointer-events'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `pointer-events` property.\nSupports all valid CSS `pointer-events` values."
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "reason",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The reason for closing the dialog."
+                }
+              ],
+              "description": "Closes the dialog.\nThis is a programmatic API that always closes the dialog.\nEvents are dispatched for notification when a reason is provided, but cancellation is not honored."
             },
             {
               "kind": "field",
@@ -14937,45 +14975,6 @@
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "margin",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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": "'margin-inline'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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": "'margin-block'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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",
               "name": "padding",
@@ -15015,149 +15014,6 @@
                 "module": "src/utils/mixins/declarative-layout-mixins.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "'align-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'justify-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'place-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-column'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-row'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-area'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "flex",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "order",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "position",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `position` property.\nSupports all valid CSS `position` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withPositioningProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "transform",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inset",
-              "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"
-              }
-            },
             {
               "kind": "method",
               "name": "define",
@@ -15187,20 +15043,6 @@
                 "module": "src/gds-element.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "styleExpressionBaseSelector",
-              "type": {
-                "text": "string"
-              },
-              "static": true,
-              "default": "':host'",
-              "description": "Style expression properties for this element will use this selector by default.",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "semanticVersion",
@@ -15288,15 +15130,103 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing.",
+              "name": "gds-ui-state"
+            },
+            {
+              "description": "Fired when the dialog is closed",
+              "name": "gds-close"
+            },
+            {
+              "description": "Fired when the dialog is opened",
+              "name": "gds-show"
+            },
+            {
+              "name": "gds-element-disconnected",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            },
+            {
+              "type": {
+                "text": "Event"
+              },
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
           "attributes": [
             {
-              "name": "level",
+              "name": "open",
               "type": {
-                "text": "GdsColorLevel"
+                "text": "boolean"
               },
-              "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"
+              "default": "false",
+              "description": "Whether the dialog is open. The state of the dialog can be controlled either\nby setting this property or by calling the `show()` and `close()` methods.\n\nWhen the state is explicitly changed by setting this prop, the state change cannot\nbe cancelled by events.",
+              "fieldName": "open"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The dialog's heading.",
+              "fieldName": "heading"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'slide-out'"
+              },
+              "default": "'default'",
+              "description": "The dialog's variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "'initial' | 'top' | 'bottom' | 'left' | 'right'"
+              },
+              "default": "'initial'",
+              "description": "The dialog's placement.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if\nthe content exceeds the dialog's height, which can be controlled using the `height` property.\n\nThis property have no effect if the `dialog` slot is used. In that case, you need to add overflow\nstyles to the content inside the `dialog` slot.",
+              "fieldName": "scrollable"
+            },
+            {
+              "name": "closedby",
+              "type": {
+                "text": "'closerequest' | 'none' | 'any'"
+              },
+              "default": "'closerequest'",
+              "description": "Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.\n\n- `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).\n  The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations\n  require a user activation in between. This ensures the best mobile UX.\n- `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).\n  A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).\n  Mobile platform close gestures may not work in this mode.\n- `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already\n  handles click-outside via its own mechanism.",
+              "fieldName": "closedby"
             },
             {
               "name": "gds-element",
@@ -15321,77 +15251,33 @@
               "name": "withSizeYProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
             },
-            {
-              "name": "withMarginProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
-            },
             {
               "name": "withPaddingProps",
               "module": "/src/utils/mixins/declarative-layout-mixins"
-            },
-            {
-              "name": "withLayoutChildProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
-            },
-            {
-              "name": "withPositioningProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
             }
           ],
           "superclass": {
             "name": "GdsElement",
             "module": "/src/gds-element"
           },
-          "tagName": "gds-div",
-          "customElement": true,
-          "events": [
-            {
-              "name": "gds-element-disconnected",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "When the element is disconnected from the DOM",
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "Event"
-              },
-              "inheritedFrom": {
-                "name": "GdsElement",
-                "module": "src/gds-element.ts"
-              }
-            }
-          ]
+          "tagName": "gds-dialog",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDiv",
+          "name": "GdsDialog",
           "declaration": {
-            "name": "GdsDiv",
-            "module": "src/components/div/div.component.ts"
+            "name": "GdsDialog",
+            "module": "src/components/dialog/dialog.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/div/div.stories.ts",
+      "path": "src/components/dialog/dialog.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -15399,8 +15285,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Div', component: 'gds-div', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-div'), }, }",
-          "description": "\n`gds-div` is a base element in the declarative layout system.\n\nDiv accepts all available style expression properties, and is also the base class for `gds-flex`, `gds-grid`, `gds-card` and `gds-text`"
+          "default": "{ title: 'Components/Dialog', component: 'gds-dialog', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-dialog'), }, parameters: { layout: 'centered', }, }",
+          "description": "A dialog appears in front of content to provide critical information or ask for a decision."
         },
         {
           "kind": "variable",
@@ -15408,34 +15294,62 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, args: { background: '01', border: '2xs', 'border-radius': 'm', 'border-color': 'subtle-01', width: '4xl', height: '4xl', }, }"
+          "default": "{ ...DefaultParams, }",
+          "description": "The easiest way to set up a dialog is to put a button in the trigger slot. This will\nautomatically open the dialog when the button is clicked."
         },
         {
           "kind": "variable",
-          "name": "Example",
+          "name": "SlideOut",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html` <!-- This is equivalent to 'gds-flex' --> <gds-div display=\"flex\" gap=\"xl\" justify-content=\"center\" align-items=\"center\" > <!-- Some properties, like 'width' and 'height', accepts either tokens or arbitrary values --> <gds-div width=\"4xl\" height=\"4xl\" background=\"neutral-01\"></gds-div> <!-- All style expressions properties accepts multi-viewport expressions --> <gds-div width=\"4xl; l{ 6xl }\" height=\"4xl; l{ 6xl }\" background=\"neutral-02\" border=\"4xs\" ></gds-div> <!-- Instead of adding 'background' and 'border-radius', take a look at 'gds-card', which provides pre-configured configurations of these properties --> <gds-div width=\"4xl\" height=\"4xl\" background=\"03\" border-radius=\"s\" ></gds-div> </gds-div> `, }",
-          "description": "Here is an example of a simple layout structure using `gds-div`:"
+          "default": "{ ...DefaultParams, args: { ...DefaultParams.args, variant: 'slide-out', }, }",
+          "description": "You can set the `variant` attribute to `slide-out` to make the dialog slide in from the right."
         },
         {
           "kind": "variable",
-          "name": "CardBorder",
+          "name": "Scrollable",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, name: 'Border Style', render: (args) => html`<gds-grid columns=\"5\" gap=\"4xl\"> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"2xs 0 0 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Top </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 2xs 0 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\">Right</gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 0 2xs 0\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Bottom </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border-width=\"0 0 0 2xs\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> Left </gds-flex> </gds-card> <gds-card variant=\"primary\" border-radius=\"0\" border=\"2xs\" border-color=\"strong\" > <gds-flex align-items=\"center\" justify-content=\"center\"> All </gds-flex> </gds-card> </gds-grid>`, }",
-          "description": "Border styling follows the same patterns as CSS and can be controlled using the shorthand properties `border`, `border-width`, `border-style`, `border-color`\n\n- `border-color` defaults to subtle-01\n- `border-width` defaults to 0 (supports all spacing tokens)\n- `border-style` defaults to solid\n\nTo add a 1px primary border around the element:\n\n```html\n<gds-div border=\"4xs\"></gds-div>\n```\n\nTo only add border bottom:\n\n```html\n<gds-div border-width=\"0 0 4xs 0\"></gds-div>\n```\n\nTo add a 1px secodary color border on the bottom:\n\n```html\n<gds-div border-width=\"0 0 4xs 0\" border-color=\"subtle-01\"></gds-div>\n```"
+          "default": "{ ...DefaultParams, args: { ...DefaultParams.args, height: '400px', scrollable: true, }, }",
+          "description": "To enable scroll for overflowing content, you can set the `scrollable` property to `true`.\n\nThis only has an effect of the default content slot."
         },
         {
           "kind": "variable",
-          "name": "BorderRadius",
+          "name": "CustomButtons",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, args: { background: 'neutral-02', border: '2xs', 'border-radius': 'm', 'border-color': 'strong', width: '8xl', height: '4xl', }, }",
-          "description": "\nValues are mapped directly from our radius tokens to maintain proportional scaling. <br />\nView all available radius tokens and their values in Green Studio:\nhttps://seb.io/studio/radius\n\n\n##### Single value\n```html\n<gds-div border-radius=\"m\">...</gds-div>\n```\n\n##### Multiple corners / (top-left, top-right, bottom-right, bottom-left)\n```html\n<gds-div border-radius=\"s m l xl\">...</gds-div>\n```"
+          "default": "{ ...DefaultParams, render: () => html`<gds-button aria-haspopup=\"dialog\" onclick=\"document.getElementById('my-dialog').show()\" >Open dialog</gds-button > <gds-dialog heading=\"Dialog heading\" id=\"my-dialog\"> This is the content of the dialog. <gds-button slot=\"footer\" onclick=\"document.getElementById('my-dialog').close('custom close')\" >Custom close button</gds-button > </gds-dialog>`, }",
+          "description": "You can also open and close the dialog programmatically by calling the `show()` and `close()` methods.\nIn this case you should add `aria-haspopup=\"dialog\"` to the trigger element. Slotted triggers will get\nthis attribute automatically.\n\nInside the dialog, you can use the `slot=\"footer\"` to add buttons to the footer of the dialog."
+        },
+        {
+          "kind": "variable",
+          "name": "Events",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-dialog @gds-close=${console.log} @gds-show=${console.log} @gds-ui-state=${console.log} heading=\"Dialog heading\" id=\"my-dialog-events\" > <gds-button slot=\"trigger\">Open dialog</gds-button> This is the content of the dialog. <gds-button rank=\"secondary\" slot=\"footer\">Custom btn</gds-button> <gds-button slot=\"footer\" onclick=\"document.getElementById('my-dialog-events').close('custom close')\" >Custom btn 2</gds-button > </gds-dialog>`, }",
+          "description": "You can listen to the `gds-show`, `gds-close` and `gds-ui-state` events to know when the dialog is opened or closed.\n\nWhen `close()` or `show()` is called without a parameter, the event will not be emitted. If a parameter is passed, the\nevent will be emitted with the parameter as the event detail. Also when any of the built-in methods are used to open or\nclose the dialog, the event will be emitted with the parameter as the event detail.\n\nAll the emitted events will have a `detail` object with a reason property that can be used to determine the reason for the event.\n\nPossible reasons are:\n- `btn-close`: The dialog was closed by the user clicking the close button.\n- `btn-cancel`: The dialog was closed by the user clicking the default cancel button.\n- `btn-ok`: The dialog was closed by the user clicking the default OK button.\n- `native-close`: The dialog was closed by the user pressing the Escape key.\n- `click-outside`: The dialog was closed by the user clicking outside the dialog.\n- `slotted-trigger`: The dialog was opened by the user clicking the slotted trigger button.\n\nThe reason can also be a custom string supplied when calling the `close()` or `show()` methods.\n\n### Preventing close\nThe `gds-ui-state` event can be cancelled by calling `preventDefault()` on the event to prevent the dialog from closing.\nWhen using built-in triggers (buttons, Escape, click outside, trigger slot), cancelling `gds-ui-state` fully prevents the action.\nWhen calling `close()` or `show()` programmatically, events are dispatched for notification but cancellation does not prevent the state change."
+        },
+        {
+          "kind": "variable",
+          "name": "CustomDialog",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-dialog @gds-close=${console.log} @gds-show=${console.log} @gds-ui-state=${console.log} heading=\"Dialog heading\" id=\"my-dialog-events\" > <gds-button slot=\"trigger\">Open dialog</gds-button> This is the content of the dialog. <div slot=\"dialog\"> If you put stuff here, you can customize the entire dialog, including header and footer. </div> </gds-dialog>`, }",
+          "description": "You can customize the dialog completely by putting content in the `dialog` slot.\nThis will replace the default content of the dialog, including the header and footer.\n\nWhen this slot is used, the footer slot will not be rendered, so you need to add a custom footer manually.\n\n**Important:** Make sure to still use the `heading` property, as it is used to give the dialog an accessible name."
+        },
+        {
+          "kind": "variable",
+          "name": "CancelableClose",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, render: () => html`<gds-dialog heading=\"Terms and conditions\" id=\"my-dialog-cancel\" closedby=\"none\" @gds-ui-state=${(e: Event) => { const detail = (e as CustomEvent).detail // Only gate close attempts, not open if (detail.open) { const checkbox = document .getElementById('my-dialog-cancel') ?.querySelector('#agree-checkbox') as HTMLInputElement | null if (!checkbox?.checked) { e.preventDefault() } } }} > <gds-button slot=\"trigger\">Open dialog</gds-button> <gds-rich-text> <p> You must agree to the terms before closing this dialog. Try pressing Escape, clicking outside, or using the close button — the dialog will stay open until the checkbox is checked. </p> </gds-rich-text> <label style=\"display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; cursor: pointer;\" > <input type=\"checkbox\" id=\"agree-checkbox\" /> I agree to the terms and conditions </label> </gds-dialog>`, }",
+          "description": "You can prevent the dialog from closing by cancelling the `gds-ui-state` event.\n\nIn this example, the dialog contains a checkbox that must be checked before the dialog can be closed.\nAny built-in close trigger (close button, Escape, click outside) is blocked until the condition is met.\n\nNote the use of `closedby=\"none\"` — this disables the browser's native close request handling (including\nthe anti-abuse mechanism that would force-close the dialog on repeated Escape presses). With `closedby=\"none\"`,\nthe component adds its own Escape key listener so desktop users can still close via keyboard, and cancellation\nis always honored. Mobile platform close gestures (e.g. iOS swipe) will not work in this mode."
         }
       ],
       "exports": [
@@ -15444,7 +15358,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/div/div.stories.ts"
+            "module": "src/components/dialog/dialog.stories.ts"
           }
         },
         {
@@ -15452,43 +15366,67 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/div/div.stories.ts"
+            "module": "src/components/dialog/dialog.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Example",
+          "name": "SlideOut",
           "declaration": {
-            "name": "Example",
-            "module": "src/components/div/div.stories.ts"
+            "name": "SlideOut",
+            "module": "src/components/dialog/dialog.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CardBorder",
+          "name": "Scrollable",
           "declaration": {
-            "name": "CardBorder",
-            "module": "src/components/div/div.stories.ts"
+            "name": "Scrollable",
+            "module": "src/components/dialog/dialog.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "BorderRadius",
+          "name": "CustomButtons",
           "declaration": {
-            "name": "BorderRadius",
-            "module": "src/components/div/div.stories.ts"
+            "name": "CustomButtons",
+            "module": "src/components/dialog/dialog.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Events",
+          "declaration": {
+            "name": "Events",
+            "module": "src/components/dialog/dialog.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CustomDialog",
+          "declaration": {
+            "name": "CustomDialog",
+            "module": "src/components/dialog/dialog.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CancelableClose",
+          "declaration": {
+            "name": "CancelableClose",
+            "module": "src/components/dialog/dialog.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/div/div.styles.ts",
+      "path": "src/components/dialog/dialog.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` :host { display: block; box-sizing: border-box; border-style: solid; border-width: 0; border-color: var(--gds-sys-color-border-subtle-01); } `"
+          "default": "css` @layer base, reset, transitional-styles; @layer base { :host { display: contents; --_margin: var(--gds-sys-space-l); } dialog { transition: transform var(--gds-sys-motion-duration-fast) cubic-bezier(var(--gds-sys-motion-easing-ease-out)); background: transparent; padding: 0; border-width: 0; overflow: visible; max-width: calc(100vw - var(--_margin)); max-height: 100vh; display: flex; width: 400px; @starting-style { opacity: 0; transform: translateY(-16px); &::backdrop { opacity: 0; } } &::backdrop { transition: all var(--gds-sys-motion-duration-fast) cubic-bezier(var(--gds-sys-motion-easing-ease-out)); background: rgba(100, 100, 100, 0.4); } } dialog > * { flex-grow: 1; } dialog.default.placement-initial { margin: auto; --_margin: 0px; } dialog.default.placement-top { margin: var(--gds-sys-space-l) auto auto; } dialog.default.placement-bottom { margin: auto auto var(--gds-sys-space-l) auto; } dialog.default.placement-left { margin: auto var(--gds-sys-space-l) auto auto; } dialog.default.placement-right { margin: auto auto auto var(--gds-sys-space-l); } dialog.slide-out { --_in: var(--gds-sys-space-m); --_margin: var(--gds-sys-space-l); height: auto; &.placement-initial, &.placement-right { inset: var(--_in); @media (min-width: 648px) { --_in: var(--gds-sys-space-l); inset: var(--_in) var(--_in) var(--_in) auto; } @starting-style { transform: translateX(var(--gds-sys-space-6xl)); } } &.placement-left { @starting-style { transform: translateX(calc(-1 * var(--gds-sys-space-6xl))); } inset: var(--_in); @media (min-width: 648px) { --_in: var(--gds-sys-space-l); inset: var(--_in) auto var(--_in) var(--_in); } } &.placement-top { @starting-style { transform: translateY(calc(-1 * var(--gds-sys-space-6xl))); } inset: var(--_in) var(--_in) auto var(--_in); } &.placement-bottom { @starting-style { transform: translateY(calc(var(--gds-sys-space-6xl))); } inset: auto var(--_in) var(--_in) var(--_in); } } dialog:focus { outline: none; } .card { flex-direction: column; } slot[name='footer'] > *, slot[name='footer']::slotted(*) { flex: 1; } h2 { margin: 0; padding: 0; font: var(--gds-sys-text-heading-s); margin-block-start: var(--gds-sys-space-4xs); } } `"
         }
       ],
       "exports": [
@@ -15497,29 +15435,29 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/div/div.styles.ts"
+            "module": "src/components/dialog/dialog.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/div/div.ts",
+      "path": "src/components/dialog/dialog.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDiv",
+          "name": "GdsDialog",
           "declaration": {
-            "name": "GdsDiv",
-            "module": "src/components/div/div.ts"
+            "name": "GdsDialog",
+            "module": "src/components/dialog/dialog.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/div/index.ts",
+      "path": "src/components/dialog/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -15527,7 +15465,69 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/div/div"
+            "module": "src/components/dialog/dialog"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dialog/scroll-lock.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerGlobalScrollLockStyles"
+        },
+        {
+          "kind": "function",
+          "name": "lockBodyScrolling",
+          "parameters": [
+            {
+              "name": "lockingEl",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\nwithout premature unlocking."
+        },
+        {
+          "kind": "function",
+          "name": "unlockBodyScrolling",
+          "parameters": [
+            {
+              "name": "lockingEl",
+              "type": {
+                "text": "HTMLElement"
+              }
+            }
+          ],
+          "description": "Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerGlobalScrollLockStyles",
+          "declaration": {
+            "name": "registerGlobalScrollLockStyles",
+            "module": "src/components/dialog/scroll-lock.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "lockBodyScrolling",
+          "declaration": {
+            "name": "lockBodyScrolling",
+            "module": "src/components/dialog/scroll-lock.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "unlockBodyScrolling",
+          "declaration": {
+            "name": "unlockBodyScrolling",
+            "module": "src/components/dialog/scroll-lock.ts"
           }
         }
       ]
@@ -28730,7 +28730,7 @@
         {
           "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 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; } @media (max-width: 576px) { font: var(--gds-sys-text-detail-book-xs); --_padding-inline: var(--gds-sys-space-xs); } } a { text-decoration: none; } } :disabled { border-color: var(--_color-bg); color: var(--gds-sys-color-content-disabled-01); pointer-events: none; } @layer a11y { @media (prefers-reduced-motion: reduce) { .button { transition: none; } } } `"
         }
       ],
       "exports": [
@@ -40554,14 +40554,6 @@
             "module": "src/generated/react/formatted-number/index.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/generated/react/radio-group/index.js"
-          }
-        },
         {
           "kind": "js",
           "name": "*",
@@ -43274,6 +43266,14 @@
             "module": "src/generated/react/icons/icon-zoom-out/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/generated/react/radio-group/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -232341,7 +232341,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/account/index.ts",
+      "path": "src/components/sensitive/date/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -232349,19 +232349,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/account/sensitive-account"
+            "module": "src/components/sensitive/date/sensitive-date"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/account/sensitive-account.component.ts",
+      "path": "src/components/sensitive/date/sensitive-date.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveAccount",
+          "name": "GdsSensitiveDate",
           "members": [
             {
               "kind": "field",
@@ -232370,20 +232370,46 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive account.",
+              "description": "When true, hides the sensitive date.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "account",
+              "name": "value",
               "type": {
-                "text": "number | string | undefined"
+                "text": "Date | string | undefined"
               },
-              "description": "The account number or identifier to display.\nFor format 'seb-account', it needs to be 11 characters.",
-              "attribute": "account",
+              "description": "The date value to be formatted, either Date or ISO string.",
               "inheritedFrom": {
-                "name": "GdsFormattedAccount",
-                "module": "src/components/formatted-text/account/formatted-account.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "format",
+              "type": {
+                "text": "DateTimeFormat"
+              },
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "attribute": "format",
+              "inheritedFrom": {
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The locale used for date formatting.",
+              "attribute": "locale",
+              "inheritedFrom": {
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -233373,32 +233399,32 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive account.",
+              "description": "When true, hides the sensitive date.",
               "fieldName": "hide"
             },
             {
-              "name": "account",
+              "name": "format",
               "type": {
-                "text": "number | string | undefined"
+                "text": "DateTimeFormat"
               },
-              "description": "The account number or identifier to display.\nFor format 'seb-account', it needs to be 11 characters.",
-              "fieldName": "account",
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "fieldName": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedAccount",
-                "module": "src/components/formatted-text/account/formatted-account.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
-              "name": "format",
+              "name": "locale",
               "type": {
-                "text": "AccountFormats"
+                "text": "string | undefined"
               },
-              "default": "'seb-account'",
-              "description": "Specifies the account format.",
-              "fieldName": "format",
+              "description": "The locale used for date formatting.",
+              "fieldName": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedAccount",
-                "module": "src/components/formatted-text/account/formatted-account.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -233442,10 +233468,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedAccount",
-            "module": "/src/components/formatted-text/account/formatted-account.component"
+            "name": "GdsFormattedDate",
+            "module": "/src/components/formatted-text/date/formatted-date.component"
           },
-          "tagName": "gds-sensitive-account",
+          "tagName": "gds-sensitive-date",
           "customElement": true,
           "events": [
             {
@@ -233484,17 +233510,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveAccount",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveAccount",
-            "module": "src/components/sensitive/account/sensitive-account.component.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/account/sensitive-account.stories.ts",
+      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -233502,8 +233528,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Account', component: 'gds-sensitive-account', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-account'), format: { control: { type: 'select' }, options: Object.keys(accountsFormats), }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/account)\n\nGdsSensitiveAccount displays a formatted account and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -233511,7 +233537,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-account .hide=${args.hide} .account=${args.account} ></gds-sensitive-account>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
         }
       ],
       "exports": [
@@ -233520,7 +233546,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/account/sensitive-account.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         },
         {
@@ -233528,29 +233554,29 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/account/sensitive-account.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/account/sensitive-account.ts",
+      "path": "src/components/sensitive/date/sensitive-date.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveAccount",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveAccount",
-            "module": "src/components/sensitive/account/sensitive-account.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/index.ts",
+      "path": "src/components/sensitive/account/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -233558,19 +233584,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/date/sensitive-date"
+            "module": "src/components/sensitive/account/sensitive-account"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.component.ts",
+      "path": "src/components/sensitive/account/sensitive-account.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveAccount",
           "members": [
             {
               "kind": "field",
@@ -233579,46 +233605,20 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive account.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "Date | string | undefined"
-              },
-              "description": "The date value to be formatted, either Date or ISO string.",
-              "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "DateTimeFormat"
-              },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "attribute": "format",
-              "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "locale",
+              "name": "account",
               "type": {
-                "text": "string | undefined"
+                "text": "number | string | undefined"
               },
-              "description": "The locale used for date formatting.",
-              "attribute": "locale",
+              "description": "The account number or identifier to display.\nFor format 'seb-account', it needs to be 11 characters.",
+              "attribute": "account",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedAccount",
+                "module": "src/components/formatted-text/account/formatted-account.component.ts"
               }
             },
             {
@@ -234608,32 +234608,32 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive account.",
               "fieldName": "hide"
             },
             {
-              "name": "format",
+              "name": "account",
               "type": {
-                "text": "DateTimeFormat"
+                "text": "number | string | undefined"
               },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "fieldName": "format",
+              "description": "The account number or identifier to display.\nFor format 'seb-account', it needs to be 11 characters.",
+              "fieldName": "account",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedAccount",
+                "module": "src/components/formatted-text/account/formatted-account.component.ts"
               }
             },
             {
-              "name": "locale",
+              "name": "format",
               "type": {
-                "text": "string | undefined"
+                "text": "AccountFormats"
               },
-              "description": "The locale used for date formatting.",
-              "fieldName": "locale",
+              "default": "'seb-account'",
+              "description": "Specifies the account format.",
+              "fieldName": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedAccount",
+                "module": "src/components/formatted-text/account/formatted-account.component.ts"
               }
             },
             {
@@ -234677,10 +234677,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedDate",
-            "module": "/src/components/formatted-text/date/formatted-date.component"
+            "name": "GdsFormattedAccount",
+            "module": "/src/components/formatted-text/account/formatted-account.component"
           },
-          "tagName": "gds-sensitive-date",
+          "tagName": "gds-sensitive-account",
           "customElement": true,
           "events": [
             {
@@ -234719,17 +234719,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveAccount",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.component.ts"
+            "name": "GdsSensitiveAccount",
+            "module": "src/components/sensitive/account/sensitive-account.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
+      "path": "src/components/sensitive/account/sensitive-account.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -234737,8 +234737,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Account', component: 'gds-sensitive-account', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-account'), format: { control: { type: 'select' }, options: Object.keys(accountsFormats), }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/account)\n\nGdsSensitiveAccount displays a formatted account and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -234746,7 +234746,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-account .hide=${args.hide} .account=${args.account} ></gds-sensitive-account>`, }"
         }
       ],
       "exports": [
@@ -234755,7 +234755,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/account/sensitive-account.stories.ts"
           }
         },
         {
@@ -234763,22 +234763,22 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/account/sensitive-account.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.ts",
+      "path": "src/components/sensitive/account/sensitive-account.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveAccount",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.ts"
+            "name": "GdsSensitiveAccount",
+            "module": "src/components/sensitive/account/sensitive-account.ts"
           }
         }
       ]
@@ -238570,16 +238570,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-at/index.ts",
+      "path": "src/generated/react/icons/icon-asterisk/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconAt",
+          "name": "IconAsterisk",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAtClass>>\n  > & { ref?: React.Ref<IconAtClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAsteriskClass>>\n  > & { ref?: React.Ref<IconAsteriskClass> }"
               }
             }
           ]
@@ -238588,26 +238588,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconAt",
+          "name": "IconAsterisk",
           "declaration": {
-            "name": "IconAt",
-            "module": "src/generated/react/icons/icon-at/index.ts"
+            "name": "IconAsterisk",
+            "module": "src/generated/react/icons/icon-asterisk/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-asterisk/index.ts",
+      "path": "src/generated/react/icons/icon-at/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconAsterisk",
+          "name": "IconAt",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAsteriskClass>>\n  > & { ref?: React.Ref<IconAsteriskClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconAtClass>>\n  > & { ref?: React.Ref<IconAtClass> }"
               }
             }
           ]
@@ -238616,10 +238616,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconAsterisk",
+          "name": "IconAt",
           "declaration": {
-            "name": "IconAsterisk",
-            "module": "src/generated/react/icons/icon-asterisk/index.ts"
+            "name": "IconAt",
+            "module": "src/generated/react/icons/icon-at/index.ts"
           }
         }
       ]
@@ -239466,16 +239466,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-linkedin/index.ts",
+      "path": "src/generated/react/icons/icon-brand-play-store/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandLinkedin",
+          "name": "IconBrandPlayStore",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandLinkedinClass>>\n  > & { ref?: React.Ref<IconBrandLinkedinClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandPlayStoreClass>>\n  > & { ref?: React.Ref<IconBrandPlayStoreClass> }"
               }
             }
           ]
@@ -239484,26 +239484,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandLinkedin",
+          "name": "IconBrandPlayStore",
           "declaration": {
-            "name": "IconBrandLinkedin",
-            "module": "src/generated/react/icons/icon-brand-linkedin/index.ts"
+            "name": "IconBrandPlayStore",
+            "module": "src/generated/react/icons/icon-brand-play-store/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-play-store/index.ts",
+      "path": "src/generated/react/icons/icon-brand-linkedin/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandPlayStore",
+          "name": "IconBrandLinkedin",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandPlayStoreClass>>\n  > & { ref?: React.Ref<IconBrandPlayStoreClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandLinkedinClass>>\n  > & { ref?: React.Ref<IconBrandLinkedinClass> }"
               }
             }
           ]
@@ -239512,10 +239512,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandPlayStore",
+          "name": "IconBrandLinkedin",
           "declaration": {
-            "name": "IconBrandPlayStore",
-            "module": "src/generated/react/icons/icon-brand-play-store/index.ts"
+            "name": "IconBrandLinkedin",
+            "module": "src/generated/react/icons/icon-brand-linkedin/index.ts"
           }
         }
       ]
@@ -241202,16 +241202,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-code/index.ts",
+      "path": "src/generated/react/icons/icon-code-brackets/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCode",
+          "name": "IconCodeBrackets",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeClass>>\n  > & { ref?: React.Ref<IconCodeClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeBracketsClass>>\n  > & { ref?: React.Ref<IconCodeBracketsClass> }"
               }
             }
           ]
@@ -241220,26 +241220,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCode",
+          "name": "IconCodeBrackets",
           "declaration": {
-            "name": "IconCode",
-            "module": "src/generated/react/icons/icon-code/index.ts"
+            "name": "IconCodeBrackets",
+            "module": "src/generated/react/icons/icon-code-brackets/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-code-brackets/index.ts",
+      "path": "src/generated/react/icons/icon-code/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconCodeBrackets",
+          "name": "IconCode",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeBracketsClass>>\n  > & { ref?: React.Ref<IconCodeBracketsClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconCodeClass>>\n  > & { ref?: React.Ref<IconCodeClass> }"
               }
             }
           ]
@@ -241248,10 +241248,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconCodeBrackets",
+          "name": "IconCode",
           "declaration": {
-            "name": "IconCodeBrackets",
-            "module": "src/generated/react/icons/icon-code-brackets/index.ts"
+            "name": "IconCode",
+            "module": "src/generated/react/icons/icon-code/index.ts"
           }
         }
       ]
@@ -243246,16 +243246,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-lightning/index.ts",
+      "path": "src/generated/react/icons/icon-line-chart-four/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconLightning",
+          "name": "IconLineChartFour",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconLightningClass>>\n  > & { ref?: React.Ref<IconLightningClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconLineChartFourClass>>\n  > & { ref?: React.Ref<IconLineChartFourClass> }"
               }
             }
           ]
@@ -243264,26 +243264,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconLightning",
+          "name": "IconLineChartFour",
           "declaration": {
-            "name": "IconLightning",
-            "module": "src/generated/react/icons/icon-lightning/index.ts"
+            "name": "IconLineChartFour",
+            "module": "src/generated/react/icons/icon-line-chart-four/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-line-chart-four/index.ts",
+      "path": "src/generated/react/icons/icon-lightning/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconLineChartFour",
+          "name": "IconLightning",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconLineChartFourClass>>\n  > & { ref?: React.Ref<IconLineChartFourClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconLightningClass>>\n  > & { ref?: React.Ref<IconLightningClass> }"
               }
             }
           ]
@@ -243292,10 +243292,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconLineChartFour",
+          "name": "IconLightning",
           "declaration": {
-            "name": "IconLineChartFour",
-            "module": "src/generated/react/icons/icon-line-chart-four/index.ts"
+            "name": "IconLightning",
+            "module": "src/generated/react/icons/icon-lightning/index.ts"
           }
         }
       ]
@@ -244030,16 +244030,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pencel-line/index.ts",
+      "path": "src/generated/react/icons/icon-pdf/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPencelLine",
+          "name": "IconPdf",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencelLineClass>>\n  > & { ref?: React.Ref<IconPencelLineClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPdfClass>>\n  > & { ref?: React.Ref<IconPdfClass> }"
               }
             }
           ]
@@ -244048,26 +244048,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPencelLine",
+          "name": "IconPdf",
           "declaration": {
-            "name": "IconPencelLine",
-            "module": "src/generated/react/icons/icon-pencel-line/index.ts"
+            "name": "IconPdf",
+            "module": "src/generated/react/icons/icon-pdf/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pdf/index.ts",
+      "path": "src/generated/react/icons/icon-pencel-line/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPdf",
+          "name": "IconPencelLine",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPdfClass>>\n  > & { ref?: React.Ref<IconPdfClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencelLineClass>>\n  > & { ref?: React.Ref<IconPencelLineClass> }"
               }
             }
           ]
@@ -244076,10 +244076,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPdf",
+          "name": "IconPencelLine",
           "declaration": {
-            "name": "IconPdf",
-            "module": "src/generated/react/icons/icon-pdf/index.ts"
+            "name": "IconPencelLine",
+            "module": "src/generated/react/icons/icon-pencel-line/index.ts"
           }
         }
       ]
@@ -246550,16 +246550,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-todos/index.ts",
+      "path": "src/generated/react/icons/icon-ticket/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconTodos",
+          "name": "IconTicket",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconTodosClass>>\n  > & { ref?: React.Ref<IconTodosClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconTicketClass>>\n  > & { ref?: React.Ref<IconTicketClass> }"
               }
             }
           ]
@@ -246568,26 +246568,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconTodos",
+          "name": "IconTicket",
           "declaration": {
-            "name": "IconTodos",
-            "module": "src/generated/react/icons/icon-todos/index.ts"
+            "name": "IconTicket",
+            "module": "src/generated/react/icons/icon-ticket/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-ticket/index.ts",
+      "path": "src/generated/react/icons/icon-todos/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconTicket",
+          "name": "IconTodos",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconTicketClass>>\n  > & { ref?: React.Ref<IconTicketClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconTodosClass>>\n  > & { ref?: React.Ref<IconTodosClass> }"
               }
             }
           ]
@@ -246596,10 +246596,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconTicket",
+          "name": "IconTodos",
           "declaration": {
-            "name": "IconTicket",
-            "module": "src/generated/react/icons/icon-ticket/index.ts"
+            "name": "IconTodos",
+            "module": "src/generated/react/icons/icon-todos/index.ts"
           }
         }
       ]