@sebgroup/green-core 2.37.1 → 2.37.3

package/custom-elements.json

@@ -29408,7 +29408,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { page: 1, rows: 10, total: 8, options: [5, 10, 20, 50, 100], hideOptions: false, label: '1-8 of 8', }, parameters: { docs: { description: { story: ` When all items fit on a single page (total ≤ rows), the entire pagination is automatically hidden since there is nothing to paginate. `, }, }, }, render: (args) => { const handlePageChange = (e: CustomEvent) => { args.page = e.detail.page document.querySelector('[data-page-one]')!.innerHTML = String(args.page) document .querySelector('[data-pagination-one]')! .setAttribute('page', String(args.page)) } const handleRowsChange = (e: CustomEvent) => { args.rows = e.detail.rows args.page = 1 document.querySelector('[data-rows-one]')!.innerHTML = String(args.rows) document.querySelector('[data-page-one]')!.innerHTML = '1' document.querySelector('[data-pagination-one]')!.setAttribute('page', '1') document .querySelector('[data-pagination-one]')! .setAttribute('rows', String(args.rows)) } return html` <gds-flex flex-direction=\"column\" gap=\"2xl\"> <gds-card variant=\"secondary\" flex-direction=\"row\" gap=\"4xl\"> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Page:</gds-text> <gds-text data-page-one>${args.page}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Rows:</gds-text> <gds-text data-rows-one>${args.rows}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Total:</gds-text> <gds-text>${args.total}</gds-text> </gds-flex> </gds-card> <gds-pagination data-pagination-one page=\"${args.page}\" rows=\"${args.rows}\" .total=${args.total} .options=${args.options} ?hide-options=\"${args.hideOptions}\" label=\"${args.label}\" @gds-page-change=${handlePageChange} @gds-rows-change=${handleRowsChange} ></gds-pagination> </gds-flex> ` }, }"
+          "default": "{ args: { page: 1, rows: 10, total: 8, options: [5, 10, 20, 50, 100], hideOptions: false, label: '1-8 of 8', }, parameters: { docs: { description: { story: ` When all items fit on a single page (total ≤ rows), page navigation is hidden. If there are multiple page-size options, the rows-per-page selector remains visible so users can still switch to a smaller page size. `, }, }, }, render: (args) => { const handlePageChange = (e: CustomEvent) => { args.page = e.detail.page document.querySelector('[data-page-one]')!.innerHTML = String(args.page) document .querySelector('[data-pagination-one]')! .setAttribute('page', String(args.page)) } const handleRowsChange = (e: CustomEvent) => { args.rows = e.detail.rows args.page = 1 document.querySelector('[data-rows-one]')!.innerHTML = String(args.rows) document.querySelector('[data-page-one]')!.innerHTML = '1' document.querySelector('[data-pagination-one]')!.setAttribute('page', '1') document .querySelector('[data-pagination-one]')! .setAttribute('rows', String(args.rows)) } return html` <gds-flex flex-direction=\"column\" gap=\"2xl\"> <gds-card variant=\"secondary\" flex-direction=\"row\" gap=\"4xl\"> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Page:</gds-text> <gds-text data-page-one>${args.page}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Rows:</gds-text> <gds-text data-rows-one>${args.rows}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Total:</gds-text> <gds-text>${args.total}</gds-text> </gds-flex> </gds-card> <gds-pagination data-pagination-one page=\"${args.page}\" rows=\"${args.rows}\" .total=${args.total} .options=${args.options} ?hide-options=\"${args.hideOptions}\" label=\"${args.label}\" @gds-page-change=${handlePageChange} @gds-rows-change=${handleRowsChange} ></gds-pagination> </gds-flex> ` }, }"
         }
       ],
       "exports": [
@@ -30379,7 +30379,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/radio/index.ts",
+      "path": "src/components/rich-text/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -30387,98 +30387,216 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/radio/radio"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/radio/radio-group/radio-group"
+            "module": "src/components/rich-text/rich-text"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/radio/radio.component.ts",
+      "path": "src/components/rich-text/rich-text.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "GdsRadio",
+          "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": "label",
+              "name": "captureMode",
               "type": {
-                "text": "string"
+                "text": "'clone' | 'move'"
               },
-              "default": "''",
-              "description": "The label displayed next to the radio button.",
-              "attribute": "label"
+              "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"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
             },
             {
               "kind": "field",
-              "name": "supportingText",
+              "name": "innerHTML",
               "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"
+              "description": "Forwards innerHTML from the inner shadowRoot."
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "'align-self'",
               "type": {
-                "text": "string | boolean"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The value of the radio button.",
-              "attribute": "value"
+              "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": "checked",
+              "name": "'justify-self'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the radio button is checked or not.",
-              "attribute": "checked",
-              "reflects": true
+              "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": "disabled",
+              "name": "'place-self'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the radio button is disabled or not.",
-              "attribute": "disabled",
-              "reflects": true
+              "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": "invalid",
+              "name": "'grid-column'",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Whether the radio button is invalid or not.",
-              "attribute": "invalid"
+              "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": "errorMessage",
+              "name": "'grid-row'",
               "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"
+              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'grid-area'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `grid-area` property.\nSupports all valid CSS `grid-area` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "flex",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `flex` property.\nSupports all valid CSS `flex` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "order",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `order` property.\nSupports all valid CSS `order` values.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withLayoutChildProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "margin",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `margin` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'margin-inline'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `margin-inline` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "'margin-block'",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
+              "category": "Declarative layout / Style expression properties",
+              "inheritedFrom": {
+                "name": "withMarginProps",
+                "module": "src/utils/mixins/declarative-layout-mixins.ts"
+              }
             },
             {
               "kind": "method",
@@ -30610,33 +30728,60 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "description": "Dispatched when the radio button is checked.",
-              "name": "input"
+              "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"
             },
             {
-              "name": "gds-element-disconnected",
+              "name": "gds-element",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "When the element is disconnected from the DOM",
+              "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": "name",
+              "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": "Event"
+                "text": "CustomEvent"
               },
+              "description": "When the element is disconnected from the DOM",
               "inheritedFrom": {
                 "name": "GdsElement",
                 "module": "src/gds-element.ts"
               }
             },
             {
+              "name": "name",
               "type": {
                 "text": "Event"
               },
@@ -30644,107 +30789,33 @@
                 "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": "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 | boolean"
-              },
-              "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"
+                "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-radio",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsRadio",
+          "name": "GdsRichText",
           "declaration": {
-            "name": "GdsRadio",
-            "module": "src/components/radio/radio.component.ts"
+            "name": "GdsRichText",
+            "module": "src/components/rich-text/rich-text.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/radio/radio.stories.ts",
+      "path": "src/components/rich-text/rich-text.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -30752,70 +30823,79 @@
           "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."
+          "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": "RadioButton",
+          "name": "Card",
           "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:"
+          "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": "Validation",
+          "name": "Headings",
           "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."
+          "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": "DosAndDonts",
+          "name": "Lists",
           "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> `, }"
+          "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": "Disabled",
+          "name": "Details",
           "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."
+          "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": "Size",
+          "name": "Blockquote",
           "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."
+          "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": "Direction",
+          "name": "Formatting",
           "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."
+          "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": "GroupLabel",
+          "name": "Table",
           "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."
+          "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": [
@@ -30824,75 +30904,83 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/radio/radio.stories.ts"
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "RadioButton",
+          "name": "Card",
           "declaration": {
-            "name": "RadioButton",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Card",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Validation",
+          "name": "Headings",
           "declaration": {
-            "name": "Validation",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Headings",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DosAndDonts",
+          "name": "Lists",
           "declaration": {
-            "name": "DosAndDonts",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Lists",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Disabled",
+          "name": "Details",
           "declaration": {
-            "name": "Disabled",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Details",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Size",
+          "name": "Blockquote",
           "declaration": {
-            "name": "Size",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Blockquote",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Direction",
+          "name": "Formatting",
           "declaration": {
-            "name": "Direction",
-            "module": "src/components/radio/radio.stories.ts"
+            "name": "Formatting",
+            "module": "src/components/rich-text/rich-text.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "GroupLabel",
+          "name": "Table",
           "declaration": {
-            "name": "GroupLabel",
-            "module": "src/components/radio/radio.stories.ts"
+            "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/radio/radio.styles.ts",
+      "path": "src/components/rich-text/rich-text.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; } `"
+          "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": [
@@ -30901,29 +30989,29 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/radio/radio.styles.ts"
+            "module": "src/components/rich-text/rich-text.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/radio/radio.ts",
+      "path": "src/components/rich-text/rich-text.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsRadio",
+          "name": "GdsRichText",
           "declaration": {
-            "name": "GdsRadio",
-            "module": "src/components/radio/radio.ts"
+            "name": "GdsRichText",
+            "module": "src/components/rich-text/rich-text.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/index.ts",
+      "path": "src/components/radio/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -30931,216 +31019,98 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/rich-text/rich-text"
+            "module": "src/components/radio/radio"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/radio/radio-group/radio-group"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.component.ts",
+      "path": "src/components/radio/radio.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",
+          "description": "",
+          "name": "GdsRadio",
           "members": [
             {
               "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"
-            },
-            {
-              "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"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "selector",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Forwards the selector to the corresponding function on the inner shadowRoot."
-            },
-            {
-              "kind": "field",
-              "name": "innerHTML",
+              "name": "label",
               "type": {
                 "text": "string"
               },
-              "description": "Forwards innerHTML from the inner shadowRoot."
-            },
-            {
-              "kind": "field",
-              "name": "'align-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `align-self` property.\nSupports all valid CSS `align-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'justify-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `justify-self` property.\nSupports all valid CSS `justify-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'place-self'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `place-self` property.\nSupports all valid CSS `place-self` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-column'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-column` property.\nSupports all valid CSS grid-column values.\nDocumentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "'grid-row'",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Style Expression Property that controls the `grid-row` property.\nSupports all valid CSS `grid-row` values.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withLayoutChildProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+              "default": "''",
+              "description": "The label displayed next to the radio button.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "'grid-area'",
+              "name": "supportingText",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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"
-              }
+              "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": "flex",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string | boolean"
               },
-              "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"
-              }
+              "default": "''",
+              "description": "The value of the radio button.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "order",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Whether the radio button is checked or not.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "margin",
+              "name": "disabled",
               "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 radio button is disabled or not.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "'margin-inline'",
+              "name": "invalid",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Whether the radio button is invalid or not.",
+              "attribute": "invalid"
             },
             {
               "kind": "field",
-              "name": "'margin-block'",
+              "name": "errorMessage",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Style Expression Property that controls the `margin-block` property.\nOnly accepts space tokens.",
-              "category": "Declarative layout / Style expression properties",
-              "inheritedFrom": {
-                "name": "withMarginProps",
-                "module": "src/utils/mixins/declarative-layout-mixins.ts"
-              }
+              "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",
@@ -31272,60 +31242,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": "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"
               }
-            }
-          ],
-          "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"
               },
@@ -31333,33 +31276,107 @@
                 "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 | boolean"
               },
+              "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": "GdsRichText",
+          "name": "GdsRadio",
           "declaration": {
-            "name": "GdsRichText",
-            "module": "src/components/rich-text/rich-text.component.ts"
+            "name": "GdsRadio",
+            "module": "src/components/radio/radio.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.stories.ts",
+      "path": "src/components/radio/radio.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -31367,79 +31384,70 @@
           "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> `, }"
+          "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": "Headings",
+          "name": "RadioButton",
           "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."
+          "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": "Lists",
+          "name": "Validation",
           "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."
+          "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": "Details",
+          "name": "DosAndDonts",
           "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."
+          "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": "Blockquote",
+          "name": "Disabled",
           "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": "{ ...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": "Formatting",
+          "name": "Size",
           "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, 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": "Table",
+          "name": "Direction",
           "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, 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": "Basic",
+          "name": "GroupLabel",
           "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, 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": [
@@ -31448,83 +31456,75 @@
           "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"
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Headings",
+          "name": "RadioButton",
           "declaration": {
-            "name": "Headings",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "RadioButton",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Lists",
+          "name": "Validation",
           "declaration": {
-            "name": "Lists",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Validation",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Details",
+          "name": "DosAndDonts",
           "declaration": {
-            "name": "Details",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "DosAndDonts",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Blockquote",
+          "name": "Disabled",
           "declaration": {
-            "name": "Blockquote",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Disabled",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Formatting",
+          "name": "Size",
           "declaration": {
-            "name": "Formatting",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Size",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Table",
+          "name": "Direction",
           "declaration": {
-            "name": "Table",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "Direction",
+            "module": "src/components/radio/radio.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Basic",
+          "name": "GroupLabel",
           "declaration": {
-            "name": "Basic",
-            "module": "src/components/rich-text/rich-text.stories.ts"
+            "name": "GroupLabel",
+            "module": "src/components/radio/radio.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.styles.ts",
+      "path": "src/components/radio/radio.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` :host { cursor: pointer; } :host([disabled]) { color: var(--gds-sys-color-content-disabled-01); cursor: default; } :host(:focus) { outline: none; } `"
         }
       ],
       "exports": [
@@ -31533,22 +31533,22 @@
           "name": "default",
           "declaration": {
             "name": "style",
-            "module": "src/components/rich-text/rich-text.styles.ts"
+            "module": "src/components/radio/radio.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/rich-text/rich-text.ts",
+      "path": "src/components/radio/radio.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsRichText",
+          "name": "GdsRadio",
           "declaration": {
-            "name": "GdsRichText",
-            "module": "src/components/rich-text/rich-text.ts"
+            "name": "GdsRadio",
+            "module": "src/components/radio/radio.ts"
           }
         }
       ]
@@ -35476,6 +35476,14 @@
             "text": "Story"
           },
           "default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` The table component dispatches events for various user interactions. **Pagination Events** - **gds-page-change**: Fired when the active page changes. Detail: \\`{ page: number }\\` - **gds-rows-change**: Fired when the rows per page value changes. Detail: \\`{ rows: number }\\` **Sorting Events** - **gds-sort-change**: Fired when sorting changes. Detail: \\`{ sortColumn: string, sortDirection: 'asc' | 'desc' }\\` **Data Events** - **gds-table-data-loaded**: Fired when data is successfully loaded - **gds-table-data-error**: Fired when data loading fails - **gds-table-selection**: Fired when row selection changes This example demonstrates listening to pagination and sorting events and displaying the current state. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const state = { currentPage: 1, currentRows: 10, sortColumn: '', sortDirection: 'asc', } const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } const handlePageChange = (e: CustomEvent) => { console.log('🔔 Page change event:', e.detail) state.currentPage = e.detail.page const pageEl = document.querySelector('#page-status') if (pageEl) { pageEl.textContent = `Page: ${state.currentPage}` } } const handleRowsChange = (e: CustomEvent) => { console.log('🔔 Rows change event:', e.detail) state.currentRows = e.detail.rows const rowsEl = document.querySelector('#rows-status') if (rowsEl) { rowsEl.textContent = `Rows: ${state.currentRows}` } } const handleSortChange = (e: CustomEvent) => { console.log('🔔 Sort change event:', e.detail) state.sortColumn = e.detail.sortColumn state.sortDirection = e.detail.sortDirection const sortEl = document.querySelector('#sort-status') if (sortEl) { sortEl.textContent = `${state.sortColumn} (${state.sortDirection})` } } return html` <gds-flex flex-direction=\"column\" gap=\"l\"> <gds-flex flex-direction=\"column\" gap=\"m\"> <gds-card variant=\"secondary\" padding=\"m\" border-radius=\"m\"> <gds-flex flex-direction=\"column\" gap=\"s\"> <gds-text font=\"heading-s\">Event Monitor</gds-text> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Open your browser console (F12) to see event logs </gds-text> <gds-flex gap=\"m\"> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Current Page </gds-text> <gds-text id=\"page-status\" font=\"body-regular-m\" color=\"primary\" > Page: ${state.currentPage} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Rows Per Page </gds-text> <gds-text id=\"rows-status\" font=\"body-regular-m\" color=\"primary\" > Rows: ${state.currentRows} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Sort Column </gds-text> <gds-text id=\"sort-status\" font=\"body-regular-m\" color=\"primary\" > ${state.sortColumn ? `${state.sortColumn} (${state.sortDirection})` : 'None'} </gds-text> </gds-flex> </gds-flex> </gds-flex> </gds-card> </gds-flex> <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"5\" selectable searchable settings @gds-table-data-loaded=${handleDataLoaded} @gds-page-change=${(e: CustomEvent) => handlePageChange(e)} @gds-rows-change=${(e: CustomEvent) => handleRowsChange(e)} @gds-sort-change=${(e: CustomEvent) => handleSortChange(e)} > </gds-table> </gds-flex> ` }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "EdgeCase",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { rows: 8, options: [8, 20], }, parameters: { docs: { description: { story: ` Demonstrates a pagination edge case where the selected page size exceeds the total number of rows. 1. Dataset has 13 rows total 2. Initial page size is 8 3. Change rows per page to 20 In this edge case, page navigation is hidden when only one page remains, while the rows-per-page selector stays visible so users can switch back to a smaller page size. `, }, }, }, render: (args) => { const columns = [ { key: 'id', label: 'ID', sortable: true }, { key: 'name', label: 'Name', sortable: true }, { key: 'status', label: 'Status', sortable: true }, ] const rows = Array.from({ length: 13 }, (_, i) => ({ id: i + 1, name: `User ${i + 1}`, status: i % 2 === 0 ? 'Active' : 'Inactive', })) const dataProvider = async (request: any) => { const start = (request.page - 1) * request.rows const end = start + request.rows return { rows: rows.slice(start, end), total: rows.length, } } return html` <gds-table headline=\"Pagination edge case\" summary=\"13 rows total with page-size switching between 8 and 20.\" .columns=${columns} .data=${dataProvider} .rows=${args.rows} .options=${args.options} > </gds-table> ` }, }"
         }
       ],
       "exports": [
@@ -35638,6 +35646,14 @@
             "name": "Events",
             "module": "src/components/table/table.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "EdgeCase",
+          "declaration": {
+            "name": "EdgeCase",
+            "module": "src/components/table/table.stories.ts"
+          }
         }
       ]
     },
@@ -49050,6 +49066,228 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/bin/context-cli/migrate/engine.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_SKIP_DIRS",
+          "default": "new Set([ 'node_modules', '.git', 'dist', '.nx', '.cache', 'coverage', '.angular', '.next', '__pycache__', ])",
+          "description": "Directories that are always skipped during file discovery."
+        },
+        {
+          "kind": "function",
+          "name": "discoverFiles",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "basePath",
+              "type": {
+                "text": "string"
+              },
+              "description": "Root directory to scan"
+            },
+            {
+              "name": "extensions",
+              "type": {
+                "text": "Set<string>"
+              },
+              "description": "Set of extensions to include (e.g. `new Set(['.ts', '.html'])`)"
+            },
+            {
+              "name": "skipDirs",
+              "optional": true,
+              "type": {
+                "text": "Set<string>"
+              },
+              "description": "Directory names to skip (defaults to {@link DEFAULT_SKIP_DIRS})\n * "
+            }
+          ],
+          "description": "Discover all files under `basePath` whose extension is in `extensions`."
+        },
+        {
+          "kind": "function",
+          "name": "runMigrations",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "RunOptions"
+              },
+              "description": "Configuration for the migration run"
+            }
+          ],
+          "description": "Run one or more migration units against a directory tree.\n\nIn detect-only mode (default), files are scanned but never modified.\nIn apply mode (`apply: true`), each unit's `apply()` function is called\nand the result is written back to disk."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_SKIP_DIRS",
+          "declaration": {
+            "name": "DEFAULT_SKIP_DIRS",
+            "module": "src/bin/context-cli/migrate/engine.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "discoverFiles",
+          "declaration": {
+            "name": "discoverFiles",
+            "module": "src/bin/context-cli/migrate/engine.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "runMigrations",
+          "declaration": {
+            "name": "runMigrations",
+            "module": "src/bin/context-cli/migrate/engine.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/bin/context-cli/migrate/index.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "MIGRATE_HELP"
+        },
+        {
+          "kind": "function",
+          "name": "handleMigrate",
+          "return": {
+            "type": {
+              "text": "Promise<void>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "args",
+              "type": {
+                "text": "ParsedArgs"
+              }
+            }
+          ],
+          "description": "Route the `migrate` command to the appropriate subcommand."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MIGRATE_HELP",
+          "declaration": {
+            "name": "MIGRATE_HELP",
+            "module": "src/bin/context-cli/migrate/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleMigrate",
+          "declaration": {
+            "name": "handleMigrate",
+            "module": "src/bin/context-cli/migrate/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/bin/context-cli/migrate/registry.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "discoverMigrationUnits",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "basePath",
+              "optional": true,
+              "type": {
+                "text": "string"
+              },
+              "description": "Root `units/` directory to scan. Defaults to the\n  co-located `./units` directory next to this module."
+            }
+          ],
+          "description": "Discover migration units from the `units/<major>/` directory structure."
+        },
+        {
+          "kind": "function",
+          "name": "getMigrationUnits",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "optional": true,
+              "type": {
+                "text": "{\n  major?: number\n  id?: string\n  includeDisabled?: boolean\n  basePath?: string\n}"
+              }
+            },
+            {
+              "description": "Filter by target major version",
+              "name": "options.major"
+            },
+            {
+              "description": "Filter by exact unit ID",
+              "name": "options.id"
+            },
+            {
+              "description": "Include units with `enabled: false`",
+              "name": "options.includeDisabled"
+            },
+            {
+              "description": "Override the units directory (for tests)",
+              "name": "options.basePath"
+            }
+          ],
+          "description": "Get migration units matching optional filter criteria.\n\nBy default only enabled units are returned. Set `includeDisabled: true`\nto include disabled units (useful for tooling / debugging)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "discoverMigrationUnits",
+          "declaration": {
+            "name": "discoverMigrationUnits",
+            "module": "src/bin/context-cli/migrate/registry.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getMigrationUnits",
+          "declaration": {
+            "name": "getMigrationUnits",
+            "module": "src/bin/context-cli/migrate/registry.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/bin/context-cli/migrate/types.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/breadcrumbs/breadcrumb/breadcrumb.component.ts",
@@ -233550,7 +233788,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/index.ts",
+      "path": "src/components/sensitive/date/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -233558,19 +233796,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/number/sensitive-number"
+            "module": "src/components/sensitive/date/sensitive-date"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.component.ts",
+      "path": "src/components/sensitive/date/sensitive-date.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "members": [
             {
               "kind": "field",
@@ -233579,31 +233817,33 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive number.",
+              "description": "When true, hides the sensitive date.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "formattedValue",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "Date | string | undefined"
               },
-              "readonly": true,
+              "description": "The date value to be formatted, either Date or ISO string.",
               "inheritedFrom": {
-                "name": "GdsFormattedText",
-                "module": "src/components/formatted-text/formatted-text.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "format",
               "type": {
-                "text": "number | string | undefined"
+                "text": "DateTimeFormat"
               },
-              "description": "The numerical value to display.",
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "attribute": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -233612,37 +233852,23 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for number formatting.",
+              "description": "The locale used for date formatting.",
               "attribute": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "currency",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The currency used when formatting numbers.",
-              "attribute": "currency",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "decimals",
+              "name": "formattedValue",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "The number of decimal places to display.",
-              "attribute": "decimals",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedText",
+                "module": "src/components/formatted-text/formatted-text.ts"
               }
             },
             {
@@ -234620,56 +234846,32 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive number.",
+              "description": "When true, hides the sensitive date.",
               "fieldName": "hide"
             },
             {
-              "name": "locale",
+              "name": "format",
               "type": {
-                "text": "string | undefined"
+                "text": "DateTimeFormat"
               },
-              "description": "The locale used for number formatting.",
-              "fieldName": "locale",
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "fieldName": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
-              "name": "currency",
+              "name": "locale",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The currency used when formatting numbers.",
-              "fieldName": "currency",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "name": "decimals",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The number of decimal places to display.",
-              "fieldName": "decimals",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "name": "format",
-              "type": {
-                "text": "NumberFormats"
-              },
-              "default": "'decimalsAndThousands'",
-              "description": "Specifies the number format.",
-              "fieldName": "format",
+              "description": "The locale used for date formatting.",
+              "fieldName": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -234713,10 +234915,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedNumber",
-            "module": "/src/components/formatted-text/number/formatted-number.component"
+            "name": "GdsFormattedDate",
+            "module": "/src/components/formatted-text/date/formatted-date.component"
           },
-          "tagName": "gds-sensitive-number",
+          "tagName": "gds-sensitive-date",
           "customElement": true,
           "events": [
             {
@@ -234755,17 +234957,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveNumber",
-            "module": "src/components/sensitive/number/sensitive-number.component.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.stories.ts",
+      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -234773,8 +234975,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Number', component: 'gds-sensitive-number', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-number'), format: { control: { type: 'select' }, options: Object.keys(numberFormats), }, currency: { type: 'string', }, decimals: { type: 'number', }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/number)\n\nGdsSensitiveNumber displays a formatted number and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -234782,7 +234984,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-number .hide=${args.hide} .value=${args.value} .locale=${args.locale} .currency=${args.currency} .decimals=${args.decimals} ></gds-sensitive-number>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
         }
       ],
       "exports": [
@@ -234791,7 +234993,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         },
         {
@@ -234799,29 +235001,29 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.ts",
+      "path": "src/components/sensitive/date/sensitive-date.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveNumber",
-            "module": "src/components/sensitive/number/sensitive-number.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/index.ts",
+      "path": "src/components/sensitive/number/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -234829,19 +235031,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/date/sensitive-date"
+            "module": "src/components/sensitive/number/sensitive-number"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.component.ts",
+      "path": "src/components/sensitive/number/sensitive-number.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "members": [
             {
               "kind": "field",
@@ -234850,33 +235052,31 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive number.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "formattedValue",
               "type": {
-                "text": "Date | string | undefined"
+                "text": "string"
               },
-              "description": "The date value to be formatted, either Date or ISO string.",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedText",
+                "module": "src/components/formatted-text/formatted-text.ts"
               }
             },
             {
               "kind": "field",
-              "name": "format",
+              "name": "value",
               "type": {
-                "text": "DateTimeFormat"
+                "text": "number | string | undefined"
               },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "attribute": "format",
+              "description": "The numerical value to display.",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -234885,23 +235085,37 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for date formatting.",
+              "description": "The locale used for number formatting.",
               "attribute": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formattedValue",
+              "name": "currency",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "readonly": true,
+              "description": "The currency used when formatting numbers.",
+              "attribute": "currency",
               "inheritedFrom": {
-                "name": "GdsFormattedText",
-                "module": "src/components/formatted-text/formatted-text.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "decimals",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The number of decimal places to display.",
+              "attribute": "decimals",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -235879,32 +236093,56 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive number.",
               "fieldName": "hide"
             },
             {
-              "name": "format",
+              "name": "locale",
               "type": {
-                "text": "DateTimeFormat"
+                "text": "string | undefined"
               },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "fieldName": "format",
+              "description": "The locale used for number formatting.",
+              "fieldName": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
-              "name": "locale",
+              "name": "currency",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for date formatting.",
-              "fieldName": "locale",
+              "description": "The currency used when formatting numbers.",
+              "fieldName": "currency",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "name": "decimals",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The number of decimal places to display.",
+              "fieldName": "decimals",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "name": "format",
+              "type": {
+                "text": "NumberFormats"
+              },
+              "default": "'decimalsAndThousands'",
+              "description": "Specifies the number format.",
+              "fieldName": "format",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -235948,10 +236186,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedDate",
-            "module": "/src/components/formatted-text/date/formatted-date.component"
+            "name": "GdsFormattedNumber",
+            "module": "/src/components/formatted-text/number/formatted-number.component"
           },
-          "tagName": "gds-sensitive-date",
+          "tagName": "gds-sensitive-number",
           "customElement": true,
           "events": [
             {
@@ -235990,17 +236228,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.component.ts"
+            "name": "GdsSensitiveNumber",
+            "module": "src/components/sensitive/number/sensitive-number.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
+      "path": "src/components/sensitive/number/sensitive-number.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -236008,8 +236246,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Number', component: 'gds-sensitive-number', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-number'), format: { control: { type: 'select' }, options: Object.keys(numberFormats), }, currency: { type: 'string', }, decimals: { type: 'number', }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/number)\n\nGdsSensitiveNumber displays a formatted number and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -236017,7 +236255,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-number .hide=${args.hide} .value=${args.value} .locale=${args.locale} .currency=${args.currency} .decimals=${args.decimals} ></gds-sensitive-number>`, }"
         }
       ],
       "exports": [
@@ -236026,7 +236264,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
           }
         },
         {
@@ -236034,22 +236272,22 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.ts",
+      "path": "src/components/sensitive/number/sensitive-number.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.ts"
+            "name": "GdsSensitiveNumber",
+            "module": "src/components/sensitive/number/sensitive-number.ts"
           }
         }
       ]
@@ -236579,16 +236817,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/divider/index.ts",
+      "path": "src/generated/react/div/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDivider",
+          "name": "GdsDiv",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
               }
             }
           ]
@@ -236597,26 +236835,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDivider",
+          "name": "GdsDiv",
           "declaration": {
-            "name": "GdsDivider",
-            "module": "src/generated/react/divider/index.ts"
+            "name": "GdsDiv",
+            "module": "src/generated/react/div/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/div/index.ts",
+      "path": "src/generated/react/divider/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
               }
             }
           ]
@@ -236625,10 +236863,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "declaration": {
-            "name": "GdsDiv",
-            "module": "src/generated/react/div/index.ts"
+            "name": "GdsDivider",
+            "module": "src/generated/react/divider/index.ts"
           }
         }
       ]
@@ -238262,16 +238500,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-rotate-left-right/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowRotateLeftRight",
+          "name": "IconArrowRotateRightLeft",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateLeftRightClass>>\n  > & { ref?: React.Ref<IconArrowRotateLeftRightClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateRightLeftClass>>\n  > & { ref?: React.Ref<IconArrowRotateRightLeftClass> }"
               }
             }
           ]
@@ -238280,26 +238518,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowRotateLeftRight",
+          "name": "IconArrowRotateRightLeft",
           "declaration": {
-            "name": "IconArrowRotateLeftRight",
-            "module": "src/generated/react/icons/icon-arrow-rotate-left-right/index.ts"
+            "name": "IconArrowRotateRightLeft",
+            "module": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-rotate-left-right/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowRotateRightLeft",
+          "name": "IconArrowRotateLeftRight",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateRightLeftClass>>\n  > & { ref?: React.Ref<IconArrowRotateRightLeftClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowRotateLeftRightClass>>\n  > & { ref?: React.Ref<IconArrowRotateLeftRightClass> }"
               }
             }
           ]
@@ -238308,10 +238546,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowRotateRightLeft",
+          "name": "IconArrowRotateLeftRight",
           "declaration": {
-            "name": "IconArrowRotateRightLeft",
-            "module": "src/generated/react/icons/icon-arrow-rotate-right-left/index.ts"
+            "name": "IconArrowRotateLeftRight",
+            "module": "src/generated/react/icons/icon-arrow-rotate-left-right/index.ts"
           }
         }
       ]
@@ -239578,16 +239816,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-storybook/index.ts",
+      "path": "src/generated/react/icons/icon-brand-spotify/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandStorybook",
+          "name": "IconBrandSpotify",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandStorybookClass>>\n  > & { ref?: React.Ref<IconBrandStorybookClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandSpotifyClass>>\n  > & { ref?: React.Ref<IconBrandSpotifyClass> }"
               }
             }
           ]
@@ -239596,26 +239834,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandStorybook",
+          "name": "IconBrandSpotify",
           "declaration": {
-            "name": "IconBrandStorybook",
-            "module": "src/generated/react/icons/icon-brand-storybook/index.ts"
+            "name": "IconBrandSpotify",
+            "module": "src/generated/react/icons/icon-brand-spotify/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-spotify/index.ts",
+      "path": "src/generated/react/icons/icon-brand-storybook/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandSpotify",
+          "name": "IconBrandStorybook",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandSpotifyClass>>\n  > & { ref?: React.Ref<IconBrandSpotifyClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandStorybookClass>>\n  > & { ref?: React.Ref<IconBrandStorybookClass> }"
               }
             }
           ]
@@ -239624,10 +239862,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandSpotify",
+          "name": "IconBrandStorybook",
           "declaration": {
-            "name": "IconBrandSpotify",
-            "module": "src/generated/react/icons/icon-brand-spotify/index.ts"
+            "name": "IconBrandStorybook",
+            "module": "src/generated/react/icons/icon-brand-storybook/index.ts"
           }
         }
       ]
@@ -244114,16 +244352,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pencil-sparkle/index.ts",
+      "path": "src/generated/react/icons/icon-pencil-wave/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPencilSparkle",
+          "name": "IconPencilWave",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencilSparkleClass>>\n  > & { ref?: React.Ref<IconPencilSparkleClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencilWaveClass>>\n  > & { ref?: React.Ref<IconPencilWaveClass> }"
               }
             }
           ]
@@ -244132,26 +244370,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPencilSparkle",
+          "name": "IconPencilWave",
           "declaration": {
-            "name": "IconPencilSparkle",
-            "module": "src/generated/react/icons/icon-pencil-sparkle/index.ts"
+            "name": "IconPencilWave",
+            "module": "src/generated/react/icons/icon-pencil-wave/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pencil-wave/index.ts",
+      "path": "src/generated/react/icons/icon-pencil-sparkle/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPencilWave",
+          "name": "IconPencilSparkle",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencilWaveClass>>\n  > & { ref?: React.Ref<IconPencilWaveClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPencilSparkleClass>>\n  > & { ref?: React.Ref<IconPencilSparkleClass> }"
               }
             }
           ]
@@ -244160,10 +244398,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPencilWave",
+          "name": "IconPencilSparkle",
           "declaration": {
-            "name": "IconPencilWave",
-            "module": "src/generated/react/icons/icon-pencil-wave/index.ts"
+            "name": "IconPencilSparkle",
+            "module": "src/generated/react/icons/icon-pencil-sparkle/index.ts"
           }
         }
       ]
@@ -244506,16 +244744,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pie-chart/index.ts",
+      "path": "src/generated/react/icons/icon-piggy-bank/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPieChart",
+          "name": "IconPiggyBank",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPieChartClass>>\n  > & { ref?: React.Ref<IconPieChartClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPiggyBankClass>>\n  > & { ref?: React.Ref<IconPiggyBankClass> }"
               }
             }
           ]
@@ -244524,26 +244762,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPieChart",
+          "name": "IconPiggyBank",
           "declaration": {
-            "name": "IconPieChart",
-            "module": "src/generated/react/icons/icon-pie-chart/index.ts"
+            "name": "IconPiggyBank",
+            "module": "src/generated/react/icons/icon-piggy-bank/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-piggy-bank/index.ts",
+      "path": "src/generated/react/icons/icon-pin/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPiggyBank",
+          "name": "IconPin",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPiggyBankClass>>\n  > & { ref?: React.Ref<IconPiggyBankClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPinClass>>\n  > & { ref?: React.Ref<IconPinClass> }"
               }
             }
           ]
@@ -244552,26 +244790,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPiggyBank",
+          "name": "IconPin",
           "declaration": {
-            "name": "IconPiggyBank",
-            "module": "src/generated/react/icons/icon-piggy-bank/index.ts"
+            "name": "IconPin",
+            "module": "src/generated/react/icons/icon-pin/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-pin/index.ts",
+      "path": "src/generated/react/icons/icon-pie-chart/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconPin",
+          "name": "IconPieChart",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPinClass>>\n  > & { ref?: React.Ref<IconPinClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconPieChartClass>>\n  > & { ref?: React.Ref<IconPieChartClass> }"
               }
             }
           ]
@@ -244580,10 +244818,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPin",
+          "name": "IconPieChart",
           "declaration": {
-            "name": "IconPin",
-            "module": "src/generated/react/icons/icon-pin/index.ts"
+            "name": "IconPieChart",
+            "module": "src/generated/react/icons/icon-pie-chart/index.ts"
           }
         }
       ]
@@ -245262,16 +245500,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-school/index.ts",
+      "path": "src/generated/react/icons/icon-safari/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconSchool",
+          "name": "IconSafari",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSchoolClass>>\n  > & { ref?: React.Ref<IconSchoolClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSafariClass>>\n  > & { ref?: React.Ref<IconSafariClass> }"
               }
             }
           ]
@@ -245280,26 +245518,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconSchool",
+          "name": "IconSafari",
           "declaration": {
-            "name": "IconSchool",
-            "module": "src/generated/react/icons/icon-school/index.ts"
+            "name": "IconSafari",
+            "module": "src/generated/react/icons/icon-safari/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-safari/index.ts",
+      "path": "src/generated/react/icons/icon-school/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconSafari",
+          "name": "IconSchool",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSafariClass>>\n  > & { ref?: React.Ref<IconSafariClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSchoolClass>>\n  > & { ref?: React.Ref<IconSchoolClass> }"
               }
             }
           ]
@@ -245308,10 +245546,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconSafari",
+          "name": "IconSchool",
           "declaration": {
-            "name": "IconSafari",
-            "module": "src/generated/react/icons/icon-safari/index.ts"
+            "name": "IconSchool",
+            "module": "src/generated/react/icons/icon-school/index.ts"
           }
         }
       ]
@@ -245570,16 +245808,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-shield/index.ts",
+      "path": "src/generated/react/icons/icon-shield-checked/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconShield",
+          "name": "IconShieldChecked",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldClass>>\n  > & { ref?: React.Ref<IconShieldClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldCheckedClass>>\n  > & { ref?: React.Ref<IconShieldCheckedClass> }"
               }
             }
           ]
@@ -245588,26 +245826,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconShield",
+          "name": "IconShieldChecked",
           "declaration": {
-            "name": "IconShield",
-            "module": "src/generated/react/icons/icon-shield/index.ts"
+            "name": "IconShieldChecked",
+            "module": "src/generated/react/icons/icon-shield-checked/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-shield-checked/index.ts",
+      "path": "src/generated/react/icons/icon-shield/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconShieldChecked",
+          "name": "IconShield",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldCheckedClass>>\n  > & { ref?: React.Ref<IconShieldCheckedClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldClass>>\n  > & { ref?: React.Ref<IconShieldClass> }"
               }
             }
           ]
@@ -245616,26 +245854,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconShieldChecked",
+          "name": "IconShield",
           "declaration": {
-            "name": "IconShieldChecked",
-            "module": "src/generated/react/icons/icon-shield-checked/index.ts"
+            "name": "IconShield",
+            "module": "src/generated/react/icons/icon-shield/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-shield-crossed/index.ts",
+      "path": "src/generated/react/icons/icon-shopping-bag/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconShieldCrossed",
+          "name": "IconShoppingBag",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldCrossedClass>>\n  > & { ref?: React.Ref<IconShieldCrossedClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShoppingBagClass>>\n  > & { ref?: React.Ref<IconShoppingBagClass> }"
               }
             }
           ]
@@ -245644,26 +245882,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconShieldCrossed",
+          "name": "IconShoppingBag",
           "declaration": {
-            "name": "IconShieldCrossed",
-            "module": "src/generated/react/icons/icon-shield-crossed/index.ts"
+            "name": "IconShoppingBag",
+            "module": "src/generated/react/icons/icon-shopping-bag/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-shopping-bag/index.ts",
+      "path": "src/generated/react/icons/icon-shield-crossed/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconShoppingBag",
+          "name": "IconShieldCrossed",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShoppingBagClass>>\n  > & { ref?: React.Ref<IconShoppingBagClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconShieldCrossedClass>>\n  > & { ref?: React.Ref<IconShieldCrossedClass> }"
               }
             }
           ]
@@ -245672,10 +245910,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconShoppingBag",
+          "name": "IconShieldCrossed",
           "declaration": {
-            "name": "IconShoppingBag",
-            "module": "src/generated/react/icons/icon-shopping-bag/index.ts"
+            "name": "IconShieldCrossed",
+            "module": "src/generated/react/icons/icon-shield-crossed/index.ts"
           }
         }
       ]
@@ -247247,6 +247485,30 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/bin/context-cli/migrate/units/0/example.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "unit",
+          "type": {
+            "text": "MigrationUnit"
+          },
+          "default": "{ id: 'theme-to-mode', enabled: false, // Example only — not a real migration summary: '[Example] Replace deprecated gds-theme / gdsTheme with gds-mode / gdsMode', exampleBefore: [ '<!-- HTML attribute -->', '<div gds-theme=\"dark\"><gds-button>Click</gds-button></div>', '', '<!-- Angular property binding -->', '<gds-card [gdsTheme]=\"theme\"></gds-card>', '', '<!-- Angular explicit attr binding -->', '<gds-card [attr.gds-theme]=\"theme\"></gds-card>', '', '<!-- React JSX prop -->', '<GdsCard gdsTheme=\"dark\" />', '<GdsCard gdsTheme={theme} />', '', '// JS property assignment', 'el.gdsTheme = \"dark\"', '', '// JS setAttribute', \"el.setAttribute('gds-theme', 'dark')\", ].join('\\n'), exampleAfter: [ '<!-- HTML attribute -->', '<div gds-mode=\"dark\"><gds-button>Click</gds-button></div>', '', '<!-- Angular property binding -->', '<gds-card [gdsMode]=\"theme\"></gds-card>', '', '<!-- Angular explicit attr binding -->', '<gds-card [attr.gds-mode]=\"theme\"></gds-card>', '', '<!-- React JSX prop -->', '<GdsCard gdsMode=\"dark\" />', '<GdsCard gdsMode={theme} />', '', '// JS property assignment', 'el.gdsMode = \"dark\"', '', '// JS setAttribute', \"el.setAttribute('gds-mode', 'dark')\", ].join('\\n'), fileExtensions: ['.html', '.ts', '.tsx'], safe: true, detect(filePath: string, content: string): MigrationMatch[] { return detectVariants(filePath, content, VARIANTS) }, apply(_filePath: string, content: string): string | null { return applyVariants(content, VARIANTS) }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "unit",
+          "declaration": {
+            "name": "unit",
+            "module": "src/bin/context-cli/migrate/units/0/example.ts"
+          }
+        }
+      ]
     }
   ]
 }