@nordhealth/components 1.0.0-alpha.38 → 1.0.0-alpha.39

package/custom-elements.json

@@ -671,6 +671,184 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/collection.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "groupBy",
+          "parameters": [
+            {
+              "name": "array",
+              "type": {
+                "text": "Array<TObject>"
+              },
+              "description": "the collection of objects to group"
+            },
+            {
+              "name": "key",
+              "type": {
+                "text": "TKey"
+              },
+              "description": "the property to group by"
+            }
+          ],
+          "description": "Groups an array objects by property value",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "groupBy",
+          "declaration": {
+            "name": "groupBy",
+            "module": "src/common/collection.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/events.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A base class for events which defaults to bubbling and composed",
+          "name": "NordEvent",
+          "superclass": {
+            "name": "Event",
+            "module": "src/common/events.ts"
+          },
+          "status": null,
+          "category": null
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NordEvent",
+          "declaration": {
+            "name": "NordEvent",
+            "module": "src/common/events.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/focus.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getFocusedElement",
+          "return": {
+            "type": {
+              "text": "Element | undefined"
+            }
+          },
+          "parameters": [
+            {
+              "name": "root",
+              "type": {
+                "text": "Document | ShadowRoot"
+              }
+            }
+          ],
+          "description": "Gets the currently focused element, taking shadow roots into account."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getFocusedElement",
+          "declaration": {
+            "name": "getFocusedElement",
+            "module": "src/common/focus.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/number.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "wrap",
+          "parameters": [
+            {
+              "name": "val",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "wrap",
+          "declaration": {
+            "name": "wrap",
+            "module": "src/common/number.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/ref.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mergeRefs",
+          "return": {
+            "type": {
+              "text": "RefCallback"
+            }
+          },
+          "parameters": [
+            {
+              "name": "refs",
+              "type": {
+                "text": "Ref[]"
+              }
+            }
+          ],
+          "description": "Creates a ref callback which will assign the element to every given ref"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mergeRefs",
+          "declaration": {
+            "name": "mergeRefs",
+            "module": "src/common/ref.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -1162,244 +1340,66 @@
                 "text": "ShortcutController"
               },
               "privacy": "private",
-              "default": "new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )"
-            },
-            {
-              "kind": "field",
-              "name": "commandShortcuts",
-              "type": {
-                "text": "ShortcutController"
-              },
-              "privacy": "private",
-              "default": "new ShortcutController(host)"
-            },
-            {
-              "kind": "method",
-              "name": "registerCommandShortcuts"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "KeyboardController",
-          "declaration": {
-            "name": "KeyboardController",
-            "module": "src/command-menu/KeyboardController.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/command-menu/events.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SelectEvent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "command",
-              "type": {
-                "text": "ICommandMenuAction"
-              },
-              "default": "command"
-            }
-          ],
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SelectEvent",
-          "declaration": {
-            "name": "SelectEvent",
-            "module": "src/command-menu/events.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/collection.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "groupBy",
-          "parameters": [
-            {
-              "name": "array",
-              "type": {
-                "text": "Array<TObject>"
-              },
-              "description": "the collection of objects to group"
-            },
-            {
-              "name": "key",
-              "type": {
-                "text": "TKey"
-              },
-              "description": "the property to group by"
-            }
-          ],
-          "description": "Groups an array objects by property value",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "groupBy",
-          "declaration": {
-            "name": "groupBy",
-            "module": "src/common/collection.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/events.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A base class for events which defaults to bubbling and composed",
-          "name": "NordEvent",
-          "superclass": {
-            "name": "Event",
-            "module": "src/common/events.ts"
-          },
-          "status": null,
-          "category": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NordEvent",
-          "declaration": {
-            "name": "NordEvent",
-            "module": "src/common/events.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/focus.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getFocusedElement",
-          "return": {
-            "type": {
-              "text": "Element | undefined"
-            }
-          },
-          "parameters": [
-            {
-              "name": "root",
-              "type": {
-                "text": "Document | ShadowRoot"
-              }
-            }
-          ],
-          "description": "Gets the currently focused element, taking shadow roots into account."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getFocusedElement",
-          "declaration": {
-            "name": "getFocusedElement",
-            "module": "src/common/focus.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/number.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "wrap",
-          "parameters": [
-            {
-              "name": "val",
-              "type": {
-                "text": "number"
-              }
+              "default": "new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host\n    )"
             },
             {
-              "name": "min",
+              "kind": "field",
+              "name": "commandShortcuts",
               "type": {
-                "text": "number"
-              }
+                "text": "ShortcutController"
+              },
+              "privacy": "private",
+              "default": "new ShortcutController(host)"
             },
             {
-              "name": "max",
-              "type": {
-                "text": "number"
-              }
+              "kind": "method",
+              "name": "registerCommandShortcuts"
             }
-          ],
-          "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "wrap",
+          "name": "KeyboardController",
           "declaration": {
-            "name": "wrap",
-            "module": "src/common/number.ts"
+            "name": "KeyboardController",
+            "module": "src/command-menu/KeyboardController.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/common/ref.ts",
+      "path": "src/command-menu/events.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "mergeRefs",
-          "return": {
-            "type": {
-              "text": "RefCallback"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "SelectEvent",
+          "members": [
             {
-              "name": "refs",
+              "kind": "field",
+              "name": "command",
               "type": {
-                "text": "Ref[]"
-              }
+                "text": "ICommandMenuAction"
+              },
+              "default": "command"
             }
           ],
-          "description": "Creates a ref callback which will assign the element to every given ref"
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "mergeRefs",
+          "name": "SelectEvent",
           "declaration": {
-            "name": "mergeRefs",
-            "module": "src/common/ref.ts"
+            "name": "SelectEvent",
+            "module": "src/command-menu/events.ts"
           }
         }
       ]
@@ -2904,105 +2904,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/table/Table.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
-          "name": "Table",
-          "slots": [
-            {
-              "description": "The table.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "attribute": "density",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderStyles",
-              "privacy": "private",
-              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
-            },
-            {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected",
-              "description": "opt out of shadow dom"
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "density",
-              "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
-              },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "list",
-          "tagName": "nord-table",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-table",
-          "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/textarea/Textarea.ts",
@@ -3557,6 +3458,105 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/table/Table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
+          "name": "Table",
+          "slots": [
+            {
+              "description": "The table.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+            },
+            {
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "fieldName": "density"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "list",
+          "tagName": "nord-table",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/visually-hidden/VisuallyHidden.ts",

package/lib/Button.js

@@ -1,2 +1,2 @@
-import{r as t,D as o,p as n,_ as r,n as e,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as s}from"./property-03f59dce.js";import{l as i}from"./directive-40a31ee2.js";import{n as l}from"./ref-857246ae.js";import{I as c,F as d}from"./InputMixin-3e737480.js";const b=t`:host{all:initial;display:inline-block}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;-webkit-user-select:none;user-select:none;inline-size:var(--n-button-width,fit-content)}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover){--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-primary);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-text-inverse);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]:hover){--n-button-background-color:var(--n-color-primary-strong)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]:hover){--n-button-color:var(--n-color-text)}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:hover) ::slotted(*){color:var(--n-color-icon-hover)}`;let u=class extends(c(d(o(a)))){constructor(){super(...arguments),this._proxyButton=document.createElement("button"),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1}connectedCallback(){super.connectedCallback(),this.syncProxyButton()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupProxyButton()}updated(){this.syncProxyButton()}render(){const t=n`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${this.href}">${t}</a>`:n`<slot name="proxy"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${i(this.name)}" value="${i(this.value)}" @click="${this.handleClick}">${t}</button>`}handleClick(){this._proxyButton.click()}get isFormAssociated(){return!this.href&&this.form}syncProxyButton(){const t=this._proxyButton;t.slot="proxy",t.className="n-button-proxy",t.disabled=this.disabled,t.type=this.type,this.name?t.name=this.name:t.removeAttribute("name"),this.value?t.value=this.value:t.removeAttribute("value"),this.isFormAssociated?this.appendChild(t):this.cleanupProxyButton()}cleanupProxyButton(){this._proxyButton.remove()}};u.styles=b,r([s({reflect:!0})],u.prototype,"variant",void 0),r([s({reflect:!0})],u.prototype,"type",void 0),r([s({reflect:!0})],u.prototype,"size",void 0),r([s({reflect:!0})],u.prototype,"href",void 0),r([s({type:Boolean})],u.prototype,"download",void 0),r([s({reflect:!0})],u.prototype,"target",void 0),r([s({reflect:!0,type:Boolean})],u.prototype,"expand",void 0),u=r([e("nord-button")],u);var v=u;export{v as default};
+import{r as t,D as o,p as n,_ as r,n as e,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as s}from"./property-03f59dce.js";import{l as i}from"./directive-40a31ee2.js";import{n as l}from"./ref-857246ae.js";import{I as c,F as d}from"./InputMixin-3e737480.js";const b=t`:host{all:initial;display:inline-block}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:all .1s ease;-webkit-user-select:none;user-select:none;inline-size:var(--n-button-width,fit-content)}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover){--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}:host([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}.n-button:focus{--n-button-border-color:var(--n-color-primary);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-primary);--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-color:var(--n-color-text-inverse);--n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]:hover){--n-button-background-color:var(--n-color-primary-strong)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]:hover){--n-button-color:var(--n-color-text)}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=danger]){--n-button-border-color:var(--n-color-status-danger);--n-button-color:var(--n-color-text-error);--n-button-font-weight:var(--n-font-weight-active)}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}`;let u=class extends(c(d(o(a)))){constructor(){super(...arguments),this._proxyButton=document.createElement("button"),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1}connectedCallback(){super.connectedCallback(),this.syncProxyButton()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupProxyButton()}updated(){this.syncProxyButton()}render(){const t=n`<slot name="before"></slot><div class="n-content"><slot></slot></div><slot name="after"></slot>`;return this.href?n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${this.href}">${t}</a>`:n`<slot name="proxy"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${i(this.name)}" value="${i(this.value)}" @click="${this.handleClick}">${t}</button>`}handleClick(){this._proxyButton.click()}get isFormAssociated(){return!this.href&&this.form}syncProxyButton(){const t=this._proxyButton;t.slot="proxy",t.className="n-button-proxy",t.disabled=this.disabled,t.type=this.type,this.name?t.name=this.name:t.removeAttribute("name"),this.value?t.value=this.value:t.removeAttribute("value"),this.isFormAssociated?this.appendChild(t):this.cleanupProxyButton()}cleanupProxyButton(){this._proxyButton.remove()}};u.styles=b,r([s({reflect:!0})],u.prototype,"variant",void 0),r([s({reflect:!0})],u.prototype,"type",void 0),r([s({reflect:!0})],u.prototype,"size",void 0),r([s({reflect:!0})],u.prototype,"href",void 0),r([s({type:Boolean})],u.prototype,"download",void 0),r([s({reflect:!0})],u.prototype,"target",void 0),r([s({reflect:!0,type:Boolean})],u.prototype,"expand",void 0),u=r([e("nord-button")],u);var v=u;export{v as default};
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status draft\n * @category action\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(DraftComponentMixin(LitElement))) {\n  static styles = style\n\n  private _proxyButton = document.createElement(\"button\")\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * When provided, renders the button as a link,\n   * with it's href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.syncProxyButton()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanupProxyButton()\n  }\n\n  updated() {\n    this.syncProxyButton()\n  }\n\n  render() {\n    const innards = html`\n      <slot name=\"before\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <slot name=\"after\"></slot>\n    `\n\n    return this.href\n      ? html`<a\n          ${ref(this.focusableRef)}\n          class=\"n-button\"\n          target=${this.target}\n          ?download=${this.download}\n          href=${this.href}\n          >${innards}</a\n        >`\n      : html`\n          <slot name=\"proxy\"></slot>\n          <button\n            ${ref(this.focusableRef)}\n            class=\"n-button\"\n            ?disabled=${this.disabled}\n            name=${ifDefined(this.name)}\n            value=${ifDefined(this.value)}\n            @click=${this.handleClick}\n          >\n            ${innards}\n          </button>\n        `\n  }\n\n  private handleClick() {\n    this._proxyButton.click()\n  }\n\n  private get isFormAssociated() {\n    return !this.href && this.form\n  }\n\n  private syncProxyButton() {\n    const proxy = this._proxyButton\n\n    proxy.slot = \"proxy\"\n    proxy.className = \"n-button-proxy\"\n    proxy.disabled = this.disabled\n    proxy.type = this.type\n\n    if (this.name) {\n      proxy.name = this.name\n    } else {\n      proxy.removeAttribute(\"name\")\n    }\n    if (this.value) {\n      proxy.value = this.value\n    } else {\n      proxy.removeAttribute(\"value\")\n    }\n\n    if (this.isFormAssociated) {\n      this.appendChild(proxy)\n    } else {\n      this.cleanupProxyButton()\n    }\n  }\n\n  private cleanupProxyButton() {\n    this._proxyButton.remove()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button\": Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","document","createElement","connectedCallback","super","syncProxyButton","disconnectedCallback","cleanupProxyButton","updated","render","innards","html","href","ref","focusableRef","target","download","disabled","ifDefined","name","value","handleClick","_proxyButton","click","isFormAssociated","form","proxy","slot","className","type","removeAttribute","appendChild","remove","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"2qHAsBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,EAAoBC,MAAlFC,kCAGUC,kBAAeC,SAASC,cAAc,UAKjBF,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EAErDG,oBACEC,MAAMD,oBACNH,KAAKK,kBAGPC,uBACEF,MAAME,uBACNN,KAAKO,qBAGPC,UACER,KAAKK,kBAGPI,SACE,MAAMC,EAAUC,CAAI,kGAQpB,OAAOX,KAAKY,KACRD,CAAI,MACAE,EAAIb,KAAKc,0CAEFd,KAAKe,sBACFf,KAAKgB,mBACVhB,KAAKY,SACTF,QAELC,CAAI,qCAGEE,EAAIb,KAAKc,6CAECd,KAAKiB,mBACVC,EAAUlB,KAAKmB,iBACdD,EAAUlB,KAAKoB,mBACdpB,KAAKqB,gBAEZX,aAKJW,cACNrB,KAAKsB,aAAaC,QAGRC,uBACV,OAAQxB,KAAKY,MAAQZ,KAAKyB,KAGpBpB,kBACN,MAAMqB,EAAQ1B,KAAKsB,aAEnBI,EAAMC,KAAO,QACbD,EAAME,UAAY,iBAClBF,EAAMT,SAAWjB,KAAKiB,SACtBS,EAAMG,KAAO7B,KAAK6B,KAEd7B,KAAKmB,KACPO,EAAMP,KAAOnB,KAAKmB,KAElBO,EAAMI,gBAAgB,QAEpB9B,KAAKoB,MACPM,EAAMN,MAAQpB,KAAKoB,MAEnBM,EAAMI,gBAAgB,SAGpB9B,KAAKwB,iBACPxB,KAAK+B,YAAYL,GAEjB1B,KAAKO,qBAIDA,qBACNP,KAAKsB,aAAaU,WAlIbtC,SAASuC,EAOaC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEN,KAAMQ,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMP,KAAMQ,wCA/Cd3C,KADpB4C,EAAc,gBACM5C,SAAAA"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status draft\n * @category action\n * @slot - The button content\n * @slot before - Used to place content before button text. Typically used for icons.\n * @slot after - Used to place content after button text. Typically used for icons.\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(DraftComponentMixin(LitElement))) {\n  static styles = style\n\n  private _proxyButton = document.createElement(\"button\")\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" = \"default\"\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n  /**\n   * When provided, renders the button as a link,\n   * with it's href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.syncProxyButton()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanupProxyButton()\n  }\n\n  updated() {\n    this.syncProxyButton()\n  }\n\n  render() {\n    const innards = html`\n      <slot name=\"before\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <slot name=\"after\"></slot>\n    `\n\n    return this.href\n      ? html`<a\n          ${ref(this.focusableRef)}\n          class=\"n-button\"\n          target=${this.target}\n          ?download=${this.download}\n          href=${this.href}\n          >${innards}</a\n        >`\n      : html`\n          <slot name=\"proxy\"></slot>\n          <button\n            ${ref(this.focusableRef)}\n            class=\"n-button\"\n            ?disabled=${this.disabled}\n            name=${ifDefined(this.name)}\n            value=${ifDefined(this.value)}\n            @click=${this.handleClick}\n          >\n            ${innards}\n          </button>\n        `\n  }\n\n  private handleClick() {\n    this._proxyButton.click()\n  }\n\n  private get isFormAssociated() {\n    return !this.href && this.form\n  }\n\n  private syncProxyButton() {\n    const proxy = this._proxyButton\n\n    proxy.slot = \"proxy\"\n    proxy.className = \"n-button-proxy\"\n    proxy.disabled = this.disabled\n    proxy.type = this.type\n\n    if (this.name) {\n      proxy.name = this.name\n    } else {\n      proxy.removeAttribute(\"name\")\n    }\n    if (this.value) {\n      proxy.value = this.value\n    } else {\n      proxy.removeAttribute(\"value\")\n    }\n\n    if (this.isFormAssociated) {\n      this.appendChild(proxy)\n    } else {\n      this.cleanupProxyButton()\n    }\n  }\n\n  private cleanupProxyButton() {\n    this._proxyButton.remove()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-button\": Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","document","createElement","connectedCallback","super","syncProxyButton","disconnectedCallback","cleanupProxyButton","updated","render","innards","html","href","ref","focusableRef","target","download","disabled","ifDefined","name","value","handleClick","_proxyButton","click","isFormAssociated","form","proxy","slot","className","type","removeAttribute","appendChild","remove","style","__decorate","property","reflect","Boolean","customElement"],"mappings":"gnHAsBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,EAAoBC,MAAlFC,kCAGUC,kBAAeC,SAASC,cAAc,UAKjBF,aAAiE,UAKjEA,UAAsC,SAMtCA,UAAwB,IAYxBA,eAAW,EAWXA,YAAkD,QAKnCA,aAAS,EAErDG,oBACEC,MAAMD,oBACNH,KAAKK,kBAGPC,uBACEF,MAAME,uBACNN,KAAKO,qBAGPC,UACER,KAAKK,kBAGPI,SACE,MAAMC,EAAUC,CAAI,kGAQpB,OAAOX,KAAKY,KACRD,CAAI,MACAE,EAAIb,KAAKc,0CAEFd,KAAKe,sBACFf,KAAKgB,mBACVhB,KAAKY,SACTF,QAELC,CAAI,qCAGEE,EAAIb,KAAKc,6CAECd,KAAKiB,mBACVC,EAAUlB,KAAKmB,iBACdD,EAAUlB,KAAKoB,mBACdpB,KAAKqB,gBAEZX,aAKJW,cACNrB,KAAKsB,aAAaC,QAGRC,uBACV,OAAQxB,KAAKY,MAAQZ,KAAKyB,KAGpBpB,kBACN,MAAMqB,EAAQ1B,KAAKsB,aAEnBI,EAAMC,KAAO,QACbD,EAAME,UAAY,iBAClBF,EAAMT,SAAWjB,KAAKiB,SACtBS,EAAMG,KAAO7B,KAAK6B,KAEd7B,KAAKmB,KACPO,EAAMP,KAAOnB,KAAKmB,KAElBO,EAAMI,gBAAgB,QAEpB9B,KAAKoB,MACPM,EAAMN,MAAQpB,KAAKoB,MAEnBM,EAAMI,gBAAgB,SAGpB9B,KAAKwB,iBACPxB,KAAK+B,YAAYL,GAEjB1B,KAAKO,qBAIDA,qBACNP,KAAKsB,aAAaU,WAlIbtC,SAASuC,EAOaC,GAA5BC,EAAS,CAAEC,SAAS,mCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEN,KAAMQ,0CAWWH,GAA5BC,EAAS,CAAEC,SAAS,kCAKuBF,GAA3CC,EAAS,CAAEC,SAAS,EAAMP,KAAMQ,wCA/Cd3C,KADpB4C,EAAc,gBACM5C,SAAAA"}

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{r as e,D as t,T as i,p as s,_ as r,n,s as o}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{l}from"./directive-40a31ee2.js";import{n as d}from"./ref-857246ae.js";import{o as p}from"./unsafe-html-7028f0a1.js";import{I as c,F as m}from"./InputMixin-3e737480.js";import{F as h,s as u}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as f}from"./TextField-afe4d64f.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const v=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let b=class extends(h(c(m(t(o))))){constructor(){super(...arguments),this.type="text"}render(){var e;const t="search"===this.type||this.slots.hasSlottedContent("before"),r="number"===this.type,n="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):i;return s`${this.renderLabel()}<div class="n-input-container">${t?s`<slot name="before">${n}</slot>`:i} <input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${r?"text":this.type}" inputmode="${l(r?"numeric":void 0)}" pattern="${l(r?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}"></div>${this.renderError()}`}};b.styles=[u,f,v],r([a()],b.prototype,"type",void 0),b=r([n("nord-input")],b);var $=b;export{$ as default};
+import{r as e,D as t,T as s,p as i,_ as r,n,s as o}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{l}from"./directive-40a31ee2.js";import{n as p}from"./ref-857246ae.js";import{o as d}from"./unsafe-html-7028f0a1.js";import{I as c,F as m}from"./InputMixin-3e737480.js";import{F as h,s as u}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as f}from"./TextField-bfdc253c.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const v=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let b=class extends(h(c(m(t(o))))){constructor(){super(...arguments),this.type="text"}render(){var e;const t="search"===this.type||this.slots.hasSlottedContent("before"),r="number"===this.type,n="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return i`${this.renderLabel()}<div class="n-input-container">${t?i`<slot name="before">${n}</slot>`:s} <input ${p(this.focusableRef)} id="${this.inputId}" class="n-input" type="${r?"text":this.type}" inputmode="${l(r?"numeric":void 0)}" pattern="${l(r?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}};b.styles=[u,f,v],r([a()],b.prototype,"type",void 0),b=r([n("nord-input")],b);var $=b;export{$ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot before - Optional slot that holds an icon for the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n  static styles = [formFieldStyle, textFieldStyle, style]\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.slots.hasSlottedContent(\"before\")\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        ${hasIcon ? html`<slot name=\"before\">${defaultIcon}</slot>` : nothing}\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","render","hasIcon","type","slots","hasSlottedContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleChange","getDescribedBy","getInvalid","renderError","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"86BA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAArGC,kCAMcC,UAA4E,OAExFC,eACE,MAAMC,EAAwB,WAAdF,KAAKG,MAAqBH,KAAKI,MAAMC,kBAAkB,UACjEC,EAAyB,WAAdN,KAAKG,KAChBI,EAA4B,WAAdP,KAAKG,KAAoBK,ECxClC,iQDwC2DC,EAEtE,OAAOC,CAAI,GACPV,KAAKW,+CAGHT,EAAUQ,CAAI,uBAAuBH,WAAuBE,YAE1DG,EAAIZ,KAAKa,qBACNb,KAAKc,kCAEHR,EAAW,OAASN,KAAKG,oBACpBY,EAAUT,EAAW,eAAYU,gBACnCD,EAAUT,EAAW,cAAWU,kBAC9BhB,KAAKiB,wBACLjB,KAAKkB,mBACVH,EAAUf,KAAKmB,4BACbnB,KAAKoB,qBAAS,oBACTL,EAAUf,KAAKqB,0BACnBrB,KAAKsB,mCACIP,EAAUf,KAAKuB,oCACnBR,EAAUf,KAAKwB,wBAIhCxB,KAAKyB,kBAnCJhC,SAAS,CAACiC,EAAgBC,EAAgBC,GAKrCC,GAAXC,gCANkBrC,KADpBsC,EAAc,eACMtC,SAAAA"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.ts","../../icons/lib/assets/navigation-search.js"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport searchIcon from \"@nordhealth/icons/lib/assets/navigation-search.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Input.css\"\n\n/**\n * Inputs are used to allow users to provide text input when the expected input is short.\n * As well as plain text, Input supports various types of text, including passwords and numbers.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n * @slot before - Optional slot that holds an icon for the input.\n */\n@customElement(\"nord-input\")\nexport default class Input extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n  static styles = [formFieldStyle, textFieldStyle, style]\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  render() {\n    const hasIcon = this.type === \"search\" || this.slots.hasSlottedContent(\"before\")\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        ${hasIcon ? html`<slot name=\"before\">${defaultIcon}</slot>` : nothing}\n        <input\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          type=${isNumber ? \"text\" : this.type}\n          inputmode=${ifDefined(isNumber ? \"numeric\" : undefined)}\n          pattern=${ifDefined(isNumber ? \"[0-9]*\" : undefined)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          spellcheck=\"false\"\n        />\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-input\": Input\n  }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"navigation-search\"\nexport const tags = \"nordicon navigation menu find search magnifying glass\"\n"],"names":["Input","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","render","hasIcon","type","slots","hasSlottedContent","isNumber","defaultIcon","unsafeHTML","nothing","html","renderLabel","ref","focusableRef","inputId","ifDefined","undefined","disabled","required","name","value","placeholder","handleChange","getDescribedBy","getInvalid","renderError","formFieldStyle","textFieldStyle","style","__decorate","property","customElement"],"mappings":"86BA6BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAArGC,kCAMcC,UAA4E,OAExFC,eACE,MAAMC,EAAwB,WAAdF,KAAKG,MAAqBH,KAAKI,MAAMC,kBAAkB,UACjEC,EAAyB,WAAdN,KAAKG,KAChBI,EAA4B,WAAdP,KAAKG,KAAoBK,ECxClC,iQDwC2DC,EAEtE,OAAOC,CAAI,GACPV,KAAKW,+CAGHT,EAAUQ,CAAI,uBAAuBH,WAAuBE,YAE1DG,EAAIZ,KAAKa,qBACNb,KAAKc,kCAEHR,EAAW,OAASN,KAAKG,oBACpBY,EAAUT,EAAW,eAAYU,gBACnCD,EAAUT,EAAW,cAAWU,kBAC9BhB,KAAKiB,wBACLjB,KAAKkB,mBACVH,EAAUf,KAAKmB,4BACbnB,KAAKoB,qBAAS,oBACTL,EAAUf,KAAKqB,0BACnBrB,KAAKsB,mCACIP,EAAUf,KAAKuB,oCACnBR,EAAUf,KAAKwB,2CAKhCxB,KAAKyB,kBApCJhC,SAAS,CAACiC,EAAgBC,EAAgBC,GAKrCC,GAAXC,gCANkBrC,KADpBsC,EAAc,eACMtC,SAAAA"}

package/lib/TextField-bfdc253c.js

@@ -0,0 +1,2 @@
+import{r as n}from"./DraftComponentMixin-4bb26f5d.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:250px;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]) .n-input{display:block;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-primary);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weaker)}.n-input:focus::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
+//# sourceMappingURL=TextField-bfdc253c.js.map

package/lib/TextField-bfdc253c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField-bfdc253c.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{r as e,D as t,p as i,_ as s,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{l as n}from"./directive-40a31ee2.js";import{n as l}from"./ref-857246ae.js";import{I as d,F as h}from"./InputMixin-3e737480.js";import{F as p,s as u}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as c}from"./TextField-afe4d64f.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const f=e`.n-input{resize:none;min-block-size:var(--n-textarea-height,76px);transition:var(--n-transition-slowly),height 0s;display:block}:host([resize=vertical]) .n-input{resize:vertical}:host([resize=auto]) .n-input{overflow:hidden}`;let m=class extends(p(d(h(t(a))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return i`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${n(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${n(this.placeholder)}" @change="${this.handleChange}" @input="${this.resizeToFitContent}" aria-describedby="${n(this.getDescribedBy())}" aria-invalid="${n(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};m.styles=[u,c,f],s([o({reflect:!0})],m.prototype,"resize",void 0),m=s([r("nord-textarea")],m);var v=m;export{v as default};
+import{r as e,D as t,p as i,_ as s,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{l as n}from"./directive-40a31ee2.js";import{n as l}from"./ref-857246ae.js";import{I as d,F as h}from"./InputMixin-3e737480.js";import{F as p,s as u}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as c}from"./TextField-bfdc253c.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const f=e`.n-input{resize:none;min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block}:host([resize=vertical]) .n-input{resize:vertical}:host([resize=auto]) .n-input{overflow:hidden}`;let m=class extends(p(d(h(t(a))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return i`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${n(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${n(this.placeholder)}" @change="${this.handleChange}" @input="${this.resizeToFitContent}" aria-describedby="${n(this.getDescribedBy())}" aria-invalid="${n(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};m.styles=[u,c,f],s([o({reflect:!0})],m.prototype,"resize",void 0),m=s([r("nord-textarea")],m);var v=m;export{v as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n  static styles = [formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"resize\") || changedProperties.has(\"value\")) {\n      this.resizeToFitContent()\n    }\n  }\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.resizeToFitContent}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","updated","changedProperties","has","resizeToFitContent","render","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","value","placeholder","handleChange","getDescribedBy","getInvalid","renderError","textarea","resize","style","height","scrollHeight","formFieldStyle","textFieldStyle","__decorate","property","reflect","customElement"],"mappings":"mrBA2BA,IAAqBA,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAAxGC,kCAGYC,aAAU,WAOSA,YAA8B,WAE3DC,QAAQC,IACFA,EAAkBC,IAAI,WAAaD,EAAkBC,IAAI,WAC3DH,KAAKI,qBAITC,eACE,OAAOC,CAAI,GACPN,KAAKO,yDAIDC,EAAIR,KAAKS,qBACNT,KAAKU,uCAEEV,KAAKW,wBACLX,KAAKY,mBACVC,EAAUb,KAAKc,4BACbd,KAAKe,qBAAS,oBACTF,EAAUb,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKI,yCACKS,EAAUb,KAAKkB,oCACnBL,EAAUb,KAAKmB,mCAIhCnB,KAAKoB,gBAIHhB,qBACN,MAAMiB,EAAWrB,KAAKS,aAAaM,MAE9BM,IAIe,SAAhBrB,KAAKsB,QACPD,EAASE,MAAMC,OAAS,OACxBH,EAASE,MAAMC,OAAS,GAAGH,EAASI,kBAGpCJ,EAASE,MAAMC,OAAS,QAtDrB/B,SAAS,CAACiC,EAAgBC,EAAgBJ,GASpBK,GAA5BC,EAAS,CAAEC,SAAS,kCAVFrC,KADpBsC,EAAc,kBACMtC,SAAAA"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { LitElement, html, PropertyValues } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./Textarea.css\"\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status draft\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n */\n@customElement(\"nord-textarea\")\nexport default class Textarea extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n  static styles = [formFieldStyle, textFieldStyle, style]\n\n  protected inputId = \"textarea\"\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: \"vertical\" | \"auto\" = \"vertical\"\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has(\"resize\") || changedProperties.has(\"value\")) {\n      this.resizeToFitContent()\n    }\n  }\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          .value=${this.value ?? \"\"}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.resizeToFitContent}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n        ></textarea>\n      </div>\n\n      ${this.renderError()}\n    `\n  }\n\n  private resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === \"auto\") {\n      textarea.style.height = \"auto\"\n      textarea.style.height = `${textarea.scrollHeight}px`\n    } else {\n      // @ts-expect-error this is actually fine, and removes the style value\n      textarea.style.height = null\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-textarea\": Textarea\n  }\n}\n"],"names":["Textarea","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","updated","changedProperties","has","resizeToFitContent","render","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","value","placeholder","handleChange","getDescribedBy","getInvalid","renderError","textarea","resize","style","height","scrollHeight","formFieldStyle","textFieldStyle","__decorate","property","reflect","customElement"],"mappings":"4vBA2BA,IAAqBA,EAArB,cAAsCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAAxGC,kCAGYC,aAAU,WAOSA,YAA8B,WAE3DC,QAAQC,IACFA,EAAkBC,IAAI,WAAaD,EAAkBC,IAAI,WAC3DH,KAAKI,qBAITC,eACE,OAAOC,CAAI,GACPN,KAAKO,yDAIDC,EAAIR,KAAKS,qBACNT,KAAKU,uCAEEV,KAAKW,wBACLX,KAAKY,mBACVC,EAAUb,KAAKc,4BACbd,KAAKe,qBAAS,oBACTF,EAAUb,KAAKgB,0BACnBhB,KAAKiB,yBACNjB,KAAKI,yCACKS,EAAUb,KAAKkB,oCACnBL,EAAUb,KAAKmB,mCAIhCnB,KAAKoB,gBAIHhB,qBACN,MAAMiB,EAAWrB,KAAKS,aAAaM,MAE9BM,IAIe,SAAhBrB,KAAKsB,QACPD,EAASE,MAAMC,OAAS,OACxBH,EAASE,MAAMC,OAAS,GAAGH,EAASI,kBAGpCJ,EAASE,MAAMC,OAAS,QAtDrB/B,SAAS,CAACiC,EAAgBC,EAAgBJ,GASpBK,GAA5BC,EAAS,CAAEC,SAAS,kCAVFrC,KADpBsC,EAAc,kBACMtC,SAAAA"}

package/lib/index.js

@@ -1,2 +1,2 @@
-export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{I as Icon}from"./Icon-f6f1c764.js";export{default as CommandMenu}from"./CommandMenu.js";export{C as CommandMenuAction}from"./CommandMenuAction-879382c7.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./directive-40a31ee2.js";import"./ref-857246ae.js";import"./InputMixin-3e737480.js";import"./SlotController-fda28afb.js";import"./unsafe-html-7028f0a1.js";import"./FormField-02dd3b4f.js";import"./events-731d0007.js";import"./TextField-afe4d64f.js";import"./KeyboardController-28c7135b.js";import"./events.js";
+export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{I as Icon}from"./Icon-f6f1c764.js";export{default as CommandMenu}from"./CommandMenu.js";export{C as CommandMenuAction}from"./CommandMenuAction-879382c7.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./directive-40a31ee2.js";import"./ref-857246ae.js";import"./InputMixin-3e737480.js";import"./SlotController-fda28afb.js";import"./unsafe-html-7028f0a1.js";import"./FormField-02dd3b4f.js";import"./events-731d0007.js";import"./TextField-bfdc253c.js";import"./KeyboardController-28c7135b.js";import"./events.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "1.0.0-alpha.38",
+  "version": "1.0.0-alpha.39",
   "description": "This package includes Nord Design System web components",
   "author": "Nordhealth <info@nordhealth.com>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -137,5 +137,5 @@
       }
     ]
   },
-  "gitHead": "585a654eca3e91569e1093181f9791b65f32eb19"
+  "gitHead": "cb6356b6f7298342706acb9579bca63544383daa"
 }

package/lib/TextField-afe4d64f.js

@@ -1,2 +0,0 @@
-import{r as n}from"./DraftComponentMixin-4bb26f5d.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:250px;transition:var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]) .n-input{display:block;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-primary);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weaker)}.n-input:focus::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
-//# sourceMappingURL=TextField-afe4d64f.js.map

package/lib/TextField-afe4d64f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField-afe4d64f.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}