@nordhealth/components 2.11.0 → 2.12.0

package/custom-elements.json

@@ -570,63 +570,103 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.ts",
+      "path": "src/button-group/ButtonGroup.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": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
+          "name": "ButtonGroup",
           "cssProperties": [
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-group-border-radius",
+              "default": "var(--n-border-radius-s)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
+              "name": "--n-button-group-box-shadow",
+              "default": "var(--n-box-shadow)"
             }
           ],
           "slots": [
             {
-              "description": "default slot",
+              "description": "The button group content",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "direction",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "\"vertical\" | \"horizontal\""
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "attribute": "variant",
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "attribute": "direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "attribute": "role",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "direction",
               "type": {
-                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+                "text": "\"vertical\" | \"horizontal\""
               },
-              "default": "\"info\"",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
+              "default": "\"horizontal\"",
+              "description": "The direction of the button group.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"group\"",
+              "description": "The appropriate role for the containing element.",
+              "fieldName": "role"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "ready",
-          "category": "feedback",
+          "status": "draft",
+          "category": "structure",
           "displayName": null,
           "examples": [],
-          "tagName": "nord-banner",
+          "tagName": "nord-button-group",
           "customElement": true
         }
       ],
@@ -635,20 +675,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-banner",
+          "name": "nord-button-group",
           "declaration": {
-            "name": "Banner",
-            "module": "src/banner/Banner.ts"
+            "name": "ButtonGroup",
+            "module": "src/button-group/ButtonGroup.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"
+      "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 group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton group labels should be accurate and predictable.\n"
     },
     {
       "kind": "javascript-module",
@@ -1160,128 +1200,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Only use one primary button per section, as a main call-to-action.\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 a primary button in every row of a table.\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## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n<img src=\"/img/components/button/start-slot.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button with icon in start slot\" />\n\nIf the button toggles a dropdown, the dropdown icon should be placed in the `end` slot and use the `interface-dropdown-small` icon from [Nordicons](/nordicons/):\n\n<img src=\"/img/components/button/dropdown.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Dropdown button\" />\n\nEach button size has a recommended icon size. The default button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size:\n\n<img src=\"/img/components/button/icon-sizes.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Button icon sizes\" />\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n<img src=\"/img/components/button/create.png\" style=\"max-width:700px;\" loading=\"lazy\" height=\"475\" width=\"800\" alt=\"Create/add type primary action with icon\" />\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/button-group/ButtonGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-button-group-border-radius",
-              "default": "var(--n-border-radius-s)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-button-group-box-shadow",
-              "default": "var(--n-box-shadow)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The button group content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "attribute": "direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "direction",
-              "type": {
-                "text": "\"vertical\" | \"horizontal\""
-              },
-              "default": "\"horizontal\"",
-              "description": "The direction of the button group.",
-              "fieldName": "direction"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"group\"",
-              "description": "The appropriate role for the containing element.",
-              "fieldName": "role"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-button-group",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/button-group/ButtonGroup.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 group together buttons, or dropdowns, of a similar nature or purpose.\n- Use the appropriate `role` attribute on the button group to provide additional semantics.\n- Use an `aria-labelledby` attribute referencing another element to best explain the contents of the button group.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t add components other than buttons, dropdowns and in some instances visually hidden components to the button group.\n- Don’t skip the addition of an appropriate label if the added `role` attribute value calls for it.\n- Don’t use for building grid based layouts.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton group labels should be accurate and predictable.\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.ts",
@@ -1371,43 +1289,238 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/banner/Banner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
+              "name": "--n-banner-border-radius",
               "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dialogLabelId",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "privacy": "private",
-              "default": "\"dialog-header\""
-            },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "monthSelectNode",
+              "name": "variant",
               "type": {
-                "text": "HTMLElement"
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
               },
-              "privacy": "private"
-            },
-            {
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "feedback",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "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/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",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "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": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "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 the 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 the 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",
+          "displayName": null,
+          "examples": [],
+          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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/calendar/Calendar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-calendar-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "monthSelectNode",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
               "kind": "field",
               "name": "focusedDayNode",
               "type": {
@@ -1533,11 +1646,20 @@
               "kind": "field",
               "name": "isDateDisabled",
               "type": {
-                "text": "DateDisabledPredicate"
+                "text": "DatePredicate"
               },
               "default": "isDateDisabled",
               "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
+            {
+              "kind": "field",
+              "name": "isDateHighlighted",
+              "type": {
+                "text": "(date: Date) => string | boolean"
+              },
+              "default": "isDateHighlighted",
+              "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
+            },
             {
               "kind": "field",
               "name": "activeFocus",
@@ -1853,55 +1975,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/month-view.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "dayView",
-          "parameters": [
-            {
-              "name": "{\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}",
-              "type": {
-                "text": "DatePickerDayProps"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "monthView",
-          "parameters": [
-            {
-              "name": "{\n  onFocusIn,\n  onFocusOut,\n  selectedDate,\n  focusedDate,\n  labelledById,\n  dayNames,\n  dayNamesShort,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n}",
-              "type": {
-                "text": "MonthViewArgs"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "dayView",
-          "declaration": {
-            "name": "dayView",
-            "module": "src/calendar/month-view.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "monthView",
-          "declaration": {
-            "name": "monthView",
-            "module": "src/calendar/month-view.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 when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -2578,144 +2651,22 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/command-menu/CommandMenu.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",
+          "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",
           "cssProperties": [
             {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
+              "description": "Controls the max inline size, or width, of the command menu.",
+              "name": "--n-command-menu-inline-size",
+              "default": "640px"
             },
             {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "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": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
-            },
-            {
-              "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 the 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 the 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",
-          "displayName": null,
-          "examples": [],
-          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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/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",
-          "cssProperties": [
-            {
-              "description": "Controls the max inline size, or width, of the command menu.",
-              "name": "--n-command-menu-inline-size",
-              "default": "640px"
-            },
-            {
-              "description": "Controls the max block size, or height, of the command menu.",
-              "name": "--n-command-menu-block-size",
-              "default": "290px"
+              "description": "Controls the max block size, or height, of the command menu.",
+              "name": "--n-command-menu-block-size",
+              "default": "290px"
             },
             {
               "description": "Controls the command menu offset from the block start, or top, of the screen.",
@@ -4738,11 +4689,20 @@
               "kind": "field",
               "name": "isDateDisabled",
               "type": {
-                "text": "DateDisabledPredicate"
+                "text": "DatePredicate"
               },
               "default": "isDateDisabled",
               "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
             },
+            {
+              "kind": "field",
+              "name": "isDateHighlighted",
+              "type": {
+                "text": "(date: Date) => string | boolean"
+              },
+              "default": "isDateHighlighted",
+              "description": "Controls which days are highlighted with a small indicator.\nReturning `false` will not show an indicator.\nReturning `true` will show the indicator, but without an accessible label. Therefore\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than `true` whenever possible."
+            },
             {
               "kind": "field",
               "name": "expand",
@@ -8465,7 +8425,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "overlay",
           "displayName": null,
           "examples": [],
@@ -9052,37 +9012,19 @@
                 "name": "FocusableMixin",
                 "module": "src/common/mixins/FocusableMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "mixins": [
             {
               "name": "FocusableMixin",
               "module": "/src/common/mixins/FocusableMixin.js"
-            },
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "action",
           "displayName": null,
           "examples": [],
@@ -9690,281 +9632,96 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/qrcode/Qrcode.ts",
+      "path": "src/radio/Radio.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
-          "name": "Qrcode",
-          "members": [
+          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
+          "name": "Radio",
+          "slots": [
             {
-              "kind": "field",
-              "name": "canvas",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
             },
             {
-              "kind": "field",
-              "name": "computed",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
             },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "inputId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "attribute": "value",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"input\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "hintId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "attribute": "label",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"hint\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "errorId",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "protected",
+              "default": "\"error\"",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "background",
-              "reflects": true
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "attribute": "correction",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "generate",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the QR Code, most commonly an URL.",
-              "fieldName": "value"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number"
-              },
-              "default": "128",
-              "description": "The size of the rendered QR Code in pixels.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-text)\"",
-              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "background",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"var(--n-color-surface)\"",
-              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "background"
-            },
-            {
-              "name": "correction",
-              "type": {
-                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
-              },
-              "default": "\"H\"",
-              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
-              "fieldName": "correction"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "new",
-          "category": "image",
-          "displayName": "QR Code",
-          "examples": [],
-          "tagName": "nord-qrcode",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-qrcode",
-          "declaration": {
-            "name": "Qrcode",
-            "module": "src/qrcode/Qrcode.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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/radio/Radio.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Radio buttons are graphical user interface elements that allow user to choose only one option from\na predefined set of mutually exclusive options.",
-          "name": "Radio",
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\"",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"hint\",\n    render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
-              "description": "For accessibility reasons, we render some parts of the component to the light DOM.",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"label\",\n    render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n    syncLightDom: element => {\n      if (!isLabel(element)) {\n        // eslint-disable-next-line no-console\n        console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n      } else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
-              "inheritedFrom": {
-                "name": "FormAssociatedMixin",
-                "module": "src/common/mixins/FormAssociatedMixin.ts"
-              }
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new LightSlotController(this, {\n    slotName: \"error\",\n    render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n    syncLightDom: element => {\n      element.id = this.hintId\n    },\n  })",
+              "inheritedFrom": {
+                "name": "FormAssociatedMixin",
+                "module": "src/common/mixins/FormAssociatedMixin.ts"
+              }
             },
             {
               "kind": "field",
@@ -10534,78 +10291,263 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/range/Range.ts",
+      "path": "src/qrcode/Qrcode.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
-          "name": "Range",
-          "cssProperties": [
-            {
-              "description": "Controls the size of the thumb.",
-              "name": "--n-range-thumb-size",
-              "default": "20px"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the current value.",
-              "name": "--n-range-track-color-active",
-              "default": "var(--n-color-accent)"
-            },
-            {
-              "description": "Controls the color of the portion of the track that represents the remaining value.",
-              "name": "--n-range-track-color-inactive",
-              "default": "var(--n-color-border-strong)"
-            },
-            {
-              "description": "Controls the height of the track.",
-              "name": "--n-range-track-size",
-              "default": "3px"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
-            },
-            {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
-            },
-            {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
-            }
-          ],
+          "description": "QR Code component is used for providing information or links\nto users which they can quickly scan with their smartphone.",
+          "name": "Qrcode",
           "members": [
             {
               "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "name": "canvas",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "computed",
               "type": {
-                "text": "number"
+                "text": "HTMLElement"
               },
-              "default": "0",
-              "description": "Minimum value for the range slider.",
-              "attribute": "min"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "10",
-              "description": "Maximum value for the range slider.",
-              "attribute": "max"
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "background",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "attribute": "correction",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "generate",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the QR Code, most commonly an URL.",
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label used by assistive technology. If unspecified, the value will\nbe used instead.",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number"
+              },
+              "default": "128",
+              "description": "The size of the rendered QR Code in pixels.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-text)\"",
+              "description": "The fill color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
+            {
+              "name": "background",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"var(--n-color-surface)\"",
+              "description": "The background color of the QR Code.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "background"
+            },
+            {
+              "name": "correction",
+              "type": {
+                "text": "\"L\" | \"M\" | \"Q\" | \"H\""
+              },
+              "default": "\"H\"",
+              "description": "Error correction level makes the QR Code bigger and helps users to\nscan it without issues. L, M, Q and H values will use 7%, 15%, 25%\nand 30% of the QR code for error correction respectively.",
+              "fieldName": "correction"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "image",
+          "displayName": "QR Code",
+          "examples": [],
+          "tagName": "nord-qrcode",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-qrcode",
+          "declaration": {
+            "name": "Qrcode",
+            "module": "src/qrcode/Qrcode.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 allow people to access information on their smartphone without the need to type.\n- Always provide an alternative way to access the same information.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t hide important information behind a QR Code only.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/range/Range.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Range input lets user specify a numeric value using a slider which\nmust be no less than a given value, and no more than another given value.",
+          "name": "Range",
+          "cssProperties": [
+            {
+              "description": "Controls the size of the thumb.",
+              "name": "--n-range-thumb-size",
+              "default": "20px"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the current value.",
+              "name": "--n-range-track-color-active",
+              "default": "var(--n-color-accent)"
+            },
+            {
+              "description": "Controls the color of the portion of the track that represents the remaining value.",
+              "name": "--n-range-track-color-inactive",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls the height of the track.",
+              "name": "--n-range-track-size",
+              "default": "3px"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Minimum value for the range slider.",
+              "attribute": "min"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "Maximum value for the range slider.",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "step",
               "type": {
                 "text": "number"
               },
@@ -10641,20 +10583,6 @@
                 "module": "src/common/mixins/FormAssociatedMixin.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "labelSlot",
@@ -11260,10 +11188,6 @@
             }
           ],
           "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            },
             {
               "name": "FormAssociatedMixin",
               "module": "/src/common/mixins/FormAssociatedMixin.js"
@@ -11289,7 +11213,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "form",
           "displayName": null,
           "examples": [],
@@ -12127,113 +12051,13 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/spinner/Spinner.ts",
+      "path": "src/stack/Stack.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
-          "name": "Spinner",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "attribute": "label",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the spinner.",
-              "fieldName": "size"
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "feedback",
-          "displayName": null,
-          "examples": [],
-          "tagName": "nord-spinner",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-spinner",
-          "declaration": {
-            "name": "Spinner",
-            "module": "src/spinner/Spinner.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/stack/Stack.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
-          "name": "Stack",
-          "cssProperties": [
+          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
+          "name": "Stack",
+          "cssProperties": [
             {
               "description": "Controls the spacing between items, using our [spacing tokens](/tokens/#space).",
               "name": "--n-stack-gap",
@@ -12402,6 +12226,106 @@
       ],
       "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 when you need to stack multiple components vertically or horizontally.\n- Use when you want to adjust the white space between two or more components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for building grid based layouts.\n\n</div>\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/spinner/Spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the spinner.",
+              "fieldName": "size"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "feedback",
+          "displayName": null,
+          "examples": [],
+          "tagName": "nord-spinner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for indicating users that their action is being processed.\n- Use the label property to provide an accessible label for the spinner. If no label is supplied, the spinner is hidden from assistive technology.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to show progress. Favor a progress bar instead.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab/Tab.ts",
@@ -12468,7 +12392,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "displayName": null,
           "examples": [],
@@ -12710,7 +12634,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "displayName": null,
           "examples": [],
@@ -12757,7 +12681,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "navigation",
           "displayName": null,
           "examples": [],
@@ -13818,7 +13742,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "feedback",
           "displayName": null,
           "examples": [],
@@ -13893,7 +13817,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "feedback",
           "displayName": null,
           "examples": [],
@@ -14531,7 +14455,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "form",
           "displayName": null,
           "examples": [],
@@ -14894,685 +14818,512 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/decorators/observe.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "DirectionController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "hosts",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
-            },
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "observer",
+              "name": "propertyName",
               "type": {
-                "text": "MutationObserver | undefined"
-              },
-              "privacy": "private",
-              "static": true
+                "text": "string"
+              }
             },
             {
-              "kind": "field",
-              "name": "dir",
+              "name": "lifecycle",
+              "default": "\"update\"",
               "type": {
-                "text": "WritingDirection"
+                "text": "ObserveLifecycle"
               }
-            },
-            {
-              "kind": "field",
-              "name": "isLTR"
-            },
-            {
-              "kind": "field",
-              "name": "isRTL"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
             }
-          ],
-          "examples": []
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "observe",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/EventController.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "EventController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "listeners",
+              "name": "value",
               "type": {
-                "text": "Array<() => void>"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "window",
-                  "type": {
-                    "text": "Window"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "document",
-                  "type": {
-                    "text": "Document"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "MediaQueryList"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: ShadowRoot, ev: MediaQueryListEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "listen",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "Window | Document | HTMLElement | ShadowRoot | MediaQueryList"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(ev: any) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+                "text": "any"
+              }
             }
           ],
-          "examples": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EventController",
-          "declaration": {
-            "name": "EventController",
-            "module": "src/common/controllers/EventController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/FocusTrapController.ts",
-      "declarations": [
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "FocusTrapController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "lastScrollY",
+              "name": "condition",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "lastFocused",
+              "name": "trueCase",
               "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "method",
-              "name": "trap"
-            },
+              "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": "release"
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "handleFocusIn",
-              "privacy": "private"
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
             },
             {
-              "kind": "method",
-              "name": "recaptureFocus",
-              "privacy": "private"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "restoreScroll",
-              "privacy": "private"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
             }
           ],
-          "examples": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FocusTrapController",
-          "declaration": {
-            "name": "FocusTrapController",
-            "module": "src/common/controllers/FocusTrapController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
-      "declarations": [
+          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "FormDataController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "events",
+              "name": "condition",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
+                "text": "true"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleFormData",
-              "privacy": "private"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
             }
           ],
-          "examples": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FormDataController",
-          "declaration": {
-            "name": "FormDataController",
-            "module": "src/common/controllers/FormDataController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/LightDismissController.ts",
-      "declarations": [
+          "description": "condition is true, so always return trueCase"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "LightDismissController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "shortcut",
+              "name": "condition",
               "type": {
-                "text": "ShortcutController"
-              },
-              "privacy": "private",
-              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "events",
+              "name": "trueCase",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "field",
-              "name": "handleEsc",
-              "privacy": "private"
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleClickOut",
-              "privacy": "private"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
             }
           ],
-          "examples": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LightDismissController",
-          "declaration": {
-            "name": "LightDismissController",
-            "module": "src/common/controllers/LightDismissController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/LightDomController.ts",
-      "declarations": [
+          "description": "condition is false, so always return falseCase"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "LightDomController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "container",
+              "name": "condition",
               "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostUpdated"
+              "name": "trueCase",
+              "default": "condition",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "falseCase",
+              "default": "nothing",
+              "type": {
+                "text": "any"
+              }
             }
-          ],
-          "examples": []
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LightDomController",
+          "name": "cond",
           "declaration": {
-            "name": "LightDomController",
-            "module": "src/common/controllers/LightDomController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightSlotController.ts",
+      "path": "src/common/directives/wrapIf.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": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "renderHook",
+              "name": "condition",
               "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "inner",
               "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": "() => TInner"
               }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "condition",
+              "type": {
+                "text": "true"
               }
             },
             {
-              "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "events",
+              "name": "wrapper",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
               }
             },
             {
-              "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
               }
             },
             {
-              "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "any"
               }
             },
             {
-              "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
               }
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
               }
             }
           ],
-          "superclass": {
-            "name": "SlotController",
-            "module": "/src/common/controllers/SlotController.js"
-          },
-          "status": null,
-          "category": null,
-          "displayName": null,
-          "examples": []
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "LightSlotController",
+          "name": "wrapIf",
           "declaration": {
-            "name": "LightSlotController",
-            "module": "src/common/controllers/LightSlotController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/PortalController.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "PortalController",
+          "name": "DirectionController",
           "members": [
             {
               "kind": "field",
-              "name": "renderHook",
-              "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
             },
             {
               "kind": "field",
-              "name": "lightDom",
+              "name": "observer",
               "type": {
-                "text": "LightDomController"
+                "text": "MutationObserver | undefined"
               },
               "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    })"
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "WritingDirection"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR"
+            },
+            {
+              "kind": "field",
+              "name": "isRTL"
             },
             {
               "kind": "method",
@@ -15580,11 +15331,13 @@
             },
             {
               "kind": "method",
-              "name": "hostUpdated"
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "observe",
+              "privacy": "private",
+              "static": true
             }
           ],
           "examples": []
@@ -15593,38 +15346,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PortalController",
+          "name": "DirectionController",
           "declaration": {
-            "name": "PortalController",
-            "module": "src/common/controllers/PortalController.ts"
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/ScrollbarController.ts",
+      "path": "src/common/controllers/EventController.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "We can have any number of components open at a time, all of which lock scroll.\nConsider multiple modals being open, plus some popouts, etc.\n\nSo we need some bookkeeping to know when to unlock scroll...\n\nBut we can't simply keep a count of how many components are open,\nsince a misbehaving component may call lockScroll() multiple times.\n\nNor can we rely on the first component to call lockScroll() to be the last to unlockScroll(),\nsince we cannot guarantee order of operations.\n\nTherefore, we track instances of ScrollbarController in a Set,\nand only unlock scroll when the set is empty.\n\nWe also need to be careful to restore any styles that were there\nbefore we locked scroll.",
-          "name": "ScrollbarController",
+          "description": "",
+          "name": "EventController",
           "members": [
             {
               "kind": "field",
-              "name": "locks",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ScrollbarController>()"
-            },
-            {
-              "kind": "field",
-              "name": "resets",
+              "name": "listeners",
               "type": {
                 "text": "Array<() => void>"
               },
               "privacy": "private",
-              "static": true,
               "default": "[]"
             },
             {
@@ -15633,90 +15378,287 @@
             },
             {
               "kind": "method",
-              "name": "lockScroll"
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "window",
+                  "type": {
+                    "text": "Window"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "document",
+                  "type": {
+                    "text": "Document"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "unlockScroll"
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "MediaQueryList"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: MediaQueryListEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setStyle",
-              "privacy": "private",
-              "static": true,
+              "name": "listen",
               "parameters": [
                 {
-                  "name": "property",
+                  "name": "element",
                   "type": {
-                    "text": "string"
+                    "text": "Window | Document | HTMLElement | ShadowRoot | MediaQueryList"
                   }
                 },
                 {
-                  "name": "value",
+                  "name": "type",
                   "type": {
                     "text": "string"
                   }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(ev: any) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
                 }
               ]
             }
           ],
-          "status": null,
-          "category": null,
-          "displayName": null,
           "examples": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ScrollbarController",
+          "name": "EventController",
           "declaration": {
-            "name": "ScrollbarController",
-            "module": "src/common/controllers/ScrollbarController.ts"
+            "name": "EventController",
+            "module": "src/common/controllers/EventController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/ShortcutController.ts",
+      "path": "src/common/controllers/FocusTrapController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ShortcutController",
+          "name": "FocusTrapController",
           "members": [
             {
               "kind": "field",
-              "name": "unregister",
+              "name": "lastScrollY",
               "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "lastFocused",
+              "type": {
+                "text": "HTMLElement | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "trap"
             },
             {
               "kind": "method",
-              "name": "unbind"
+              "name": "release"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "bind",
-              "parameters": [
-                {
-                  "name": "shortcuts",
-                  "type": {
-                    "text": "KeyBindingMap"
-                  }
-                }
-              ]
+              "name": "recaptureFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "restoreScroll",
+              "privacy": "private"
             }
           ],
           "examples": []
@@ -15725,30 +15667,22 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ShortcutController",
-          "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ShortcutMap",
+          "name": "FocusTrapController",
           "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "FocusTrapController",
+            "module": "src/common/controllers/FocusTrapController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
+      "path": "src/common/controllers/FormDataController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SlotController",
+          "name": "FormDataController",
           "members": [
             {
               "kind": "field",
@@ -15765,33 +15699,8 @@
             },
             {
               "kind": "field",
-              "name": "hasContent"
-            },
-            {
-              "kind": "field",
-              "name": "isEmpty"
-            },
-            {
-              "kind": "field",
-              "name": "content"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
+              "name": "handleFormData",
               "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
             }
           ],
           "examples": []
@@ -15800,606 +15709,621 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SlotController",
+          "name": "FormDataController",
           "declaration": {
-            "name": "SlotController",
-            "module": "src/common/controllers/SlotController.ts"
+            "name": "FormDataController",
+            "module": "src/common/controllers/FormDataController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/SwipeController.ts",
+      "path": "src/common/controllers/LightDismissController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SwipeController",
+          "name": "LightDismissController",
           "members": [
             {
               "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "field",
-              "name": "hadFirstUpdate",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "initialTouchX",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "initialTouchY",
+              "name": "shortcut",
               "type": {
-                "text": "number"
+                "text": "ShortcutController"
               },
               "privacy": "private",
-              "default": "0"
+              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "events",
               "type": {
-                "text": "SetRequired<SwipeControllerOptions, \"target\">"
+                "text": "EventController"
               },
               "privacy": "private",
-              "default": "{\n      target: () => host,\n      ...options,\n    }"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
+              "default": "new EventController(host)"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
               "kind": "field",
-              "name": "handleTouchStart",
+              "name": "handleEsc",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleTouchEnd",
+              "name": "handleClickOut",
               "privacy": "private"
             }
           ],
           "examples": []
-        },
-        {
-          "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": "SwipeController",
-          "declaration": {
-            "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",
+          "name": "LightDismissController",
           "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "LightDismissController",
+            "module": "src/common/controllers/LightDismissController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
+      "path": "src/common/controllers/LightDomController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "LightDomController",
+          "members": [
             {
-              "name": "propertyName",
+              "kind": "field",
+              "name": "container",
               "type": {
-                "text": "string"
-              }
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "name": "lifecycle",
-              "default": "\"update\"",
-              "type": {
-                "text": "ObserveLifecycle"
-              }
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             }
-          ]
+          ],
+          "examples": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "observe",
+          "name": "LightDomController",
           "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
+            "name": "LightDomController",
+            "module": "src/common/controllers/LightDomController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/common/controllers/LightSlotController.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": "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": "unknown"
-              }
+                "text": "Comment"
+              },
+              "privacy": "private"
             },
             {
-              "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",
+              "kind": "field",
+              "name": "lightDom",
               "type": {
-                "text": "true"
-              }
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
+              "kind": "method",
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
+              "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"
               }
-            }
-          ],
-          "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": "syncLightDom",
+              "privacy": "private"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "any"
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
+              "kind": "field",
+              "name": "hasContent",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
+              "kind": "field",
+              "name": "isEmpty",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
+              "kind": "field",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             }
           ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
+          "superclass": {
+            "name": "SlotController",
+            "module": "/src/common/controllers/SlotController.js"
           },
-          "parameters": [
+          "status": null,
+          "category": null,
+          "displayName": null,
+          "examples": []
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LightSlotController",
+          "declaration": {
+            "name": "LightSlotController",
+            "module": "src/common/controllers/LightSlotController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/PortalController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PortalController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "renderHook",
               "type": {
-                "text": "false"
-              }
+                "text": "Comment"
+              },
+              "privacy": "private"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "lightDom",
               "type": {
-                "text": "any"
-              }
+                "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    })"
             },
             {
-              "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": "method",
+              "name": "hostUpdated"
             },
             {
-              "name": "falseCase",
-              "default": "nothing",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             }
-          ]
+          ],
+          "examples": []
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "cond",
+          "name": "PortalController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/ScrollbarController.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
+          "kind": "class",
+          "description": "We can have any number of components open at a time, all of which lock scroll.\nConsider multiple modals being open, plus some popouts, etc.\n\nSo we need some bookkeeping to know when to unlock scroll...\n\nBut we can't simply keep a count of how many components are open,\nsince a misbehaving component may call lockScroll() multiple times.\n\nNor can we rely on the first component to call lockScroll() to be the last to unlockScroll(),\nsince we cannot guarantee order of operations.\n\nTherefore, we track instances of ScrollbarController in a Set,\nand only unlock scroll when the set is empty.\n\nWe also need to be careful to restore any styles that were there\nbefore we locked scroll.",
+          "name": "ScrollbarController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "locks",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ScrollbarController>()"
+            },
+            {
+              "kind": "field",
+              "name": "resets",
+              "type": {
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "lockScroll"
+            },
+            {
+              "kind": "method",
+              "name": "unlockScroll"
+            },
+            {
+              "kind": "method",
+              "name": "setStyle",
+              "privacy": "private",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "property",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "status": null,
+          "category": null,
+          "displayName": null,
+          "examples": []
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "cond",
+          "name": "ScrollbarController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "ScrollbarController",
+            "module": "src/common/controllers/ScrollbarController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/ShortcutController.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
+          "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"
+                  }
+                }
+              ]
+            }
+          ],
+          "examples": []
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "cond",
+          "name": "ShortcutController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "ShortcutController",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         },
         {
           "kind": "js",
-          "name": "cond",
+          "name": "ShortcutMap",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "KeyBindingMap",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/SlotController.ts",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
+          "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"
+                  }
+                }
+              ]
+            }
+          ],
+          "examples": []
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "cond",
+          "name": "SlotController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/controllers/SwipeController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "SwipeController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "false"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "hadFirstUpdate",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "initialTouchX",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "initialTouchY",
               "type": {
-                "text": "true"
-              }
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "options",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
+              },
+              "privacy": "private",
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
+              "kind": "method",
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleTouchEnd",
+              "privacy": "private"
             }
-          ]
+          ],
+          "examples": []
         },
         {
           "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
+          "name": "isHorizontalSwipe",
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
-            },
-            {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
-            },
-            {
-              "name": "wrapper",
+              "name": "{ distX, distY }",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "SwipeDetails"
               }
             }
           ]
         },
         {
           "kind": "function",
-          "name": "wrapIf",
+          "name": "isDownwardsSwipe",
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
-            },
-            {
-              "name": "wrapper",
+              "name": "{ distX, distY }",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
+                "text": "SwipeDetails"
               }
             }
-          ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "wrapIf",
+          "name": "SwipeController",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "SwipeController",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         },
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "isHorizontalSwipe",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "isHorizontalSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         },
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "isDownwardsSwipe",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "isDownwardsSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         }
       ]