@nordhealth/components 1.2.0 → 1.5.0

package/custom-elements.json

@@ -286,119 +286,62 @@
             "name": "Translation",
             "module": "\"./localization/translation.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Toggle",
+          "declaration": {
+            "name": "default",
+            "module": "\"./toggle/Toggle.js\""
+          }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/Avatar.ts",
+      "path": "src/badge/Badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
-          "name": "Avatar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "States<typeof transition>"
-              },
-              "privacy": "private",
-              "default": "\"initial\""
-            },
+          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
+          "name": "Badge",
+          "slots": [
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the avatar.",
-              "attribute": "size",
-              "reflects": true
-            },
+              "description": "The badge content.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "src",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
               },
-              "description": "The URL of the avatar image uploaded by the user.",
-              "attribute": "src",
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "attribute": "type",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the person.",
-              "attribute": "name"
-            },
-            {
-              "kind": "method",
-              "name": "handleSrcChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderImage",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderFallback",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleLoad",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleError",
-              "privacy": "private"
             }
           ],
           "attributes": [
             {
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the avatar.",
-              "fieldName": "size"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL of the avatar image uploaded by the user.",
-              "fieldName": "src"
-            },
-            {
-              "name": "name",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
               },
-              "default": "\"\"",
-              "description": "The name of the person.",
-              "fieldName": "name"
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "fieldName": "type"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
-          "category": "image",
-          "tagName": "nord-avatar",
+          "status": "ready",
+          "category": "text",
+          "tagName": "nord-badge",
           "customElement": true
         }
       ],
@@ -407,57 +350,57 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Avatar",
-            "module": "src/avatar/Avatar.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-avatar",
+          "name": "nord-badge",
           "declaration": {
-            "name": "Avatar",
-            "module": "src/avatar/Avatar.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.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- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</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 to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
+      "path": "src/banner/Banner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
-          "name": "Badge",
+          "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",
           "slots": [
             {
-              "description": "The badge content.",
+              "description": "default slot",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "variant",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
               "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "attribute": "type",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
               "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "variant",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
               "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "fieldName": "type"
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -465,8 +408,8 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "text",
-          "tagName": "nord-badge",
+          "category": "feedback",
+          "tagName": "nord-banner",
           "customElement": true
         }
       ],
@@ -475,20 +418,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-badge",
+          "name": "nord-banner",
           "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
+            "name": "Banner",
+            "module": "src/banner/Banner.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 to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge 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\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\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 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"
     },
     {
       "kind": "javascript-module",
@@ -534,7 +477,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
               "default": "\"default\"",
               "description": "The style variant of the button.",
@@ -776,7 +719,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\""
               },
               "default": "\"default\"",
               "description": "The style variant of the button.",
@@ -926,7 +869,7 @@
           }
         }
       ],
-      "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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing 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 unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\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 clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing 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 unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n| `switch`   | Switch style is reserved for the clinic switcher in the top left corner of an application.                                                                                                               |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
     {
       "kind": "javascript-module",
@@ -1534,74 +1477,6 @@
       ],
       "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 to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
     },
-    {
-      "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",
-          "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"
-          },
-          "status": "new",
-          "category": "feedback",
-          "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"
-          }
-        }
-      ],
-      "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"
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -2214,7 +2089,7 @@
           }
         }
       ],
-      "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 making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\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 checkbox 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</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\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</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 for making it possible to choose one or more options from a limited number of options.\n- Use for “accepting terms of service” and similar functionality.\n- Use in forms to toggle something on or off.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nCheckbox labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\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 checkbox 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</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\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
     },
     {
       "kind": "javascript-module",
@@ -2807,20 +2682,153 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/attribute.ts",
+      "path": "src/avatar/Avatar.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "add",
-          "parameters": [
+          "kind": "class",
+          "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
+          "name": "Avatar",
+          "members": [
             {
-              "name": "element",
+              "kind": "field",
+              "name": "state",
               "type": {
-                "text": "Element"
-              }
+                "text": "States<typeof transition>"
+              },
+              "privacy": "private",
+              "default": "\"initial\""
             },
             {
-              "name": "attr",
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "attribute": "src",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "attribute": "name"
+            },
+            {
+              "kind": "method",
+              "name": "handleSrcChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderImage",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderFallback",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleLoad",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "fieldName": "size"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "image",
+          "tagName": "nord-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.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- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/attribute.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "add",
+          "parameters": [
+            {
+              "name": "element",
+              "type": {
+                "text": "Element"
+              }
+            },
+            {
+              "name": "attr",
               "type": {
                 "text": "string"
               }
@@ -3764,6 +3772,30 @@
               }
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "clamp",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -3782,6 +3814,14 @@
             "name": "range",
             "module": "src/common/number.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "clamp",
+          "declaration": {
+            "name": "clamp",
+            "module": "src/common/number.ts"
+          }
         }
       ]
     },
@@ -3960,6 +4000,55 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/storage.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "storage",
+          "parameters": [
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "defaultValue",
+              "type": {
+                "text": "T"
+              }
+            },
+            {
+              "name": "serialize",
+              "default": "JSON.stringify",
+              "type": {
+                "text": "(value: T) => string"
+              }
+            },
+            {
+              "name": "deserialize",
+              "default": "JSON.parse",
+              "type": {
+                "text": "(value: string) => T"
+              }
+            }
+          ],
+          "description": "Thin wrapper around local storage which simplifies (de)serialization and default values.\nBy default, (de)serializes as JSON."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "storage",
+          "declaration": {
+            "name": "storage",
+            "module": "src/common/storage.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/date-picker/DatePicker.ts",
@@ -5381,7 +5470,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "structure",
           "tagName": "nord-header",
           "customElement": true
@@ -6303,44 +6392,294 @@
           "members": [
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "peekTimeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navToggleEl",
+              "type": {
+                "text": "Element | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navEl",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDragging",
               "type": {
                 "text": "boolean"
               },
               "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "default": "false"
+            },
             {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-layout",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.ts"
-          }
-        },
+              "kind": "field",
+              "name": "navState",
+              "type": {
+                "text": "NavState"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "navOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
+              "attribute": "nav-open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "navToggle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID reference of element used to toggle the navigation.",
+              "attribute": "nav-toggle"
+            },
+            {
+              "kind": "field",
+              "name": "lightDismiss",
+              "privacy": "private",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "mq",
+              "privacy": "private",
+              "default": "new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "getToggleElement",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "cleanup",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleNavWidthChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleNavStateChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "prev",
+                  "type": {
+                    "text": "NavState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOpenChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "navTransition",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "NavEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDropdownOpen",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDropdownClose",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleMediaQueryChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleToggleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleNavFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMainFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTransitionEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyboardResize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setNavWidth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "startDragging",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "stopDragging",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "nav-open",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Controls whether the navigation is hidden off-screen or not.\nDefaults to `true` for wide viewports, and `false` otherwise.",
+              "fieldName": "navOpen"
+            },
+            {
+              "name": "nav-toggle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID reference of element used to toggle the navigation.",
+              "fieldName": "navToggle"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "tagName": "nord-layout",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
+          }
+        },
         {
           "kind": "custom-element-definition",
           "name": "nord-layout",
@@ -6641,7 +6980,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "tagName": "nord-nav-group",
           "customElement": true
@@ -6900,7 +7239,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "tagName": "nord-nav-item",
           "customElement": true
@@ -6948,33 +7287,12 @@
               "name": "footer"
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
+          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "ready",
           "category": "navigation",
           "tagName": "nord-navigation",
           "customElement": true
@@ -9628,320 +9946,650 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tooltip/Tooltip.ts",
+      "path": "src/toggle/Toggle.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
-          "name": "Tooltip",
+          "description": "Toggle switch gives control over a feature or option that can be\nturned on or off. If a physical switch would work for the action, a\ntoggle is probably the best component to use.",
+          "name": "Toggle",
           "slots": [
             {
-              "description": "The tooltip content",
-              "name": ""
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "description": "Optional slot that holds shortcut keys to access the subject",
-              "name": "shortcut"
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "lastOpened",
-              "type": {
-                "text": "Tooltip | undefined"
-              },
-              "static": true
+              "name": "formValue",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "shortcutSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"shortcut\")"
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the toggle is checked or not.",
+              "attribute": "checked"
             },
             {
               "kind": "field",
-              "name": "events",
-              "privacy": "private",
-              "default": "new EventController(this)"
+              "name": "reverse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
+              "attribute": "reverse"
             },
             {
               "kind": "field",
-              "name": "currentElement",
+              "name": "size",
               "type": {
-                "text": "FocusableElement | undefined"
+                "text": "\"s\" | \"m\" | \"l\""
               },
-              "privacy": "private"
+              "default": "\"m\"",
+              "description": "The size of the toggle switch.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "timeoutId",
+              "name": "_warningLogged",
               "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "proxy",
-              "privacy": "private",
-              "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "TooltipStates"
-              },
-              "privacy": "private",
-              "default": "\"hidden\"",
-              "description": "The current state of the tooltip, dependent on the state machine"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "coords",
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "[number, number]"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "[0, 0]"
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "errorId",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "string"
               },
-              "default": "\"block-start\"",
-              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
-              "attribute": "position",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "attribute": "role",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "attribute": "id",
-              "reflects": true
+              "description": "Label for the input.",
+              "attribute": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "hint",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "500",
-              "description": "The delay in milliseconds before the tooltip is opened.",
-              "attribute": "delay",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleIdChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleStateChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "prevState",
-                  "type": {
-                    "text": "TooltipStates"
-                  }
-                }
-              ]
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "updatePosition",
-              "privacy": "private",
-              "description": "Setting and updating the position of the tooltip"
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hideTooltip",
-              "privacy": "private"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "reposition",
-              "privacy": "private"
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleShow",
-              "privacy": "private"
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "handleHide",
-              "privacy": "private"
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "hideOnEscape",
-              "privacy": "private"
+              "name": "hasHint",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "addDescribedBy",
-              "privacy": "private"
+              "name": "hasError",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "removeDescribedBy",
-              "privacy": "private"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element.",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component.",
+              "inheritedFrom": {
+                "name": "FocusableMixin",
+                "module": "src/common/mixins/FocusableMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "position",
+              "name": "checked",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+                "text": "boolean"
               },
-              "default": "\"block-start\"",
-              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
-              "fieldName": "position"
+              "default": "false",
+              "description": "Controls whether the toggle is checked or not.",
+              "fieldName": "checked"
             },
             {
-              "name": "role",
+              "name": "reverse",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"tooltip\"",
-              "description": "The tooltip role, set on the component by default.",
-              "fieldName": "role"
+              "default": "false",
+              "description": "Controls whether the contents are displayed in reverse order,\nputting the label before the toggle.",
+              "fieldName": "reverse"
             },
             {
-              "name": "id",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the toggle switch.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The id for the active element to reference via aria-describedby.",
-              "fieldName": "id"
+              "description": "Label for the input.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
-              "name": "delay",
+              "name": "hint",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "500",
-              "description": "The delay in milliseconds before the tooltip is opened.",
-              "fieldName": "delay"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "overlay",
-          "tagName": "nord-tooltip",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/tooltip/Tooltip.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tooltip",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "src/tooltip/Tooltip.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 tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/visually-hidden/VisuallyHidden.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
-          "name": "VisuallyHidden",
-          "slots": [
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
             {
-              "description": "The visually hidden content.",
-              "name": ""
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "InputMixin",
+                "module": "src/common/mixins/InputMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            },
+            {
+              "name": "FormAssociatedMixin",
+              "module": "/src/common/mixins/FormAssociatedMixin.js"
+            },
+            {
+              "name": "InputMixin",
+              "module": "/src/common/mixins/InputMixin.js"
+            },
+            {
+              "name": "FocusableMixin",
+              "module": "/src/common/mixins/FocusableMixin.js"
             }
           ],
-          "members": [],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "ready",
-          "category": "text",
-          "tagName": "nord-visually-hidden",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "VisuallyHidden",
-            "module": "src/visually-hidden/VisuallyHidden.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-visually-hidden",
-          "declaration": {
-            "name": "VisuallyHidden",
-            "module": "src/visually-hidden/VisuallyHidden.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 to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
+          "status": "draft",
+          "category": "form",
+          "tagName": "nord-toggle",
+          "customElement": true,
+          "events": [
             {
-              "name": "propertyName",
+              "name": "input",
               "type": {
-                "text": "string"
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
             {
-              "name": "lifecycle",
-              "default": "\"update\"",
+              "name": "change",
               "type": {
-                "text": "ObserveLifecycle"
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             }
           ]
@@ -9950,221 +10598,720 @@
       "exports": [
         {
           "kind": "js",
-          "name": "observe",
+          "name": "default",
           "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
+            "name": "Toggle",
+            "module": "src/toggle/Toggle.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toggle",
+          "declaration": {
+            "name": "Toggle",
+            "module": "src/toggle/Toggle.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 for any feature or option that can be turned on or off.\n- If a physical switch would work for the action, the toggle is probably the best component to use.\n- Use for making it possible to choose one or more options from a limited number of options.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Avoid using when you have more than 10 options to choose from.\n- Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.\n\n</div>\n\n---\n\n## Content guidelines\n\nToggle labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:\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 toggle 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\">User settings</div>\n<div class=\"n-usage n-usage-dont\">User Settings</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\">Show dashboard</div>\n<div class=\"n-usage n-usage-dont\">Show dashboard.</div>\n\nDo not use commas or semicolons at the end of each line\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients;</div>\n"
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/tooltip/Tooltip.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof value | typeof nothing"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "if value is truthy, return it, otherwise return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
+          "name": "Tooltip",
+          "slots": [
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "description": "The tooltip content",
+              "name": ""
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "description": "Optional slot that holds shortcut keys to access the subject",
+              "name": "shortcut"
             }
           ],
-          "description": "if condition is truthy, return trueCase, otherwise return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "lastOpened",
               "type": {
-                "text": "true"
-              }
+                "text": "Tooltip | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "shortcutSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"shortcut\")"
+            },
+            {
+              "kind": "field",
+              "name": "events",
+              "privacy": "private",
+              "default": "new EventController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "currentElement",
+              "type": {
+                "text": "FocusableElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "proxy",
+              "privacy": "private",
+              "description": "the proxy element is for cases where the targetElement is a web component,\nand the WC has a focusable child in its shadow root e.g. a button component.\nin this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\nand wire up aria-describedby from the focusable element to the proxy.\nwhen the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship."
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "TooltipStates"
+              },
+              "privacy": "private",
+              "default": "\"hidden\"",
+              "description": "The current state of the tooltip, dependent on the state machine"
+            },
+            {
+              "kind": "field",
+              "name": "coords",
+              "type": {
+                "text": "[number, number]"
+              },
+              "privacy": "private",
+              "default": "[0, 0]"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-start\"",
+              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"tooltip\"",
+              "description": "The tooltip role, set on the component by default.",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-describedby.",
+              "attribute": "id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "500",
+              "description": "The delay in milliseconds before the tooltip is opened.",
+              "attribute": "delay",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleIdChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleStateChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "prevState",
+                  "type": {
+                    "text": "TooltipStates"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "updatePosition",
+              "privacy": "private",
+              "description": "Setting and updating the position of the tooltip"
+            },
+            {
+              "kind": "field",
+              "name": "hideTooltip",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "reposition",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleShow",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleHide",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hideOnEscape",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "addDescribedBy",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "removeDescribedBy",
+              "privacy": "private"
             }
           ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+          "attributes": [
             {
-              "name": "condition",
+              "name": "position",
               "type": {
-                "text": "false"
-              }
+                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\""
+              },
+              "default": "\"block-start\"",
+              "description": "Control the position of the tooltip component.\nWhen set to \"none\", the tooltip will be shown above\nbut accommodate for browser boundaries.",
+              "fieldName": "position"
             },
             {
-              "name": "trueCase",
+              "name": "role",
               "type": {
-                "text": "any"
-              }
+                "text": "string"
+              },
+              "default": "\"tooltip\"",
+              "description": "The tooltip role, set on the component by default.",
+              "fieldName": "role"
+            },
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The id for the active element to reference via aria-describedby.",
+              "fieldName": "id"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "500",
+              "description": "The delay in milliseconds before the tooltip is opened.",
+              "fieldName": "delay"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "overlay",
+          "tagName": "nord-tooltip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "src/tooltip/Tooltip.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 tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, 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\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/visually-hidden/VisuallyHidden.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
+          "name": "VisuallyHidden",
+          "slots": [
+            {
+              "description": "The visually hidden content.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "tagName": "nord-visually-hidden",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "VisuallyHidden",
+            "module": "src/visually-hidden/VisuallyHidden.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-visually-hidden",
+          "declaration": {
+            "name": "VisuallyHidden",
+            "module": "src/visually-hidden/VisuallyHidden.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 to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/DirectionController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DirectionController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
+            },
+            {
+              "kind": "field",
+              "name": "observer",
+              "type": {
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "WritingDirection"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR"
+            },
+            {
+              "kind": "field",
+              "name": "isRTL"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "privacy": "private",
+              "static": true
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DirectionController",
+          "declaration": {
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/EventController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "EventController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "listeners",
+              "type": {
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "window",
+                  "type": {
+                    "text": "Window"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "document",
+                  "type": {
+                    "text": "Document"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Window | Document | HTMLElement | ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(ev: any) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             }
-          ],
-          "description": "condition is false, to will always return nothing"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof falseCase"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "EventController",
+          "declaration": {
+            "name": "EventController",
+            "module": "src/common/controllers/EventController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/FormDataController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormDataController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "unknown"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleFormData",
+              "privacy": "private"
             }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "FormDataController",
+          "declaration": {
+            "name": "FormDataController",
+            "module": "src/common/controllers/FormDataController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDismissController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LightDismissController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "shortcut",
               "type": {
-                "text": "true"
-              }
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "any"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleClickOut",
+              "privacy": "private"
             }
-          ],
-          "description": "condition is false, so always return falseCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "parameters": [
+          "kind": "js",
+          "name": "LightDismissController",
+          "declaration": {
+            "name": "LightDismissController",
+            "module": "src/common/controllers/LightDismissController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDomController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LightDomController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "container",
               "type": {
-                "text": "unknown"
-              }
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostUpdated"
             },
             {
-              "name": "falseCase",
-              "default": "nothing",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             }
           ]
         }
@@ -10172,265 +11319,255 @@
       "exports": [
         {
           "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
+          "name": "LightDomController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "LightDomController",
+            "module": "src/common/controllers/LightDomController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/controllers/LightSlotController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
+          "name": "LightSlotController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "renderHook",
               "type": {
-                "text": "false"
-              }
+                "text": "Comment"
+              },
+              "privacy": "private"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "lightDom",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "true"
+              "kind": "method",
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
+              "kind": "field",
+              "name": "onChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "method",
+              "name": "syncLightDom",
+              "privacy": "private"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "() => TInner"
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
+              "kind": "field",
+              "name": "hasContent",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "any"
+              "kind": "field",
+              "name": "isEmpty",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
+              "kind": "field",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(innards: TInner) => TWrapper"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             }
           ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
+          "superclass": {
+            "name": "SlotController",
+            "module": "/src/common/controllers/SlotController.js"
+          },
+          "status": null,
+          "category": null
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "LightSlotController",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "LightSlotController",
+            "module": "src/common/controllers/LightSlotController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/MediaQueryController.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
+          "kind": "class",
+          "description": "",
+          "name": "MediaQueryController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "mq",
+              "type": {
+                "text": "MediaQueryList"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "matches"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "handleChange"
+            }
+          ]
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "MediaQueryController",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "MediaQueryController",
+            "module": "src/common/controllers/MediaQueryController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/PortalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PortalController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "renderHook",
+              "type": {
+                "text": "Comment"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lightDom",
+              "type": {
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "PortalController",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/controllers/ShortcutController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DirectionController",
+          "name": "ShortcutController",
           "members": [
             {
               "kind": "field",
-              "name": "hosts",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
+              "name": "unregister",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "ReturnType<typeof tinykeys> | undefined"
               },
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "WritingDirection"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isLTR"
-            },
-            {
-              "kind": "field",
-              "name": "isRTL"
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -10442,9 +11579,19 @@
             },
             {
               "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
+              "name": "unbind"
+            },
+            {
+              "kind": "method",
+              "name": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -10452,207 +11599,70 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "ShortcutController",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "ShortcutController",
+            "module": "src/common/controllers/ShortcutController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ShortcutMap",
+          "declaration": {
+            "name": "KeyBindingMap",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/EventController.ts",
+      "path": "src/common/controllers/SlotController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "EventController",
+          "name": "SlotController",
           "members": [
             {
               "kind": "field",
-              "name": "listeners",
+              "name": "events",
               "type": {
-                "text": "Array<() => void>"
+                "text": "EventController"
               },
               "privacy": "private",
-              "default": "[]"
+              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "window",
-                  "type": {
-                    "text": "Window"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "hasContent"
             },
             {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "document",
-                  "type": {
-                    "text": "Document"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "isEmpty"
             },
             {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "content"
             },
             {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "listen",
+              "name": "onChange",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "Window | Document | HTMLElement | ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(ev: any) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
+                  "name": "_e",
                   "type": {
-                    "text": "boolean | AddEventListenerOptions"
+                    "text": "Event"
                   }
                 }
               ]
@@ -10663,22 +11673,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "EventController",
+          "name": "SlotController",
           "declaration": {
-            "name": "EventController",
-            "module": "src/common/controllers/EventController.ts"
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
+      "path": "src/common/controllers/SwipeController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FormDataController",
+          "name": "SwipeController",
           "members": [
             {
               "kind": "field",
@@ -10690,107 +11700,133 @@
               "default": "new EventController(host)"
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "kind": "field",
+              "name": "hadFirstUpdate",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "handleFormData",
-              "privacy": "private"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FormDataController",
-          "declaration": {
-            "name": "FormDataController",
-            "module": "src/common/controllers/FormDataController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/LightDismissController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LightDismissController",
-          "members": [
+              "name": "initialTouchX",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
-              "name": "shortcut",
+              "name": "initialTouchY",
               "type": {
-                "text": "ShortcutController"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "events",
+              "name": "options",
               "type": {
-                "text": "EventController"
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
               },
               "privacy": "private",
-              "default": "new EventController(host)"
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "handleEsc",
+              "name": "handleTouchStart",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleClickOut",
+              "name": "handleTouchEnd",
               "privacy": "private"
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "isHorizontalSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isDownwardsSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LightDismissController",
+          "name": "SwipeController",
           "declaration": {
-            "name": "LightDismissController",
-            "module": "src/common/controllers/LightDismissController.ts"
+            "name": "SwipeController",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isHorizontalSwipe",
+          "declaration": {
+            "name": "isHorizontalSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDownwardsSwipe",
+          "declaration": {
+            "name": "isDownwardsSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightDomController.ts",
+      "path": "src/common/decorators/observe.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "LightDomController",
-          "members": [
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "container",
+              "name": "propertyName",
               "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
+                "text": "string"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
             }
           ]
         }
@@ -10798,177 +11834,221 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDomController",
+          "name": "observe",
           "declaration": {
-            "name": "LightDomController",
-            "module": "src/common/controllers/LightDomController.ts"
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightSlotController.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
-          "name": "LightSlotController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "renderHook",
+              "name": "value",
               "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, to will always return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof falseCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
               "type": {
-                "text": "LightDomController"
-              },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+                "text": "unknown"
               }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "field",
-              "name": "events",
+              "name": "trueCase",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+                "text": "any"
               }
             },
             {
-              "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "condition",
+              "type": {
+                "text": "false"
               }
             },
             {
-              "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
               }
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
               }
             }
           ],
-          "superclass": {
-            "name": "SlotController",
-            "module": "/src/common/controllers/SlotController.js"
-          },
-          "status": null,
-          "category": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LightSlotController",
-          "declaration": {
-            "name": "LightSlotController",
-            "module": "src/common/controllers/LightSlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/PortalController.ts",
-      "declarations": [
+          "description": "condition is false, so always return falseCase"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "PortalController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "renderHook",
+              "name": "condition",
               "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "trueCase",
+              "default": "condition",
               "type": {
-                "text": "LightDomController"
-              },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "falseCase",
+              "default": "nothing",
+              "type": {
+                "text": "any"
+              }
             }
           ]
         }
@@ -10976,265 +12056,222 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PortalController",
+          "name": "cond",
           "declaration": {
-            "name": "PortalController",
-            "module": "src/common/controllers/PortalController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/ShortcutController.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "ShortcutController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "unregister",
-              "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "unbind"
-            },
-            {
-              "kind": "method",
-              "name": "bind",
-              "parameters": [
-                {
-                  "name": "shortcuts",
-                  "type": {
-                    "text": "KeyBindingMap"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "ShortcutController",
+          "name": "cond",
           "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ShortcutMap",
+          "name": "cond",
           "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "SlotController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "field",
-              "name": "hasContent"
-            },
-            {
-              "kind": "field",
-              "name": "isEmpty"
-            },
-            {
-              "kind": "field",
-              "name": "content"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "SlotController",
+          "name": "cond",
           "declaration": {
-            "name": "SlotController",
-            "module": "src/common/controllers/SlotController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/SwipeController.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "SwipeController",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "events",
+              "name": "condition",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "hadFirstUpdate",
+              "name": "inner",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "initialTouchX",
+              "name": "wrapper",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "initialTouchY",
+              "name": "condition",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+                "text": "true"
+              }
             },
             {
-              "kind": "field",
-              "name": "options",
+              "name": "inner",
               "type": {
-                "text": "SetRequired<SwipeControllerOptions, \"target\">"
-              },
-              "privacy": "private",
-              "default": "{\n      target: () => host,\n      ...options,\n    }"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "handleTouchStart",
-              "privacy": "private"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleTouchEnd",
-              "privacy": "private"
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
             }
           ]
         },
         {
           "kind": "function",
-          "name": "isHorizontalSwipe",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "condition",
               "type": {
-                "text": "SwipeDetails"
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
               }
             }
           ]
         },
         {
           "kind": "function",
-          "name": "isDownwardsSwipe",
+          "name": "wrapIf",
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "condition",
               "type": {
-                "text": "SwipeDetails"
+                "text": "any"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
               }
             }
-          ]
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SwipeController",
+          "name": "wrapIf",
           "declaration": {
-            "name": "SwipeController",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isHorizontalSwipe",
+          "name": "wrapIf",
           "declaration": {
-            "name": "isHorizontalSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isDownwardsSwipe",
+          "name": "wrapIf",
           "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]