@nordhealth/components 2.16.1-alpha.4 → 2.16.1

package/custom-elements.json

@@ -587,88 +587,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
-              },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "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 this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it 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\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "tagName": "nord-banner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-banner",
-          "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.ts",
@@ -1296,6 +1214,88 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "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 this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it 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\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button-group/ButtonGroup.ts",
@@ -6559,7 +6559,7 @@
           "localization": [],
           "status": "ready",
           "category": "structure",
-          "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",
+          "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- Utilise the [`n-truncate`](/css/#miscellaneous-utilities) CSS helper to prevent long headings from wrapping.\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- Don’t add large amounts of content or long headings. Aim for headings that are short and concise.\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",
           "examples": [],
           "tagName": "nord-header",
           "customElement": true
@@ -8188,342 +8188,89 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/localization/LocalizeController.ts",
+      "path": "src/modal/Modal.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "LocalizeController",
+          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
+          "name": "Modal",
+          "cssProperties": [
+            {
+              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-inline",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-block",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the width of the modal.",
+              "name": "--n-modal-max-inline-size",
+              "default": "620px"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot",
+              "name": ""
+            },
+            {
+              "description": "Slot which holds the header of the modal, positioned next to the close button.",
+              "name": "header"
+            },
+            {
+              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
+              "name": "footer"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "unsubscribe",
+              "name": "modal",
               "type": {
-                "text": "ReturnType<typeof subscribe> | undefined"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "resolvedTranslation",
+              "name": "backdrop",
               "type": {
-                "text": "Translation"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence"
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+              "name": "featureSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"feature\")"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-modal\">(this)"
             },
             {
-              "kind": "method",
-              "name": "term",
-              "return": {
-                "type": {
-                  "text": "Result<Translation[TComponentName], Key>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "Key"
-                  }
-                },
-                {
-                  "name": "args",
-                  "type": {
-                    "text": "FuncParams<Translation[TComponentName], Key>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleLangChange",
-              "privacy": "private"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LocalizeController",
-          "declaration": {
-            "name": "LocalizeController",
-            "module": "src/localization/LocalizeController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/en-us.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "en",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "en",
-            "module": "src/localization/en-us.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/fi-fi.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "fi",
-          "type": {
-            "text": "Translation"
-          },
-          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "fi",
-            "module": "src/localization/fi-fi.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/translation.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "clearTranslations",
-          "description": "Removes all registered translations"
-        },
-        {
-          "kind": "function",
-          "name": "registerTranslation",
-          "parameters": [
-            {
-              "name": "translation",
-              "type": {
-                "text": "Translation[]"
-              }
-            }
-          ],
-          "description": "Registers one or more translations"
-        },
-        {
-          "kind": "function",
-          "name": "subscribe",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "onChange",
-              "type": {
-                "text": "() => void"
-              },
-              "description": "callback for when either `lang` attr changes, or a new language is registered."
-            }
-          ],
-          "description": "subscribe to language changes"
-        },
-        {
-          "kind": "function",
-          "name": "isTranslationRegistered",
-          "parameters": [
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "the lang code e.g. \"en\" or \"en-GB\""
-            }
-          ],
-          "description": "Check whether there is a translation registered for the given lang"
-        },
-        {
-          "kind": "function",
-          "name": "resolveTranslation",
-          "parameters": [
-            {
-              "name": "langCode",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "clearTranslations",
-          "declaration": {
-            "name": "clearTranslations",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerTranslation",
-          "declaration": {
-            "name": "registerTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "subscribe",
-          "declaration": {
-            "name": "subscribe",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isTranslationRegistered",
-          "declaration": {
-            "name": "isTranslationRegistered",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "resolveTranslation",
-          "declaration": {
-            "name": "resolveTranslation",
-            "module": "src/localization/translation.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "fallback",
-          "declaration": {
-            "name": "en",
-            "module": "src/localization/translation.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/modal/Modal.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
-          "name": "Modal",
-          "cssProperties": [
-            {
-              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-inline",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
-              "name": "--n-modal-padding-block",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the width of the modal.",
-              "name": "--n-modal-max-inline-size",
-              "default": "620px"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot",
-              "name": ""
-            },
-            {
-              "description": "Slot which holds the header of the modal, positioned next to the close button.",
-              "name": "header"
-            },
-            {
-              "description": "Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "modal",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "featureSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"feature\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-modal\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "modalController",
-              "privacy": "private",
-              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
+              "kind": "field",
+              "name": "modalController",
+              "privacy": "private",
+              "default": "new ModalController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.handleDismiss(),\n    dialog: () => this.modal,\n    backdrop: () => this.backdrop,\n    close: returnValue => this.close(returnValue),\n  })"
             },
             {
               "kind": "field",
@@ -8833,25 +8580,158 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ModalController",
+          "name": "ModalController",
+          "declaration": {
+            "name": "ModalController",
+            "module": "src/modal/ModalController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/modal/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "localization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  closeLabel: \"Close dialog\",\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "localization",
+            "module": "src/modal/localization.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/LocalizeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LocalizeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "unsubscribe",
+              "type": {
+                "text": "ReturnType<typeof subscribe> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedTranslation",
+              "type": {
+                "text": "Translation"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "term",
+              "return": {
+                "type": {
+                  "text": "Result<Translation[TComponentName], Key>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "Key"
+                  }
+                },
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "FuncParams<Translation[TComponentName], Key>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleLangChange",
+              "privacy": "private"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LocalizeController",
+          "declaration": {
+            "name": "LocalizeController",
+            "module": "src/localization/LocalizeController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/en-us.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "en",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n  $lang: \"en-US\",\n  $name: \"English\",\n  $dir: \"ltr\" as \"ltr\" | \"rtl\",\n  \"nord-command-menu\": commandMenuLocalization,\n  \"nord-calendar\": calendarLocalization,\n  \"nord-date-picker\": datePickerLocalization,\n  \"nord-modal\": modalLocalization,\n  \"nord-nav-toggle\": navToggleLocalization,\n  \"nord-textarea\": textareaLocalization,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
           "declaration": {
-            "name": "ModalController",
-            "module": "src/modal/ModalController.ts"
+            "name": "en",
+            "module": "src/localization/en-us.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/modal/localization.ts",
+      "path": "src/localization/fi-fi.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "localization",
+          "name": "fi",
           "type": {
-            "text": "object"
+            "text": "Translation"
           },
-          "default": "{\n  closeLabel: \"Close dialog\",\n}"
+          "default": "{\n  $lang: \"fi\",\n  $name: \"Suomi\",\n  $dir: \"ltr\",\n\n  \"nord-command-menu\": {\n    instructions: \"Paina 'Enter' vahvistaaksesi valinnan tai 'Escape' peruuttaaksesi\",\n    inputLabel: \"Kirjoita komento jonka haluat suorittaa.\",\n    footerArrowKeys: \"Siirry\",\n    footerEnterKey: \"Valitse\",\n    footerEscapeKey: \"Esc sulje\",\n    footerBackspaceKey: \"Siirry takaisin\",\n    noResults: searchTerm => `Ei tuloksia haulle \"${searchTerm}\"`,\n    tip: \"Vinkki: jotkin haut vaativat tarkan hakutermin. Koita kirjoittaa koko hakutermi kokonaisuudessaan, tai kokeile toista sanaa tai fraasia.\",\n  },\n\n  \"nord-calendar\": {\n    prevMonthLabel: \"Edellinen kuukausi\",\n    nextMonthLabel: \"Seuraava kuukausi\",\n    monthSelectLabel: \"Kuukausi\",\n    yearSelectLabel: \"Vuosi\",\n  },\n\n  \"nord-date-picker\": {\n    modalHeading: \"Valitse päivämäärä\",\n    closeLabel: \"Sulje ikkuna\",\n    buttonLabel: \"Valitse päivämäärä\",\n    selectedDateMessage: \"Valittu päivämäärä on\",\n  },\n\n  \"nord-modal\": {\n    closeLabel: \"Sulje ikkuna\",\n  },\n\n  \"nord-nav-toggle\": {\n    label: \"Näytä/Piilota valikko\",\n  },\n\n  \"nord-textarea\": {\n    remainingCharacters: (remaining: number) => `${remaining} merkkiä jäljellä`,\n  },\n}"
         }
       ],
       "exports": [
@@ -8859,8 +8739,128 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "localization",
-            "module": "src/modal/localization.ts"
+            "name": "fi",
+            "module": "src/localization/fi-fi.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/translation.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "clearTranslations",
+          "description": "Removes all registered translations"
+        },
+        {
+          "kind": "function",
+          "name": "registerTranslation",
+          "parameters": [
+            {
+              "name": "translation",
+              "type": {
+                "text": "Translation[]"
+              }
+            }
+          ],
+          "description": "Registers one or more translations"
+        },
+        {
+          "kind": "function",
+          "name": "subscribe",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "onChange",
+              "type": {
+                "text": "() => void"
+              },
+              "description": "callback for when either `lang` attr changes, or a new language is registered."
+            }
+          ],
+          "description": "subscribe to language changes"
+        },
+        {
+          "kind": "function",
+          "name": "isTranslationRegistered",
+          "parameters": [
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "the lang code e.g. \"en\" or \"en-GB\""
+            }
+          ],
+          "description": "Check whether there is a translation registered for the given lang"
+        },
+        {
+          "kind": "function",
+          "name": "resolveTranslation",
+          "parameters": [
+            {
+              "name": "langCode",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Picks the most appropriate translation for the given language, from most specific to least specific.\nFirst tries lang + region, then lang only, then fallback."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "clearTranslations",
+          "declaration": {
+            "name": "clearTranslations",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTranslation",
+          "declaration": {
+            "name": "registerTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "subscribe",
+          "declaration": {
+            "name": "subscribe",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isTranslationRegistered",
+          "declaration": {
+            "name": "isTranslationRegistered",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveTranslation",
+          "declaration": {
+            "name": "resolveTranslation",
+            "module": "src/localization/translation.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fallback",
+          "declaration": {
+            "name": "en",
+            "module": "src/localization/translation.ts"
           }
         }
       ]
@@ -9193,6 +9193,61 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation/Navigation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
+          "name": "Navigation",
+          "slots": [
+            {
+              "description": "The main section of the sidebar, for holding nav components.",
+              "name": ""
+            },
+            {
+              "description": "The top section of the sidebar.",
+              "name": "header"
+            },
+            {
+              "description": "The bottom section of the sidebar.",
+              "name": "footer"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "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 for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
+          "examples": [],
+          "tagName": "nord-navigation",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-navigation",
+          "declaration": {
+            "name": "Navigation",
+            "module": "src/navigation/Navigation.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/nav-toggle/NavToggle.ts",
@@ -9328,68 +9383,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/navigation/Navigation.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Navigation is used to display the primary navigation in the sidebar\nof an application. Navigation includes a list of links that users\nuse to move between sections of the application.",
-          "name": "Navigation",
-          "slots": [
-            {
-              "description": "The main section of the sidebar, for holding nav components.",
-              "name": ""
-            },
-            {
-              "description": "The top section of the sidebar.",
-              "name": "header"
-            },
-            {
-              "description": "The bottom section of the sidebar.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "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 for primary navigation items that perform an action when clicked. Each action should navigate to a URL or trigger another action like a modal overlay.\n- Group navigation items into navigation groups based on related categories.\n- Use group headings to clarify the category of a section.\n- Use icons for all top level navigation items.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place a `<nav>` element inside the navigation component, as it already contains one internally.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing navigation item 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 unnecessary words and articles in item labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending item labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse as few words as possible to describe each item label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for item labels and group titles:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n",
-          "examples": [],
-          "tagName": "nord-navigation",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-navigation",
-          "declaration": {
-            "name": "Navigation",
-            "module": "src/navigation/Navigation.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/popout/Popout.ts",
@@ -12280,21 +12273,20 @@
               "kind": "field",
               "name": "effect",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | \"none\""
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
-              "attribute": "effect"
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
+              "attribute": "effect",
+              "reflects": true
             }
           ],
           "attributes": [
             {
               "name": "effect",
               "type": {
-                "text": "\"pulse\" | \"sheen\" | \"none\""
+                "text": "\"pulse\" | \"sheen\" | undefined"
               },
-              "default": "\"none\"",
-              "description": "Determines which animation effect the skeleton will use.",
+              "description": "Determines which animation effect the skeleton will use.\nThe default is no animation.",
               "fieldName": "effect"
             }
           ],