@nordhealth/components 1.1.2 → 1.4.0

package/custom-elements.json

@@ -291,114 +291,49 @@
     },
     {
       "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,20 +342,20 @@
           "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",
@@ -466,7 +401,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.",
@@ -708,7 +643,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.",
@@ -858,132 +793,44 @@
           }
         }
       ],
-      "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",
-      "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"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "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- 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/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
@@ -991,8 +838,8 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "structure",
-          "tagName": "nord-card",
+          "category": "feedback",
+          "tagName": "nord-banner",
           "customElement": true
         }
       ],
@@ -1001,20 +848,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-banner",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.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 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"
+      "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",
@@ -1536,15 +1383,236 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/avatar/Avatar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
+          "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\""
+            },
+            {
+              "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/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "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/checkbox/Checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
@@ -2150,102 +2218,34 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/command-menu/CommandMenu.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",
+          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
+          "name": "CommandMenu",
           "slots": [
             {
-              "description": "default slot",
-              "name": ""
+              "description": "Used to replace the default footer contents.",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "inputRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "listRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previousFocus",
               "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/command-menu/CommandMenu.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
-          "slots": [
-            {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "previousFocus",
-              "type": {
-                "text": "HTMLElement | undefined"
+                "text": "HTMLElement | undefined"
               },
               "privacy": "private"
             },
@@ -3764,6 +3764,30 @@
               }
             }
           ]
+        },
+        {
+          "kind": "function",
+          "name": "clamp",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -3782,6 +3806,14 @@
             "name": "range",
             "module": "src/common/number.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "clamp",
+          "declaration": {
+            "name": "clamp",
+            "module": "src/common/number.ts"
+          }
         }
       ]
     },
@@ -3960,6 +3992,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 +5462,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "structure",
           "tagName": "nord-header",
           "customElement": true
@@ -6303,106 +6384,356 @@
           "members": [
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "peekTimeoutId",
               "type": {
-                "text": "boolean"
+                "text": "ReturnType<typeof setTimeout> | undefined"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "privacy": "private"
+            },
             {
-              "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": "custom-element-definition",
-          "name": "nord-layout",
-          "declaration": {
-            "name": "Layout",
-            "module": "src/layout/Layout.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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/localization/LocalizeController.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "LocalizeController",
-          "members": [
+              "kind": "field",
+              "name": "navToggleEl",
+              "type": {
+                "text": "Element | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "unsubscribe",
+              "name": "navEl",
               "type": {
-                "text": "ReturnType<typeof subscribe> | undefined"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "resolvedTranslation",
+              "name": "navWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isDragging",
               "type": {
-                "text": "Translation"
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "navState",
+              "type": {
+                "text": "NavState"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lang",
-              "description": "The lang of the document or element, with element taking precedence"
+              "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": "resolvedLang",
-              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+              "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": "hostConnected"
+              "name": "getToggleElement",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "cleanup",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "term",
-              "return": {
-                "type": {
-                  "text": "Result<Translation[TComponentName], Key>"
-                }
-              },
+              "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",
+          "declaration": {
+            "name": "Layout",
+            "module": "src/layout/Layout.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- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/localization/LocalizeController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LocalizeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "unsubscribe",
+              "type": {
+                "text": "ReturnType<typeof subscribe> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedTranslation",
+              "type": {
+                "text": "Translation"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "description": "The lang of the document or element, with element taking precedence"
+            },
+            {
+              "kind": "field",
+              "name": "resolvedLang",
+              "description": "The lang of the translation being applied.\nThis may not match the document/element lang, in case of fallback translation"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "term",
+              "return": {
+                "type": {
+                  "text": "Result<Translation[TComponentName], Key>"
+                }
+              },
               "parameters": [
                 {
                   "name": "key",
@@ -6641,7 +6972,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "tagName": "nord-nav-group",
           "customElement": true
@@ -6900,7 +7231,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "tagName": "nord-nav-item",
           "customElement": true
@@ -6948,33 +7279,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
@@ -7033,31 +7343,16 @@
             },
             {
               "kind": "field",
-              "name": "breakpoint",
-              "type": {
-                "text": "string"
-              },
+              "name": "dismiss",
               "privacy": "private",
-              "default": "\"35.9375em\""
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })",
+              "description": "Handle dismissal of the popout, clicking outside the target button and popout."
             },
             {
               "kind": "field",
-              "name": "viewportObserver",
+              "name": "direction",
               "privacy": "private",
-              "default": "new ResizeObserver(entries => {\n    entries.forEach(() => {\n      // Update the viewport state\n      this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n      // Ensure autoUpdate is ready when going from small to large viewports\n      if (!this.smallViewport) {\n        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n      }\n    })\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "dismiss",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this && node !== this.targetElement,\n  })",
-              "description": "Handle dismissal of the popout, clicking outside the target button and popout."
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
@@ -7079,11 +7374,7 @@
             {
               "kind": "field",
               "name": "smallViewport",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -7164,6 +7455,12 @@
               "kind": "method",
               "name": "getToggle",
               "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMediaQueryChange",
+              "privacy": "private",
+              "description": "Update the smallViewport flag to switch between \"sheet\" and \"floating\".\nautoUpdate is needed when a viewport gets larger and the popout is open."
             }
           ],
           "events": [
@@ -8832,9 +9129,10 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable or disable responsive behaviour of the stack component.\nSetting this option \"true\" makes sure that contents are\nstacked vertically on mobile (768px and under).",
+              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
               "attribute": "responsive",
-              "reflects": true
+              "reflects": true,
+              "deprecated": true
             },
             {
               "kind": "field",
@@ -8892,7 +9190,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable or disable responsive behaviour of the stack component.\nSetting this option \"true\" makes sure that contents are\nstacked vertically on mobile (768px and under).",
+              "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
               "fieldName": "responsive"
             },
             {
@@ -9663,6 +9961,7 @@
               "type": {
                 "text": "Tooltip | undefined"
               },
+              "privacy": "private",
               "static": true
             },
             {
@@ -9937,24 +10236,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "DirectionController",
+          "members": [
             {
-              "name": "propertyName",
+              "kind": "field",
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
+            },
+            {
+              "kind": "field",
+              "name": "observer",
               "type": {
-                "text": "string"
-              }
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
-              "name": "lifecycle",
-              "default": "\"update\"",
+              "kind": "field",
+              "name": "dir",
               "type": {
-                "text": "ObserveLifecycle"
+                "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
             }
           ]
         }
@@ -9962,221 +10294,306 @@
       "exports": [
         {
           "kind": "js",
-          "name": "observe",
+          "name": "DirectionController",
           "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/common/controllers/EventController.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": "",
+          "name": "EventController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "listeners",
               "type": {
-                "text": "unknown"
-              }
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "default": "[]"
             },
             {
-              "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"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+              "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"
+                  }
+                }
+              ]
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
+              "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"
+                  }
+                }
+              ]
             },
             {
-              "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": "unknown"
-              }
+              "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"
+                  }
+                }
+              ]
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "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"
+                  }
+                }
+              ]
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "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": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "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": "true"
-              }
+                "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": "condition is true, so always return trueCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "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": "false"
-              }
+                "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 false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
-              "name": "falseCase",
-              "default": "nothing",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleClickOut",
+              "privacy": "private"
             }
           ]
         }
@@ -10184,265 +10601,294 @@
       "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",
+          "name": "LightDismissController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "LightDismissController",
+            "module": "src/common/controllers/LightDismissController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDomController.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
+          "kind": "class",
+          "description": "",
+          "name": "LightDomController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "container",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
         {
           "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",
@@ -10454,9 +10900,19 @@
             },
             {
               "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
+              "name": "unbind"
+            },
+            {
+              "kind": "method",
+              "name": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -10464,207 +10920,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"
                   }
                 }
               ]
@@ -10675,22 +10994,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",
@@ -10702,107 +11021,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"
+              }
             }
           ]
         }
@@ -10810,177 +11155,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"
+              }
             }
           ]
         }
@@ -10988,265 +11377,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"
           }
         }
       ]