@nordhealth/components 1.7.0 → 1.8.0

package/custom-elements.json

@@ -337,6 +337,139 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/avatar/Avatar.ts",
+      "declarations": [
+        {
+          "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",
+          "members": [
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "States<typeof transition>"
+              },
+              "privacy": "private",
+              "default": "\"initial\""
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "attribute": "src",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "attribute": "name"
+            },
+            {
+              "kind": "method",
+              "name": "handleSrcChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderImage",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderFallback",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleLoad",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleError",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
+              },
+              "default": "\"m\"",
+              "description": "The size of the avatar.",
+              "fieldName": "size"
+            },
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL of the avatar image uploaded by the user.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the person.",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "image",
+          "tagName": "nord-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/avatar/Avatar.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- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -845,358 +978,69 @@
     },
     {
       "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": ""
-            }
-          ],
+          "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",
-              "name": "type",
+              "name": "dialogLabelId",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "string"
               },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "attribute": "type",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "privacy": "private",
+              "default": "\"dialog-header\""
+            },
             {
-              "name": "type",
+              "kind": "field",
+              "name": "monthSelectNode",
               "type": {
-                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+                "text": "HTMLElement"
               },
-              "default": "\"info\"",
-              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
-              "fieldName": "type"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "text",
-          "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/avatar/Avatar.ts",
-      "declarations": [
-        {
-          "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",
-          "members": [
+              "privacy": "private"
+            },
             {
               "kind": "field",
-              "name": "state",
+              "name": "focusedDayNode",
               "type": {
-                "text": "States<typeof transition>"
+                "text": "HTMLButtonElement"
               },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "direction",
               "privacy": "private",
-              "default": "\"initial\""
+              "default": "new DirectionController(this)"
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the avatar.",
-              "attribute": "size",
-              "reflects": true
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
             },
             {
               "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL of the avatar image uploaded by the user.",
-              "attribute": "src",
-              "reflects": true
+              "name": "shortcuts",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "dateFormatShort",
               "type": {
-                "text": "string"
+                "text": "Intl.DateTimeFormat"
               },
-              "default": "\"\"",
-              "description": "The name of the person.",
-              "attribute": "name"
-            },
-            {
-              "kind": "method",
-              "name": "handleSrcChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderImage",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "renderFallback",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleLoad",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleError",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "\"m\" | \"l\" | \"xl\" | \"xxl\""
-              },
-              "default": "\"m\"",
-              "description": "The size of the avatar.",
-              "fieldName": "size"
-            },
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL of the avatar image uploaded by the user.",
-              "fieldName": "src"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name of the person.",
-              "fieldName": "name"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "image",
-          "tagName": "nord-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/avatar/Avatar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-avatar",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/avatar/Avatar.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- Always add the name of the person using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n</div>\n"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "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": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "ready",
-          "category": "structure",
-          "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/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",
-              "name": "dialogLabelId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"dialog-header\""
-            },
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "shortcuts",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<\"nord-calendar\">(this, {\n    onLangChange: () => this.handleLangChange(),\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
-              "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "privacy": "private",
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
             },
             {
               "kind": "field",
@@ -1652,24 +1496,180 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/checkbox/Checkbox.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
-          "name": "Checkbox",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "slots": [
             {
-              "description": "Use when a label requires more than plain text.",
-              "name": "label"
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
-              "name": "hint"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "description": "Optional slot that holds error text for the input.",
-              "name": "error"
+              "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": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "structure",
+          "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/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.",
+          "name": "Badge",
+          "slots": [
+            {
+              "description": "The badge content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "attribute": "type",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"danger\" | \"highlight\" | \"info\" | undefined"
+              },
+              "default": "\"info\"",
+              "description": "The type of badge.\nDetermines the color of the chip shown on the badge.",
+              "fieldName": "type"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "ready",
+          "category": "text",
+          "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/checkbox/Checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Checkboxes allow user to choose one or more options from a limited set of options.\nIf you have more than 10 options, please use Select component instead.",
+          "name": "Checkbox",
+          "slots": [
+            {
+              "description": "Use when a label requires more than plain text.",
+              "name": "label"
+            },
+            {
+              "description": "Optional slot that holds hint text for the input.",
+              "name": "hint"
+            },
+            {
+              "description": "Optional slot that holds error text for the input.",
+              "name": "error"
             }
           ],
           "members": [
@@ -5121,7 +5121,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-dropdown",
           "customElement": true
@@ -5186,7 +5186,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-dropdown-group",
           "customElement": true
@@ -5312,7 +5312,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "action",
           "tagName": "nord-dropdown-item",
           "customElement": true
@@ -5357,7 +5357,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "feedback",
           "tagName": "nord-empty-state",
           "customElement": true
@@ -6539,6 +6539,17 @@
               "description": "ID reference of element used to toggle the navigation.",
               "attribute": "nav-toggle"
             },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "lightDismiss",
@@ -6743,6 +6754,15 @@
               },
               "description": "ID reference of element used to toggle the navigation.",
               "fieldName": "navToggle"
+            },
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of the default main section slot. When set to “none”,\nthe nav and header slots will still have padding.",
+              "fieldName": "padding"
             }
           ],
           "superclass": {
@@ -7936,7 +7956,7 @@
             "name": "LitElement",
             "package": "lit"
           },
-          "status": "new",
+          "status": "ready",
           "category": "overlay",
           "tagName": "nord-popout",
           "customElement": true
@@ -9913,7 +9933,7 @@
               "type": {
                 "text": "\"m\" | \"l\" | \"none\" | undefined"
               },
-              "default": "\"none\"",
+              "default": "\"m\"",
               "description": "Controls the padding of the tab group component.",
               "attribute": "padding",
               "reflects": true
@@ -10049,7 +10069,7 @@
               "type": {
                 "text": "\"m\" | \"l\" | \"none\" | undefined"
               },
-              "default": "\"none\"",
+              "default": "\"m\"",
               "description": "Controls the padding of the tab group component.",
               "fieldName": "padding"
             },
@@ -12859,307 +12879,499 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "path": "src/common/directives/cond.ts",
       "declarations": [
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "DraftComponentMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false"
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof value | typeof nothing"
             }
-          ],
+          },
           "parameters": [
             {
-              "name": "superClass",
+              "name": "value",
               "type": {
-                "text": "T"
+                "text": "any"
               }
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DraftComponentMixin",
-          "declaration": {
-            "name": "DraftComponentMixin",
-            "module": "src/common/mixins/DraftComponentMixin.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/mixins/FocusableMixin.ts",
-      "declarations": [
+          ],
+          "description": "if value is truthy, return it, otherwise return nothing"
+        },
         {
-          "kind": "class",
-          "description": "",
-          "name": "FocusableMixinInterface",
-          "members": [
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof nothing"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "focusableRef",
+              "name": "condition",
               "type": {
-                "text": "Ref<HTMLElement>"
-              },
-              "privacy": "protected"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "blur",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "click",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "trueCase",
+              "type": {
+                "text": "any"
               }
             }
-          ]
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return nothing"
         },
         {
-          "kind": "mixin",
-          "description": "",
-          "name": "FocusableMixin",
-          "members": [
-            {
-              "kind": "field",
-              "name": "focusableRef",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the component."
-            },
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Programmatically remove focus from the component."
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
             },
             {
-              "kind": "method",
-              "name": "click",
-              "description": "Programmatically simulates a click on the component."
+              "name": "trueCase",
+              "type": {
+                "text": "any"
+              }
             }
           ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof nothing"
+            }
+          },
           "parameters": [
             {
-              "name": "superClass",
+              "name": "condition",
               "type": {
-                "text": "T"
+                "text": "false"
+              }
+            },
+            {
+              "name": "trueCase",
+              "type": {
+                "text": "any"
               }
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FocusableMixinInterface",
-          "declaration": {
-            "name": "FocusableMixinInterface",
-            "module": "src/common/mixins/FocusableMixin.ts"
-          }
+          ],
+          "description": "condition is false, to will always return nothing"
         },
         {
-          "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": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase | typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "label",
+              "name": "condition",
               "type": {
-                "text": "string"
+                "text": "unknown"
               }
             },
             {
-              "kind": "field",
-              "name": "required",
+              "name": "trueCase",
               "type": {
-                "text": "boolean"
+                "text": "any"
               }
             },
             {
-              "kind": "field",
-              "name": "hint",
+              "name": "falseCase",
               "type": {
-                "text": "string | undefined"
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof trueCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "condition",
               "type": {
-                "text": "boolean"
+                "text": "true"
               }
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "trueCase",
               "type": {
-                "text": "string | undefined"
+                "text": "any"
               }
             },
             {
-              "kind": "field",
-              "name": "error",
+              "name": "falseCase",
               "type": {
-                "text": "string | undefined"
+                "text": "any"
               }
-            },
+            }
+          ],
+          "description": "condition is true, so always return trueCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "return": {
+            "type": {
+              "text": "typeof falseCase"
+            }
+          },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "expand",
+              "name": "condition",
               "type": {
-                "text": "boolean"
+                "text": "false"
               }
             },
             {
-              "kind": "field",
-              "name": "inputId",
+              "name": "trueCase",
               "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "errorId",
+              "name": "falseCase",
               "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
-            },
+                "text": "any"
+              }
+            }
+          ],
+          "description": "condition is false, so always return falseCase"
+        },
+        {
+          "kind": "function",
+          "name": "cond",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "hintId",
+              "name": "condition",
               "type": {
-                "text": "string"
-              },
-              "privacy": "protected"
+                "text": "unknown"
+              }
             },
             {
-              "kind": "field",
-              "name": "labelSlot",
+              "name": "trueCase",
+              "default": "condition",
               "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+                "text": "any"
+              }
             },
             {
-              "kind": "field",
-              "name": "hintSlot",
+              "name": "falseCase",
+              "default": "nothing",
               "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
+                "text": "any"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "cond",
+          "declaration": {
+            "name": "cond",
+            "module": "src/common/directives/cond.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/directives/wrapIf.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
               "type": {
-                "text": "SlotController"
-              },
-              "privacy": "protected"
+                "text": "false"
+              }
             },
             {
-              "kind": "field",
-              "name": "formData",
+              "name": "inner",
               "type": {
-                "text": "FormDataController"
-              },
-              "privacy": "protected"
+                "text": "() => TInner"
+              }
             },
             {
-              "kind": "field",
-              "name": "formValue",
+              "name": "wrapper",
               "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "protected"
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "true"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "return": {
+            "type": {
+              "text": "TInner | TWrapper"
+            }
+          },
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "unknown"
+              }
+            },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(inner: TInner) => TWrapper"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "wrapIf",
+          "parameters": [
+            {
+              "name": "condition",
+              "type": {
+                "text": "any"
+              }
             },
+            {
+              "name": "inner",
+              "type": {
+                "text": "() => TInner"
+              }
+            },
+            {
+              "name": "wrapper",
+              "type": {
+                "text": "(innards: TInner) => TWrapper"
+              }
+            }
+          ],
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "wrapIf",
+          "declaration": {
+            "name": "wrapIf",
+            "module": "src/common/directives/wrapIf.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/mixins/DraftComponentMixin.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "DraftComponentMixin",
+          "members": [
             {
               "kind": "field",
-              "name": "hasError",
+              "name": "_warningLogged",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "protected"
-            },
+              "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": [
             {
               "kind": "field",
-              "name": "hasHint",
+              "name": "focusableRef",
               "type": {
-                "text": "boolean"
+                "text": "Ref<HTMLElement>"
               },
               "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "protected",
+              "name": "focus",
               "return": {
                 "type": {
                   "text": "void"
@@ -13167,68 +13379,29 @@
               },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "Event"
+                    "text": "FocusOptions"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "protected",
+              "name": "blur",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "TemplateResult"
-                }
               }
             },
             {
               "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "string | undefined"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected",
+              "name": "click",
               "return": {
                 "type": {
-                  "text": "\"true\" | undefined"
+                  "text": "void"
                 }
               }
             }
@@ -13237,331 +13410,280 @@
         {
           "kind": "mixin",
           "description": "",
-          "name": "FormAssociatedMixin",
+          "name": "FocusableMixin",
           "members": [
             {
               "kind": "field",
-              "name": "labelSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"label\")"
-            },
-            {
-              "kind": "field",
-              "name": "errorSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"error\")"
-            },
-            {
-              "kind": "field",
-              "name": "hintSlot",
-              "privacy": "protected",
-              "default": "new SlotController(this, \"hint\")"
-            },
-            {
-              "kind": "field",
-              "name": "formData",
-              "privacy": "protected",
-              "default": "new FormDataController(this, { value: () => this.formValue })"
+              "name": "focusableRef",
+              "privacy": "protected"
             },
             {
-              "kind": "field",
-              "name": "formValue",
-              "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": "field",
-              "name": "inputId",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"input\""
+              "kind": "method",
+              "name": "blur",
+              "description": "Programmatically remove focus from the component."
             },
             {
-              "kind": "field",
-              "name": "errorId",
+              "kind": "method",
+              "name": "click",
+              "description": "Programmatically simulates a click on the component."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
               "type": {
-                "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"error\""
-            },
+                "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": "hintId",
+              "name": "label",
               "type": {
                 "text": "string"
-              },
-              "privacy": "protected",
-              "default": "\"hint\""
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "required",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "attribute": "label"
+                "text": "boolean"
+              }
             },
             {
               "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"
+              }
             },
             {
               "kind": "field",
               "name": "hideLabel",
               "type": {
                 "text": "boolean"
-              },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "attribute": "hide-label"
+              }
             },
             {
               "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
-              },
-              "description": "Placeholder text to display within the input.",
-              "attribute": "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"
+              }
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "expand",
               "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": "field",
-              "name": "expand",
+              "name": "inputId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "attribute": "expand",
-              "reflects": true
-            },
-            {
-              "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"
-            },
-            {
-              "kind": "method",
-              "name": "renderError",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "getDescribedBy",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "getInvalid",
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
-              "name": "hasHint",
               "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "hasError",
-              "privacy": "protected"
-            }
-          ],
-          "events": [
-            {
-              "name": "input",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired as the user types into the input."
-            },
-            {
-              "name": "change",
-              "type": {
-                "text": "NordEvent"
-              },
-              "description": "Fired whenever the input's value is changed via user interaction."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Label for the input.",
-              "fieldName": "label"
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
-              "fieldName": "hint"
+              "privacy": "protected"
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
-              "fieldName": "hideLabel"
+              "privacy": "protected"
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "labelSlot",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotController"
               },
-              "description": "Placeholder text to display within the input.",
-              "fieldName": "placeholder"
+              "privacy": "protected"
             },
             {
-              "name": "error",
+              "kind": "field",
+              "name": "hintSlot",
               "type": {
-                "text": "string | undefined"
+                "text": "SlotController"
               },
-              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
-              "fieldName": "error"
+              "privacy": "protected"
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "errorSlot",
               "type": {
-                "text": "boolean"
+                "text": "SlotController"
               },
-              "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"
+              "privacy": "protected"
             },
-            {
-              "name": "expand",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
-              "fieldName": "expand"
-            }
-          ],
-          "parameters": [
-            {
-              "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": "field",
-              "name": "name",
+              "name": "formData",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "FormDataController"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "formValue",
               "type": {
-                "text": "string"
-              }
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
-              }
+              },
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "hasHint",
               "type": {
-                "text": "HTMLFormElement | undefined"
+                "text": "boolean"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "string | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "\"true\" | undefined"
+                }
               }
             }
           ]
@@ -13569,308 +13691,272 @@
         {
           "kind": "mixin",
           "description": "",
-          "name": "InputMixin",
+          "name": "FormAssociatedMixin",
           "members": [
             {
               "kind": "field",
-              "name": "disabled",
-              "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
+              "name": "labelSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"label\")"
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the form component.",
-              "attribute": "name"
+              "name": "errorSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"error\")"
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "attribute": "value"
+              "name": "hintSlot",
+              "privacy": "protected",
+              "default": "new SlotController(this, \"hint\")"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "formData",
               "privacy": "protected",
-              "description": "Gets the form, if any, associated with the form element."
-            }
-          ],
-          "attributes": [
+              "default": "new FormDataController(this, { value: () => this.formValue })"
+            },
             {
-              "name": "disabled",
-              "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"
+              "kind": "field",
+              "name": "formValue",
+              "privacy": "protected"
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "inputId",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The name of the form component.",
-              "fieldName": "name"
+              "privacy": "protected",
+              "default": "\"input\""
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "errorId",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The value of the form component.",
-              "fieldName": "value"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "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/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"
-              }
+              "privacy": "protected",
+              "default": "\"error\""
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "hintId",
               "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+                "text": "string"
+              },
+              "privacy": "protected",
+              "default": "\"hint\""
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "true"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "attribute": "label"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "hint",
               "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof nothing"
-            }
-          },
-          "parameters": [
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "attribute": "hint"
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
-                "text": "false"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "attribute": "hide-label"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is false, to will always return nothing"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase | typeof falseCase"
-            }
-          },
-          "parameters": [
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "attribute": "placeholder"
+            },
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "error",
               "type": {
-                "text": "unknown"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "attribute": "error"
             },
             {
-              "name": "trueCase",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "any"
-              }
+                "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"
             },
             {
-              "name": "falseCase",
+              "kind": "field",
+              "name": "expand",
               "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "if condition is truthy, return trueCase, otherwise return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof trueCase"
-            }
-          },
-          "parameters": [
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
             {
-              "name": "condition",
-              "type": {
-                "text": "true"
-              }
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "name": "trueCase",
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderError",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getDescribedBy",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "getInvalid",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hasHint",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "hasError",
+              "privacy": "protected"
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
               "type": {
-                "text": "any"
-              }
+                "text": "NordEvent"
+              },
+              "description": "Fired as the user types into the input."
             },
             {
-              "name": "falseCase",
+              "name": "change",
               "type": {
-                "text": "any"
-              }
+                "text": "NordEvent"
+              },
+              "description": "Fired whenever the input's value is changed via user interaction."
             }
           ],
-          "description": "condition is true, so always return trueCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "return": {
-            "type": {
-              "text": "typeof falseCase"
-            }
-          },
-          "parameters": [
+          "attributes": [
             {
-              "name": "condition",
+              "name": "label",
               "type": {
-                "text": "false"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label for the input.",
+              "fieldName": "label"
             },
             {
-              "name": "trueCase",
+              "name": "hint",
               "type": {
-                "text": "any"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Optional hint text to be displayed with the input. Alternatively use the hint slot.",
+              "fieldName": "hint"
             },
             {
-              "name": "falseCase",
+              "name": "hide-label",
               "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "description": "condition is false, so always return falseCase"
-        },
-        {
-          "kind": "function",
-          "name": "cond",
-          "parameters": [
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Visually hide the label, but still show it to assistive technologies like screen readers.",
+              "fieldName": "hideLabel"
+            },
             {
-              "name": "condition",
+              "name": "placeholder",
               "type": {
-                "text": "unknown"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text to display within the input.",
+              "fieldName": "placeholder"
             },
             {
-              "name": "trueCase",
-              "default": "condition",
+              "name": "error",
               "type": {
-                "text": "any"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Optional error to be shown with the input. Alternatively use the error slot.",
+              "fieldName": "error"
+            },
+            {
+              "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.",
+              "fieldName": "required"
             },
             {
-              "name": "falseCase",
-              "default": "nothing",
+              "name": "expand",
               "type": {
-                "text": "any"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the input expands to fill the width of its container.",
+              "fieldName": "expand"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
               }
             }
           ]
@@ -13879,222 +13965,156 @@
       "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": "FormAssociatedMixinInterface",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FormAssociatedMixinInterface",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "cond",
+          "name": "FormAssociatedMixin",
           "declaration": {
-            "name": "cond",
-            "module": "src/common/directives/cond.ts"
+            "name": "FormAssociatedMixin",
+            "module": "src/common/mixins/FormAssociatedMixin.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/directives/wrapIf.ts",
+      "path": "src/common/mixins/InputMixin.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
-              "type": {
-                "text": "false"
-              }
-            },
+          "kind": "class",
+          "description": "",
+          "name": "InputMixinInterface",
+          "members": [
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
+                "text": "string | undefined"
               }
             },
             {
-              "name": "wrapper",
-              "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TWrapper"
-            }
-          },
-          "parameters": [
-            {
-              "name": "condition",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "true"
+                "text": "string"
               }
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "() => TInner"
+                "text": "boolean"
               }
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "form",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
+                "text": "HTMLFormElement | undefined"
               }
             }
           ]
         },
         {
-          "kind": "function",
-          "name": "wrapIf",
-          "return": {
-            "type": {
-              "text": "TInner | TWrapper"
-            }
-          },
-          "parameters": [
+          "kind": "mixin",
+          "description": "",
+          "name": "InputMixin",
+          "members": [
             {
-              "name": "condition",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "unknown"
-              }
+                "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
             },
             {
-              "name": "inner",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "attribute": "name"
             },
             {
-              "name": "wrapper",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "(inner: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "privacy": "protected",
+              "description": "Gets the form, if any, associated with the form element."
             }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "wrapIf",
-          "parameters": [
+          ],
+          "attributes": [
             {
-              "name": "condition",
+              "name": "disabled",
               "type": {
-                "text": "any"
-              }
+                "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"
             },
             {
-              "name": "inner",
+              "name": "name",
               "type": {
-                "text": "() => TInner"
-              }
+                "text": "string | undefined"
+              },
+              "description": "The name of the form component.",
+              "fieldName": "name"
             },
             {
-              "name": "wrapper",
+              "name": "value",
               "type": {
-                "text": "(innards: TInner) => TWrapper"
-              }
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the form component.",
+              "fieldName": "value"
             }
           ],
-          "return": {
-            "type": {
-              "text": ""
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
             }
-          }
+          ]
         }
       ],
       "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",
+          "name": "InputMixinInterface",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixinInterface",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         },
         {
           "kind": "js",
-          "name": "wrapIf",
+          "name": "InputMixin",
           "declaration": {
-            "name": "wrapIf",
-            "module": "src/common/directives/wrapIf.ts"
+            "name": "InputMixin",
+            "module": "src/common/mixins/InputMixin.ts"
           }
         }
       ]