@nordhealth/components 4.12.8 → 4.13.0

package/custom-elements.json

@@ -2280,6 +2280,17 @@
               "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
+            },
+            {
+              "kind": "field",
+              "name": "footerDivider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, adds a divider border above the footer slot.",
+              "attribute": "footer-divider",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -2291,6 +2302,15 @@
               "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"
+            },
+            {
+              "name": "footer-divider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, adds a divider border above the footer slot.",
+              "fieldName": "footerDivider"
             }
           ],
           "superclass": {
@@ -7923,6 +7943,17 @@
               "attribute": "disallow-pattern",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "inputmode",
+              "type": {
+                "text": "InputMode | undefined"
+              },
+              "default": "undefined",
+              "description": "The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\nValid values: none, text, decimal, numeric, tel, search, email, url\nWhen not explicitly set, defaults based on input type:\n- type=\"number\" → inputmode=\"numeric\"\n- type=\"email\" → inputmode=\"email\"\n- type=\"tel\" → inputmode=\"tel\"\n- type=\"url\" → inputmode=\"url\"\n- type=\"search\" → inputmode=\"search\"\nCan be explicitly overridden for any type.",
+              "attribute": "inputmode",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleKeydown",
@@ -8604,6 +8635,15 @@
               "description": "Optionally disallow certain characters from being used inside the input, using a regex pattern.",
               "fieldName": "disallowPattern"
             },
+            {
+              "name": "inputmode",
+              "type": {
+                "text": "InputMode | undefined"
+              },
+              "default": "undefined",
+              "description": "The inputmode attribute provides a hint to the browser about what type of keyboard to open on mobile devices.\nValid values: none, text, decimal, numeric, tel, search, email, url\nWhen not explicitly set, defaults based on input type:\n- type=\"number\" → inputmode=\"numeric\"\n- type=\"email\" → inputmode=\"email\"\n- type=\"tel\" → inputmode=\"tel\"\n- type=\"url\" → inputmode=\"url\"\n- type=\"search\" → inputmode=\"search\"\nCan be explicitly overridden for any type.",
+              "fieldName": "inputmode"
+            },
             {
               "name": "size",
               "type": {
@@ -8819,7 +8859,7 @@
           "localization": [],
           "status": "ready",
           "category": "form",
-          "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 a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n---\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n---\n\n## Input masking\n\nWe recommend using [Maskito](https://maskito.dev/) for creating an [input mask](/components/input/?example=input+mask) which ensures that users type values according to a predefined format.\n",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input 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\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n\n---\n\n## Icon usage in input\n\nEach [input size](/components/input/?example=size) has a recommended icon size. The medium input uses the `s` icon size, the small input uses the `xs` icon size, and the large input uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n---\n\n## Input mode\n\nThe `inputmode` attribute provides a hint to the browser about what type of keyboard to show on mobile devices. This is particularly useful for optimizing the mobile experience by opening the appropriate keyboard (numeric, email, URL, etc.) based on the expected input.\n\n- The `inputmode` attribute accepts the following values: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email`, and `url`.\n- The component automatically defaults `inputmode` based on the input `type`:\n  - `type=\"number\"` → `inputmode=\"numeric\"`\n  - `type=\"email\"` → `inputmode=\"email\"`\n  - `type=\"tel\"` → `inputmode=\"tel\"`\n  - `type=\"url\"` → `inputmode=\"url\"`\n  - `type=\"search\"` → `inputmode=\"search\"`\n- You can override these defaults by explicitly setting a custom `inputmode` value, for example `inputmode=\"decimal\"` on a number type input, or `inputmode=\"numeric\"` on a text type input.\n\n---\n\n## Input masking\n\nWe recommend using [Maskito](https://maskito.dev/) for creating an [input mask](/components/input/?example=input+mask) which ensures that users type values according to a predefined format.\n",
           "examples": [],
           "dependencies": [
             "icon"
@@ -10846,6 +10886,15 @@
               "privacy": "private",
               "default": "new EventController(this)"
             },
+            {
+              "kind": "field",
+              "name": "footerObserver",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "allowItemsToRemainOpen",
@@ -10866,6 +10915,18 @@
               "attribute": "sticky-footer",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "observeFooter",
+              "privacy": "private",
+              "description": "Observe the footer slot element for visibility changes.\nWatches style and class attributes on the footer element itself, and\nchildList on the host to detect footer being added/removed (e.g. v-if)."
+            },
+            {
+              "kind": "field",
+              "name": "isFooterVisible",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "handleActivate",
@@ -15330,6 +15391,101 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/tab/Tab.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The interactive tab button for use within the tab group component.",
+          "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
+              "name": "--n-tab-color",
+              "default": "var(--n-color-text-weak)"
+            },
+            {
+              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
+              "name": "--n-tab-font-weight",
+              "default": "var(--n-font-weight)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tab button content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "privacy": "private",
+              "default": "new SlotController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleSelectionChange",
+              "privacy": "protected",
+              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tab item is selected",
+              "fieldName": "selected"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "navigation",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
+          "examples": [],
+          "dependencies": [],
+          "tagName": "nord-tab",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-tab",
+          "declaration": {
+            "name": "Tab",
+            "module": "src/tab/Tab.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/tab-group/TabGroup.ts",
@@ -15581,101 +15737,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/tab/Tab.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The interactive tab button for use within the tab group component.",
-          "name": "Tab",
-          "cssProperties": [
-            {
-              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
-              "name": "--n-tab-color",
-              "default": "var(--n-color-text-weak)"
-            },
-            {
-              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
-              "name": "--n-tab-font-weight",
-              "default": "var(--n-font-weight)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tab button content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "privacy": "private",
-              "default": "new SlotController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "attribute": "selected",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSelectionChange",
-              "privacy": "protected",
-              "description": "Apply accessible attributes and values to the tab button.\nObserve the selected property if it changes"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the tab item is selected",
-              "fieldName": "selected"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "navigation",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the tab component within the tab group component.\n- Use the `selected` option to signify if the tab is selected.\n- Use text, icons and other non-interactive content within the tab.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use tabs to navigate to other pages. Use navigation or links instead.\n- Don't use the tab component outside of the tab group component.\n- Don't add interactive elements, such as buttons and links, inside the tab component.\n\n</div>\n\n---\n\n## Content guidelines\n\nWhen writing tab 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 tab labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">The dashboard</div>\n\nAvoid ending tab labels in punctuation:\n\n<div class=\"n-usage n-usage-do\">Patients</div>\n<div class=\"n-usage n-usage-dont\">Patients.</div>\n\nUse as few words as possible to describe each tab label:\n\n<div class=\"n-usage n-usage-do\">Payments</div>\n<div class=\"n-usage n-usage-dont\">Payments in your clinic</div>\n\nAvoid all caps for tab labels:\n\n<div class=\"n-usage n-usage-do\">Dashboard</div>\n<div class=\"n-usage n-usage-dont\">DASHBOARD</div>\n\n---\n\n## Additional considerations\n\n- If the content contained within the tabs UI has significance or is important for the user to see, consider using a different form of presentation that doesn't obscure it.\n- If there is a particular section you wish to show out of order of the tabs UI itself consider using the `selected` option to select the tab but prevent the order of the tabs being affected.\n",
-          "examples": [],
-          "dependencies": [],
-          "tagName": "nord-tab",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-tab",
-          "declaration": {
-            "name": "Tab",
-            "module": "src/tab/Tab.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/tab-panel/TabPanel.ts",
@@ -20176,210 +20237,224 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/cond.ts",
+      "path": "src/common/mixins/AutocompleteMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof value | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "AutocompleteMixinInterface",
+          "members": [
             {
-              "name": "value",
+              "kind": "field",
+              "name": "autocomplete",
               "type": {
-                "text": "any"
+                "text": "AutocompleteAttribute"
               }
             }
-          ],
-          "description": "if value is truthy, return it, otherwise return nothing"
+          ]
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "AutocompleteMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "autocomplete",
               "type": {
-                "text": "unknown"
-              }
-            },
+                "text": "AutocompleteAttribute"
+              },
+              "default": "'off'",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "attribute": "autocomplete"
+            }
+          ],
+          "attributes": [
             {
-              "name": "trueCase",
+              "name": "autocomplete",
               "type": {
-                "text": "any"
-              }
+                "text": "AutocompleteAttribute"
+              },
+              "default": "'off'",
+              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
+              "fieldName": "autocomplete"
             }
           ],
-          "description": "if condition is truthy, return trueCase, otherwise return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
           "parameters": [
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
-            },
-            {
-              "name": "trueCase",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
-          ],
-          "description": "condition is true, so always return trueCase"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AutocompleteMixinInterface",
+          "declaration": {
+            "name": "AutocompleteMixinInterface",
+            "module": "src/common/mixins/AutocompleteMixin.ts"
+          }
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "AutocompleteMixin",
+          "declaration": {
+            "name": "AutocompleteMixin",
+            "module": "src/common/mixins/AutocompleteMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "DraftComponentMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "_warningLogged",
               "type": {
-                "text": "false"
-              }
-            },
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false"
+            }
+          ],
+          "parameters": [
             {
-              "name": "trueCase",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
-          ],
-          "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": "DraftComponentMixin",
+          "declaration": {
+            "name": "DraftComponentMixin",
+            "module": "src/common/mixins/DraftComponentMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FloatingComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FloatingMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "open",
               "type": {
-                "text": "unknown"
+                "text": "boolean"
               }
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "align",
               "type": {
-                "text": "any"
+                "text": "Alignment"
               }
             },
             {
-              "name": "falseCase",
+              "kind": "field",
+              "name": "position",
               "type": {
-                "text": "any"
+                "text": "LogicalSide | 'auto'"
               }
             }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+          ]
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "FloatingMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "open",
               "type": {
-                "text": "true"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "attribute": "open",
+              "reflects": true
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "align",
               "type": {
-                "text": "any"
-              }
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "attribute": "align",
+              "reflects": true
             },
             {
-              "name": "falseCase",
+              "kind": "field",
+              "name": "position",
               "type": {
-                "text": "any"
-              }
+                "text": "'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'"
+              },
+              "default": "'block-end'",
+              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
+              "attribute": "position",
+              "reflects": true
             }
           ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "parameters": [
+          "attributes": [
             {
-              "name": "condition",
+              "name": "open",
               "type": {
-                "text": "false"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the component is open or not.",
+              "fieldName": "open"
             },
             {
-              "name": "trueCase",
+              "name": "align",
               "type": {
-                "text": "any"
-              }
+                "text": "'start' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
+              "fieldName": "align"
             },
             {
-              "name": "falseCase",
+              "name": "position",
               "type": {
-                "text": "any"
-              }
+                "text": "'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'"
+              },
+              "default": "'block-end'",
+              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
+              "fieldName": "position"
             }
           ],
-          "description": "condition is false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
           "parameters": [
             {
-              "name": "condition",
+              "name": "superClass",
               "type": {
-                "text": "unknown"
-              }
-            },
-            {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "falseCase",
-              "default": "nothing",
-              "type": {
-                "text": "any"
+                "text": "T"
               }
             }
           ]
@@ -20388,490 +20463,287 @@
       "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",
+          "name": "FloatingMixinInterface",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FloatingMixinInterface",
+            "module": "src/common/mixins/FloatingComponentMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "cond",
+          "name": "FloatingMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FloatingMixin",
+            "module": "src/common/mixins/FloatingComponentMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/FocusableMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FocusableMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "focusableRef",
               "type": {
-                "text": "false"
-              }
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             }
           ]
         },
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected"
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the component."
             },
             {
-              "name": "wrapper",
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "T"
               }
             }
           ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FocusableMixinInterface",
+          "declaration": {
+            "name": "FocusableMixinInterface",
+            "module": "src/common/mixins/FocusableMixin.ts"
+          }
         },
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "js",
+          "name": "FocusableMixin",
+          "declaration": {
+            "name": "FocusableMixin",
+            "module": "src/common/mixins/FocusableMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/FormAssociatedMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "unknown"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "hideRequired",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "boolean"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "any"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
+                "text": "string | undefined"
               }
-            }
-          ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "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",
-          "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/AutocompleteMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "AutocompleteMixinInterface",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "error",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "string | undefined"
               }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "AutocompleteMixin",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutocompleteAttribute"
-              },
-              "default": "'off'",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "attribute": "autocomplete"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "autocomplete",
+              "name": "inputId",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "string"
               },
-              "default": "'off'",
-              "description": "Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.",
-              "fieldName": "autocomplete"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AutocompleteMixinInterface",
-          "declaration": {
-            "name": "AutocompleteMixinInterface",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "AutocompleteMixin",
-          "declaration": {
-            "name": "AutocompleteMixin",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "errorId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DraftComponentMixin",
-          "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FloatingComponentMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FloatingMixinInterface",
-          "members": [
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "open",
+              "name": "hintId",
               "type": {
-                "text": "boolean"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "labelSlot",
               "type": {
-                "text": "Alignment"
-              }
+                "text": "SlotController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "hintSlot",
               "type": {
-                "text": "LogicalSide | 'auto'"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FloatingMixin",
-          "members": [
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "open",
+              "name": "errorSlot",
               "type": {
-                "text": "boolean"
+                "text": "SlotController"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "attribute": "open",
-              "reflects": true
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "formData",
               "type": {
-                "text": "'start' | 'end'"
+                "text": "FormDataController"
               },
-              "default": "'start'",
-              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
-              "attribute": "align",
-              "reflects": true
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "formValue",
               "type": {
-                "text": "'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'"
+                "text": "string | undefined"
               },
-              "default": "'block-end'",
-              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
-              "attribute": "position",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "privacy": "protected",
+              "readonly": true
+            },
             {
-              "name": "open",
+              "kind": "field",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "fieldName": "open"
+              "privacy": "protected",
+              "readonly": true
             },
             {
-              "name": "align",
+              "kind": "field",
+              "name": "hasHint",
               "type": {
-                "text": "'start' | 'end'"
+                "text": "boolean"
               },
-              "default": "'start'",
-              "description": "Set the alignment in relation to the toggle (or anchor) depending on the position.\n`start` will align it to the left of the toggle (or anchor).\n`end` will align it to the right of the toggle (or anchor).\nSetting the `position` to `inline-start` or `inline-end` will switch\n`start` and `end` to the top and bottom respectively.",
-              "fieldName": "align"
-            },
-            {
-              "name": "position",
-              "type": {
-                "text": "'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'"
-              },
-              "default": "'block-end'",
-              "description": "Set the position in relation to the toggle (or anchor).\nOptions follow logical properties.\n`block-start` and `block-end` referring to top and bottom respectively,\n`inline-start` and `inline-end` referring to left and right respectively.\nYou can also set it to `auto` for automatic positioning depending on\nwhich side has the most space available.",
-              "fieldName": "position"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FloatingMixinInterface",
-          "declaration": {
-            "name": "FloatingMixinInterface",
-            "module": "src/common/mixins/FloatingComponentMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FloatingMixin",
-          "declaration": {
-            "name": "FloatingMixin",
-            "module": "src/common/mixins/FloatingComponentMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FocusableMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "type": {
-                "text": "Ref<HTMLElement>"
-              },
-              "privacy": "protected"
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "handleChange",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -20879,156 +20751,116 @@
               },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "blur",
+              "name": "handleInput",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "click",
+              "name": "renderLabel",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "TemplateResult"
                 }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
+              },
               "parameters": [
                 {
-                  "name": "options",
+                  "name": "additionalContent",
                   "optional": true,
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
+                    "text": "TemplateResult"
+                  }
                 }
-              ],
-              "description": "Programmatically move focus to the component."
+              ]
             },
             {
               "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component."
+              "name": "renderError",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component."
-            }
-          ],
-          "parameters": [
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
             {
-              "name": "superClass",
-              "type": {
-                "text": "T"
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "'true' | undefined"
+                }
               }
             }
           ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FocusableMixinInterface",
-          "declaration": {
-            "name": "FocusableMixinInterface",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
         },
         {
-          "kind": "js",
-          "name": "FocusableMixin",
-          "declaration": {
-            "name": "FocusableMixin",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FormAssociatedMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "FormAssociatedMixinInterface",
+          "name": "FormAssociatedMixin",
           "members": [
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideRequired",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, 'label')"
             },
             {
               "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, 'error')"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, 'hint')"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })"
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "formValue",
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -21036,7 +20868,8 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "'input'"
             },
             {
               "kind": "field",
@@ -21044,7 +20877,8 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "'error'"
             },
             {
               "kind": "field",
@@ -21052,261 +20886,54 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "'hint'"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "label",
               "type": {
-                "text": "SlotController"
+                "text": "string"
               },
-              "privacy": "protected"
+              "default": "''",
+              "description": "Label for the input.",
+              "attribute": "label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "hint",
               "type": {
-                "text": "SlotController"
+                "text": "string | undefined"
               },
-              "privacy": "protected"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "hideLabel",
               "type": {
-                "text": "SlotController"
+                "text": "boolean"
               },
-              "privacy": "protected"
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "placeholder",
               "type": {
-                "text": "FormDataController"
+                "text": "string | undefined"
               },
-              "privacy": "protected"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "formValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "additionalContent",
-                  "optional": true,
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "'true' | undefined"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FormAssociatedMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, 'label')"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, 'error')"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, 'hint')"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
-            },
-            {
-              "kind": "field",
-              "name": "formValue",
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "'input'"
-            },
-            {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "'error'"
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "'hint'"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Label for the input.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "error",
+              "name": "error",
               "type": {
                 "text": "string | undefined"
               },
@@ -22175,6 +21802,440 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/directives/cond.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof nothing"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, to will always return nothing"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof falseCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, so always return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "trueCase",
+              "default": "condition",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "falseCase",
+              "default": "nothing",
+              "type": {
+                "text": "any"
+              }
+            }
+          ]
+        }
+      ],
+      "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",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/directives/wrapIf.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "false"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
+              }
+            }
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        }
+      ],
+      "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",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        }
+      ]
     }
   ]
 }