@nordhealth/components 1.14.3 → 2.0.2

package/custom-elements.json

@@ -377,6 +377,13 @@
           "kind": "class",
           "description": "Avatar is used for showing a thumbnail representation of a user or entity.\nDefault avatar illustration is displayed when no src is specified.",
           "name": "Avatar",
+          "cssProperties": [
+            {
+              "description": "Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).",
+              "name": "--n-avatar-size",
+              "default": "var(--n-size-icon-l)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -511,6 +518,33 @@
           "kind": "class",
           "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
           "name": "Button",
+          "cssProperties": [
+            {
+              "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-button-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-button-gap",
+              "default": "var(--n-space-s)"
+            },
+            {
+              "description": "Controls the overlayed gradient background on the button.",
+              "name": "--n-button-gradient",
+              "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))"
+            },
+            {
+              "description": "Controls the border color of the button, using [color tokens](/tokens/#color).",
+              "name": "--n-button-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls the text alignment for the text in the button.",
+              "name": "--n-button-text-align",
+              "default": "center"
+            }
+          ],
           "slots": [
             {
               "description": "The button content",
@@ -983,6 +1017,18 @@
           "kind": "class",
           "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
           "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
           "slots": [
             {
               "description": "default slot",
@@ -1046,81 +1092,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/Badge.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
-          "name": "Badge",
-          "slots": [
-            {
-              "description": "The badge content.",
-              "name": ""
-            }
-          ],
-          "members": [
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
-              },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "attribute": "type",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-calendar-border-radius",
+              "default": "var(--n-border-radius)"
+            },
             {
-              "name": "type",
-              "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
-              },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "fieldName": "type"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-calendar-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
-          "displayName": null,
-          "tagName": "nord-badge",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-badge",
-          "declaration": {
-            "name": "Badge",
-            "module": "src/badge/Badge.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
           "members": [
             {
               "kind": "field",
@@ -1634,70 +1623,57 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/badge/Badge.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.",
+          "name": "Badge",
           "slots": [
             {
-              "description": "The card content.",
+              "description": "The badge 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\")"
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
+              },
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "progress",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
               },
-              "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
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "attribute": "progress"
             }
           ],
           "attributes": [
             {
-              "name": "padding",
+              "name": "type",
               "type": {
-                "text": "\"m\" | \"l\" | \"none\""
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | \"neutral\" | \"progress\" | undefined"
               },
-              "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"
+              "default": "\"neutral\"",
+              "description": "The type of badge.\nDetermines the background color of the badge.",
+              "fieldName": "type"
+            },
+            {
+              "name": "progress",
+              "type": {
+                "text": "\"cancelled\" | \"complete\" | \"incomplete\" | \"partially-complete\" | undefined"
+              },
+              "description": "The progress of the badge. Displays a progress\nindicator next to the label.",
+              "fieldName": "progress"
             }
           ],
           "superclass": {
@@ -1705,9 +1681,9 @@
             "package": "lit"
           },
           "status": "ready",
-          "category": "structure",
+          "category": "text",
           "displayName": null,
-          "tagName": "nord-card",
+          "tagName": "nord-badge",
           "customElement": true
         }
       ],
@@ -1716,20 +1692,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-badge",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Badge",
+            "module": "src/badge/Badge.ts"
           }
         }
       ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral`   | The default style variant.                                                                                                              |\n| `info`      | Used to convey general information that isn’t critical.                                                                                 |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n| `progress`  | Used to convey something that’s in progress.                                                                                            |\n"
     },
     {
       "kind": "javascript-module",
@@ -2338,110 +2314,248 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/command-menu/CommandMenu.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
-          "name": "CommandMenu",
-          "slots": [
-            {
-              "description": "Used to replace the default footer contents.",
-              "name": "footer"
-            }
-          ],
-          "members": [
+          "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": [
             {
-              "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-card-border-radius",
+              "default": "var(--n-border-radius)"
             },
             {
-              "kind": "field",
-              "name": "listRef",
-              "privacy": "private"
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-card-box-shadow",
+              "default": "var(--n-box-shadow-popout)"
             },
             {
-              "kind": "field",
-              "name": "previousFocus",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-command-menu\">(this)"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "dismissController",
-              "privacy": "private",
-              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "keyboardController",
-              "privacy": "private",
-              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show or hide the command menu.",
-              "attribute": "open"
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Type a command or search...\"",
-              "description": "Hint text to display in the Command Menu search field.",
-              "attribute": "placeholder"
-            },
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "commands",
-              "type": {
-                "text": "Array<ICommandMenuAction>"
-              },
-              "default": "[]",
-              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
             },
             {
               "kind": "field",
-              "name": "parent",
-              "type": {
-                "text": "ICommandMenuAction[\"parent\"]"
-              },
-              "privacy": "private"
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header-end\")"
             },
             {
               "kind": "field",
-              "name": "search",
-              "type": {
-                "text": "string"
-              },
+              "name": "footerSlot",
               "privacy": "private",
-              "default": "\"\""
+              "default": "new SlotController(this, \"footer\")"
             },
             {
               "kind": "field",
-              "name": "bump",
+              "name": "padding",
               "type": {
-                "text": "boolean"
+                "text": "\"m\" | \"l\" | \"none\""
               },
-              "privacy": "private",
-              "default": "true"
-            },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "displayName": null,
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/command-menu/CommandMenu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Command Menu allows users to navigate and use an app without\ntouching the mouse and helps them transform into “power users”\nwho can harness more advanced features far faster.",
+          "name": "CommandMenu",
+          "cssProperties": [
+            {
+              "description": "Controls the max inline size, or width, of the command menu.",
+              "name": "--n-command-menu-inline-size",
+              "default": "640px"
+            },
+            {
+              "description": "Controls the max block size, or height, of the command menu.",
+              "name": "--n-command-menu-block-size",
+              "default": "290px"
+            },
+            {
+              "description": "Controls the command menu offset from the block start, or top, of the screen.",
+              "name": "--n-command-menu-block-start",
+              "default": "16%"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Used to replace the default footer contents.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "listRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previousFocus",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-command-menu\">(this)"
+            },
+            {
+              "kind": "field",
+              "name": "dismissController",
+              "privacy": "private",
+              "default": "new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: () => this.close(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "keyboardController",
+              "privacy": "private",
+              "default": "new KeyboardController(this, {\n    trigger: () => this.select(),\n    goBack: () => this.goBack(),\n    end: () => this.end(),\n    start: () => this.start(),\n    next: () => this.next(),\n    previous: () => this.previous(),\n    toggleOpen: () => this.toggleOpen(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show or hide the command menu.",
+              "attribute": "open"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Type a command or search...\"",
+              "description": "Hint text to display in the Command Menu search field.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "commands",
+              "type": {
+                "text": "Array<ICommandMenuAction>"
+              },
+              "default": "[]",
+              "description": "Array of commands to be included in the menu.\nPlease see “Commands data” section for more documentation."
+            },
+            {
+              "kind": "field",
+              "name": "parent",
+              "type": {
+                "text": "ICommandMenuAction[\"parent\"]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "search",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "bump",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
             {
               "kind": "field",
               "name": "selectedIndex",
@@ -5100,6 +5214,18 @@
           "kind": "class",
           "description": "Divider components are used to separate and distinguish sections of\ncontent or groups of menu items. Visually, they look like\nhorizontal or vertical lines.",
           "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "Controls the color of the divider, using our [color tokens](/tokens/#color).",
+              "name": "--n-divider-color",
+              "default": "var(--n-color-border)"
+            },
+            {
+              "description": "Controls the size, or thickness, of the divider.",
+              "name": "--n-divider-size",
+              "default": "1px"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -5168,6 +5294,13 @@
           "kind": "class",
           "description": "Dropdown menu displays a list of actions or selectable options for\na user. Dropdown uses popout component internally to create\nthe overlay functionality.",
           "name": "Dropdown",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.",
+              "name": "--n-dropdown-size",
+              "default": "250px"
+            }
+          ],
           "slots": [
             {
               "description": "The dropdown content.",
@@ -6008,6 +6141,33 @@
           "kind": "class",
           "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
           "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the input.",
+              "name": "--n-input-inline-size",
+              "default": "240px"
+            },
+            {
+              "description": "Controls the background of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-background",
+              "default": "var(--n-color-active)"
+            },
+            {
+              "description": "Controls the text color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-color",
+              "default": "var(--n-color-text)"
+            },
+            {
+              "description": "Controls the border color of the input, using our [color tokens](/tokens/#color).",
+              "name": "--n-input-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-input-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
           "slots": [
             {
               "description": "Use when a label requires more than plain text.",
@@ -6705,6 +6865,13 @@
           "kind": "class",
           "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configuration: two-column.",
           "name": "Layout",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-layout-padding",
+              "default": "var(--n-space-l)"
+            }
+          ],
           "slots": [
             {
               "description": "The default main section content.",
@@ -7295,6 +7462,23 @@
           "kind": "class",
           "description": "Modal component is used to display content that temporarily blocks interactions\nwith the main view of an application. Modal should be used sparingly and\nonly when necessary.",
           "name": "Modal",
+          "cssProperties": [
+            {
+              "description": "Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-inline",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-modal-padding-block",
+              "default": "var(--n-space-m)"
+            },
+            {
+              "description": "Controls the width of the modal.",
+              "name": "--n-modal-max-inline-size",
+              "default": "620px"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot",
@@ -8223,6 +8407,23 @@
           "kind": "class",
           "description": "Progress Bar is used to visually represent the completion\nof a task or process. It shows how much of the task has\nbeen completed and how much is still left.",
           "name": "ProgressBar",
+          "cssProperties": [
+            {
+              "description": "Controls the thickness of the progress bar, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-progress-size",
+              "default": "var(--n-space-s)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-progress-border-radius",
+              "default": "var(--n-border-radius-s)"
+            },
+            {
+              "description": "Controls the color of the progress bar, using [color tokens](/tokens/#color).",
+              "name": "--n-progress-color",
+              "default": "var(--n-color-accent)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -9841,6 +10042,23 @@
           "kind": "class",
           "description": "Skeletons are used to provide a low fidelity representation of content\nbefore it appears in a view. This improves the perceived loading time\nfor our users.",
           "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-skeleton-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the main color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-color",
+              "default": "var(--n-color-border)"
+            },
+            {
+              "description": "Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).",
+              "name": "--n-skeleton-sheen-color",
+              "default": "var(--n-color-border-strong)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -9851,20 +10069,6 @@
               "default": "\"none\"",
               "description": "Determines which animation effect the skeleton will use.",
               "attribute": "effect"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
             }
           ],
           "attributes": [
@@ -9878,17 +10082,11 @@
               "fieldName": "effect"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "feedback",
           "displayName": null,
           "tagName": "nord-skeleton",
@@ -10022,6 +10220,13 @@
           "kind": "class",
           "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
           "name": "Stack",
+          "cssProperties": [
+            {
+              "description": "Controls the spacing between items, using our [spacing tokens](/tokens/#space).",
+              "name": "--n-stack-gap",
+              "default": "var(--n-space-m)"
+            }
+          ],
           "slots": [
             {
               "description": "The stack content.",
@@ -10191,6 +10396,18 @@
           "kind": "class",
           "description": "The interactive tab button for use within the tab group component.",
           "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Controls the text color of the tab, using our [color tokens](/tokens/#color).",
+              "name": "--n-tab-color",
+              "default": "var(--n-color-text-weak)"
+            },
+            {
+              "description": "Controls the font weight of the tab, using our [font tokens](/tokens/#font).",
+              "name": "--n-tab-font-weight",
+              "default": "var(--n-font-weight)"
+            }
+          ],
           "slots": [
             {
               "description": "The tab button content.",
@@ -10272,6 +10489,13 @@
           "kind": "class",
           "description": "Tab Group allows multiple panels to be contained within a single window,\nusing tabs as a navigational element.",
           "name": "TabGroup",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).",
+              "name": "--n-tab-group-padding",
+              "default": "0"
+            }
+          ],
           "slots": [
             {
               "description": "The element which contains the content to be revealed.",
@@ -10552,6 +10776,18 @@
           "kind": "class",
           "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
           "name": "Table",
+          "cssProperties": [
+            {
+              "description": "Controls the padding around the table cells.",
+              "name": "--n-table-td-padding",
+              "default": "calc(var(--n-space-m) * 0.95)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-table-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot which holds the HTML `<table>` element.",
@@ -10673,6 +10909,38 @@
           "kind": "class",
           "description": "Textarea is a component that allows user to write text over\nmultiple rows. Used when the expected user input is long.\nFor shorter input, use the Input component.",
           "name": "Textarea",
+          "cssProperties": [
+            {
+              "description": "Controls the inline size, or width, of the textarea.",
+              "name": "--n-textarea-inline-size",
+              "default": "240px"
+            },
+            {
+              "description": "Controls the block size, or height, or the textarea.",
+              "name": "--n-textarea-block-size",
+              "default": "76px"
+            },
+            {
+              "description": "Controls the background of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-background",
+              "default": "var(--n-color-active)"
+            },
+            {
+              "description": "Controls the text color of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-color",
+              "default": "var(--n-color-text)"
+            },
+            {
+              "description": "Controls the border color of the textarea, using our [color tokens](/tokens/#color).",
+              "name": "--n-textarea-border-color",
+              "default": "var(--n-color-border-strong)"
+            },
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-textarea-border-radius",
+              "default": "var(--n-border-radius-s)"
+            }
+          ],
           "slots": [
             {
               "description": "Use when a label requires more than plain text.",
@@ -11411,23 +11679,9 @@
               "kind": "method",
               "name": "handleAutoDismissChange",
               "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "events": [
+            }
+          ],
+          "events": [
             {
               "name": "dismiss",
               "type": {
@@ -11456,17 +11710,11 @@
               "fieldName": "autoDismiss"
             }
           ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "feedback",
           "displayName": null,
           "tagName": "nord-toast",
@@ -11534,33 +11782,13 @@
                   "text": ""
                 }
               }
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "draft",
+          "status": "new",
           "category": "feedback",
           "displayName": null,
           "tagName": "nord-toast-group",
@@ -13569,210 +13797,215 @@
     },
     {
       "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/FocusableMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FocusableMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "focusableRef",
               "type": {
-                "text": "unknown"
-              }
+                "text": "Ref<HTMLElement>"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+          ]
         },
         {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
-            },
+          "kind": "mixin",
+          "description": "",
+          "name": "FocusableMixin",
+          "members": [
             {
-              "name": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "field",
+              "name": "focusableRef",
+              "privacy": "protected"
             },
             {
-              "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"
-              }
+              "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": "trueCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
             },
             {
-              "name": "falseCase",
-              "type": {
-                "text": "any"
-              }
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
             }
           ],
-          "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",
+              "name": "superClass",
               "type": {
-                "text": "any"
+                "text": "T"
               }
             }
           ]
@@ -13781,361 +14014,164 @@
       "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": "FocusableMixinInterface",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FocusableMixinInterface",
+            "module": "src/common/mixins/FocusableMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "cond",
+          "name": "FocusableMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FocusableMixin",
+            "module": "src/common/mixins/FocusableMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/FormAssociatedMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FormAssociatedMixinInterface",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "false"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "true"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "string | undefined"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "error",
               "type": {
-                "text": "unknown"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "expand",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+                "text": "string"
+              },
+              "privacy": "protected"
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "errorId",
               "type": {
-                "text": "any"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string"
+              },
+              "privacy": "protected"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "labelSlot",
               "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"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/AutocompleteMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "AutocompleteMixinInterface",
-          "members": [
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "hintSlot",
               "type": {
-                "text": "AutocompleteAttribute"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "AutocompleteMixin",
-          "members": [
+                "text": "SlotController"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "errorSlot",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "SlotController"
               },
-              "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": [
+              "privacy": "protected"
+            },
             {
-              "name": "autocomplete",
+              "kind": "field",
+              "name": "formData",
               "type": {
-                "text": "AutocompleteAttribute"
+                "text": "FormDataController"
               },
-              "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": [
+              "privacy": "protected"
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "formValue",
               "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AutocompleteMixinInterface",
-          "declaration": {
-            "name": "AutocompleteMixinInterface",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "AutocompleteMixin",
-          "declaration": {
-            "name": "AutocompleteMixin",
-            "module": "src/common/mixins/AutocompleteMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "_warningLogged",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DraftComponentMixin",
-          "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FocusableMixinInterface",
-          "members": [
+              "privacy": "protected"
+            },
             {
               "kind": "field",
-              "name": "focusableRef",
+              "name": "hasHint",
               "type": {
-                "text": "Ref<HTMLElement>"
+                "text": "boolean"
               },
               "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "handleChange",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -14143,29 +14179,68 @@
               },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "e",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "blur",
+              "name": "handleInput",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "click",
+              "name": "renderError",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "\"true\" | undefined"
                 }
               }
             }
@@ -14174,125 +14249,36 @@
         {
           "kind": "mixin",
           "description": "",
-          "name": "FocusableMixin",
+          "name": "FormAssociatedMixin",
           "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": "hint",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")"
             },
             {
               "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "string | undefined"
-              }
+              "name": "formData",
+              "privacy": "protected",
+              "default": "new FormDataController(this, { value: () => this.formValue })"
             },
             {
               "kind": "field",
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              }
+              "name": "formValue",
+              "privacy": "protected"
             },
             {
               "kind": "field",
@@ -14300,7 +14286,8 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "\"input\""
             },
             {
               "kind": "field",
@@ -14308,7 +14295,8 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "\"error\""
             },
             {
               "kind": "field",
@@ -14316,73 +14304,70 @@
               "type": {
                 "text": "string"
               },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+              "privacy": "protected",
+              "default": "\"hint\""
             },
             {
               "kind": "field",
-              "name": "hintSlot",
+              "name": "label",
               "type": {
-                "text": "SlotController"
+                "text": "string"
               },
-              "privacy": "protected"
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "errorSlot",
+              "name": "hint",
               "type": {
-                "text": "SlotController"
+                "text": "string | undefined"
               },
-              "privacy": "protected"
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint"
             },
             {
               "kind": "field",
-              "name": "formData",
+              "name": "hideLabel",
               "type": {
-                "text": "FormDataController"
+                "text": "boolean"
               },
-              "privacy": "protected"
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label"
             },
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "privacy": "protected"
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "hasError",
+              "name": "error",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "protected"
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error"
             },
             {
               "kind": "field",
-              "name": "hasHint",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected"
+              "default": "false",
+              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
+              "attribute": "required"
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "handleInput",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
                   "name": "e",
@@ -14394,13 +14379,8 @@
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleChange",
               "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
                   "name": "e",
@@ -14413,287 +14393,238 @@
             {
               "kind": "method",
               "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "getInvalid",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "\"true\" | undefined"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "FormAssociatedMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")"
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
+              "name": "hasHint",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "formValue",
+              "name": "hasError",
               "privacy": "protected"
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "inputId",
+              "name": "input",
               "type": {
-                "text": "string"
+                "text": "NordEvent"
               },
-              "privacy": "protected",
-              "default": "\"input\""
+              "description": "Fired as the user types into the input."
             },
             {
-              "kind": "field",
-              "name": "errorId",
+              "name": "change",
               "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\""
-            },
-            {
-              "kind": "field",
-              "name": "hintId",
-              "type": {
-                "text": "string"
+                "text": "NordEvent"
               },
-              "privacy": "protected",
-              "default": "\"hint\""
-            },
+              "description": "Fired whenever the input's value is changed via user interaction."
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
               "description": "Label for the input.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "attribute": "hint"
+              "fieldName": "hint"
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "hide-label",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label"
+              "fieldName": "hideLabel"
             },
             {
-              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Placeholder text to display within the input.",
-              "attribute": "placeholder"
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
               "name": "error",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "attribute": "error"
+              "fieldName": "error"
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "attribute": "required"
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected"
-            },
+              "fieldName": "required"
+            }
+          ],
+          "parameters": [
             {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected"
-            },
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormAssociatedMixinInterface",
+          "declaration": {
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FormAssociatedMixin",
+          "declaration": {
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/InputMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "InputMixinInterface",
+          "members": [
             {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              }
             },
             {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "hasHint",
-              "privacy": "protected"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected"
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              }
             }
-          ],
-          "events": [
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "InputMixin",
+          "members": [
             {
-              "name": "input",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "NordEvent"
+                "text": "boolean"
               },
-              "description": "Fired as the user types into the input."
+              "default": "false",
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "change",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "NordEvent"
+                "text": "string | undefined"
               },
-              "description": "Fired whenever the input's value is changed via user interaction."
-            }
-          ],
-          "attributes": [
+              "description": "The name of the form component.",
+              "attribute": "name"
+            },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label"
+              "description": "The value of the form component.",
+              "attribute": "value"
             },
             {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
-            },
+              "kind": "field",
+              "name": "form",
+              "description": "Gets the form, if any, associated with the form element."
+            }
+          ],
+          "attributes": [
             {
-              "name": "hide-label",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder"
+              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
+              "fieldName": "disabled"
             },
             {
-              "name": "error",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error"
+              "description": "The name of the form component.",
+              "fieldName": "name"
             },
             {
-              "name": "required",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the input is required or not.\nAn input marked as required will be announced as such to users of assistive technology.\nWhen using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.",
-              "fieldName": "required"
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
             }
           ],
           "parameters": [
@@ -14709,230 +14640,527 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormAssociatedMixinInterface",
+          "name": "InputMixinInterface",
+          "declaration": {
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputMixin",
+          "declaration": {
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/ReadonlyMixin.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ReadonlyMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "ReadonlyMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "attribute": "readonly",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
+              "fieldName": "readonly"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ReadonlyMixinInterface",
+          "declaration": {
+            "name": "ReadonlyMixinInterface",
+            "module": "src/common/mixins/ReadonlyMixin.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ReadonlyMixin",
+          "declaration": {
+            "name": "ReadonlyMixin",
+            "module": "src/common/mixins/ReadonlyMixin.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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": "FormAssociatedMixinInterface",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FormAssociatedMixin",
+          "name": "cond",
           "declaration": {
-            "name": "FormAssociatedMixin",
-            "module": "src/common/mixins/FormAssociatedMixin.ts"
+            "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/mixins/InputMixin.ts",
+      "path": "src/common/directives/wrapIf.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "InputMixinInterface",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "name",
+              "name": "condition",
               "type": {
-                "text": "string | undefined"
+                "text": "false"
               }
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "inner",
               "type": {
-                "text": "string"
+                "text": "() => TInner"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "wrapper",
               "type": {
-                "text": "boolean"
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
               }
             },
             {
-              "kind": "field",
-              "name": "form",
+              "name": "inner",
               "type": {
-                "text": "HTMLFormElement | null"
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
               }
             }
           ]
         },
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "InputMixin",
-          "members": [
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "condition",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "attribute": "disabled",
-              "reflects": true
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "inner",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "wrapper",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "description": "Gets the form, if any, associated with the form element."
+                "text": "(inner: TInner) => TWrapper"
+              }
             }
-          ],
-          "attributes": [
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
             {
-              "name": "disabled",
+              "name": "condition",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
-              "fieldName": "disabled"
+                "text": "any"
+              }
             },
             {
-              "name": "name",
+              "name": "inner",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+                "text": "() => TInner"
+              }
             },
             {
-              "name": "value",
+              "name": "wrapper",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
+                "text": "(innards: TInner) => TWrapper"
+              }
             }
           ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
+          "return": {
+            "type": {
+              "text": ""
             }
-          ]
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "InputMixinInterface",
+          "name": "wrapIf",
           "declaration": {
-            "name": "InputMixinInterface",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "InputMixin",
+          "name": "wrapIf",
           "declaration": {
-            "name": "InputMixin",
-            "module": "src/common/mixins/InputMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/ReadonlyMixin.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ReadonlyMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              }
-            }
-          ]
         },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "ReadonlyMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "attribute": "readonly",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the component readonly, so that it is not editable.\nReadonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.",
-              "fieldName": "readonly"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
         {
           "kind": "js",
-          "name": "ReadonlyMixinInterface",
+          "name": "wrapIf",
           "declaration": {
-            "name": "ReadonlyMixinInterface",
-            "module": "src/common/mixins/ReadonlyMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ReadonlyMixin",
+          "name": "wrapIf",
           "declaration": {
-            "name": "ReadonlyMixin",
-            "module": "src/common/mixins/ReadonlyMixin.ts"
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
           }
         }
       ]