@nordhealth/components 1.13.1 → 1.14.0

package/custom-elements.json

@@ -1036,75 +1036,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## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
-              },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "attribute": "type",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
-              },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "fieldName": "type"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
-          "displayName": null,
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -1624,6 +1555,105 @@
       ],
       "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/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that 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,
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -2231,169 +2261,70 @@
     },
     {
       "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",
           "slots": [
             {
-              "description": "The card content.",
-              "name": ""
-            },
+              "description": "Used to replace the default footer contents.",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
+              "kind": "field",
+              "name": "inputRef",
+              "privacy": "private"
             },
             {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
+              "kind": "field",
+              "name": "listRef",
+              "privacy": "private"
             },
             {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "previousFocus",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "headerSlot",
+              "name": "localize",
               "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
+              "default": "new LocalizeController<\"nord-command-menu\">(this)"
             },
             {
               "kind": "field",
-              "name": "headerEndSlot",
+              "name": "dismissController",
               "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
             },
             {
               "kind": "field",
-              "name": "footerSlot",
+              "name": "keyboardController",
               "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
+              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "open",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "boolean"
               },
-              "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": [
+              "default": "false",
+              "description": "Show or hide the command menu.",
+              "attribute": "open"
+            },
             {
-              "name": "padding",
+              "kind": "field",
+              "name": "placeholder",
               "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,
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
-          "slots": [
-            {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "previousFocus",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-command-menu\">(this)"
-            },
-            {
-              "kind": "field",
-              "name": "dismissController",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "keyboardController",
-              "privacy": "private",
-              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show or hide the command menu.",
-              "attribute": "open"
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
+                "text": "string"
               },
               "default": "\"Type a command or search...\"",
               "description": "Hint text to display in the Command Menu search field.",
@@ -2919,6 +2850,75 @@
       ],
       "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 provide global and contextual keyboard shortcuts for users.\n- Make command menu available everywhere. Users must be able to bring up the command menu easily.\n- Make command menu central. Users should be able to find global shortcuts from one location.\n- Make command menu omnipotent. Give users access to every possible action.\n- Group related commands logically under sections with the section setting.\n- Use `Alt` key as the modifier, since this is less likely to clash with existing shortcuts.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make command menu available only in certain views of the application.\n- Don’t define shortcuts such as `Ctrl+C`, since this will clash with the native \"Copy\" shortcut.\n- Don't create complex shortcuts, as users will struggle to remember them.\n- Avoid using `KeyboardEvent.key` for defining the shortcut keys.\n- Don’t use as a search field only.\n\n</div>\n\n---\n\n## Content guidelines\n\nCommand titles should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they execute a command:\n\n<div class=\"n-usage n-usage-do\">Start consultation</div>\n<div class=\"n-usage n-usage-dont\">Consultation</div>\n\nAlways lead with a strong verb that encourages action. To provide enough context to user, use the {verb} + {noun} content formula:\n\n<div class=\"n-usage n-usage-do\">Open dashboard</div>\n<div class=\"n-usage n-usage-dont\">Dashboard</div>\n\nWhen writing command titles, 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\">New appointment</div>\n<div class=\"n-usage n-usage-dont\">New Appointment</div>\n\nAvoid unnecessary words and articles in command titles, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nUse ellipsis in the title when describing sections that have commands grouped inside of them:\n\n<div class=\"n-usage n-usage-do\">Change theme…</div>\n<div class=\"n-usage n-usage-dont\">Change theme</div>\n\n---\n\n## Commands data\n\nEach command in the `commands` data array must include at least an `id` and `title`. A&nbsp;command may also include properties for `section`, `icon`, `handler`, `shortcut` , `parent`, and `keywords`:\n\n| Name       | Purpose                                                                                                                                                                                                                   |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `id`       | An identifier for each command, must be unique. Example: `id: \"user\"`.                                                                                                                                                    |\n| `title`    | The title shown to users. This is used when searching for a command. Example: `title: \"Change theme...\"`.                                                                                                                 |\n| `keywords` | Not visible in the user interface, but can make it easier to discover commands through search. Example: `keywords: \"command change log sign out in\"`.                                                                     |\n| `shortcut` | The keyboard shortcut. Example: `shortcut: \"Alt+KeyU\"`. See the sections [Defining Shortcuts](#defining-shortcuts) and [Choosing shortcuts](#choosing-shortcuts) below for more information.                              |\n| `section`  | Used for grouping many commands under a common header. Example: `section: \"Commands\"`.                                                                                                                                    |\n| `icon`     | A name of an icon form Nordicons to show beside the title. If not specified, default command icon will be used instead. Example: `icon: \"file-picture\"`.                                                                  |\n| `parent`   | The `id` of a parent command. This is used for nesting commands. Example: `parent: \"theme\"`.                                                                                                                              |\n| `handler`  | A function to execute when an user triggers a command. Example: `handler: () => { alert(\"Change to light theme\") }`. In cases where a command is only used as a parent command e.g. \"Change theme\", this is not required. |\n\n---\n\n## Defining shortcuts\n\nShortcuts in the Command Menu have the following form: `[modifier]+[key]`. Shortcuts are made up of a sequence of presses. A press can be as simple as a single key which matches against [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values):\n\n```js\n// Matches: event.code:\n\"KeyD\"\n```\n\nPresses can optionally be prefixed with **_modifiers_** which match against any valid value to [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState).\n\n```js\n\"Control+KeyD\"\n\"Meta+KeyD\"\n\"Shift+KeyD\"\n\"Alt+KeyD\"\n\"Meta+Shift+KeyD\"\n```\n\nThere is also a special `$mod` modifier that makes it easy to support cross platform keybindings:\n\n- Mac: `$mod` = `Meta` (⌘)\n- Windows/Linux: `$mod` = `Control`\n\n```js\n\"$mod+KeyD\" // ⌘/Ctrl + D\n\"$mod+Shift+KeyD\" // ⌘/Ctrl + Shift + D\n```\n\nThe Command Menu itself can be opened using `⌘+k` (or `Ctrl+k` on Windows) and closed by hitting `Esc`. These are both non-configurable shortcuts in order to unify the experience across our platforms.\n\n---\n\n## Choosing shortcuts\n\nWhen choosing shortcuts, it is very important that they do not clash with native operating system or browser shortcuts.\n\nFor example, you _should not_ define a shortcut like `$mod+KeyC`, since this will clash with the native “Copy” shortcut, and will be triggered every time a user copies text in the app. Nor should you use shortcuts like `Shift+KeyA` since this will get triggered whenever a user types an uppercase “A” character. Therefore, special care and attention must be given to _each and every_ shortcut choice.\n\nIn general, we recommend using the `Alt` modifier, since this is less likely to clash with existing shortcuts. However, be aware, the `Alt` key is also used for accented characters e.g. `Alt+KeyA` produces the letter “å”. Again, it is crucial that you choose shortcuts carefully.\n\nYou should strive to choose shortcuts that are intuitive and easy to remember. The more complex a shortcut, the less likely a user is to remember it. Of course, a user can still find a command by searching the command menu, and for some users this may be their preferred way of triggering commands.\n\n---\n\n## Common keybindings\n\nKeybindings will be matched against [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values) which may have some names you don’t expect. Please note that we recommend always using `KeyboardEvent.code` for defining the keys and only using `KeyboardEvent.key` for defining modifiers.\n\n| Windows       | macOS           | key           | code                           |\n| ------------- | --------------- | ------------- | ------------------------------ |\n| N/A           | `Command` / `⌘` | `Meta`        | `MetaLeft` / `MetaRight`       |\n| `Alt`         | `Option` / `⌥`  | `Alt`         | `AltLeft` / `AltRight`         |\n| `Control`     | `Control` / `^` | `Control`     | `ControlLeft` / `ControlRight` |\n| `Shift`       | `Shift`         | `Shift`       | `ShiftLeft` / `ShiftRight`     |\n| `Space`       | `Space`         | N/A           | `Space`                        |\n| `Enter`       | `Return`        | `Enter`       | `Enter`                        |\n| `Esc`         | `Esc`           | `Escape`      | `Escape`                       |\n| `1`, `2`, etc | `1`, `2`, etc   | `1`, `2`, etc | `Digit1`, `Digit2`, etc        |\n| `a`, `b`, etc | `a`, `b`, etc   | `a`, `b`, etc | `KeyA`, `KeyB`, etc            |\n| `-`           | `-`             | `-`           | `Minus`                        |\n| `=`           | `=`             | `=`           | `Equal`                        |\n| `+`           | `+`             | `+`           | `Equal`\\*                      |\n\nIn addition to the above table, you can use [https://keycode.info/](https://keycode.info/) for checking the specific values needed. Note that some keys will have the same code as others because they appear on the same key on the keyboard. Keep in mind how this is affected by international keyboards which may have different layouts.\n\n---\n\n## Navigating with the command menu\n\n1. Use `Ctrl+K` (Windows/Linux) or `Cmd+K` (Mac) to open the command menu.\n2. Start typing the command you want to execute. The suggestions in the command menu change to match your text.\n3. Finish entering the name, or use the arrow keys to highlight the command you want from the list of suggestions.\n4. Use `Enter` to execute the chosen command.\n5. If you chose a command that has nested commands, you can use `Backspace` to return to the previous menu.\n6. When the command menu is active, you can use one of the following keyboard shortcuts to close it: `Esc`, `Ctrl+K` (Windows and Linux) or `Cmd+K` (Mac).\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "attribute": "type",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "fieldName": "type"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "displayName": null,
+          "tagName": "nord-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/common/attribute.ts",
@@ -5210,6 +5210,17 @@
               "attribute": "expand",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the dropdown. This affects the minimum and maximum inline-size\nof the dropdown.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "hide",
@@ -5271,6 +5282,15 @@
               "default": "false",
               "description": "Controls whether the toggle slot expands to fill the width of its container.",
               "fieldName": "expand"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the dropdown. This affects the minimum and maximum inline-size\nof the dropdown.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -10041,9 +10061,9 @@
               },
               "default": "false",
               "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
+              "deprecated": true,
               "attribute": "responsive",
-              "reflects": true,
-              "deprecated": true
+              "reflects": true
             },
             {
               "kind": "field",
@@ -10102,6 +10122,7 @@
               },
               "default": "false",
               "description": "This property is deprecated and will be removed in a future version. We recommend using standard [CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) over this property. Please see the [updated usage example](/components/stack/?example=using+responsive+media+query).",
+              "deprecated": "true",
               "fieldName": "responsive"
             },
             {
@@ -12484,24 +12505,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/decorators/observe.ts",
+      "path": "src/common/controllers/DirectionController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "observe",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "DirectionController",
+          "members": [
             {
-              "name": "propertyName",
+              "kind": "field",
+              "name": "hosts",
+              "privacy": "private",
+              "static": true,
+              "default": "new Set<ReactiveControllerHost>()"
+            },
+            {
+              "kind": "field",
+              "name": "observer",
               "type": {
-                "text": "string"
-              }
+                "text": "MutationObserver | undefined"
+              },
+              "privacy": "private",
+              "static": true
             },
             {
-              "name": "lifecycle",
-              "default": "\"update\"",
+              "kind": "field",
+              "name": "dir",
               "type": {
-                "text": "ObserveLifecycle"
+                "text": "WritingDirection"
               }
+            },
+            {
+              "kind": "field",
+              "name": "isLTR"
+            },
+            {
+              "kind": "field",
+              "name": "isRTL"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "observe",
+              "privacy": "private",
+              "static": true
             }
           ]
         }
@@ -12509,221 +12563,378 @@
       "exports": [
         {
           "kind": "js",
-          "name": "observe",
+          "name": "DirectionController",
           "declaration": {
-            "name": "observe",
-            "module": "src/common/decorators/observe.ts"
+            "name": "DirectionController",
+            "module": "src/common/controllers/DirectionController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/common/controllers/EventController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof value | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "EventController",
+          "members": [
             {
-              "name": "value",
+              "kind": "field",
+              "name": "listeners",
               "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": [
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "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": [
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "window",
+                  "type": {
+                    "text": "Window"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "document",
+                  "type": {
+                    "text": "Document"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
+              "kind": "method",
+              "name": "listen",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "listen",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Window | Document | HTMLElement | ShadowRoot"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "listener",
+                  "type": {
+                    "text": "(ev: any) => any"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean | AddEventListenerOptions"
+                  }
+                }
+              ]
             }
-          ],
-          "description": "condition is false, to will always return nothing"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof falseCase"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "EventController",
+          "declaration": {
+            "name": "EventController",
+            "module": "src/common/controllers/EventController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/FocusTrapController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FocusTrapController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "lastScrollY",
               "type": {
-                "text": "unknown"
-              }
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "lastFocused",
               "type": {
-                "text": "any"
-              }
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "method",
+              "name": "trap"
+            },
+            {
+              "kind": "method",
+              "name": "release"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "recaptureFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "restoreScroll",
+              "privacy": "private"
             }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "FocusTrapController",
+          "declaration": {
+            "name": "FocusTrapController",
+            "module": "src/common/controllers/FocusTrapController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/FormDataController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormDataController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "true"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleFormData",
+              "privacy": "private"
             }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
+          ]
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "FormDataController",
+          "declaration": {
+            "name": "FormDataController",
+            "module": "src/common/controllers/FormDataController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightDismissController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LightDismissController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "shortcut",
               "type": {
-                "text": "false"
-              }
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "any"
-              }
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)"
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "method",
+              "name": "hostConnected"
             },
             {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleEsc",
+              "privacy": "private"
             },
             {
-              "name": "falseCase",
-              "default": "nothing",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "handleClickOut",
+              "privacy": "private"
             }
           ]
         }
@@ -12731,265 +12942,200 @@
       "exports": [
         {
           "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
-          "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "cond",
+          "name": "LightDismissController",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "LightDismissController",
+            "module": "src/common/controllers/LightDismissController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/controllers/LightDomController.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "LightDomController",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "container",
               "type": {
-                "text": "false"
-              }
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "method",
+              "name": "hostUpdated"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             }
           ]
-        },
+        }
+      ],
+      "exports": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "LightDomController",
+          "declaration": {
+            "name": "LightDomController",
+            "module": "src/common/controllers/LightDomController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/LightSlotController.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": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "renderHook",
               "type": {
-                "text": "true"
-              }
+                "text": "Comment"
+              },
+              "privacy": "private"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "lightDom",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => (this.hasContent ? nothing : this.options.render()),\n      renderOptions: { renderBefore: this.renderHook },\n    })"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
+              "kind": "method",
+              "name": "hostConnected",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
+              "kind": "field",
+              "name": "onChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "_e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "method",
+              "name": "syncLightDom",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "events",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "EventController"
+              },
+              "privacy": "private",
+              "default": "new EventController(host)",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+            },
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
+              }
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "any"
+              "kind": "field",
+              "name": "isEmpty",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
+              "kind": "field",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(innards: TInner) => TWrapper"
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "SlotController",
+                "module": "src/common/controllers/SlotController.ts"
               }
             }
           ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
+          "superclass": {
+            "name": "SlotController",
+            "module": "/src/common/controllers/SlotController.js"
+          },
+          "status": null,
+          "category": null,
+          "displayName": null
         }
       ],
       "exports": [
         {
           "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": "js",
-          "name": "wrapIf",
+          "name": "LightSlotController",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "LightSlotController",
+            "module": "src/common/controllers/LightSlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/DirectionController.ts",
+      "path": "src/common/controllers/MediaQueryController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DirectionController",
+          "name": "MediaQueryController",
           "members": [
             {
               "kind": "field",
-              "name": "hosts",
-              "privacy": "private",
-              "static": true,
-              "default": "new Set<ReactiveControllerHost>()"
-            },
-            {
-              "kind": "field",
-              "name": "observer",
+              "name": "mq",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "MediaQueryList"
               },
-              "privacy": "private",
-              "static": true
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "WritingDirection"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isLTR"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isRTL"
+              "name": "matches"
             },
             {
               "kind": "method",
@@ -13000,10 +13146,8 @@
               "name": "hostDisconnected"
             },
             {
-              "kind": "method",
-              "name": "observe",
-              "privacy": "private",
-              "static": true
+              "kind": "field",
+              "name": "handleChange"
             }
           ]
         }
@@ -13011,207 +13155,112 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DirectionController",
+          "name": "MediaQueryController",
           "declaration": {
-            "name": "DirectionController",
-            "module": "src/common/controllers/DirectionController.ts"
+            "name": "MediaQueryController",
+            "module": "src/common/controllers/MediaQueryController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/EventController.ts",
+      "path": "src/common/controllers/PortalController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "EventController",
+          "name": "PortalController",
           "members": [
             {
               "kind": "field",
-              "name": "listeners",
+              "name": "renderHook",
               "type": {
-                "text": "Array<() => void>"
+                "text": "Comment"
               },
-              "privacy": "private",
-              "default": "[]"
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "kind": "field",
+              "name": "lightDom",
+              "type": {
+                "text": "LightDomController"
+              },
+              "privacy": "private",
+              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
             },
             {
               "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "window",
-                  "type": {
-                    "text": "Window"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Window, ev: WindowEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "name": "hostConnected"
             },
             {
               "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "document",
-                  "type": {
-                    "text": "Document"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: Document, ev: DocumentEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "name": "hostUpdated"
             },
             {
               "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: HTMLElement, ev: HTMLElementEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "name": "hostDisconnected"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PortalController",
+          "declaration": {
+            "name": "PortalController",
+            "module": "src/common/controllers/PortalController.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/controllers/ScrollbarController.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ScrollbarController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "resets",
+              "privacy": "private",
+              "default": "new Set<() => void>()"
             },
             {
               "kind": "method",
-              "name": "listen",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "listener",
-                  "type": {
-                    "text": "(this: ShadowRoot, ev: ShadowRootEventMap[K]) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean | AddEventListenerOptions"
-                  }
-                }
-              ]
+              "name": "hostDisconnected"
+            },
+            {
+              "kind": "field",
+              "name": "width"
             },
             {
               "kind": "method",
-              "name": "listen",
+              "name": "hide"
+            },
+            {
+              "kind": "method",
+              "name": "restore"
+            },
+            {
+              "kind": "method",
+              "name": "setStyle",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "Window | Document | HTMLElement | ShadowRoot"
-                  }
-                },
-                {
-                  "name": "type",
+                  "name": "property",
                   "type": {
                     "text": "string"
                   }
                 },
                 {
-                  "name": "listener",
-                  "type": {
-                    "text": "(ev: any) => any"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
+                  "name": "value",
                   "type": {
-                    "text": "boolean | AddEventListenerOptions"
+                    "text": "string"
                   }
                 }
               ]
@@ -13222,71 +13271,54 @@
       "exports": [
         {
           "kind": "js",
-          "name": "EventController",
+          "name": "ScrollbarController",
           "declaration": {
-            "name": "EventController",
-            "module": "src/common/controllers/EventController.ts"
+            "name": "ScrollbarController",
+            "module": "src/common/controllers/ScrollbarController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/FocusTrapController.ts",
+      "path": "src/common/controllers/ShortcutController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FocusTrapController",
+          "name": "ShortcutController",
           "members": [
             {
               "kind": "field",
-              "name": "lastScrollY",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "lastFocused",
+              "name": "unregister",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "ReturnType<typeof tinykeys> | undefined"
               },
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "hostDisconnected"
+              "name": "hostConnected"
             },
             {
               "kind": "method",
-              "name": "trap"
+              "name": "hostDisconnected"
             },
             {
               "kind": "method",
-              "name": "release"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocusIn",
-              "privacy": "private"
+              "name": "unbind"
             },
             {
               "kind": "method",
-              "name": "recaptureFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "restoreScroll",
-              "privacy": "private"
+              "name": "bind",
+              "parameters": [
+                {
+                  "name": "shortcuts",
+                  "type": {
+                    "text": "KeyBindingMap"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -13294,22 +13326,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FocusTrapController",
+          "name": "ShortcutController",
           "declaration": {
-            "name": "FocusTrapController",
-            "module": "src/common/controllers/FocusTrapController.ts"
+            "name": "ShortcutController",
+            "module": "src/common/controllers/ShortcutController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ShortcutMap",
+          "declaration": {
+            "name": "KeyBindingMap",
+            "module": "src/common/controllers/ShortcutController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/FormDataController.ts",
+      "path": "src/common/controllers/SlotController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FormDataController",
+          "name": "SlotController",
           "members": [
             {
               "kind": "field",
@@ -13326,8 +13366,33 @@
             },
             {
               "kind": "field",
-              "name": "handleFormData",
+              "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"
+                  }
+                }
+              ]
             }
           ]
         }
@@ -13335,54 +13400,109 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormDataController",
+          "name": "SlotController",
           "declaration": {
-            "name": "FormDataController",
-            "module": "src/common/controllers/FormDataController.ts"
+            "name": "SlotController",
+            "module": "src/common/controllers/SlotController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightDismissController.ts",
+      "path": "src/common/controllers/SwipeController.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LightDismissController",
+          "name": "SwipeController",
           "members": [
             {
               "kind": "field",
-              "name": "shortcut",
+              "name": "events",
               "type": {
-                "text": "ShortcutController"
+                "text": "EventController"
               },
               "privacy": "private",
-              "default": "new ShortcutController(host, { Escape: this.handleEsc })"
+              "default": "new EventController(host)"
             },
             {
               "kind": "field",
-              "name": "events",
+              "name": "hadFirstUpdate",
               "type": {
-                "text": "EventController"
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "new EventController(host)"
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "initialTouchX",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "initialTouchY",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "SetRequired<SwipeControllerOptions, \"target\">"
+              },
+              "privacy": "private",
+              "default": "{\n      target: () => host,\n      ...options,\n    }"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostUpdated"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected"
             },
             {
               "kind": "field",
-              "name": "handleEsc",
+              "name": "handleTouchStart",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "handleClickOut",
-              "privacy": "private"
+              "kind": "field",
+              "name": "handleTouchEnd",
+              "privacy": "private"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isHorizontalSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "isDownwardsSwipe",
+          "parameters": [
+            {
+              "name": "{ distX, distY }",
+              "type": {
+                "text": "SwipeDetails"
+              }
             }
           ]
         }
@@ -13390,38 +13510,50 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDismissController",
+          "name": "SwipeController",
           "declaration": {
-            "name": "LightDismissController",
-            "module": "src/common/controllers/LightDismissController.ts"
+            "name": "SwipeController",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isHorizontalSwipe",
+          "declaration": {
+            "name": "isHorizontalSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDownwardsSwipe",
+          "declaration": {
+            "name": "isDownwardsSwipe",
+            "module": "src/common/controllers/SwipeController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightDomController.ts",
+      "path": "src/common/decorators/observe.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "LightDomController",
-          "members": [
+          "kind": "function",
+          "name": "observe",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "container",
+              "name": "propertyName",
               "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
+                "text": "string"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "lifecycle",
+              "default": "\"update\"",
+              "type": {
+                "text": "ObserveLifecycle"
+              }
             }
           ]
         }
@@ -13429,225 +13561,221 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LightDomController",
+          "name": "observe",
           "declaration": {
-            "name": "LightDomController",
-            "module": "src/common/controllers/LightDomController.ts"
+            "name": "observe",
+            "module": "src/common/decorators/observe.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/LightSlotController.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Handles cases where a component needs to render to light DOM,\nand potentially sync component properties to user-supplied content.",
-          "name": "LightSlotController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "renderHook",
-              "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
-            },
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "value",
               "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": "any"
               }
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
+            }
+          ],
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "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": "unknown"
               }
             },
             {
-              "kind": "method",
-              "name": "syncLightDom",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "events",
+              "name": "trueCase",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "hasContent",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "condition",
+              "type": {
+                "text": "true"
               }
             },
             {
-              "kind": "field",
-              "name": "isEmpty",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "condition",
+              "type": {
+                "text": "false"
               }
             },
             {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "SlotController",
-                "module": "src/common/controllers/SlotController.ts"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
               }
             }
           ],
-          "superclass": {
-            "name": "SlotController",
-            "module": "/src/common/controllers/SlotController.js"
-          },
-          "status": null,
-          "category": null,
-          "displayName": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LightSlotController",
-          "declaration": {
-            "name": "LightSlotController",
-            "module": "src/common/controllers/LightSlotController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/MediaQueryController.ts",
-      "declarations": [
+          "description": "condition is false, to will always return nothing"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "MediaQueryController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "mq",
+              "name": "condition",
               "type": {
-                "text": "MediaQueryList"
-              },
-              "privacy": "private"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "matches"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleChange"
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MediaQueryController",
-          "declaration": {
-            "name": "MediaQueryController",
-            "module": "src/common/controllers/MediaQueryController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/PortalController.ts",
-      "declarations": [
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "PortalController",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "renderHook",
+              "name": "condition",
               "type": {
-                "text": "Comment"
-              },
-              "privacy": "private"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "lightDom",
+              "name": "trueCase",
               "type": {
-                "text": "LightDomController"
-              },
-              "privacy": "private",
-              "default": "new LightDomController(host, {\n      render: () => this.options.render.call(host),\n      container: options.outlet,\n      renderOptions: {\n        renderBefore: this.renderHook,\n        host,\n      },\n    })"
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostConnected"
+              "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": "hostUpdated"
+              "name": "trueCase",
+              "default": "condition",
+              "type": {
+                "text": "any"
+              }
             },
             {
-              "kind": "method",
-              "name": "hostDisconnected"
+              "name": "falseCase",
+              "default": "nothing",
+              "type": {
+                "text": "any"
+              }
             }
           ]
         }
@@ -13655,329 +13783,222 @@
       "exports": [
         {
           "kind": "js",
-          "name": "PortalController",
+          "name": "cond",
           "declaration": {
-            "name": "PortalController",
-            "module": "src/common/controllers/PortalController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/ScrollbarController.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "ScrollbarController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "resets",
-              "privacy": "private",
-              "default": "new Set<() => void>()"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "width"
-            },
-            {
-              "kind": "method",
-              "name": "hide"
-            },
-            {
-              "kind": "method",
-              "name": "restore"
-            },
-            {
-              "kind": "method",
-              "name": "setStyle",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "property",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "ScrollbarController",
+          "name": "cond",
           "declaration": {
-            "name": "ScrollbarController",
-            "module": "src/common/controllers/ScrollbarController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/ShortcutController.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "ShortcutController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "unregister",
-              "type": {
-                "text": "ReturnType<typeof tinykeys> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "method",
-              "name": "unbind"
-            },
-            {
-              "kind": "method",
-              "name": "bind",
-              "parameters": [
-                {
-                  "name": "shortcuts",
-                  "type": {
-                    "text": "KeyBindingMap"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "ShortcutController",
+          "name": "cond",
           "declaration": {
-            "name": "ShortcutController",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ShortcutMap",
+          "name": "cond",
           "declaration": {
-            "name": "KeyBindingMap",
-            "module": "src/common/controllers/ShortcutController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/controllers/SlotController.ts",
-      "declarations": [
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "SlotController",
-          "members": [
-            {
-              "kind": "field",
-              "name": "events",
-              "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected"
-            },
-            {
-              "kind": "field",
-              "name": "hasContent"
-            },
-            {
-              "kind": "field",
-              "name": "isEmpty"
-            },
-            {
-              "kind": "field",
-              "name": "content"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "_e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "SlotController",
+          "name": "cond",
           "declaration": {
-            "name": "SlotController",
-            "module": "src/common/controllers/SlotController.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/controllers/SwipeController.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "SwipeController",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "events",
+              "name": "condition",
               "type": {
-                "text": "EventController"
-              },
-              "privacy": "private",
-              "default": "new EventController(host)"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "hadFirstUpdate",
+              "name": "inner",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "initialTouchX",
+              "name": "wrapper",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
-            },
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "initialTouchY",
+              "name": "condition",
               "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0"
+                "text": "true"
+              }
             },
             {
-              "kind": "field",
-              "name": "options",
+              "name": "inner",
               "type": {
-                "text": "SetRequired<SwipeControllerOptions, \"target\">"
-              },
-              "privacy": "private",
-              "default": "{\n      target: () => host,\n      ...options,\n    }"
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated"
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected"
-            },
-            {
-              "kind": "field",
-              "name": "handleTouchStart",
-              "privacy": "private"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleTouchEnd",
-              "privacy": "private"
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
             }
           ]
         },
         {
           "kind": "function",
-          "name": "isHorizontalSwipe",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "condition",
               "type": {
-                "text": "SwipeDetails"
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
               }
             }
           ]
         },
         {
           "kind": "function",
-          "name": "isDownwardsSwipe",
+          "name": "wrapIf",
           "parameters": [
             {
-              "name": "{ distX, distY }",
+              "name": "condition",
               "type": {
-                "text": "SwipeDetails"
+                "text": "any"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
               }
             }
-          ]
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SwipeController",
+          "name": "wrapIf",
           "declaration": {
-            "name": "SwipeController",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isHorizontalSwipe",
+          "name": "wrapIf",
           "declaration": {
-            "name": "isHorizontalSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "isDownwardsSwipe",
+          "name": "wrapIf",
           "declaration": {
-            "name": "isDownwardsSwipe",
-            "module": "src/common/controllers/SwipeController.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]