@sebgroup/green-core 2.20.0-rc.20251215154321804 → 2.20.0

package/custom-elements.json

@@ -27414,107 +27414,23 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/radio/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/radio/radio"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/radio/radio-group/radio-group"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/radio/radio.component.ts",
+      "path": "src/components/popover/backdrop.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsRadio",
+          "name": "GdsBackdrop",
           "members": [
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label displayed next to the radio button.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "supportingText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The supporting text displayed below the label.\nThis text provides additional context or information to the user.",
-              "attribute": "supporting-text"
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value of the radio button.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the radio button is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "show",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the radio button is disabled or not.",
-              "attribute": "disabled",
+              "attribute": "show",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "invalid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the radio button is invalid or not.",
-              "attribute": "invalid"
-            },
-            {
-              "kind": "field",
-              "name": "errorMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The accessible error message text for the radio button.\n\nThis text is not visually rendered, but will be announced by\nscreen readers when the radio button is in an invalid state.",
-              "attribute": "errorMessage"
-            },
             {
               "kind": "method",
               "name": "define",
@@ -27645,11 +27561,36 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "description": "Dispatched when the radio button is checked.",
-              "name": "input"
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "show"
             },
+            {
+              "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"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-backdrop",
+          "customElement": true,
+          "events": [
             {
               "name": "gds-element-disconnected",
               "type": {
@@ -27680,502 +27621,236 @@
                 "module": "src/gds-element.ts"
               }
             }
-          ],
-          "attributes": [
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBackdrop",
+          "declaration": {
+            "name": "GdsBackdrop",
+            "module": "src/components/popover/backdrop.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/popover/backdrop.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GdsBackdrop",
+          "declaration": {
+            "name": "GdsBackdrop",
+            "module": "src/components/popover/backdrop.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/popover/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/popover/popover"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/popover/backdrop"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/popover/popover.component.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "applyTriggerAriaAttributes",
+          "parameters": [
             {
-              "name": "label",
+              "name": "trigger",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label displayed next to the radio button.",
-              "fieldName": "label"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "supporting-text",
+              "name": "open",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The supporting text displayed below the label.\nThis text provides additional context or information to the user.",
-              "fieldName": "supportingText"
+                "text": "boolean"
+              }
             },
             {
-              "name": "value",
+              "name": "popupRole",
               "type": {
                 "text": "string"
-              },
-              "default": "''",
-              "description": "The value of the radio button.",
-              "fieldName": "value"
+              }
+            }
+          ],
+          "description": "Apply the necessary ARIA attributes to a popover trigger element. Use this to apply correct\nattributes in advance if you render `<gds-popover>` conditionally, since the popover component\nonly applies these attributes when it initializes."
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "GdsPopover",
+          "slots": [
+            {
+              "description": "Content of the popover",
+              "name": ""
             },
             {
-              "name": "checked",
+              "description": "Trigger element for the popover. If this slot is occupied, the popover will listen to keydown and click events on the trigger and automtaiclly open when clicked or when the trigger is focused and `ArrowDown` is pressed.",
+              "name": "trigger"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "DefaultMiddleware",
               "type": {
-                "text": "boolean"
+                "text": "Middleware[]"
               },
-              "default": "false",
-              "description": "Whether the radio button is checked or not.",
-              "fieldName": "checked"
+              "static": true,
+              "default": "[ offset(8), shift({ crossAxis: true, padding: 8, }), ]",
+              "description": "The default set of middleware for Floating UI positioning used by GdsPopover."
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "open",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the radio button is disabled or not.",
-              "fieldName": "disabled"
+              "description": "Whether the popover is open.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "invalid",
+              "kind": "field",
+              "name": "popupRole",
               "type": {
-                "text": "boolean"
+                "text": "'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'"
               },
-              "default": "false",
-              "description": "Whether the radio button is invalid or not.",
-              "fieldName": "invalid"
-            },
-            {
-              "name": "errorMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The accessible error message text for the radio button.\n\nThis text is not visually rendered, but will be announced by\nscreen readers when the radio button is in an invalid state.",
-              "fieldName": "errorMessage"
+              "default": "'dialog'",
+              "description": "This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element.\nRead here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup",
+              "attribute": "popup-role"
             },
-            {
-              "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"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-radio",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsRadio",
-          "declaration": {
-            "name": "GdsRadio",
-            "module": "src/components/radio/radio.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/radio/radio.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Radio', component: 'gds-radio-group', subcomponents: { GdsRadio: 'gds-radio' }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-radio-group'), }, }",
-          "description": "A radio button is a form element that allows users to select one of the predefined set of choices.<br/>\nThey are grouped using a radio group component which manages selection, keyboard navigation, and validation.\n\nGroups support vertical and horizontal layouts, and can be sized to fit different space requirements."
-        },
-        {
-          "kind": "variable",
-          "name": "RadioButton",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Radio', args: { label: 'Pick an option', supportingText: 'Label support text.', innerHTML: ` <gds-radio label=\"Radio Option 1\" supporting-text=\"Supporting text\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Option 2\" supporting-text=\"Supporting text\" value=\"2\"></gds-radio> <gds-radio label=\"Radio Option 3\" supporting-text=\"Supporting text\" value=\"3\"></gds-radio>`, }, }",
-          "description": "Radio buttons allow users to select a single option from a list of two or more mutually exclusive options.<br />\nEach radio button must have both a label and a value.\n\nUsage:\n\n```html\n<gds-radio-group label=\"Select an option\">\n  <gds-radio label=\"Option 1\" value=\"1\"></gds-radio>\n  <gds-radio label=\"Option 2\" value=\"2\"></gds-radio>\n</gds-radio-group>\n```\n\nInteractive example with supporting texts:"
-        },
-        {
-          "kind": "variable",
-          "name": "Validation",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Validation', render: () => html` <form method=\"dialog\"> <gds-flex flex-direction=\"column\" align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" show-extended-supporting-text .validator=${{ validate: (el: GdsRadioGroup) => { if (!el.value) return [ { ...el.validity, valid: false, customError: true }, 'This is required', ] }, }} > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> <gds-button type=\"submit\">Submit</gds-button> </gds-flex> </form> `, }",
-          "description": "Radio groups support validation using Green Core's [form validation API](/docs/components-form-validation-documentation--docs).\n\nThe error message appears below the radio group, and can be set either trough a validator, or explicctly using the using the `error-message` attribute.\n\nIf you click on 'submit' first on the example below it will validate the radio group and show the error message."
-        },
-        {
-          "kind": "variable",
-          "name": "DosAndDonts",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: \"Do's and don'ts\", render: () => html` <gds-flex gap=\"xl\"> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"positive\" > <gds-icon-circle-check></gds-icon-circle-check> <gds-text tag=\"small\">Do provide both Label and Value</gds-text> </gds-card> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio label=\"Radio Label\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\"></gds-radio> </gds-radio-group> </gds-card> </gds-flex> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"negative\" > <gds-icon-cross-small></gds-icon-cross-small> <gds-text tag=\"small\">Never exclude the label</gds-text> </gds-card> <form method=\"dialog\"> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio value=\"1\"></gds-radio> <gds-radio value=\"2\"></gds-radio> </gds-radio-group> </gds-card> </form> </gds-flex> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"negative\" > <gds-icon-cross-small></gds-icon-cross-small> <gds-text tag=\"small\">Never exclude the value </gds-text> </gds-card> <form method=\"dialog\"> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio label=\"Radio Label\"></gds-radio> <gds-radio label=\"Radio Label\"></gds-radio> </gds-radio-group> </gds-card> </form> </gds-flex> </gds-flex> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Disabled",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Disabled', render: () => html` <div class=\"radio-group\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" show-extended-supporting-text value=\"4\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" disabled supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" disabled supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </div> `, }",
-          "description": "Disabled radio buttons cannot be interacted with and appear visually muted.\n\nIn general, this state should never be used. Instead, aim to explain to the user why the choice is wrong in an error message and make sure they understand how to correct it."
-        },
-        {
-          "kind": "variable",
-          "name": "Size",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Size', render: () => html` <div class=\"radio-group\"> <gds-flex gap=\"xl\" margin=\"0 auto\"> <gds-flex gap=\"s\" flex-direction=\"column\" flex=\"1\"> <gds-text tag=\"small\">Size: Large(default)</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> <gds-flex gap=\"s\" flex-direction=\"column\" flex=\"1\"> <gds-text tag=\"small\">Size: small</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" size=\"small\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> </gds-flex> </div> `, }",
-          "description": "Radio buttons support two sizes:\n- Large (default): Standard size for most use cases\n- Small: Compact size for space-constrained layouts\n\nThe size can be set on the radio group and applies to all radio buttons within."
-        },
-        {
-          "kind": "variable",
-          "name": "Direction",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Direction', render: () => html` <div class=\"radio-group\"> <gds-flex gap=\"xl\" margin=\"0 auto\"> <gds-flex gap=\"s\" flex-direction=\"column\"> <gds-text tag=\"small\">Column (default)</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" show-extended-supporting-text > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"3\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"4\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> <gds-flex gap=\"s\" flex=\"1\" flex-direction=\"column\"> <gds-text tag=\"small\">Row</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" size=\"small\" direction=\"row\" show-extended-supporting-text > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"3\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"4\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"5\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"6\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> </gds-flex> </div> `, }",
-          "description": "Radio buttons can be arranged in two directions:\n- Column (default): Vertical stacking for clear separation\n- Row: Horizontal alignment for compact layouts that will break to new line when not enough space is available\n\nChoose the direction based on available space and number of options."
-        },
-        {
-          "kind": "variable",
-          "name": "GroupLabel",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Radio group label', render: () => html` <div class=\"radio-group\"> <gds-radio-group> <gds-radio label=\"Radio Label\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\"></gds-radio> </gds-radio-group> </div> `, }",
-          "description": "While radio groups can be created without a label, it's recommended to always provide one for clarity and accessibility.\nThe label helps users understand what the options are for.\n\nIn certain cases when space is limited, the group label can be omitted."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "RadioButton",
-          "declaration": {
-            "name": "RadioButton",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Validation",
-          "declaration": {
-            "name": "Validation",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DosAndDonts",
-          "declaration": {
-            "name": "DosAndDonts",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Disabled",
-          "declaration": {
-            "name": "Disabled",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Size",
-          "declaration": {
-            "name": "Size",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Direction",
-          "declaration": {
-            "name": "Direction",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GroupLabel",
-          "declaration": {
-            "name": "GroupLabel",
-            "module": "src/components/radio/radio.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/radio/radio.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "style",
-          "default": "css` :host { cursor: pointer; } :host([disabled]) { color: var(--gds-sys-color-content-disabled-01); cursor: default; } :host(:focus) { outline: none; } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "style",
-            "module": "src/components/radio/radio.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/radio/radio.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GdsRadio",
-          "declaration": {
-            "name": "GdsRadio",
-            "module": "src/components/radio/radio.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/rich-text/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/rich-text/rich-text"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\n\nThe wrapped content will render inside the shadowRoot of the `gds-rich-text` element, thereby applying the\ndefault typography styles and standard element styles defined in the Green Design System.",
-          "name": "GdsRichText",
-          "members": [
             {
               "kind": "field",
-              "name": "captureMode",
+              "name": "triggerRef",
               "type": {
-                "text": "'clone' | 'move'"
-              },
-              "default": "'clone'",
-              "description": "Capture mode for the content.\n\n- `clone` (default): Clones the content to the shadowRoot.\\\n  This is the default and most compatible behaviour, since it leaves the original DOM untouched.\n  the downside is that events added through `addEventListener` will not be retained in the cloned DOM.\n\n- `move`: Moves the content to the inner shadowRoot.\\\n  This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event\n  listeners, intact.\n  This mode is less compatible with some libraries that rely on the original DOM structure, for example React",
-              "attribute": "captureMode"
-            },
-            {
-              "kind": "method",
-              "name": "querySelectorAll",
-              "return": {
-                "type": {
-                  "text": "NodeList"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "selector",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
-            },
-            {
-              "kind": "method",
-              "name": "querySelector",
-              "return": {
-                "type": {
-                  "text": "Element | null"
-                }
+                "text": "Promise<HTMLElement> | undefined"
               },
-              "parameters": [
-                {
-                  "name": "selector",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
+              "description": "Optional way to assign a trigger element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the trigger element programatically."
             },
             {
               "kind": "field",
-              "name": "innerHTML",
+              "name": "anchorRef",
               "type": {
-                "text": "string"
+                "text": "Promise<HTMLElement> | undefined"
               },
-              "description": "Forwards innerHTML from the inner shadowRoot."
+              "description": "Optional way to assign an anchor element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the anchor element programatically."
             },
             {
               "kind": "field",
-              "name": "'align-self'",
+              "name": "label",
               "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"
-              }
+              "default": "undefined",
+              "description": "Optional trigger element for the popover.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "'justify-self'",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "Placement"
               },
-              "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"
-              }
+              "default": "'bottom-start'",
+              "description": "The placement of the popover relative to the trigger.\nAccepts any of the placements supported by Floating UI.",
+              "attribute": "placement"
             },
             {
               "kind": "field",
-              "name": "'place-self'",
+              "name": "disableMobileStyles",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Whether to use a modal dialog in mobile viewport.",
+              "attribute": "disableMobileStyles"
             },
             {
               "kind": "field",
-              "name": "'grid-column'",
+              "name": "autofocus",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+              "default": "false",
+              "description": "Whether the popover should autofocus the first slotted child when opened.",
+              "attribute": "autofocus"
             },
             {
               "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"
-              }
+              "name": "calcMinWidth",
+              "description": "A callback that returns the minimum width of the popover.\nBy default, the popover minWidth will be as wide as the trigger element."
             },
             {
               "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"
-              }
+              "name": "calcMaxWidth",
+              "description": "A callback that returns the maximum width of the popover.\nBy default, the popover maxWidth will be set to `auto` and will grow as needed."
             },
             {
               "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"
-              }
+              "name": "calcMinHeight",
+              "description": "A callback that returns the minimum height of the popover.\nBy default, the popover minHeight will be set to `auto`"
             },
             {
               "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"
-              }
+              "name": "calcMaxHeight",
+              "description": "A callback that returns the maximum height of the popover.\nBy default, the popover maxHeight will be set to a hard coded pixel value (check source code)."
             },
             {
               "kind": "field",
-              "name": "margin",
+              "name": "nonmodal",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Whether the popover is nonmodal. When true, the popover will not trap focus and other elements\non the page will still be interactable while the popover is open.",
+              "attribute": "nonmodal",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "'margin-inline'",
+              "name": "backdrop",
               "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"
-              }
+              "description": "When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is\nin modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be\nset to a selector matching a `<gds-backdrop>` element, in wich case the popover will take\ncontrol of that backdrop.\n\nExample:\n```html\n<gds-popover backdrop=\".my-backdrop\">\n  <gds-button slot=\"trigger\">Open</gds-button>\n  <p>Popover content</p>\n</gds-popover>\n<gds-backdrop class=\"my-backdrop\"></gds-backdrop>\n```",
+              "attribute": "backdrop"
             },
             {
               "kind": "field",
-              "name": "'margin-block'",
+              "name": "floatingUIMiddleware",
               "type": {
-                "text": "string | undefined"
+                "text": "Middleware[]"
               },
-              "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"
-              }
+              "description": "An array of middleware for the Floating UI positioning algorithm. Here you can pass in an array\nof middleware to customize positioning to your needs. This array is passed directly to Floting UI,\nso you can just follow the documentation here: https://floating-ui.com/docs/middleware\n\nThis property does not have a corresponding attribute, so it can only be set in JavaScript.\n\nDefaults to `[offset(8), flip()]`"
             },
             {
               "kind": "method",
@@ -28307,60 +27982,33 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "captureMode",
-              "type": {
-                "text": "'clone' | 'move'"
-              },
-              "default": "'clone'",
-              "description": "Capture mode for the content.\n\n- `clone` (default): Clones the content to the shadowRoot.\\\n  This is the default and most compatible behaviour, since it leaves the original DOM untouched.\n  the downside is that events added through `addEventListener` will not be retained in the cloned DOM.\n\n- `move`: Moves the content to the inner shadowRoot.\\\n  This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event\n  listeners, intact.\n  This mode is less compatible with some libraries that rely on the original DOM structure, for example React",
-              "fieldName": "captureMode"
+              "description": "Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`.",
+              "name": "gds-ui-state"
             },
             {
-              "name": "gds-element",
+              "name": "gds-element-disconnected",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
-              "readonly": true,
-              "fieldName": "gdsElementName",
+              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "withLayoutChildProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
             },
             {
-              "name": "withMarginProps",
-              "module": "/src/utils/mixins/declarative-layout-mixins"
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-rich-text",
-          "customElement": true,
-          "events": [
-            {
-              "name": "gds-element-disconnected",
+              "name": "name",
               "type": {
-                "text": "CustomEvent"
+                "text": "Event"
               },
-              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
             },
             {
-              "name": "name",
               "type": {
                 "text": "Event"
               },
@@ -28368,33 +28016,124 @@
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the popover is open.",
+              "fieldName": "open"
             },
             {
+              "name": "popup-role",
               "type": {
-                "text": "Event"
+                "text": "'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'"
+              },
+              "default": "'dialog'",
+              "description": "This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element.\nRead here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup",
+              "fieldName": "popupRole"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "Optional trigger element for the popover.",
+              "fieldName": "label"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "default": "'bottom-start'",
+              "description": "The placement of the popover relative to the trigger.\nAccepts any of the placements supported by Floating UI.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "disableMobileStyles",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to use a modal dialog in mobile viewport.",
+              "fieldName": "disableMobileStyles"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the popover should autofocus the first slotted child when opened.",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "nonmodal",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the popover is nonmodal. When true, the popover will not trap focus and other elements\non the page will still be interactable while the popover is open.",
+              "fieldName": "nonmodal"
+            },
+            {
+              "name": "backdrop",
+              "type": {
+                "text": "string | undefined"
               },
+              "description": "When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is\nin modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be\nset to a selector matching a `<gds-backdrop>` element, in wich case the popover will take\ncontrol of that backdrop.\n\nExample:\n```html\n<gds-popover backdrop=\".my-backdrop\">\n  <gds-button slot=\"trigger\">Open</gds-button>\n  <p>Popover content</p>\n</gds-popover>\n<gds-backdrop class=\"my-backdrop\"></gds-backdrop>\n```",
+              "fieldName": "backdrop"
+            },
+            {
+              "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"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-popover",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsRichText",
+          "name": "applyTriggerAriaAttributes",
           "declaration": {
-            "name": "GdsRichText",
-            "module": "src/components/rich-text/rich-text.component.ts"
+            "name": "applyTriggerAriaAttributes",
+            "module": "src/components/popover/popover.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GdsPopover",
+          "declaration": {
+            "name": "GdsPopover",
+            "module": "src/components/popover/popover.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.stories.ts",
+      "path": "src/components/popover/popover.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28402,164 +28141,80 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Rich Text', component: 'gds-rich-text', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-rich-text'), }, }",
-          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\n\nThe wrapped content will get captured and transferred to the inner shadowRoot of the `gds-rich-text` element.\n\nA typical use case for this component is to wrap a block of HTML content output from a CMS or other source\nthat you want to apply the design system typography to.\n\nIt supports out of the box all heading styles, paragraphs, lists, blockquotes, figures, tables, and more."
-        },
-        {
-          "kind": "variable",
-          "name": "Card",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Card', render: (args) => html` <gds-card> <gds-rich-text> <h1> The Starship <small>SS Endeavor</small> <mark>Exploration Class</mark> </h1> <h2>Heading one</h2> <h3>Heading test</h3> <p> The <strong>SS Endeavor</strong> is a state-of-the-art exploration class starship designed for deep space missions. Equipped with advanced technology and robust systems, it aims to expand our understanding of the universe. With a focus on <em>interstellar travel</em>, the SS Endeavor features a unique propulsion system that allows for faster-than-light travel. Its mission is to explore uncharted territories and gather data on distant celestial bodies. <a href=\"#\">Link</a> </p> <figure> <img src=\"https://placehold.co/600x400\" alt=\"SS Endeavor Starship\" /> <figcaption> Artist's rendition of the SS Endeavor in flight. </figcaption> </figure> <blockquote> <p> \"The SS Endeavor represents the pinnacle of human engineering and ambition. It is not just a vessel; it is our gateway to the stars.\" <cite>— Dr. Amelia Carter, Chief Engineer</cite> </p> </blockquote> <p> For detailed specifications, please refer to the <a href=\"javascript:;\" onclick=\"console.log('Accessing starship specifications')\" >technical documentation</a >. The SS Endeavor is equipped with cutting-edge systems that ensure the safety and efficiency of its crew during long-duration missions. </p> <p> Furthermore, <mark>SS Endeavor</mark> is designed with a modular approach, allowing for easy <code>upgrades</code> and <code>maintenance</code>. </p> <h2>Specifications</h2> <ul> <li> Length: 150 meters Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> <li>Width: 50 meters</li> <li>Height: 30 meters</li> <li>Crew Capacity: 100 personnel</li> <li>Propulsion: Quantum Slipstream Drive</li> <li>Maximum Speed: 10 light-years per hour</li> </ul> <hr /> <h2>One digit list</h2> <ol> <li> Conduct scientific research on exoplanets, focusing on atmospheric composition <a href=\"#\">Inline link</a> and potential habitability. </li> <li> Establish contact with potential extraterrestrial civilizations through advanced signal detection and transmission protocols. </li> <li> Collect comprehensive data on diverse cosmic phenomena, including black hole dynamics, supernova remnants, and dark matter distribution. </li> <li> Test new technologies in real-world scenarios, specifically advanced propulsion systems for interstellar travel. </li> <li> Test new technologies in real-world scenarios, implementing closed-loop life support systems for long-duration space missions. </li> </ol> <h2>Two digit list</h2> <ol> <li> Conduct scientific research on exoplanets, focusing on atmospheric composition <a href=\"#\">Inline link</a> and potential habitability. </li> <li> Establish contact with potential extraterrestrial civilizations through advanced signal detection and transmission protocols. </li> <li> Collect comprehensive data on diverse cosmic phenomena, including black hole dynamics, supernova remnants, and dark matter distribution. </li> <li> Test new technologies in real-world scenarios, specifically advanced propulsion systems for interstellar travel. </li> <li> Test new technologies in real-world scenarios, implementing closed-loop life support systems for long-duration space missions. </li> <li> Test new technologies in real-world scenarios, evaluating the effectiveness of advanced radiation shielding materials. </li> <li> Test new technologies in real-world scenarios, deploying autonomous robotic systems for deep-space exploration and resource extraction. </li> <li> Test new technologies in real-world scenarios, analyzing the performance of quantum communication networks in space. </li> <li> Test new technologies in real-world scenarios, using advanced AI for real time data analysis and decision making. </li> <li> Investigate the origins and evolution of the universe through high-resolution astronomical observations. </li> <li> Develop and deploy advanced sensor arrays for detecting gravitational waves and other subtle cosmic signals. </li> <li> Analyze asteroid compositions to understand the early solar system and potential resources. </li> <li> Map the galactic structure with unprecedented accuracy, revealing hidden star systems and nebula. </li> <li> Study the effects of prolonged space travel on human physiology and psychology, preparing for future interstellar journeys. </li> <li> Create detailed models of planetary formation and evolution, improving our understanding of planet diversity. </li> <li> Explore the possibility of utilizing advanced energy sources, like fusion reactors, for deep space exploration. </li> </ol> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li> Mapping the surface of Mars for potential human colonization </li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> <p> In summary, the <strong>SS Endeavor</strong> is poised to lead humanity's next great leap into the cosmos. <s>With the right investments and support,</s> its missions will pave the way for future exploration and discovery. <mark>Join us</mark> as we embark on this exciting journey into the unknown. </p> <table> <thead> <tr> <th>Component</th> <th>Details</th> <th>Function</th> </tr> </thead> <tbody> <tr> <td>Life Support System</td> <td>Advanced recycling and oxygen generation</td> <td>Ensures crew survival during long missions</td> </tr> <tr> <td>Navigation System</td> <td>AI-assisted star mapping</td> <td>Guides the ship through uncharted space</td> </tr> <tr> <td>Defensive Systems</td> <td>Energy shields and hull plating</td> <td>Protects against cosmic threats</td> </tr> <tr> <td>Scientific Labs</td> <td>Equipped for various research disciplines</td> <td>Facilitates on-board experiments</td> </tr> <tr> <td>Propulsion System</td> <td>Quantum Slipstream Drive</td> <td>Enables faster-than-light travel</td> </tr> </tbody> </table> <h2>Iframe</h2> <iframe src=\"https://example.com/\" height=\"400\"></iframe> </gds-rich-text> </gds-card> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Headings",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Headings', render: (args) => html` <gds-rich-text> <!-- <h1>The Starship SS Endeavor Exploration Class</h1> <h2>Mission Alpha Centauri Deep Space Exploration</h2> <h3>Rocket Falcon Heavy Launch Vehicle</h3> <h4>Engine Raptor Next-Gen Propulsion</h4> <h5>Module Dragon Crew Transport</h5> <h6>Satellite Starlink Global Internet</h6> --> <h1>Heading 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h2>Heading 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h3>Heading 3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h5>Heading 5</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h6>Heading 6</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\nIt supports out of the box all heading styles from h1 to h6 based on the green design system typography styles."
-        },
-        {
-          "kind": "variable",
-          "name": "Lists",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Lists', render: (args) => html` <gds-rich-text> <h2>Key Technologies in Space Exploration</h2> <ul> <li>Rocket propulsion systems</li> <li>Life support systems</li> <li>Communication satellites</li> <li>Space habitats and modules</li> <li>Robotic exploration rovers</li> <li>Advanced materials for spacecraft</li> </ul> <h2>Major Milestones in Space Exploration</h2> <ol> <li>Launch of Sputnik 1 (1957) - The first artificial satellite.</li> <li> First human in space (Yuri Gagarin, 1961) - Historic manned spaceflight. </li> <li> Apollo 11 Moon landing (1969) - First humans to walk on the Moon. </li> <li> Launch of the Space Shuttle (1981) - Introduction of reusable spacecraft. </li> <li> Mars Rover Curiosity landing (2012) - Advanced exploration of the Martian surface. </li> <li> Launch of the James Webb Space Telescope (2021) - Next-generation space observatory. </li> </ol> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` has built-in support for ordered and unordered lists.\nIt applies consistent spacing and typography styles to list items."
-        },
-        {
-          "kind": "variable",
-          "name": "Details",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Details', render: (args) => html` <gds-rich-text> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li>Mapping the surface of Mars for potential human colonization</li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` has built-in support for details html element.\n\nThe details element is a disclosure widget from HTML5 that can be used to hide or show additional content."
-        },
-        {
-          "kind": "variable",
-          "name": "Blockquote",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ ...DefaultParams, name: 'Blockquote', render: (args) => html` <gds-rich-text> <h2>Inspirational Quotes from Space Exploration Pioneers</h2> <blockquote> <p> \"That's one small step for [a] man, one giant leap for mankind.\" <cite>— Neil Armstrong, Apollo 11 Astronaut</cite> </p> </blockquote> <blockquote> <p> \"The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.\" <cite>— Neil Armstrong</cite> </p> </blockquote> <blockquote> <p> \"To confine our attention to terrestrial matters would be to limit the human spirit.\" <cite>— Stephen Hawking, Theoretical Physicist</cite> </p> </blockquote> <blockquote> <p> \"The Earth is the cradle of humanity, but mankind cannot stay in the cradle forever.\" <cite>— Konstantin Tsiolkovsky, Rocket Scientist</cite> </p> </blockquote> <blockquote> <p> \"I don't want to be an astronaut. I want to be a space explorer.\" <cite>— Chris Hadfield, Astronaut</cite> </p> </blockquote> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` has built-in support blockquote element."
+          "default": "{ title: 'Components/Popover', component: 'gds-popover', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-popover'), }, }",
+          "description": "A popover is a temporary view that appears above other content."
         },
         {
           "kind": "variable",
-          "name": "Formatting",
+          "name": "Usage",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, name: 'Formatting', render: (args) => html` <gds-rich-text> <h3>Key Concepts in Space Exploration</h3> <p> The field of space exploration is constantly evolving. It is essential to understand the <strong>fundamental principles</strong> that guide our missions. For example, <mark>propulsion technology</mark> is crucial for <em>successful space travel</em>. Moreover, the study of <s>black holes</s> has revealed significant insights into the <small>nature of the universe</small>. </p> <p> As we continue to explore the cosmos, <strong>collaboration</strong> among international space agencies is vital. Together, we can achieve <mark>greater advancements</mark> in our understanding of the universe. </p> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` has built-in support for inline formatting tags such as `s`, `mark`, `strong`,`small` and `em`."
+          "default": "{ ...DefaultParams, }",
+          "description": "The popover can be used declaratively by adding a trigger button and content inside the popover element, like in the example below.\n\nIt is also possible to set the trigger and anchor by supplying DOM references (wrapped in promises) to the `triggerRef` and `anchorRef`\nproperties. This is useful when the trigger and anchor needs to be different elements."
         },
         {
           "kind": "variable",
-          "name": "Table",
+          "name": "CancelEvent",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, name: 'Table', render: (args) => html` <gds-rich-text> <h2>Significant Space Missions</h2> <table> <thead> <tr> <th>Mission Name</th> <th>Launch</th> <th>Objectives</th> <th>Outcomes</th> </tr> </thead> <tbody> <tr> <td>Apollo 11</td> <td>1969</td> <td>First manned Moon landing</td> <td> Successful lunar landing; Neil Armstrong and Buzz Aldrin walked on the Moon. </td> </tr> <tr> <td>Voyager 1</td> <td>1977</td> <td>Explore outer planets and interstellar space</td> <td> Provided detailed images of Jupiter and Saturn; currently in interstellar space. </td> </tr> <tr> <td>Hubble Space Telescope</td> <td>1990</td> <td>Observe distant galaxies and cosmic phenomena</td> <td> Revolutionized astronomy; provided stunning images and data. </td> </tr> <tr> <td>Curiosity Rover</td> <td>2011</td> <td>Explore Mars' surface and assess habitability</td> <td> Confirmed the presence of water; conducted extensive geological analysis. </td> </tr> <tr> <td>James Webb Space Telescope</td> <td>2021</td> <td>Observe the early universe and exoplanets</td> <td>Expected to provide unprecedented insights into the cosmos.</td> </tr> </tbody> </table> </gds-rich-text> `, }",
-          "description": "`gds-rich-text` has built-in support for tables."
+          "default": "{ ...DefaultParams, render: () => html` <gds-popover id=\"cancellable\" @gds-ui-state=${(e: CustomEvent) => e.detail.reason === 'close' && e.preventDefault()} > <gds-button rank=\"secondary\" slot=\"trigger\"> Show popover <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> </gds-button> <div style=\"padding: 1rem; padding-top: 0\"> <h3>Customized closing behavior</h3> <p> This popover can only be closed by click the button below or hitting escape. </p> <gds-button rank=\"primary\" @click=${() => { ;(document.getElementById('cancellable') as GdsPopover).open = false }} >Close me!</gds-button > </div> </gds-popover>`, }",
+          "description": "By default, the popover will close when clicking outside or hitting the escape key. This behavior can be customized by listening to the `gds-ui-state` event and calling `preventDefault()` on the event object when the popover should not close.\n\nFor example:\n\n```html\n<gds-popover"
         },
         {
           "kind": "variable",
-          "name": "Basic",
+          "name": "Customization",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, name: 'Theme', render: (args) => html` <gds-card variant=\"tertiary\"> <gds-rich-text> <h1> The Starship <small>SS Endeavor</small> <mark>Exploration Class</mark> </h1> <h2>Heading one</h2> <h3>Heading test</h3> <p> The <strong>SS Endeavor</strong> is a state-of-the-art exploration class starship designed for deep space missions. Equipped with advanced technology and robust systems, it aims to expand our understanding of the universe. With a focus on <em>interstellar travel</em>, the SS Endeavor features a unique propulsion system that allows for faster-than-light travel. Its mission is to explore uncharted territories and gather data on distant celestial bodies. <a href=\"#\">Link</a> </p> <figure> <img src=\"https://placehold.co/600x400\" alt=\"SS Endeavor Starship\" /> <figcaption> Artist's rendition of the SS Endeavor in flight. </figcaption> </figure> <blockquote> <p> \"The SS Endeavor represents the pinnacle of human engineering and ambition. It is not just a vessel; it is our gateway to the stars.\" <cite>— Dr. Amelia Carter, Chief Engineer</cite> </p> </blockquote> <p> For detailed specifications, please refer to the <a href=\"javascript:;\" onclick=\"console.log('Accessing starship specifications')\" >technical documentation</a >. The SS Endeavor is equipped with cutting-edge systems that ensure the safety and efficiency of its crew during long-duration missions. </p> <p> Furthermore, <mark>SS Endeavor</mark> is designed with a modular approach, allowing for easy upgrades and maintenance. </p> <h2>Specifications</h2> <ul> <li> Length: 150 meters Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> <li>Width: 50 meters</li> <li>Height: 30 meters</li> <li>Crew Capacity: 100 personnel</li> <li>Propulsion: Quantum Slipstream Drive</li> <li>Maximum Speed: 10 light-years per hour</li> </ul> <hr /> <h2>Mission Objectives</h2> <ol> <li>Conduct scientific research on exoplanets.</li> <li> Establish contact with potential extraterrestrial civilizations. </li> <li>Collect data on cosmic phenomena.</li> <li>Test new technologies in real-world scenarios.</li> </ol> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li> Mapping the surface of Mars for potential human colonization </li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> <p> In summary, the <strong>SS Endeavor</strong> is poised to lead humanity's next great leap into the cosmos. <s>With the right investments and support,</s> its missions will pave the way for future exploration and discovery. <mark>Join us</mark> as we embark on this exciting journey into the unknown. </p> <table> <thead> <tr> <th>Component</th> <th>Details</th> <th>Function</th> </tr> </thead> <tbody> <tr> <td>Life Support System</td> <td>Advanced recycling and oxygen generation</td> <td>Ensures crew survival during long missions</td> </tr> <tr> <td>Navigation System</td> <td>AI-assisted star mapping</td> <td>Guides the ship through uncharted space</td> </tr> <tr> <td>Defensive Systems</td> <td>Energy shields and hull plating</td> <td>Protects against cosmic threats</td> </tr> <tr> <td>Scientific Labs</td> <td>Equipped for various research disciplines</td> <td>Facilitates on-board experiments</td> </tr> <tr> <td>Propulsion System</td> <td>Quantum Slipstream Drive</td> <td>Enables faster-than-light travel</td> </tr> </tbody> </table> <h2>Iframe</h2> <iframe src=\"https://example.com/\" height=\"400\"></iframe> </gds-rich-text> </gds-card> `, }",
-          "description": "Rich text can be used with other components to create engaging content.\nIn this example, we combine rich text with a card component to showcase how colors will be applied.\n\nExample:\n\n```html\n<gds-card variant=\"tertiary\">\n <gds-rich-text>\n   ...\n  </gds-rich-text>\n</gds-card>\n```"
+          "default": "{ ...DefaultParams, render: () => html`<gds-div width=\"700px\" height=\"250px\"> <gds-card variant=\"secondary\" width=\"720px\" border=\"4xs\" border-width=\"0 0 4xs\" border-radius=\"0\" padding=\"0\" position=\"fixed\" flex-direction=\"row\" inset=\"0 auto auto 0\" z-index=\"1000\" > <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> Basic popover </gds-menu-button compact> <div style=\"padding: 1rem;\">Basic popover</div> </gds-popover> <gds-popover nonmodal backdrop=\"#my-backdrop\" .floatingUIMiddleware=${[{ fn: ({ y }) => ({ x: 25, y: y + 8 }) }]} .calcMaxWidth=${() => '670px'}> <gds-menu-button slot=\"trigger\"> <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> With custom backdrop and positioning middleware </gds-menu-button> <div style=\"padding: 0 1rem;\"> <h3>Customized popover</h3> <p>In this popover, we're using custom Floating UI middleware to control the positioning, and <i>calcMaxWidth</i> to set the size.</p> <p>We're also using a backdrop element, referenced by the <i>backdrop</i> attribute, to dim the background below the menu bar.</p> </div> </gds-popover> </gds-card> <gds-backdrop id=\"my-backdrop\"></gds-backdrop> </gds-div>`, }",
+          "description": "Here is an example of how the popover can be customized with sizing, placement and backdrop."
         }
       ],
       "exports": [
         {
           "kind": "js",
           "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/components/rich-text/rich-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/components/rich-text/rich-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Headings",
-          "declaration": {
-            "name": "Headings",
-            "module": "src/components/rich-text/rich-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Lists",
-          "declaration": {
-            "name": "Lists",
-            "module": "src/components/rich-text/rich-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Details",
-          "declaration": {
-            "name": "Details",
-            "module": "src/components/rich-text/rich-text.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Blockquote",
-          "declaration": {
-            "name": "Blockquote",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+          "declaration": {
+            "name": "meta",
+            "module": "src/components/popover/popover.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Formatting",
+          "name": "Usage",
           "declaration": {
-            "name": "Formatting",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Usage",
+            "module": "src/components/popover/popover.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Table",
+          "name": "CancelEvent",
           "declaration": {
-            "name": "Table",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "CancelEvent",
+            "module": "src/components/popover/popover.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Basic",
+          "name": "Customization",
           "declaration": {
-            "name": "Basic",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Customization",
+            "module": "src/components/popover/popover.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.styles.ts",
+      "path": "src/components/popover/popover.styles.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` :host { font: var(--gds-sys-text-body-regular-m); --default-border: 1px solid color-mix(in srgb, currentColor, transparent 80%); letter-spacing: 0.0125rem; display: block; } h1, h2, h3, h4, h5, h6 { margin-top: var(--gds-sys-space-2xl); margin-bottom: var(--gds-sys-space-xs); } :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: unset; } h1 + h2 { margin-top: 0; } h2 + h3 { margin-top: 0; } h3 + h4 { margin-top: 0; } h4 + h5 { margin-top: 0; } h4 + h5 { margin-top: 0; } h5 + h6 { margin-top: 0; } p { margin: 0; margin-bottom: var(--gds-sys-space-m); max-width: 80ch; } blockquote { margin: unset; margin-block: 2lh; border-left: 0.2rem solid currentColor; padding-left: 2ch; max-width: 40ch; } code { background: var(--gds-sys-color-l3-neutral-02); color: var(--gds-sys-color-content-neutral-01); border-radius: var(--gds-sys-radius-xs); padding: var(--gds-sys-space-3xs); font: var(--gds-sys-text-body-book-s); } hr { border: none; border-top: var(--default-border); margin: var(--gds-sys-space-xl) 0; } s { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: -0.22lh; } mark { color: currentColor; background-color: color-mix(in srgb, currentColor, transparent 80%); } /* * lists * ----------------------------------------------------------- */ ul, ol { padding-inline-start: 2ch; margin: unset; margin-bottom: 1lh; max-width: 80ch; } ol { list-style-type: none; counter-reset: ordered-list; margin: unset; padding: unset; } ol li { padding-left: 3.6ch; position: relative; } ol li:before { counter-increment: ordered-list; content: counter(ordered-list) '.'; left: 0.2rem; position: absolute; } ol:not(:has(li:nth-child(10))) li { padding-left: 2.4ch; } ol:has(li:nth-child(10)) li:nth-child(-n + 9):before { left: 1.4ch; } li { padding: 0 0 0.3lh 0; } ul li:last-child { padding: 0; } ul li::marker { content: '– '; } /* * figure and image * ----------------------------------------------------------- */ img { display: block; border-radius: var(--gds-sys-radius-xs); } figure { margin: 0; padding: 0; margin-top: var(--gds-sys-space-xl); } figcaption { font-size: smaller; margin-block-start: var(--gds-sys-space-xs); } /* * table * ----------------------------------------------------------- */ table { border-collapse: separate; border-spacing: 0; width: 100%; border: var(--default-border); border-radius: var(--gds-sys-radius-s); margin-top: var(--gds-sys-space-xl); } th { font-weight: var(--gds-sys-text-weight-book); text-align: left; border-bottom: var(--default-border); border-left: transparent; border-right: transparent; color: currentColor; } th:not(:last-child) { border-right: var(--default-border); } th, td { padding: 0.3lh 2ch; } td:not(:last-child) { border-right: var(--default-border); } tr:nth-child(even) td { background: color-mix(in srgb, currentColor, transparent 95%); } /* * Details * ----------------------------------------------------------- */ details { border-top: solid var(--gds-sys-space-5xs) color-mix(in srgb, currentColor, transparent 90%); font: var(--gds-sys-text-body-regular-m); } summary { font-weight: var(--gds-sys-text-weight-regular); list-style: none; padding: 0.4lh 0.2ch; font: var(--gds-sys-text-body-regular-l); color: currentColor; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; outline-offset: var(--gds-sys-space-3xs); outline-color: currentColor; padding-inline: var(--gds-sys-space-m); } details summary::-webkit-details-marker { display: none; } summary:focus-visible { border-radius: var(--gds-sys-radius-2xs); } details:hover summary { background: color-mix(in srgb, currentColor, transparent 95%); } summary::after { content: '+'; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font: var(--gds-sys-text-body-regular-l); } details[open] summary::after { content: '-'; } details[open] { border-bottom: var(--gds-sys-space-5xs) solid color-mix(in srgb, currentColor, transparent 95%); padding-bottom: 0.4lh; background: color-mix(in srgb, currentColor, transparent 95%); } details[open] > *:not(summary) { margin-left: var(--gds-sys-space-m); } details[open] summary { margin-bottom: 0.4lh; } details[open] + details { border: none; } details:last-of-type { border-bottom: var(--gds-sys-space-5xs) solid color-mix(in srgb, currentColor, transparent 90%); margin-bottom: var(--gds-sys-space-xl); } a, a:visited { color: currentColor; text-decoration-color: currentColor; } /* * Iframe */ iframe { border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-radius-xs); min-width: 100%; margin-bottom: var(--gds-sys-space-l); } `"
+          "default": "css` @layer base, reset, transitional-styles; @layer base { :host { display: contents; } :host > div:not([hidden]) { display: contents; } :host([open]) dialog { opacity: 1; box-sizing: border-box; visibility: visible; } dialog { display: flex; flex-direction: column; inset: auto; position: fixed; overflow: hidden; padding: 0px; box-sizing: border-box; right: 0; margin: 0; box-shadow: var(--gds-sys-shadow-l-01); border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-radius-s); overscroll-behavior: contain; } :host([nonmodal]) dialog { z-index: 1; } @media (max-width: 576px) { dialog.use-modal-in-mobile { border-radius: var(--gds-sys-radius-m) var(--gds-sys-radius-m) 0 0; transition: transform var(--gds-sys-motion-duration-fastest) ease; min-width: 100vw; position: fixed; bottom: 0; left: 0; padding-bottom: 0; transform: translateY(0); @starting-style { transform: translateY(100%); } &::backdrop { background-color: rgba(0, 0, 0, 0.3); display: block; position: fixed; opacity: 1; transition: opacity var(--gds-sys-motion-duration-fast) ease; @starting-style { opacity: 0; } } } } @media (min-width: 577px) { header { display: none; } } header { display: none; } @media (min-width: 577px) { dialog:not(.has-backdrop)::backdrop { background-color: transparent; display: block; position: fixed; } } } `"
         }
       ],
       "exports": [
@@ -28568,45 +28223,157 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/rich-text/rich-text.styles.ts"
+            "module": "src/components/popover/popover.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.ts",
+      "path": "src/components/popover/popover.trans.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "register"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "register",
+          "declaration": {
+            "name": "register",
+            "module": "src/components/popover/popover.trans.styles.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "register",
+            "module": "src/components/popover/popover.trans.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/popover/popover.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsRichText",
+          "name": "GdsPopover",
           "declaration": {
-            "name": "GdsRichText",
-            "module": "src/components/rich-text/rich-text.ts"
+            "name": "GdsPopover",
+            "module": "src/components/popover/popover.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/backdrop.component.ts",
+      "path": "src/components/radio/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/radio/radio"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/radio/radio-group/radio-group"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/radio/radio.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsBackdrop",
+          "name": "GdsRadio",
           "members": [
             {
               "kind": "field",
-              "name": "show",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label displayed next to the radio button.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "supportingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The supporting text displayed below the label.\nThis text provides additional context or information to the user.",
+              "attribute": "supporting-text"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value of the radio button.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "show",
+              "description": "Whether the radio button is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio button is disabled or not.",
+              "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio button is invalid or not.",
+              "attribute": "invalid"
+            },
+            {
+              "kind": "field",
+              "name": "errorMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The accessible error message text for the radio button.\n\nThis text is not visually rendered, but will be announced by\nscreen readers when the radio button is in an invalid state.",
+              "attribute": "errorMessage"
+            },
             {
               "kind": "method",
               "name": "define",
@@ -28737,49 +28504,33 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "show"
+              "description": "Dispatched when the radio button is checked.",
+              "name": "input"
             },
             {
-              "name": "gds-element",
+              "name": "gds-element-disconnected",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
-              "readonly": true,
-              "fieldName": "gdsElementName",
+              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
-            }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-backdrop",
-          "customElement": true,
-          "events": [
+            },
             {
-              "name": "gds-element-disconnected",
+              "name": "name",
               "type": {
-                "text": "CustomEvent"
+                "text": "Event"
               },
-              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
             },
             {
-              "name": "name",
               "type": {
                 "text": "Event"
               },
@@ -28787,246 +28538,503 @@
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label displayed next to the radio button.",
+              "fieldName": "label"
             },
             {
+              "name": "supporting-text",
               "type": {
-                "text": "Event"
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The supporting text displayed below the label.\nThis text provides additional context or information to the user.",
+              "fieldName": "supportingText"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value of the radio button.",
+              "fieldName": "value"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio button is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio button is disabled or not.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio button is invalid or not.",
+              "fieldName": "invalid"
+            },
+            {
+              "name": "errorMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The accessible error message text for the radio button.\n\nThis text is not visually rendered, but will be announced by\nscreen readers when the radio button is in an invalid state.",
+              "fieldName": "errorMessage"
+            },
+            {
+              "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"
               }
             }
-          ]
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-radio",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsBackdrop",
+          "name": "GdsRadio",
           "declaration": {
-            "name": "GdsBackdrop",
-            "module": "src/components/popover/backdrop.component.ts"
+            "name": "GdsRadio",
+            "module": "src/components/radio/radio.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/backdrop.ts",
-      "declarations": [],
+      "path": "src/components/radio/radio.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{ title: 'Components/Radio', component: 'gds-radio-group', subcomponents: { GdsRadio: 'gds-radio' }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-radio-group'), }, }",
+          "description": "A radio button is a form element that allows users to select one of the predefined set of choices.<br/>\nThey are grouped using a radio group component which manages selection, keyboard navigation, and validation.\n\nGroups support vertical and horizontal layouts, and can be sized to fit different space requirements."
+        },
+        {
+          "kind": "variable",
+          "name": "RadioButton",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Radio', args: { label: 'Pick an option', supportingText: 'Label support text.', innerHTML: ` <gds-radio label=\"Radio Option 1\" supporting-text=\"Supporting text\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Option 2\" supporting-text=\"Supporting text\" value=\"2\"></gds-radio> <gds-radio label=\"Radio Option 3\" supporting-text=\"Supporting text\" value=\"3\"></gds-radio>`, }, }",
+          "description": "Radio buttons allow users to select a single option from a list of two or more mutually exclusive options.<br />\nEach radio button must have both a label and a value.\n\nUsage:\n\n```html\n<gds-radio-group label=\"Select an option\">\n  <gds-radio label=\"Option 1\" value=\"1\"></gds-radio>\n  <gds-radio label=\"Option 2\" value=\"2\"></gds-radio>\n</gds-radio-group>\n```\n\nInteractive example with supporting texts:"
+        },
+        {
+          "kind": "variable",
+          "name": "Validation",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Validation', render: () => html` <form method=\"dialog\"> <gds-flex flex-direction=\"column\" align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" show-extended-supporting-text .validator=${{ validate: (el: GdsRadioGroup) => { if (!el.value) return [ { ...el.validity, valid: false, customError: true }, 'This is required', ] }, }} > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> <gds-button type=\"submit\">Submit</gds-button> </gds-flex> </form> `, }",
+          "description": "Radio groups support validation using Green Core's [form validation API](/docs/components-form-validation-documentation--docs).\n\nThe error message appears below the radio group, and can be set either trough a validator, or explicctly using the using the `error-message` attribute.\n\nIf you click on 'submit' first on the example below it will validate the radio group and show the error message."
+        },
+        {
+          "kind": "variable",
+          "name": "DosAndDonts",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: \"Do's and don'ts\", render: () => html` <gds-flex gap=\"xl\"> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"positive\" > <gds-icon-circle-check></gds-icon-circle-check> <gds-text tag=\"small\">Do provide both Label and Value</gds-text> </gds-card> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio label=\"Radio Label\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\"></gds-radio> </gds-radio-group> </gds-card> </gds-flex> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"negative\" > <gds-icon-cross-small></gds-icon-cross-small> <gds-text tag=\"small\">Never exclude the label</gds-text> </gds-card> <form method=\"dialog\"> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio value=\"1\"></gds-radio> <gds-radio value=\"2\"></gds-radio> </gds-radio-group> </gds-card> </form> </gds-flex> <gds-flex gap=\"l\" flex-direction=\"column\" flex=\"1\"> <gds-card align-items=\"center\" flex-direction=\"row\" gap=\"2xs\" padding=\"s\" variant=\"negative\" > <gds-icon-cross-small></gds-icon-cross-small> <gds-text tag=\"small\">Never exclude the value </gds-text> </gds-card> <form method=\"dialog\"> <gds-card align-items=\"flex-start\" gap=\"m\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text\"> <span slot=\"extended-supporting-text\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span> <gds-radio label=\"Radio Label\"></gds-radio> <gds-radio label=\"Radio Label\"></gds-radio> </gds-radio-group> </gds-card> </form> </gds-flex> </gds-flex> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Disabled",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Disabled', render: () => html` <div class=\"radio-group\"> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" show-extended-supporting-text value=\"4\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" disabled supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" disabled supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </div> `, }",
+          "description": "Disabled radio buttons cannot be interacted with and appear visually muted.\n\nIn general, this state should never be used. Instead, aim to explain to the user why the choice is wrong in an error message and make sure they understand how to correct it."
+        },
+        {
+          "kind": "variable",
+          "name": "Size",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Size', render: () => html` <div class=\"radio-group\"> <gds-flex gap=\"xl\" margin=\"0 auto\"> <gds-flex gap=\"s\" flex-direction=\"column\" flex=\"1\"> <gds-text tag=\"small\">Size: Large(default)</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> <gds-flex gap=\"s\" flex-direction=\"column\" flex=\"1\"> <gds-text tag=\"small\">Size: small</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" size=\"small\" > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> </gds-flex> </div> `, }",
+          "description": "Radio buttons support two sizes:\n- Large (default): Standard size for most use cases\n- Small: Compact size for space-constrained layouts\n\nThe size can be set on the radio group and applies to all radio buttons within."
+        },
+        {
+          "kind": "variable",
+          "name": "Direction",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Direction', render: () => html` <div class=\"radio-group\"> <gds-flex gap=\"xl\" margin=\"0 auto\"> <gds-flex gap=\"s\" flex-direction=\"column\"> <gds-text tag=\"small\">Column (default)</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" show-extended-supporting-text > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"3\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"4\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> <gds-flex gap=\"s\" flex=\"1\" flex-direction=\"column\"> <gds-text tag=\"small\">Row</gds-text> <gds-divider opacity=\"0.1\"></gds-divider> <gds-radio-group label=\"Group Label\" supporting-text=\"Support text for the group\" value=\"4\" size=\"small\" direction=\"row\" show-extended-supporting-text > <span slot=\"extended-supporting-text\"> Extended supporting text for the group </span> <gds-radio label=\"Radio Label\" value=\"1\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"3\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"4\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"5\" supporting-text=\"Example support text\" ></gds-radio> <gds-radio label=\"Radio Label\" value=\"6\" supporting-text=\"Example support text\" ></gds-radio> </gds-radio-group> </gds-flex> </gds-flex> </div> `, }",
+          "description": "Radio buttons can be arranged in two directions:\n- Column (default): Vertical stacking for clear separation\n- Row: Horizontal alignment for compact layouts that will break to new line when not enough space is available\n\nChoose the direction based on available space and number of options."
+        },
+        {
+          "kind": "variable",
+          "name": "GroupLabel",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Radio group label', render: () => html` <div class=\"radio-group\"> <gds-radio-group> <gds-radio label=\"Radio Label\" value=\"1\"></gds-radio> <gds-radio label=\"Radio Label\" value=\"2\"></gds-radio> </gds-radio-group> </div> `, }",
+          "description": "While radio groups can be created without a label, it's recommended to always provide one for clarity and accessibility.\nThe label helps users understand what the options are for.\n\nIn certain cases when space is limited, the group label can be omitted."
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsBackdrop",
+          "name": "default",
           "declaration": {
-            "name": "GdsBackdrop",
-            "module": "src/components/popover/backdrop.ts"
+            "name": "meta",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RadioButton",
+          "declaration": {
+            "name": "RadioButton",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Validation",
+          "declaration": {
+            "name": "Validation",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DosAndDonts",
+          "declaration": {
+            "name": "DosAndDonts",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Disabled",
+          "declaration": {
+            "name": "Disabled",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Size",
+          "declaration": {
+            "name": "Size",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Direction",
+          "declaration": {
+            "name": "Direction",
+            "module": "src/components/radio/radio.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GroupLabel",
+          "declaration": {
+            "name": "GroupLabel",
+            "module": "src/components/radio/radio.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/index.ts",
+      "path": "src/components/radio/radio.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "style",
+          "default": "css` :host { cursor: pointer; } :host([disabled]) { color: var(--gds-sys-color-content-disabled-01); cursor: default; } :host(:focus) { outline: none; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "style",
+            "module": "src/components/radio/radio.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/radio/radio.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "*",
+          "name": "GdsRadio",
           "declaration": {
-            "name": "*",
-            "module": "src/components/popover/popover"
+            "name": "GdsRadio",
+            "module": "src/components/radio/radio.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/rich-text/index.ts",
+      "declarations": [],
+      "exports": [
         {
           "kind": "js",
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/popover/backdrop"
+            "module": "src/components/rich-text/rich-text"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/popover.component.ts",
+      "path": "src/components/rich-text/rich-text.component.ts",
       "declarations": [
-        {
-          "kind": "function",
-          "name": "applyTriggerAriaAttributes",
-          "parameters": [
-            {
-              "name": "trigger",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "name": "popupRole",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Apply the necessary ARIA attributes to a popover trigger element. Use this to apply correct\nattributes in advance if you render `<gds-popover>` conditionally, since the popover component\nonly applies these attributes when it initializes."
-        },
         {
           "kind": "class",
-          "description": "",
-          "name": "GdsPopover",
-          "slots": [
+          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\n\nThe wrapped content will render inside the shadowRoot of the `gds-rich-text` element, thereby applying the\ndefault typography styles and standard element styles defined in the Green Design System.",
+          "name": "GdsRichText",
+          "members": [
             {
-              "description": "Content of the popover",
-              "name": ""
+              "kind": "field",
+              "name": "captureMode",
+              "type": {
+                "text": "'clone' | 'move'"
+              },
+              "default": "'clone'",
+              "description": "Capture mode for the content.\n\n- `clone` (default): Clones the content to the shadowRoot.\\\n  This is the default and most compatible behaviour, since it leaves the original DOM untouched.\n  the downside is that events added through `addEventListener` will not be retained in the cloned DOM.\n\n- `move`: Moves the content to the inner shadowRoot.\\\n  This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event\n  listeners, intact.\n  This mode is less compatible with some libraries that rely on the original DOM structure, for example React",
+              "attribute": "captureMode"
             },
             {
-              "description": "Trigger element for the popover. If this slot is occupied, the popover will listen to keydown and click events on the trigger and automtaiclly open when clicked or when the trigger is focused and `ArrowDown` is pressed.",
-              "name": "trigger"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "querySelectorAll",
+              "return": {
+                "type": {
+                  "text": "NodeList"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
+            },
             {
-              "kind": "field",
-              "name": "DefaultMiddleware",
-              "type": {
-                "text": "Middleware[]"
+              "kind": "method",
+              "name": "querySelector",
+              "return": {
+                "type": {
+                  "text": "Element | null"
+                }
               },
-              "static": true,
-              "default": "[ offset(8), shift({ crossAxis: true, padding: 8, }), ]",
-              "description": "The default set of middleware for Floating UI positioning used by GdsPopover."
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "innerHTML",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Whether the popover is open.",
-              "attribute": "open",
-              "reflects": true
+              "description": "Forwards innerHTML from the inner shadowRoot."
             },
             {
               "kind": "field",
-              "name": "popupRole",
+              "name": "'align-self'",
               "type": {
-                "text": "'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'"
+                "text": "string | undefined"
               },
-              "default": "'dialog'",
-              "description": "This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element.\nRead here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup",
-              "attribute": "popup-role"
+              "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": "triggerRef",
+              "name": "'justify-self'",
               "type": {
-                "text": "Promise<HTMLElement> | undefined"
+                "text": "string | undefined"
               },
-              "description": "Optional way to assign a trigger element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the trigger element programatically."
+              "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": "anchorRef",
+              "name": "'place-self'",
               "type": {
-                "text": "Promise<HTMLElement> | undefined"
+                "text": "string | undefined"
               },
-              "description": "Optional way to assign an anchor element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the anchor element programatically."
+              "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": "label",
+              "name": "'grid-column'",
               "type": {
                 "text": "string | undefined"
               },
-              "default": "undefined",
-              "description": "Optional trigger element for the popover.",
-              "attribute": "label"
+              "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": "placement",
+              "name": "'grid-row'",
               "type": {
-                "text": "Placement"
+                "text": "string | undefined"
               },
-              "default": "'bottom-start'",
-              "description": "The placement of the popover relative to the trigger.\nAccepts any of the placements supported by Floating UI.",
-              "attribute": "placement"
+              "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": "disableMobileStyles",
+              "name": "'grid-area'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether to use a modal dialog in mobile viewport.",
-              "attribute": "disableMobileStyles"
+              "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": "autofocus",
+              "name": "flex",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the popover should autofocus the first slotted child when opened.",
-              "attribute": "autofocus"
-            },
-            {
-              "kind": "field",
-              "name": "calcMinWidth",
-              "description": "A callback that returns the minimum width of the popover.\nBy default, the popover minWidth will be as wide as the trigger element."
-            },
-            {
-              "kind": "field",
-              "name": "calcMaxWidth",
-              "description": "A callback that returns the maximum width of the popover.\nBy default, the popover maxWidth will be set to `auto` and will grow as needed."
-            },
-            {
-              "kind": "field",
-              "name": "calcMinHeight",
-              "description": "A callback that returns the minimum height of the popover.\nBy default, the popover minHeight will be set to `auto`"
+              "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": "calcMaxHeight",
-              "description": "A callback that returns the maximum height of the popover.\nBy default, the popover maxHeight will be set to a hard coded pixel value (check source code)."
+              "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": "nonmodal",
+              "name": "margin",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the popover is nonmodal. When true, the popover will not trap focus and other elements\non the page will still be interactable while the popover is open.",
-              "attribute": "nonmodal",
-              "reflects": true
+              "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": "backdrop",
+              "name": "'margin-inline'",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is\nin modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be\nset to a selector matching a `<gds-backdrop>` element, in wich case the popover will take\ncontrol of that backdrop.\n\nExample:\n```html\n<gds-popover backdrop=\".my-backdrop\">\n  <gds-button slot=\"trigger\">Open</gds-button>\n  <p>Popover content</p>\n</gds-popover>\n<gds-backdrop class=\"my-backdrop\"></gds-backdrop>\n```",
-              "attribute": "backdrop"
+              "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": "floatingUIMiddleware",
+              "name": "'margin-block'",
               "type": {
-                "text": "Middleware[]"
+                "text": "string | undefined"
               },
-              "description": "An array of middleware for the Floating UI positioning algorithm. Here you can pass in an array\nof middleware to customize positioning to your needs. This array is passed directly to Floting UI,\nso you can just follow the documentation here: https://floating-ui.com/docs/middleware\n\nThis property does not have a corresponding attribute, so it can only be set in JavaScript.\n\nDefaults to `[offset(8), flip()]`"
+              "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": "method",
@@ -29158,158 +29166,94 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`.",
-              "name": "gds-ui-state"
-            },
-            {
-              "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 popover is open.",
-              "fieldName": "open"
-            },
-            {
-              "name": "popup-role",
-              "type": {
-                "text": "'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'"
-              },
-              "default": "'dialog'",
-              "description": "This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element.\nRead here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup",
-              "fieldName": "popupRole"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "Optional trigger element for the popover.",
-              "fieldName": "label"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "default": "'bottom-start'",
-              "description": "The placement of the popover relative to the trigger.\nAccepts any of the placements supported by Floating UI.",
-              "fieldName": "placement"
-            },
-            {
-              "name": "disableMobileStyles",
+              "name": "captureMode",
               "type": {
-                "text": "boolean"
+                "text": "'clone' | 'move'"
               },
-              "default": "false",
-              "description": "Whether to use a modal dialog in mobile viewport.",
-              "fieldName": "disableMobileStyles"
+              "default": "'clone'",
+              "description": "Capture mode for the content.\n\n- `clone` (default): Clones the content to the shadowRoot.\\\n  This is the default and most compatible behaviour, since it leaves the original DOM untouched.\n  the downside is that events added through `addEventListener` will not be retained in the cloned DOM.\n\n- `move`: Moves the content to the inner shadowRoot.\\\n  This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event\n  listeners, intact.\n  This mode is less compatible with some libraries that rely on the original DOM structure, for example React",
+              "fieldName": "captureMode"
             },
             {
-              "name": "autofocus",
+              "name": "gds-element",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the popover should autofocus the first slotted child when opened.",
-              "fieldName": "autofocus"
+              "description": "The unscoped name of this element. This attribute is set automatically by the element and is inteded to be read-only.",
+              "readonly": true,
+              "fieldName": "gdsElementName",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "withLayoutChildProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
             },
             {
-              "name": "nonmodal",
+              "name": "withMarginProps",
+              "module": "/src/utils/mixins/declarative-layout-mixins"
+            }
+          ],
+          "superclass": {
+            "name": "GdsElement",
+            "module": "/src/gds-element"
+          },
+          "tagName": "gds-rich-text",
+          "customElement": true,
+          "events": [
+            {
+              "name": "gds-element-disconnected",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent"
               },
-              "default": "false",
-              "description": "Whether the popover is nonmodal. When true, the popover will not trap focus and other elements\non the page will still be interactable while the popover is open.",
-              "fieldName": "nonmodal"
+              "description": "When the element is disconnected from the DOM",
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
             },
             {
-              "name": "backdrop",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "Event"
               },
-              "description": "When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is\nin modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be\nset to a selector matching a `<gds-backdrop>` element, in wich case the popover will take\ncontrol of that backdrop.\n\nExample:\n```html\n<gds-popover backdrop=\".my-backdrop\">\n  <gds-button slot=\"trigger\">Open</gds-button>\n  <p>Popover content</p>\n</gds-popover>\n<gds-backdrop class=\"my-backdrop\"></gds-backdrop>\n```",
-              "fieldName": "backdrop"
+              "inheritedFrom": {
+                "name": "GdsElement",
+                "module": "src/gds-element.ts"
+              }
             },
             {
-              "name": "gds-element",
               "type": {
-                "text": "string | undefined"
+                "text": "Event"
               },
-              "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"
               }
             }
-          ],
-          "superclass": {
-            "name": "GdsElement",
-            "module": "/src/gds-element"
-          },
-          "tagName": "gds-popover",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "applyTriggerAriaAttributes",
-          "declaration": {
-            "name": "applyTriggerAriaAttributes",
-            "module": "src/components/popover/popover.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GdsPopover",
+          "name": "GdsRichText",
           "declaration": {
-            "name": "GdsPopover",
-            "module": "src/components/popover/popover.component.ts"
+            "name": "GdsRichText",
+            "module": "src/components/rich-text/rich-text.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/popover.stories.ts",
+      "path": "src/components/rich-text/rich-text.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -29317,35 +29261,79 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Popover', component: 'gds-popover', parameters: { layout: 'centered', }, tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-popover'), }, }",
-          "description": "A popover is a temporary view that appears above other content."
+          "default": "{ title: 'Components/Rich Text', component: 'gds-rich-text', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-rich-text'), }, }",
+          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\n\nThe wrapped content will get captured and transferred to the inner shadowRoot of the `gds-rich-text` element.\n\nA typical use case for this component is to wrap a block of HTML content output from a CMS or other source\nthat you want to apply the design system typography to.\n\nIt supports out of the box all heading styles, paragraphs, lists, blockquotes, figures, tables, and more."
         },
         {
           "kind": "variable",
-          "name": "Usage",
+          "name": "Card",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, }",
-          "description": "The popover can be used declaratively by adding a trigger button and content inside the popover element, like in the example below.\n\nIt is also possible to set the trigger and anchor by supplying DOM references (wrapped in promises) to the `triggerRef` and `anchorRef`\nproperties. This is useful when the trigger and anchor needs to be different elements."
+          "default": "{ ...DefaultParams, name: 'Card', render: (args) => html` <gds-card> <gds-rich-text> <h1> The Starship <small>SS Endeavor</small> <mark>Exploration Class</mark> </h1> <h2>Heading one</h2> <h3>Heading test</h3> <p> The <strong>SS Endeavor</strong> is a state-of-the-art exploration class starship designed for deep space missions. Equipped with advanced technology and robust systems, it aims to expand our understanding of the universe. With a focus on <em>interstellar travel</em>, the SS Endeavor features a unique propulsion system that allows for faster-than-light travel. Its mission is to explore uncharted territories and gather data on distant celestial bodies. <a href=\"#\">Link</a> </p> <figure> <img src=\"https://placehold.co/600x400\" alt=\"SS Endeavor Starship\" /> <figcaption> Artist's rendition of the SS Endeavor in flight. </figcaption> </figure> <blockquote> <p> \"The SS Endeavor represents the pinnacle of human engineering and ambition. It is not just a vessel; it is our gateway to the stars.\" <cite>— Dr. Amelia Carter, Chief Engineer</cite> </p> </blockquote> <p> For detailed specifications, please refer to the <a href=\"javascript:;\" onclick=\"console.log('Accessing starship specifications')\" >technical documentation</a >. The SS Endeavor is equipped with cutting-edge systems that ensure the safety and efficiency of its crew during long-duration missions. </p> <p> Furthermore, <mark>SS Endeavor</mark> is designed with a modular approach, allowing for easy <code>upgrades</code> and <code>maintenance</code>. </p> <h2>Specifications</h2> <ul> <li> Length: 150 meters Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> <li>Width: 50 meters</li> <li>Height: 30 meters</li> <li>Crew Capacity: 100 personnel</li> <li>Propulsion: Quantum Slipstream Drive</li> <li>Maximum Speed: 10 light-years per hour</li> </ul> <hr /> <h2>One digit list</h2> <ol> <li> Conduct scientific research on exoplanets, focusing on atmospheric composition <a href=\"#\">Inline link</a> and potential habitability. </li> <li> Establish contact with potential extraterrestrial civilizations through advanced signal detection and transmission protocols. </li> <li> Collect comprehensive data on diverse cosmic phenomena, including black hole dynamics, supernova remnants, and dark matter distribution. </li> <li> Test new technologies in real-world scenarios, specifically advanced propulsion systems for interstellar travel. </li> <li> Test new technologies in real-world scenarios, implementing closed-loop life support systems for long-duration space missions. </li> </ol> <h2>Two digit list</h2> <ol> <li> Conduct scientific research on exoplanets, focusing on atmospheric composition <a href=\"#\">Inline link</a> and potential habitability. </li> <li> Establish contact with potential extraterrestrial civilizations through advanced signal detection and transmission protocols. </li> <li> Collect comprehensive data on diverse cosmic phenomena, including black hole dynamics, supernova remnants, and dark matter distribution. </li> <li> Test new technologies in real-world scenarios, specifically advanced propulsion systems for interstellar travel. </li> <li> Test new technologies in real-world scenarios, implementing closed-loop life support systems for long-duration space missions. </li> <li> Test new technologies in real-world scenarios, evaluating the effectiveness of advanced radiation shielding materials. </li> <li> Test new technologies in real-world scenarios, deploying autonomous robotic systems for deep-space exploration and resource extraction. </li> <li> Test new technologies in real-world scenarios, analyzing the performance of quantum communication networks in space. </li> <li> Test new technologies in real-world scenarios, using advanced AI for real time data analysis and decision making. </li> <li> Investigate the origins and evolution of the universe through high-resolution astronomical observations. </li> <li> Develop and deploy advanced sensor arrays for detecting gravitational waves and other subtle cosmic signals. </li> <li> Analyze asteroid compositions to understand the early solar system and potential resources. </li> <li> Map the galactic structure with unprecedented accuracy, revealing hidden star systems and nebula. </li> <li> Study the effects of prolonged space travel on human physiology and psychology, preparing for future interstellar journeys. </li> <li> Create detailed models of planetary formation and evolution, improving our understanding of planet diversity. </li> <li> Explore the possibility of utilizing advanced energy sources, like fusion reactors, for deep space exploration. </li> </ol> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li> Mapping the surface of Mars for potential human colonization </li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> <p> In summary, the <strong>SS Endeavor</strong> is poised to lead humanity's next great leap into the cosmos. <s>With the right investments and support,</s> its missions will pave the way for future exploration and discovery. <mark>Join us</mark> as we embark on this exciting journey into the unknown. </p> <table> <thead> <tr> <th>Component</th> <th>Details</th> <th>Function</th> </tr> </thead> <tbody> <tr> <td>Life Support System</td> <td>Advanced recycling and oxygen generation</td> <td>Ensures crew survival during long missions</td> </tr> <tr> <td>Navigation System</td> <td>AI-assisted star mapping</td> <td>Guides the ship through uncharted space</td> </tr> <tr> <td>Defensive Systems</td> <td>Energy shields and hull plating</td> <td>Protects against cosmic threats</td> </tr> <tr> <td>Scientific Labs</td> <td>Equipped for various research disciplines</td> <td>Facilitates on-board experiments</td> </tr> <tr> <td>Propulsion System</td> <td>Quantum Slipstream Drive</td> <td>Enables faster-than-light travel</td> </tr> </tbody> </table> <h2>Iframe</h2> <iframe src=\"https://example.com/\" height=\"400\"></iframe> </gds-rich-text> </gds-card> `, }"
         },
         {
           "kind": "variable",
-          "name": "CancelEvent",
+          "name": "Headings",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: () => html` <gds-popover id=\"cancellable\" @gds-ui-state=${(e: CustomEvent) => e.detail.reason === 'close' && e.preventDefault()} > <gds-button rank=\"secondary\" slot=\"trigger\"> Show popover <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> </gds-button> <div style=\"padding: 1rem; padding-top: 0\"> <h3>Customized closing behavior</h3> <p> This popover can only be closed by click the button below or hitting escape. </p> <gds-button rank=\"primary\" @click=${() => { ;(document.getElementById('cancellable') as GdsPopover).open = false }} >Close me!</gds-button > </div> </gds-popover>`, }",
-          "description": "By default, the popover will close when clicking outside or hitting the escape key. This behavior can be customized by listening to the `gds-ui-state` event and calling `preventDefault()` on the event object when the popover should not close.\n\nFor example:\n\n```html\n<gds-popover"
+          "default": "{ ...DefaultParams, name: 'Headings', render: (args) => html` <gds-rich-text> <!-- <h1>The Starship SS Endeavor Exploration Class</h1> <h2>Mission Alpha Centauri Deep Space Exploration</h2> <h3>Rocket Falcon Heavy Launch Vehicle</h3> <h4>Engine Raptor Next-Gen Propulsion</h4> <h5>Module Dragon Crew Transport</h5> <h6>Satellite Starlink Global Internet</h6> --> <h1>Heading 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h2>Heading 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h3>Heading 3</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h4>Heading 4</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h5>Heading 5</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <h6>Heading 6</h6> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.\nIt supports out of the box all heading styles from h1 to h6 based on the green design system typography styles."
         },
         {
           "kind": "variable",
-          "name": "Customization",
+          "name": "Lists",
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: () => html`<gds-div width=\"700px\" height=\"250px\"> <gds-card variant=\"secondary\" width=\"720px\" border=\"4xs\" border-width=\"0 0 4xs\" border-radius=\"0\" padding=\"0\" position=\"fixed\" flex-direction=\"row\" inset=\"0 auto auto 0\" z-index=\"1000\" > <gds-popover> <gds-menu-button slot=\"trigger\"> <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> Basic popover </gds-menu-button compact> <div style=\"padding: 1rem;\">Basic popover</div> </gds-popover> <gds-popover nonmodal backdrop=\"#my-backdrop\" .floatingUIMiddleware=${[{ fn: ({ y }) => ({ x: 25, y: y + 8 }) }]} .calcMaxWidth=${() => '670px'}> <gds-menu-button slot=\"trigger\"> <gds-icon-chevron-bottom slot=\"trail\"></gds-icon-chevron-bottom> With custom backdrop and positioning middleware </gds-menu-button> <div style=\"padding: 0 1rem;\"> <h3>Customized popover</h3> <p>In this popover, we're using custom Floating UI middleware to control the positioning, and <i>calcMaxWidth</i> to set the size.</p> <p>We're also using a backdrop element, referenced by the <i>backdrop</i> attribute, to dim the background below the menu bar.</p> </div> </gds-popover> </gds-card> <gds-backdrop id=\"my-backdrop\"></gds-backdrop> </gds-div>`, }",
-          "description": "Here is an example of how the popover can be customized with sizing, placement and backdrop."
+          "default": "{ ...DefaultParams, name: 'Lists', render: (args) => html` <gds-rich-text> <h2>Key Technologies in Space Exploration</h2> <ul> <li>Rocket propulsion systems</li> <li>Life support systems</li> <li>Communication satellites</li> <li>Space habitats and modules</li> <li>Robotic exploration rovers</li> <li>Advanced materials for spacecraft</li> </ul> <h2>Major Milestones in Space Exploration</h2> <ol> <li>Launch of Sputnik 1 (1957) - The first artificial satellite.</li> <li> First human in space (Yuri Gagarin, 1961) - Historic manned spaceflight. </li> <li> Apollo 11 Moon landing (1969) - First humans to walk on the Moon. </li> <li> Launch of the Space Shuttle (1981) - Introduction of reusable spacecraft. </li> <li> Mars Rover Curiosity landing (2012) - Advanced exploration of the Martian surface. </li> <li> Launch of the James Webb Space Telescope (2021) - Next-generation space observatory. </li> </ol> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` has built-in support for ordered and unordered lists.\nIt applies consistent spacing and typography styles to list items."
+        },
+        {
+          "kind": "variable",
+          "name": "Details",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Details', render: (args) => html` <gds-rich-text> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li>Mapping the surface of Mars for potential human colonization</li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` has built-in support for details html element.\n\nThe details element is a disclosure widget from HTML5 that can be used to hide or show additional content."
+        },
+        {
+          "kind": "variable",
+          "name": "Blockquote",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Blockquote', render: (args) => html` <gds-rich-text> <h2>Inspirational Quotes from Space Exploration Pioneers</h2> <blockquote> <p> \"That's one small step for [a] man, one giant leap for mankind.\" <cite>— Neil Armstrong, Apollo 11 Astronaut</cite> </p> </blockquote> <blockquote> <p> \"The important achievement of Apollo was demonstrating that humanity is not forever chained to this planet and our visions go rather further than that and our opportunities are unlimited.\" <cite>— Neil Armstrong</cite> </p> </blockquote> <blockquote> <p> \"To confine our attention to terrestrial matters would be to limit the human spirit.\" <cite>— Stephen Hawking, Theoretical Physicist</cite> </p> </blockquote> <blockquote> <p> \"The Earth is the cradle of humanity, but mankind cannot stay in the cradle forever.\" <cite>— Konstantin Tsiolkovsky, Rocket Scientist</cite> </p> </blockquote> <blockquote> <p> \"I don't want to be an astronaut. I want to be a space explorer.\" <cite>— Chris Hadfield, Astronaut</cite> </p> </blockquote> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` has built-in support blockquote element."
+        },
+        {
+          "kind": "variable",
+          "name": "Formatting",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Formatting', render: (args) => html` <gds-rich-text> <h3>Key Concepts in Space Exploration</h3> <p> The field of space exploration is constantly evolving. It is essential to understand the <strong>fundamental principles</strong> that guide our missions. For example, <mark>propulsion technology</mark> is crucial for <em>successful space travel</em>. Moreover, the study of <s>black holes</s> has revealed significant insights into the <small>nature of the universe</small>. </p> <p> As we continue to explore the cosmos, <strong>collaboration</strong> among international space agencies is vital. Together, we can achieve <mark>greater advancements</mark> in our understanding of the universe. </p> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` has built-in support for inline formatting tags such as `s`, `mark`, `strong`,`small` and `em`."
+        },
+        {
+          "kind": "variable",
+          "name": "Table",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Table', render: (args) => html` <gds-rich-text> <h2>Significant Space Missions</h2> <table> <thead> <tr> <th>Mission Name</th> <th>Launch</th> <th>Objectives</th> <th>Outcomes</th> </tr> </thead> <tbody> <tr> <td>Apollo 11</td> <td>1969</td> <td>First manned Moon landing</td> <td> Successful lunar landing; Neil Armstrong and Buzz Aldrin walked on the Moon. </td> </tr> <tr> <td>Voyager 1</td> <td>1977</td> <td>Explore outer planets and interstellar space</td> <td> Provided detailed images of Jupiter and Saturn; currently in interstellar space. </td> </tr> <tr> <td>Hubble Space Telescope</td> <td>1990</td> <td>Observe distant galaxies and cosmic phenomena</td> <td> Revolutionized astronomy; provided stunning images and data. </td> </tr> <tr> <td>Curiosity Rover</td> <td>2011</td> <td>Explore Mars' surface and assess habitability</td> <td> Confirmed the presence of water; conducted extensive geological analysis. </td> </tr> <tr> <td>James Webb Space Telescope</td> <td>2021</td> <td>Observe the early universe and exoplanets</td> <td>Expected to provide unprecedented insights into the cosmos.</td> </tr> </tbody> </table> </gds-rich-text> `, }",
+          "description": "`gds-rich-text` has built-in support for tables."
+        },
+        {
+          "kind": "variable",
+          "name": "Basic",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ ...DefaultParams, name: 'Theme', render: (args) => html` <gds-card variant=\"tertiary\"> <gds-rich-text> <h1> The Starship <small>SS Endeavor</small> <mark>Exploration Class</mark> </h1> <h2>Heading one</h2> <h3>Heading test</h3> <p> The <strong>SS Endeavor</strong> is a state-of-the-art exploration class starship designed for deep space missions. Equipped with advanced technology and robust systems, it aims to expand our understanding of the universe. With a focus on <em>interstellar travel</em>, the SS Endeavor features a unique propulsion system that allows for faster-than-light travel. Its mission is to explore uncharted territories and gather data on distant celestial bodies. <a href=\"#\">Link</a> </p> <figure> <img src=\"https://placehold.co/600x400\" alt=\"SS Endeavor Starship\" /> <figcaption> Artist's rendition of the SS Endeavor in flight. </figcaption> </figure> <blockquote> <p> \"The SS Endeavor represents the pinnacle of human engineering and ambition. It is not just a vessel; it is our gateway to the stars.\" <cite>— Dr. Amelia Carter, Chief Engineer</cite> </p> </blockquote> <p> For detailed specifications, please refer to the <a href=\"javascript:;\" onclick=\"console.log('Accessing starship specifications')\" >technical documentation</a >. The SS Endeavor is equipped with cutting-edge systems that ensure the safety and efficiency of its crew during long-duration missions. </p> <p> Furthermore, <mark>SS Endeavor</mark> is designed with a modular approach, allowing for easy upgrades and maintenance. </p> <h2>Specifications</h2> <ul> <li> Length: 150 meters Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> <li>Width: 50 meters</li> <li>Height: 30 meters</li> <li>Crew Capacity: 100 personnel</li> <li>Propulsion: Quantum Slipstream Drive</li> <li>Maximum Speed: 10 light-years per hour</li> </ul> <hr /> <h2>Mission Objectives</h2> <ol> <li>Conduct scientific research on exoplanets.</li> <li> Establish contact with potential extraterrestrial civilizations. </li> <li>Collect data on cosmic phenomena.</li> <li>Test new technologies in real-world scenarios.</li> </ol> <h3>Research Areas</h3> <details name=\"named-details\"> <summary>Focus Areas</summary> <p>The SS Endeavor will focus on the following research areas:</p> <ul> <li>Astrobiology</li> <li>Exoplanetary geology</li> <li>Astrophysics and cosmology</li> <li>Space weather and its effects on technology</li> </ul> </details> <details name=\"named-details\"> <summary>Exploration Objectives</summary> <p> The SS Endeavor aims to achieve significant breakthroughs in the following exploration objectives: </p> <ul> <li> Mapping the surface of Mars for potential human colonization </li> <li>Studying the atmospheres of gas giants</li> <li>Investigating the potential for life on Europa</li> <li>Understanding the dynamics of asteroid belts</li> </ul> </details> <details name=\"named-details\"> <summary>Technological Innovations</summary> <p> The SS Endeavor will develop and implement cutting-edge technologies in these areas: </p> <ul> <li>Advanced propulsion systems for deep space travel</li> <li>Autonomous robotic systems for planetary exploration</li> <li> Next-generation communication systems for interstellar data transmission </li> <li>Innovative life support systems for long-duration missions</li> </ul> </details> <p> In summary, the <strong>SS Endeavor</strong> is poised to lead humanity's next great leap into the cosmos. <s>With the right investments and support,</s> its missions will pave the way for future exploration and discovery. <mark>Join us</mark> as we embark on this exciting journey into the unknown. </p> <table> <thead> <tr> <th>Component</th> <th>Details</th> <th>Function</th> </tr> </thead> <tbody> <tr> <td>Life Support System</td> <td>Advanced recycling and oxygen generation</td> <td>Ensures crew survival during long missions</td> </tr> <tr> <td>Navigation System</td> <td>AI-assisted star mapping</td> <td>Guides the ship through uncharted space</td> </tr> <tr> <td>Defensive Systems</td> <td>Energy shields and hull plating</td> <td>Protects against cosmic threats</td> </tr> <tr> <td>Scientific Labs</td> <td>Equipped for various research disciplines</td> <td>Facilitates on-board experiments</td> </tr> <tr> <td>Propulsion System</td> <td>Quantum Slipstream Drive</td> <td>Enables faster-than-light travel</td> </tr> </tbody> </table> <h2>Iframe</h2> <iframe src=\"https://example.com/\" height=\"400\"></iframe> </gds-rich-text> </gds-card> `, }",
+          "description": "Rich text can be used with other components to create engaging content.\nIn this example, we combine rich text with a card component to showcase how colors will be applied.\n\nExample:\n\n```html\n<gds-card variant=\"tertiary\">\n <gds-rich-text>\n   ...\n  </gds-rich-text>\n</gds-card>\n```"
         }
       ],
       "exports": [
@@ -29354,95 +29342,107 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/popover/popover.stories.ts"
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Usage",
+          "name": "Card",
           "declaration": {
-            "name": "Usage",
-            "module": "src/components/popover/popover.stories.ts"
+            "name": "Card",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "CancelEvent",
+          "name": "Headings",
           "declaration": {
-            "name": "CancelEvent",
-            "module": "src/components/popover/popover.stories.ts"
+            "name": "Headings",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Customization",
+          "name": "Lists",
           "declaration": {
-            "name": "Customization",
-            "module": "src/components/popover/popover.stories.ts"
+            "name": "Lists",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/popover/popover.styles.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "style",
-          "default": "css` @layer base, reset, transitional-styles; @layer base { :host { display: contents; } :host > div:not([hidden]) { display: contents; } :host([open]) dialog { opacity: 1; box-sizing: border-box; visibility: visible; } dialog { display: flex; flex-direction: column; inset: auto; position: fixed; overflow: hidden; padding: 0px; box-sizing: border-box; right: 0; margin: 0; box-shadow: var(--gds-sys-shadow-l-01); border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-radius-s); overscroll-behavior: contain; } :host([nonmodal]) dialog { z-index: 1; } @media (max-width: 576px) { dialog.use-modal-in-mobile { border-radius: var(--gds-sys-radius-m) var(--gds-sys-radius-m) 0 0; transition: transform var(--gds-sys-motion-duration-fastest) ease; min-width: 100vw; position: fixed; bottom: 0; left: 0; padding-bottom: 0; transform: translateY(0); @starting-style { transform: translateY(100%); } &::backdrop { background-color: rgba(0, 0, 0, 0.3); display: block; position: fixed; opacity: 1; transition: opacity var(--gds-sys-motion-duration-fast) ease; @starting-style { opacity: 0; } } } } @media (min-width: 577px) { header { display: none; } } header { display: none; } @media (min-width: 577px) { dialog:not(.has-backdrop)::backdrop { background-color: transparent; display: block; position: fixed; } } } `"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "Details",
+          "declaration": {
+            "name": "Details",
+            "module": "src/components/rich-text/rich-text.stories.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "default",
+          "name": "Blockquote",
           "declaration": {
-            "name": "style",
-            "module": "src/components/popover/popover.styles.ts"
+            "name": "Blockquote",
+            "module": "src/components/rich-text/rich-text.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Formatting",
+          "declaration": {
+            "name": "Formatting",
+            "module": "src/components/rich-text/rich-text.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/components/rich-text/rich-text.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Basic",
+          "declaration": {
+            "name": "Basic",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/popover.trans.styles.ts",
+      "path": "src/components/rich-text/rich-text.styles.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "register"
+          "kind": "variable",
+          "name": "style",
+          "default": "css` :host { font: var(--gds-sys-text-body-regular-m); --default-border: 1px solid color-mix(in srgb, currentColor, transparent 80%); letter-spacing: 0.0125rem; display: block; } h1, h2, h3, h4, h5, h6 { margin-top: var(--gds-sys-space-2xl); margin-bottom: var(--gds-sys-space-xs); } :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: unset; } h1 + h2 { margin-top: 0; } h2 + h3 { margin-top: 0; } h3 + h4 { margin-top: 0; } h4 + h5 { margin-top: 0; } h4 + h5 { margin-top: 0; } h5 + h6 { margin-top: 0; } p { margin: 0; margin-bottom: var(--gds-sys-space-m); max-width: 80ch; } blockquote { margin: unset; margin-block: 2lh; border-left: 0.2rem solid currentColor; padding-left: 2ch; max-width: 40ch; } code { background: var(--gds-sys-color-l3-neutral-02); color: var(--gds-sys-color-content-neutral-01); border-radius: var(--gds-sys-radius-xs); padding: var(--gds-sys-space-3xs); font: var(--gds-sys-text-body-book-s); } hr { border: none; border-top: var(--default-border); margin: var(--gds-sys-space-xl) 0; } s { text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: -0.22lh; } mark { color: currentColor; background-color: color-mix(in srgb, currentColor, transparent 80%); } /* * lists * ----------------------------------------------------------- */ ul, ol { padding-inline-start: 2ch; margin: unset; margin-bottom: 1lh; max-width: 80ch; } ol { list-style-type: none; counter-reset: ordered-list; margin: unset; padding: unset; } ol li { padding-left: 3.6ch; position: relative; } ol li:before { counter-increment: ordered-list; content: counter(ordered-list) '.'; left: 0.2rem; position: absolute; } ol:not(:has(li:nth-child(10))) li { padding-left: 2.4ch; } ol:has(li:nth-child(10)) li:nth-child(-n + 9):before { left: 1.4ch; } li { padding: 0 0 0.3lh 0; } ul li:last-child { padding: 0; } ul li::marker { content: '– '; } /* * figure and image * ----------------------------------------------------------- */ img { display: block; border-radius: var(--gds-sys-radius-xs); } figure { margin: 0; padding: 0; margin-top: var(--gds-sys-space-xl); } figcaption { font-size: smaller; margin-block-start: var(--gds-sys-space-xs); } /* * table * ----------------------------------------------------------- */ table { border-collapse: separate; border-spacing: 0; width: 100%; border: var(--default-border); border-radius: var(--gds-sys-radius-s); margin-top: var(--gds-sys-space-xl); } th { font-weight: var(--gds-sys-text-weight-book); text-align: left; border-bottom: var(--default-border); border-left: transparent; border-right: transparent; color: currentColor; } th:not(:last-child) { border-right: var(--default-border); } th, td { padding: 0.3lh 2ch; } td:not(:last-child) { border-right: var(--default-border); } tr:nth-child(even) td { background: color-mix(in srgb, currentColor, transparent 95%); } /* * Details * ----------------------------------------------------------- */ details { border-top: solid var(--gds-sys-space-5xs) color-mix(in srgb, currentColor, transparent 90%); font: var(--gds-sys-text-body-regular-m); } summary { font-weight: var(--gds-sys-text-weight-regular); list-style: none; padding: 0.4lh 0.2ch; font: var(--gds-sys-text-body-regular-l); color: currentColor; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; outline-offset: var(--gds-sys-space-3xs); outline-color: currentColor; padding-inline: var(--gds-sys-space-m); } details summary::-webkit-details-marker { display: none; } summary:focus-visible { border-radius: var(--gds-sys-radius-2xs); } details:hover summary { background: color-mix(in srgb, currentColor, transparent 95%); } summary::after { content: '+'; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font: var(--gds-sys-text-body-regular-l); } details[open] summary::after { content: '-'; } details[open] { border-bottom: var(--gds-sys-space-5xs) solid color-mix(in srgb, currentColor, transparent 95%); padding-bottom: 0.4lh; background: color-mix(in srgb, currentColor, transparent 95%); } details[open] > *:not(summary) { margin-left: var(--gds-sys-space-m); } details[open] summary { margin-bottom: 0.4lh; } details[open] + details { border: none; } details:last-of-type { border-bottom: var(--gds-sys-space-5xs) solid color-mix(in srgb, currentColor, transparent 90%); margin-bottom: var(--gds-sys-space-xl); } a, a:visited { color: currentColor; text-decoration-color: currentColor; } /* * Iframe */ iframe { border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-subtle-01); border-radius: var(--gds-sys-radius-xs); min-width: 100%; margin-bottom: var(--gds-sys-space-l); } `"
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "register",
-          "declaration": {
-            "name": "register",
-            "module": "src/components/popover/popover.trans.styles.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "register",
-            "module": "src/components/popover/popover.trans.styles.ts"
+            "name": "style",
+            "module": "src/components/rich-text/rich-text.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/popover/popover.ts",
+      "path": "src/components/rich-text/rich-text.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsPopover",
+          "name": "GdsRichText",
           "declaration": {
-            "name": "GdsPopover",
-            "module": "src/components/popover/popover.ts"
+            "name": "GdsRichText",
+            "module": "src/components/rich-text/rich-text.ts"
           }
         }
       ]