@nordhealth/components 4.3.0 → 4.3.1

package/custom-elements.json

@@ -2166,129 +2166,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
-              "default": "var(--n-box-shadow-popout)"
-            },
-            {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
-            },
-            {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header-end\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "structure",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
-          "examples": [],
-          "dependencies": [],
-          "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"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -3027,6 +2904,129 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
+            },
+            {
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "structure",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n",
+          "examples": [],
+          "dependencies": [],
+          "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"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -11117,6 +11117,11 @@
               "name": "handleIdChange",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "initializeElements",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleOpenChange",
@@ -15428,7 +15433,7 @@
           "localization": [],
           "status": "ready",
           "category": "list",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\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 when you need to display tabular data in a view.\n- Use a `<table>` element directly within the component.\n- Use inside a [Card](/components/card/?example=with+table), and give the card a header.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use to display list data.\n- Don’t use to display basic key and value pairs, consider a [description list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) instead.\n- Don’t use tables for layout.\n- Don't use a primary button in every row of a table.\n\n</div>\n\n---\n\n## Content guidelines\n\nHeaders in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">User account</div>\n<div class=\"n-usage n-usage-dont\">User Account</div>\n\nInclude units of measurement symbols in the table header so they aren’t repeated throughout every single column:\n\n<div class=\"n-usage n-usage-do\">Temperature °C</div>\n<div class=\"n-usage n-usage-dont\">Temperature</div>\n\nAvoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Description</div>\n<div class=\"n-usage n-usage-dont\">A description</div>\n\nKeep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:\n\n<div class=\"n-usage n-usage-do\">30.00<br/>25.00</div>\n<div class=\"n-usage n-usage-dont\">30.000<br/>25.0</div>\n\n---\n\n## Additional considerations\n\n- Nord’s table component acts as a lightweight and un-opinionated _wrapper_ component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.\n- Despite the name the Nord table component does not supplement the HTML `<table>` element. Please ensure that a `<table>` element is a direct descendant of the table component.\n- It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that [HTML tables have a large feature set](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) which cannot be fully covered in this documentation.\n- When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML `<col>` and `<colgroup>` elements for applying them. Further information on the `<col>` and `<colgroup>` elements can be [found in the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col).\n\n---\n\n## Advanced use-cases\n\nThe table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.\n\nBroadly speaking, there are two categories of library for building advanced tables: _headless_ and _component-based_.\n\n### Which kind of table library should I use?\n\nEach approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.\n\n#### Component-based Table Libraries\n\nComponent-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.\n\n**Pros:**\n\n- Ship with ready-to-use markup/styles.\n- Little setup required.\n- Turn-key experience.\n\n**Cons:**\n\n- Less control over markup.\n- Custom styles are typically theme-based.\n- Larger bundle-sizes.\n\nIf you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.\n\n#### Headless Table Libraries\n\nHeadless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.\n\n**Pros:**\n\n- Full control over markup and styles.\n- Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).\n- Smaller bundle-sizes.\n\n**Cons:**\n\n- More setup and effort required.\n- No markup, styles or themes provided.\n\nIf you want a lighter-weight table or full control over the design, then you should consider using a headless table library.\n\n### Recommendation for headless libraries\n\nIn the headless category, we recommend [Tanstack Table](https://tanstack.com/table/). Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic `<table>` wrapped in a `<nord-table>`, and you will get all the necessary styles.\n\nWe have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the [React example](/components/table/?example=with+react+and+tanstack+table) and likewise the [Vue example](/components/table/?example=with+vue+and+tanstack+table).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / Tanstack table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / Tanstack table source\n  </nord-button>\n</nord-stack>\n\n### Recommendation for component-based libraries\n\nIn the component-based category, we recommend [AG Grid](https://www.ag-grid.com/), specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a `<table>` element, so it cannot be used with Nord's own table component.\n\nHowever it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as `@nordhealth/ag-theme-nord`. To use the theme, include the CSS in your project and add the class `ag-theme-nord` to the element wrapping AG Grid. You have to [configure legacy themes](https://www.ag-grid.com/javascript-data-grid/theming-migration/#continue-with-legacy-themes) if you are using v33 or higher.\n\nWe have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the [React example](/components/table/?example=with+react+and+ag+grid) and likewise the [Vue example](/components/table/?example=with+vue+and+ag+grid).\n\n<nord-stack direction=\"horizontal\" class=\"n-margin-bs-l n-margin-be-s\">\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    React / AG Grid table source\n  </nord-button>\n  <nord-button href=\"https://github.com/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid\" target=\"_blank\">\n    <nord-icon name=\"generic-github\" size=\"s\" slot=\"start\"></nord-icon>\n    Vue / AG Grid table source\n  </nord-button>\n</nord-stack>\n",
           "examples": [
             {
               "url": "https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview",
@@ -17142,250 +17147,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/toast/Toast.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",
-          "name": "Toast",
-          "slots": [
-            {
-              "description": "Default slot used for the toast text/message.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "timeoutId",
-              "type": {
-                "text": "ReturnType<typeof setTimeout> | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"danger\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the toast.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoDismiss",
-              "type": {
-                "text": "number"
-              },
-              "default": "10000",
-              "description": "Timeout in milliseconds before the toast is automatically dismissed.",
-              "attribute": "auto-dismiss",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "dismiss",
-              "description": "Programmatically dismiss the toast.\nThe returned promise resolves when toast's exit animation is complete.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleAutoDismissChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "notificationRef",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dismissed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "dismiss",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "inheritedFrom": {
-                "name": "NotificationMixin",
-                "module": "src/common/mixins/NotificationMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"default\" | \"danger\""
-              },
-              "default": "\"default\"",
-              "description": "The style variant of the toast.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "auto-dismiss",
-              "type": {
-                "text": "number"
-              },
-              "default": "10000",
-              "description": "Timeout in milliseconds before the toast is automatically dismissed.",
-              "fieldName": "autoDismiss"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "NotificationMixin",
-              "module": "/src/common/mixins/NotificationMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that confirm an action taken by a user.\n- Use for ephemeral status updates.\n- Use in combination with [Toast group](../toast-group/) so that toasts get styled and announced to screen readers correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use toasts for critical information that user needs to act on. Consider using a [Notification](/components/notification) instead.\n- Don’t rely on users seeing toasts. Toasts are transient and should not be used for critical messages.\n- Don’t place interactive content in toasts. Assistive technology like screen readers will not convey any semantics when announcing toast messages.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "tagName": "nord-toast",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Toast",
-            "module": "src/toast/Toast.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast",
-          "declaration": {
-            "name": "Toast",
-            "module": "src/toast/Toast.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/toast-group/ToastGroup.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
-          "name": "ToastGroup",
-          "slots": [
-            {
-              "description": "Default slot in which to place toasts.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "addToast",
-              "parameters": [
-                {
-                  "name": "text",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The text/message of the toast."
-                },
-                {
-                  "name": "options",
-                  "default": "{}",
-                  "type": {
-                    "text": "ToastOptions"
-                  },
-                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
-                }
-              ],
-              "description": "Convenience method for creating and adding a toast to the group.",
-              "return": {
-                "type": {
-                  "text": "Toast"
-                }
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
-              "name": "dismiss"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "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 in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
-          "examples": [],
-          "dependencies": [
-            "toast"
-          ],
-          "tagName": "nord-toast-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-toast-group",
-          "declaration": {
-            "name": "ToastGroup",
-            "module": "src/toast-group/ToastGroup.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/toggle/Toggle.ts",
+      "path": "src/toggle/Toggle.ts",
       "declarations": [
         {
           "kind": "class",
@@ -18109,23 +17871,266 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/tooltip/Tooltip.ts",
+      "path": "src/toast/Toast.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
-          "name": "Tooltip",
-          "cssProperties": [
+          "description": "Toasts are non-disruptive messages that appear in the interface\nto provide quick, at-a-glance feedback on the outcome of an action.",
+          "name": "Toast",
+          "slots": [
             {
-              "description": "Controls the maximum inline size, or width, of the tooltip.",
-              "name": "--n-tooltip-max-size",
-              "default": "50ch"
+              "description": "Default slot used for the toast text/message.",
+              "name": ""
             }
           ],
-          "slots": [
+          "members": [
             {
-              "description": "The tooltip content",
-              "name": ""
+              "kind": "field",
+              "name": "timeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"danger\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the toast.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoDismiss",
+              "type": {
+                "text": "number"
+              },
+              "default": "10000",
+              "description": "Timeout in milliseconds before the toast is automatically dismissed.",
+              "attribute": "auto-dismiss",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "dismiss",
+              "description": "Programmatically dismiss the toast.\nThe returned promise resolves when toast's exit animation is complete.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleAutoDismissChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "notificationRef",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dismissed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss",
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "inheritedFrom": {
+                "name": "NotificationMixin",
+                "module": "src/common/mixins/NotificationMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"default\" | \"danger\""
+              },
+              "default": "\"default\"",
+              "description": "The style variant of the toast.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "auto-dismiss",
+              "type": {
+                "text": "number"
+              },
+              "default": "10000",
+              "description": "Timeout in milliseconds before the toast is automatically dismissed.",
+              "fieldName": "autoDismiss"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NotificationMixin",
+              "module": "/src/common/mixins/NotificationMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use for short messages that confirm an action taken by a user.\n- Use for ephemeral status updates.\n- Use in combination with [Toast group](../toast-group/) so that toasts get styled and announced to screen readers correctly.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use toasts for critical information that user needs to act on. Consider using a [Notification](/components/notification) instead.\n- Don’t rely on users seeing toasts. Toasts are transient and should not be used for critical messages.\n- Don’t place interactive content in toasts. Assistive technology like screen readers will not convey any semantics when announcing toast messages.\n- Don’t use for error messages unless absolutely necessary. Try to favor a [Banner](/components/banner/) for error messaging instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "tagName": "nord-toast",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Toast",
+            "module": "src/toast/Toast.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast",
+          "declaration": {
+            "name": "Toast",
+            "module": "src/toast/Toast.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/toast-group/ToastGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.",
+          "name": "ToastGroup",
+          "slots": [
+            {
+              "description": "Default slot in which to place toasts.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "addToast",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text/message of the toast."
+                },
+                {
+                  "name": "options",
+                  "default": "{}",
+                  "type": {
+                    "text": "ToastOptions"
+                  },
+                  "description": "An optional object for configuring the toast's `variant` and `autoDismiss`."
+                }
+              ],
+              "description": "Convenience method for creating and adding a toast to the group.",
+              "return": {
+                "type": {
+                  "text": "Toast"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "NordEvent"
+              },
+              "description": "Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.",
+              "name": "dismiss"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "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 in combination with [Toast](/components/toast/) so that toasts get styled and announced to screen readers correctly.\n- Add as close to the bottom of the document as possible, ideally near the body closing tag, to maintain correct stacking order.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping anything other than toast components\n\n</div>\n\n---\n\n## Content guidelines\n\nToast content should be clear, accurate and understandable by the user:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Your message has been sent</div>\n\nWhen writing the toast content, use the {noun} + {verb} content formula:\n\n<div class=\"n-usage n-usage-do\">Patient created</div>\n<div class=\"n-usage n-usage-dont\">Your patient has been successfully updated</div>\n\nUse a maximum of 3 words when writing the toast content:\n\n<div class=\"n-usage n-usage-do\">Product updated</div>\n<div class=\"n-usage n-usage-dont\">Your product was updated just now</div>\n\nWhen writing the toast content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message Sent</div>\n\nAvoid unnecessary words and articles in the toast content, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Changes saved</div>\n<div class=\"n-usage n-usage-dont\">The changes were saved</div>\n\nNever end in punctuation:\n\n<div class=\"n-usage n-usage-do\">Message sent</div>\n<div class=\"n-usage n-usage-dont\">Message sent.</div>\n\n---\n\n## Additional considerations\n\n- Toasts are complicated from an accessibility perspective. Whilst they are a convenient UI pattern for messaging, they present difficulties for keyboard or screen reader users. Therefore careful consideration should be given as to whether a toast is the correct choice.\n- If the message cannot be conveyed in 3 words or less, consider re-wording. If the message cannot be shortened any further, consider choosing a different pattern than toast.\n",
+          "examples": [],
+          "dependencies": [
+            "toast"
+          ],
+          "tagName": "nord-toast-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-toast-group",
+          "declaration": {
+            "name": "ToastGroup",
+            "module": "src/toast-group/ToastGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tooltip/Tooltip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tooltips are floating containers for displaying additional information\nfor the currently focused element. A tooltip can be useful when you want\nto e.g. give a hint about an existing Command Menu shortcut.",
+          "name": "Tooltip",
+          "cssProperties": [
+            {
+              "description": "Controls the maximum inline size, or width, of the tooltip.",
+              "name": "--n-tooltip-max-size",
+              "default": "50ch"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tooltip content",
+              "name": ""
             },
             {
               "description": "Optional slot that holds shortcut keys to access the subject",
@@ -19771,210 +19776,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"
-              }
-            }
-          ],
-          "description": "condition is false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
+                "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": "condition",
-              "type": {
-                "text": "unknown"
-              }
-            },
-            {
-              "name": "trueCase",
-              "default": "condition",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "falseCase",
-              "default": "nothing",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
           ]
@@ -19983,716 +20002,268 @@
       "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": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "class",
+          "description": "",
+          "name": "FocusableMixinInterface",
+          "members": [
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "focusableRef",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
+              "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": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
-              "name": "condition",
-              "type": {
-                "text": "unknown"
-              }
+              "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",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
             },
             {
-              "name": "inner",
-              "type": {
-                "text": "() => TInner"
-              }
-            },
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
+            }
+          ],
+          "parameters": [
             {
-              "name": "wrapper",
+              "name": "superClass",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
+                "text": "T"
               }
             }
-          ],
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "FocusableMixinInterface",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "FocusableMixinInterface",
+            "module": "src/common/mixins/FocusableMixin.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": "FocusableMixin",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "FocusableMixin",
+            "module": "src/common/mixins/FocusableMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/AutocompleteMixin.ts",
+      "path": "src/common/mixins/FormAssociatedMixin.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "AutocompleteMixinInterface",
+          "name": "FormAssociatedMixinInterface",
           "members": [
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "label",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "string"
               }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "AutocompleteMixin",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "required",
               "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": [
+                "text": "boolean"
+              }
+            },
             {
-              "name": "autocomplete",
+              "kind": "field",
+              "name": "hideRequired",
               "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.",
-              "fieldName": "autocomplete"
-            }
-          ],
-          "parameters": [
+                "text": "boolean"
+              }
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "T"
+                "text": "string | undefined"
               }
-            }
-          ]
-        }
-      ],
-      "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": [
+            },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
+              }
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "T"
+                "text": "string | undefined"
               }
-            }
-          ]
-        }
-      ],
-      "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": [
+            },
             {
               "kind": "field",
-              "name": "open",
+              "name": "error",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "inputId",
               "type": {
-                "text": "Alignment"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "position",
+              "name": "errorId",
               "type": {
-                "text": "LogicalSide | \"auto\""
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FloatingMixin",
-          "members": [
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "open",
+              "name": "hintId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "attribute": "open",
-              "reflects": true
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "labelSlot",
               "type": {
-                "text": "\"start\" | \"end\""
+                "text": "SlotController"
               },
-              "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": "hintSlot",
               "type": {
-                "text": "\"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\""
+                "text": "SlotController"
               },
-              "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"
+            },
             {
-              "name": "open",
+              "kind": "field",
+              "name": "errorSlot",
               "type": {
-                "text": "boolean"
+                "text": "SlotController"
               },
-              "default": "false",
-              "description": "Controls whether the component is open or not.",
-              "fieldName": "open"
+              "privacy": "protected"
             },
             {
-              "name": "align",
+              "kind": "field",
+              "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.",
-              "fieldName": "align"
+              "privacy": "protected"
             },
             {
-              "name": "position",
+              "kind": "field",
+              "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.",
-              "fieldName": "position"
-            }
-          ],
-          "parameters": [
+              "privacy": "protected",
+              "readonly": true
+            },
             {
-              "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"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
-            },
-            {
-              "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."
-            },
-            {
-              "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": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "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",
-          "description": "",
-          "name": "FormAssociatedMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideRequired",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "errorId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "type": {
-                "text": "FormDataController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "formValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "hasError",
+              "kind": "field",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
@@ -21770,6 +21341,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"
+          }
+        }
+      ]
     }
   ]
 }