@nordhealth/components 1.0.0-alpha.47 → 1.0.0-alpha.48

package/custom-elements.json

@@ -158,6 +158,14 @@
             "name": "default",
             "module": "\"./radio/Radio.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Header",
+          "declaration": {
+            "name": "default",
+            "module": "\"./header/Header.js\""
+          }
         }
       ]
     },
@@ -739,6 +747,7 @@
               "type": {
                 "text": "DateDisabledPredicate"
               },
+              "default": "isDateDisabled",
               "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
             {
@@ -1100,6 +1109,113 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Control the padding of the card component.\nWhen set to \"none\", the header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Control the padding of the card component.\nWhen set to \"none\", the header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -1740,113 +1856,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Control the padding of the card component.\nWhen set to \"none\", the header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Control the padding of the card component.\nWhen set to \"none\", the header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -3426,6 +3435,7 @@
               "type": {
                 "text": "DateDisabledPredicate"
               },
+              "default": "isDateDisabled",
               "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
             {
@@ -4329,36 +4339,112 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/icon/Icon.ts",
+      "path": "src/header/Header.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
-          "name": "Icon",
+          "description": "The header is a block of designated space for labelling the currently\nviewed context as well as providing primary actions.",
+          "name": "Header",
+          "slots": [
+            {
+              "description": "The header content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot for buttons, toggles, etc.",
+              "name": "action"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "resolver",
-              "type": {
-                "text": "IconResolver"
-              },
+              "name": "actionSlot",
               "privacy": "private",
-              "static": true
+              "default": "new SlotController(this, \"action\")"
             },
             {
               "kind": "field",
-              "name": "registeredIcons",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
               "static": true,
-              "default": "new Map<string, string>()"
-            },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
             {
-              "kind": "method",
-              "name": "registerResolver",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "resolver",
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the header component to show a heading to describe the current view.\n- Use the header component to hold primary actions.\n- Use the header component at a visual high position at full width.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t overcrowd the header component with too many actions or information.\n- Don’t nest the header component too deeply and restrict its available space.\n\n</div>\n\n-------\n\n## Content guidelines\n\nThe header component should be a containing element placed high on the page to present high level controls and to describe the page itself. It shouldn’t be overcrowded with controls or information.\n\n<div class=\"n-usage n-usage-do\">[Menu] Dashboard  [Account] [Log out]</div>\n<div class=\"n-usage n-usage-dont\">[Menu] Use the cards below to view various information [Export] [Save] [Edit Profile] [Log out] [Preferences]</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon/Icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Icons are used to provide additional meaning or in places where text label doesn’t fit.\nIcon component allows you to display an icon from the Nordicons library.",
+          "name": "Icon",
+          "members": [
+            {
+              "kind": "field",
+              "name": "resolver",
+              "type": {
+                "text": "IconResolver"
+              },
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "registeredIcons",
+              "privacy": "private",
+              "static": true,
+              "default": "new Map<string, string>()"
+            },
+            {
+              "kind": "method",
+              "name": "registerResolver",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "resolver",
                   "type": {
                     "text": "IconResolver"
                   },
@@ -5233,19 +5319,23 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
+      "path": "src/select/Select.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
+          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
+          "name": "Select",
           "slots": [
+            {
+              "description": "Default slot for holding <option> elements.",
+              "name": ""
+            },
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
+              "description": "Use when a hint requires more than plain text.",
               "name": "hint"
             },
             {
@@ -5256,12 +5346,8 @@
           "members": [
             {
               "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
+              "name": "formValue",
               "privacy": "protected",
-              "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5269,25 +5355,18 @@
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "inputId",
               "type": {
                 "text": "string"
               },
               "privacy": "protected",
-              "default": "\"error\"",
+              "default": "\"select\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5295,20 +5374,45 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
-              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "options",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getButtonText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "HTMLOptionElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "HTMLOptionElement"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
               "name": "labelSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
+              "default": "new SlotController(this, \"label\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5318,7 +5422,7 @@
               "kind": "field",
               "name": "errorSlot",
               "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "default": "new SlotController(this, \"error\")",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5326,14 +5430,19 @@
             },
             {
               "kind": "field",
-              "name": "inputSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })"
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "formData",
               "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5341,37 +5450,12 @@
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "uncheckSiblings",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
+              "default": "\"error\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5379,19 +5463,12 @@
             },
             {
               "kind": "field",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
+              "name": "hintId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5510,6 +5587,15 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -5686,16 +5772,33 @@
               }
             }
           ],
-          "attributes": [
+          "mixins": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the checkbox is checked or not.",
-              "fieldName": "checked"
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
             },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "form",
+          "tagName": "nord-select",
+          "customElement": true,
+          "attributes": [
             {
               "name": "label",
               "type": {
@@ -5823,32 +5926,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
-            {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "form",
-          "tagName": "nord-radio",
-          "customElement": true,
           "events": [
             {
               "name": "input",
@@ -5880,40 +5957,152 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-radio",
+          "name": "nord-select",
           "declaration": {
-            "name": "Radio",
-            "module": "src/radio/Radio.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n-------\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\n-------\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question."
+      ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/Select.ts",
+      "path": "src/spinner/Spinner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
-          "name": "Select",
-          "slots": [
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "members": [
             {
-              "description": "Default slot for holding <option> elements.",
-              "name": ""
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "feedback",
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/radio/Radio.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
+          "slots": [
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Use when a hint requires more than plain text.",
+              "description": "Optional slot that holds hint text for the input.",
               "name": "hint"
             },
             {
@@ -5924,8 +6113,12 @@
           "members": [
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "inputId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "protected",
+              "default": "\"input\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5933,18 +6126,12 @@
             },
             {
               "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
               "privacy": "protected",
-              "default": "\"select\"",
+              "default": "\"hint\"",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5952,45 +6139,23 @@
             },
             {
               "kind": "field",
-              "name": "options",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getButtonText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "errorId",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "HTMLOptionElement[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "HTMLOptionElement"
-                  }
-                }
-              ]
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "hintSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"label\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -5998,9 +6163,9 @@
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "labelSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"error\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6008,9 +6173,9 @@
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "errorSlot",
               "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")",
+              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6018,9 +6183,14 @@
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "inputSlot",
+              "privacy": "protected",
+              "default": "new LightDomController(this, {\n    render: () =>\n      html`\n        <input\n          slot=\"input\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          ${ref(this.focusableRef)}\n          class=\"n-input\"\n          id=${this.inputId}\n          type=\"radio\"\n          name=${ifDefined(this.name)}\n          .value=${this.value}\n          .checked=${this.checked}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      `,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "formValue",
               "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6028,12 +6198,37 @@
             },
             {
               "kind": "field",
-              "name": "errorId",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "uncheckSiblings",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
               "privacy": "protected",
-              "default": "\"error\"",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6041,12 +6236,19 @@
             },
             {
               "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
+              "name": "handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "formData",
               "privacy": "protected",
-              "default": "\"hint\"",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
               "inheritedFrom": {
                 "name": "FormAssociatedMixin",
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
@@ -6165,15 +6367,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -6350,33 +6543,16 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "FormAssociatedMixin",
-              "module": "/src/common/mixins/FormAssociatedMixin.js"
-            },
-            {
-              "name": "InputMixin",
-              "module": "/src/common/mixins/InputMixin.js"
-            },
+          "attributes": [
             {
-              "name": "FocusableMixin",
-              "module": "/src/common/mixins/FocusableMixin.js"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the checkbox is checked or not.",
+              "fieldName": "checked"
             },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "form",
-          "tagName": "nord-select",
-          "customElement": true,
-          "attributes": [
             {
               "name": "label",
               "type": {
@@ -6504,6 +6680,32 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
+            },
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "form",
+          "tagName": "nord-radio",
+          "customElement": true,
           "events": [
             {
               "name": "input",
@@ -6535,136 +6737,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-select",
+          "name": "nord-radio",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Radio",
+            "module": "src/radio/Radio.ts"
           }
         }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/spinner/Spinner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
-          "name": "Spinner",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "feedback",
-          "tagName": "nord-spinner",
-          "customElement": true
-        }
       ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        }
-      ]
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a radio component when users can only select one option from a list.\n- Favour radios over a select component when there are a small number of options. This reduces the number of clicks a user has to make, increasing efficiency.\n- Radio buttons are grouped by their `name` attribute. Therefore, it is crucial that the same `name` is used for a group of radios.\n- Give each radio within a group a unique `value`.\n- Radios **must** be used in combination with a fieldset component.\n- In most cases, a stack component should be used to layout a group of radio buttons.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use when a user can select more than one option. In this case, use a checkbox instead.\n- Don’t use for “accepting terms of service” and similar functionality. Use a checkbox instead.\n- When you have more than 10 options to choose from. Consider using a select instead.\n\n</div>\n\n-------\n\n## Content guidelines\n\nRadio button labels should be clear, accurate and predictable. It should be possible for the user to understand what they are enabling or disabling:\n\n<div class=\"n-usage n-usage-do\">User settings</div>\n<div class=\"n-usage n-usage-dont\">Option 1</div>\n\nWhen writing radio button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Blue</div>\n<div class=\"n-usage n-usage-dont\">Blue.</div>\n\n-------\n\n## Additional considerations\n\n- Hint text can be used to offer further information or explanation for an option.\n- Once a radio has been selected, users cannot return to having no radios selected without refreshing their browser window. Therefore, you should include \"None of the above\" or \"I do not know\" if they are valid options.\n- In most cases, radio buttons should be stacked vertically. However, radio buttons can be stacked horizontally when there are only two options with short labels. An example might be a yes/no question."
     },
     {
       "kind": "javascript-module",
@@ -7533,12 +7619,12 @@
           "name": "Tooltip",
           "slots": [
             {
-              "description": "The subject of the tooltip, the item the tooltip refers to.",
+              "description": "The tooltip content",
               "name": ""
             },
             {
-              "description": "The content of the tooltip itself.",
-              "name": "content"
+              "description": "Optional slot that holds shortcut keys to access the subject",
+              "name": "shortcut"
             }
           ],
           "members": [
@@ -8358,11 +8444,6 @@
               "name": "handleTouchStart",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "handleTouchMove",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "handleTouchEnd",