@nordhealth/components 1.0.0-alpha.36 → 1.0.0-alpha.37

package/custom-elements.json

@@ -216,7 +216,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
               },
               "default": "\"default\"",
               "description": "The style variant of the button.",
@@ -238,7 +238,7 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\""
+                "text": "\"s\" | \"m\" | \"l\""
               },
               "default": "\"m\"",
               "description": "The size of the button.\nThis affects font-size and padding.",
@@ -422,7 +422,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\""
+                "text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
               },
               "default": "\"default\"",
               "description": "The style variant of the button.",
@@ -440,7 +440,7 @@
             {
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\""
+                "text": "\"s\" | \"m\" | \"l\""
               },
               "default": "\"m\"",
               "description": "The size of the button.\nThis affects font-size and padding.",
@@ -1664,38 +1664,48 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/select/Select.ts",
+      "path": "src/input/Input.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
-          "name": "Select",
+          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
+          "name": "Input",
           "slots": [
-            {
-              "description": "Default slot for holding <option> elements.",
-              "name": ""
-            },
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Use when a hint requires more than plain text.",
+              "description": "Optional slot that holds hint text for the input.",
               "name": "hint"
             },
             {
               "description": "Optional slot that holds error text for the input.",
               "name": "error"
+            },
+            {
+              "description": "Optional slot that holds an icon for the input.",
+              "name": "before"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
+              },
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "attribute": "type"
+            },
             {
               "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with select. Alternatively use the hint slot.",
+              "description": "Optional hint text to be displayed with input. Alternatively use the hint slot.",
               "attribute": "hint"
             },
             {
@@ -1714,7 +1724,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Hint text to display as the first option of the select element.",
+              "description": "Placeholder of the input.",
               "attribute": "placeholder"
             },
             {
@@ -1723,7 +1733,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the select. Alternatively use the error slot.",
+              "description": "Optional error to be shown with input. Alternatively use the error slot.",
               "attribute": "error"
             },
             {
@@ -1733,38 +1743,10 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
+              "description": "Controls whether the input expands to fill the width of its container.",
               "attribute": "expand",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "options",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getButtonText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "type": {
-                    "text": "HTMLOptionElement[]"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -1790,16 +1772,8 @@
             },
             {
               "kind": "method",
-              "name": "renderOption",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "HTMLOptionElement"
-                  }
-                }
-              ]
+              "name": "handleSlotChange",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -1980,12 +1954,21 @@
             }
           ],
           "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
+              },
+              "default": "\"text\"",
+              "description": "The type of the input.",
+              "fieldName": "type"
+            },
             {
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with select. Alternatively use the hint slot.",
+              "description": "Optional hint text to be displayed with input. Alternatively use the hint slot.",
               "fieldName": "hint"
             },
             {
@@ -2002,7 +1985,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Hint text to display as the first option of the select element.",
+              "description": "Placeholder of the input.",
               "fieldName": "placeholder"
             },
             {
@@ -2010,7 +1993,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with the select. Alternatively use the error slot.",
+              "description": "Optional error to be shown with input. Alternatively use the error slot.",
               "fieldName": "error"
             },
             {
@@ -2019,7 +2002,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the select expands to fill the width of its container.",
+              "description": "Controls whether the input expands to fill the width of its container.",
               "fieldName": "expand"
             },
             {
@@ -2110,7 +2093,7 @@
           },
           "status": "draft",
           "category": "form",
-          "tagName": "nord-select",
+          "tagName": "nord-input",
           "customElement": true,
           "events": [
             {
@@ -2132,64 +2115,54 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Input",
+            "module": "src/input/Input.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-select",
+          "name": "nord-input",
           "declaration": {
-            "name": "Select",
-            "module": "src/select/Select.ts"
+            "name": "Input",
+            "module": "src/input/Input.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/input/Input.ts",
+      "path": "src/select/Select.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Inputs are used to allow users to provide text input when the expected input is short.\nAs well as plain text, Input supports various types of text, including passwords and numbers.",
-          "name": "Input",
+          "description": "Select lets users choose one option from an options menu.\nConsider using select when you have 5 or more options to choose from.",
+          "name": "Select",
           "slots": [
+            {
+              "description": "Default slot for holding <option> elements.",
+              "name": ""
+            },
             {
               "description": "Use when a label requires more than plain text.",
               "name": "label"
             },
             {
-              "description": "Optional slot that holds hint text for the input.",
+              "description": "Use when a hint requires more than plain text.",
               "name": "hint"
             },
             {
               "description": "Optional slot that holds error text for the input.",
               "name": "error"
-            },
-            {
-              "description": "Optional slot that holds an icon for the input.",
-              "name": "before"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "attribute": "type"
-            },
             {
               "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with input. Alternatively use the hint slot.",
+              "description": "Optional hint text to be displayed with select. Alternatively use the hint slot.",
               "attribute": "hint"
             },
             {
@@ -2208,7 +2181,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Placeholder of the input.",
+              "description": "Hint text to display as the first option of the select element.",
               "attribute": "placeholder"
             },
             {
@@ -2217,7 +2190,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with input. Alternatively use the error slot.",
+              "description": "Optional error to be shown with the select. Alternatively use the error slot.",
               "attribute": "error"
             },
             {
@@ -2227,10 +2200,38 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
+              "description": "Controls whether the select expands to fill the width of its container.",
               "attribute": "expand",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getButtonText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "HTMLOptionElement[]"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "renderLabel",
@@ -2256,8 +2257,16 @@
             },
             {
               "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
+              "name": "renderOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "HTMLOptionElement"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2438,21 +2447,12 @@
             }
           ],
           "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\""
-              },
-              "default": "\"text\"",
-              "description": "The type of the input.",
-              "fieldName": "type"
-            },
             {
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional hint text to be displayed with input. Alternatively use the hint slot.",
+              "description": "Optional hint text to be displayed with select. Alternatively use the hint slot.",
               "fieldName": "hint"
             },
             {
@@ -2469,7 +2469,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Placeholder of the input.",
+              "description": "Hint text to display as the first option of the select element.",
               "fieldName": "placeholder"
             },
             {
@@ -2477,7 +2477,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional error to be shown with input. Alternatively use the error slot.",
+              "description": "Optional error to be shown with the select. Alternatively use the error slot.",
               "fieldName": "error"
             },
             {
@@ -2486,7 +2486,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the input expands to fill the width of its container.",
+              "description": "Controls whether the select expands to fill the width of its container.",
               "fieldName": "expand"
             },
             {
@@ -2577,7 +2577,7 @@
           },
           "status": "draft",
           "category": "form",
-          "tagName": "nord-input",
+          "tagName": "nord-select",
           "customElement": true,
           "events": [
             {
@@ -2599,16 +2599,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-input",
+          "name": "nord-select",
           "declaration": {
-            "name": "Input",
-            "module": "src/input/Input.ts"
+            "name": "Select",
+            "module": "src/select/Select.ts"
           }
         }
       ]
@@ -2740,19 +2740,42 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/visually-hidden/VisuallyHidden.ts",
+      "path": "src/table/Table.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
-          "name": "VisuallyHidden",
+          "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 visually hidden content.",
+              "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",
@@ -2768,6 +2791,17 @@
               }
             }
           ],
+          "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",
@@ -2779,8 +2813,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "text",
-          "tagName": "nord-visually-hidden",
+          "category": "list",
+          "tagName": "nord-table",
           "customElement": true
         }
       ],
@@ -2789,58 +2823,35 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "VisuallyHidden",
-            "module": "src/visually-hidden/VisuallyHidden.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-visually-hidden",
+          "name": "nord-table",
           "declaration": {
-            "name": "VisuallyHidden",
-            "module": "src/visually-hidden/VisuallyHidden.ts"
+            "name": "Table",
+            "module": "src/table/Table.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/table/Table.ts",
+      "path": "src/visually-hidden/VisuallyHidden.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",
+          "description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
+          "name": "VisuallyHidden",
           "slots": [
             {
-              "description": "The table.",
+              "description": "The visually hidden content.",
               "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",
@@ -2856,17 +2867,6 @@
               }
             }
           ],
-          "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",
@@ -2878,8 +2878,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "list",
-          "tagName": "nord-table",
+          "category": "text",
+          "tagName": "nord-visually-hidden",
           "customElement": true
         }
       ],
@@ -2888,16 +2888,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "VisuallyHidden",
+            "module": "src/visually-hidden/VisuallyHidden.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-table",
+          "name": "nord-visually-hidden",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "VisuallyHidden",
+            "module": "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([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)}::slotted(button[slot=proxy]){display:none}::slotted(svg){color:var(--n-color-icon)}:host(:hover) ::slotted(svg){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 h=u;export{h 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}: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};
 //# 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\" = \"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\" = \"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":"gsGAsBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,EAAoBC,MAAlFC,kCAGUC,kBAAeC,SAASC,cAAc,UAKjBF,aAAsD,UAKtDA,UAAsC,SAMtCA,UAAkB,IAYlBA,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":"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"}

package/lib/CommandMenu.js

@@ -1,4 +1,4 @@
-import{b as e,r as t,D as o,p as s,T as n,_ as i,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as l}from"./property-03f59dce.js";import{I as d,t as c}from"./Icon-6e1f3f35.js";import{e as p,i as h,t as m,l as u}from"./directive-40a31ee2.js";import{a as v,c as f,u as b,m as g,s as x,e as y,n as w}from"./ref-857246ae.js";import{o as k}from"./CommandMenuAction-f4f42d6b.js";import{groupBy as C}from"./collection.js";import{wrap as z}from"./number.js";import{NordEvent as $}from"./events.js";import{getFocusedElement as j}from"./focus.js";import{S as I,K as E}from"./KeyboardController-28c7135b.js";import"./VisuallyHidden.js";import{SelectEvent as L}from"./events2.js";import"./unsafe-html-7028f0a1.js";
+import{b as e,r as t,D as o,p as s,T as n,_ as i,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as l}from"./property-03f59dce.js";import{I as d,t as c}from"./Icon-f6f1c764.js";import{e as p,i as h,t as m,l as u}from"./directive-40a31ee2.js";import{a as v,c as f,u as b,m as g,s as x,e as y,n as w}from"./ref-857246ae.js";import{o as k}from"./CommandMenuAction-879382c7.js";import{groupBy as C}from"./collection.js";import{wrap as z}from"./number.js";import{NordEvent as $}from"./events.js";import{getFocusedElement as j}from"./focus.js";import{S as I,K as E}from"./KeyboardController-28c7135b.js";import"./VisuallyHidden.js";import{SelectEvent as L}from"./events2.js";import"./unsafe-html-7028f0a1.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/lib/{CommandMenuAction-f4f42d6b.js → CommandMenuAction-879382c7.js}

@@ -1,7 +1,7 @@
-import{b as e,r as n,_ as t,n as o,s as r,p as i,T as s}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{e as l,i as c,t as d}from"./directive-40a31ee2.js";import{I as h}from"./Icon-6e1f3f35.js";import"./VisuallyHidden.js";
+import{b as e,r as n,_ as t,n as o,s as r,p as i,T as s}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{e as l,i as c,t as d}from"./directive-40a31ee2.js";import{I as h}from"./Icon-f6f1c764.js";import"./VisuallyHidden.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */const v=l(class extends c{constructor(e){var n;if(super(e),e.type!==d.ATTRIBUTE||"class"!==e.name||(null===(n=e.strings)||void 0===n?void 0:n.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter((n=>e[n])).join(" ")+" "}update(n,[t]){var o,r;if(void 0===this.st){this.st=new Set,void 0!==n.strings&&(this.et=new Set(n.strings.join(" ").split(/\s/).filter((e=>""!==e))));for(const e in t)t[e]&&!(null===(o=this.et)||void 0===o?void 0:o.has(e))&&this.st.add(e);return this.render(t)}const i=n.element.classList;this.st.forEach((e=>{e in t||(i.remove(e),this.st.delete(e))}));for(const e in t){const n=!!t[e];n===this.st.has(e)||(null===(r=this.et)||void 0===r?void 0:r.has(e))||(n?(i.add(e),this.st.add(e)):(i.remove(e),this.st.delete(e)))}return e}});var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/></svg>',title:"arrow-right",tags:"nordicon arrow right caret pointing triangle chevron"});var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(14,0,0,14,0,0)"><path d="M0.5 3L3 3 6.5 7 9.5 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 3L9.5 3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',title:"keyboard-option",tags:"nordicon keyboard option key shortcut"});const u=n`:host{display:flex}.n-command{display:flex;flex:1;border-inline-start:2px solid transparent;align-items:center;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command.n-selected,.n-command:hover{cursor:pointer;background-color:var(--n-color-active)}.n-command.n-selected{border-inline-start-color:var(--n-color-primary)}nord-icon{color:var(--n-color-icon)}.n-command-icon{margin-inline-start:2px;margin-inline-end:calc(var(--n-space-s) * 1.4);line-height:var(--n-line-height-tight)}.n-selected .n-command-icon nord-icon{color:var(--n-color-icon-hover)}.n-title{flex:1;margin-inline-end:calc(var(--n-space-s)/ 2);font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-hotkeys{display:flex;gap:calc(var(--n-space-s)/ 2)}.n-hotkey{padding:calc(var(--n-space-s)/ 4) calc(var(--n-space-s)/ 3);text-transform:capitalize;font-size:var(--n-font-size-xs);border:1px solid var(--n-color-border-strong);font-weight:var(--n-font-weight);box-shadow:var(--n-box-shadow);border-radius:var(--n-border-radius-s);color:var(--n-color-icon);background:var(--n-color-button);line-height:var(--n-line-height-tight);min-inline-size:var(--n-space-s);display:inline-flex;align-items:center;justify-content:center;user-select:none}`,g=/(?:Key|Digit)([A-Z0-9])/g;h.registerIcon(p),h.registerIcon(m);let f=class extends r{constructor(){super(...arguments),this.selected=!1}ensureInView(){requestAnimationFrame((()=>this.scrollIntoView({block:"nearest"})))}updated(e){e.has("selected")&&this.selected&&this.ensureInView()}render(){var e;return i`<div class="${v({"n-selected":this.selected,"n-command":!0})}"><div aria-hidden="true" class="n-command-icon"><nord-icon size="s" name="${null!==(e=this.command.icon)&&void 0!==e?e:"arrow-right"}"></nord-icon></div><div class="n-title">${this.command.title}</div>${this.renderShortcut()}</div>`}renderShortcut(){if(!this.command.hotkey)return s;const e=this.command.hotkey.replace(g,"$1");return i`<nord-visually-hidden>, ${e}</nord-visually-hidden><div aria-hidden="true" class="n-hotkeys">${e.split("+").map((e=>i`<div class="n-hotkey">${"alt"===e.toLowerCase()&&navigator.platform.indexOf("Mac")>-1?i`<nord-icon name="${"keyboard-option"}" size="s"></nord-icon>`:e}</div>`))}</div>`}};f.styles=u,t([a({type:Object})],f.prototype,"command",void 0),t([a({type:Boolean})],f.prototype,"selected",void 0),f=t([o("nord-command-menu-action")],f);var y=f;export{y as C,v as o};
-//# sourceMappingURL=CommandMenuAction-f4f42d6b.js.map
+//# sourceMappingURL=CommandMenuAction-879382c7.js.map

package/lib/{CommandMenuAction-f4f42d6b.js.map → CommandMenuAction-879382c7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CommandMenuAction-f4f42d6b.js","sources":["../node_modules/lit/node_modules/lit-html/directives/class-map.js","../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as i,Directive as s,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=i(class extends s{constructor(t){var i;if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter((i=>t[i])).join(\" \")+\" \"}update(i,[s]){var r,o;if(void 0===this.st){this.st=new Set,void 0!==i.strings&&(this.et=new Set(i.strings.join(\" \").split(/\\s/).filter((t=>\"\"!==t))));for(const t in s)s[t]&&!(null===(r=this.et)||void 0===r?void 0:r.has(t))&&this.st.add(t);return this.render(s)}const e=i.element.classList;this.st.forEach((t=>{t in s||(e.remove(t),this.st.delete(t))}));for(const t in s){const i=!!s[t];i===this.st.has(t)||(null===(o=this.et)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.st.add(t)):(e.remove(t),this.st.delete(t)))}return t}});export{o as classMap};\n//# sourceMappingURL=class-map.js.map\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIcon from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIcon)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  @property({ type: Object })\n  command!: ICommandMenuAction\n\n  @property({ type: Boolean })\n  selected = false\n\n  /**\n   * Scroll to show element\n   */\n  private ensureInView() {\n    requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(\"selected\") && this.selected) {\n      this.ensureInView()\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.command.icon ?? chevronIcon.title}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  private renderShortcut() {\n    if (!this.command.hotkey) {\n      return nothing\n    }\n\n    const keys = this.command.hotkey.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-hotkeys\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-hotkey\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["o","i","s","constructor","t","super","type","r","ATTRIBUTE","name","strings","length","Error","render","Object","keys","filter","join","update","this","st","Set","et","split","has","add","e","element","classList","forEach","remove","delete","KEY_REGEX","Icon","registerIcon","chevronIcon","altKeyIcon","CommandMenuAction","LitElement","ensureInView","requestAnimationFrame","scrollIntoView","block","updated","changedProperties","selected","html","classMap","command","icon","title","renderShortcut","hotkey","nothing","replace","map","key","toLowerCase","navigator","platform","indexOf","style","__decorate","property","Boolean","customElement"],"mappings":";;;;;GAKQ,MAACA,EAAEC,EAAE,cAAcC,EAAEC,YAAYC,GAAG,IAAIH,EAAE,GAAGI,MAAMD,GAAGA,EAAEE,OAAOC,EAAEC,WAAW,UAAUJ,EAAEK,OAAO,QAAQR,EAAEG,EAAEM,eAAU,IAAST,OAAE,EAAOA,EAAEU,QAAQ,EAAE,MAAMC,MAAM,sGAAsGC,OAAOT,GAAG,MAAM,IAAIU,OAAOC,KAAKX,GAAGY,QAAQf,GAAGG,EAAEH,KAAKgB,KAAK,KAAK,IAAIC,OAAOjB,GAAGC,IAAI,IAAIK,EAAEP,EAAE,QAAG,IAASmB,KAAKC,GAAG,CAACD,KAAKC,GAAG,IAAIC,SAAI,IAASpB,EAAES,UAAUS,KAAKG,GAAG,IAAID,IAAIpB,EAAES,QAAQO,KAAK,KAAKM,MAAM,MAAMP,QAAQZ,GAAG,KAAKA,MAAM,IAAI,MAAMA,KAAKF,EAAEA,EAAEE,MAAM,QAAQG,EAAEY,KAAKG,UAAK,IAASf,OAAE,EAAOA,EAAEiB,IAAIpB,KAAKe,KAAKC,GAAGK,IAAIrB,GAAG,OAAOe,KAAKN,OAAOX,GAAG,MAAMwB,EAAEzB,EAAE0B,QAAQC,UAAUT,KAAKC,GAAGS,SAASzB,IAAIA,KAAKF,IAAIwB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,OAAO,IAAI,MAAMA,KAAKF,EAAE,CAAC,MAAMD,IAAIC,EAAEE,GAAGH,IAAIkB,KAAKC,GAAGI,IAAIpB,KAAK,QAAQJ,EAAEmB,KAAKG,UAAK,IAAStB,OAAE,EAAOA,EAAEwB,IAAIpB,MAAMH,GAAGyB,EAAED,IAAIrB,GAAGe,KAAKC,GAAGK,IAAIrB,KAAKsB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,KAAK,OAAOA,iDCL90B,0OACM,mBACD,qGCFL,8VACM,uBACD,m2CCUd4B,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CnC,kCAOEgB,eAAW,EAKHoB,eACNC,uBAAsB,IAAMrB,KAAKsB,eAAe,CAAEC,MAAO,cAGlDC,QAAQC,GACXA,EAAkBpB,IAAI,aAAeL,KAAK0B,UAC5C1B,KAAKoB,eAIA1B,eACP,OAAOiC,CAAI,eAECC,EAAS,CACf,aAAc5B,KAAK0B,SACnB,aAAa,2FAIc1B,KAAK6B,QAAQC,oBFtD7B,yDEwDU9B,KAAK6B,QAAQE,cAClC/B,KAAKgC,yBAKLA,iBACN,IAAKhC,KAAK6B,QAAQI,OAChB,OAAOC,EAGT,MAAMtC,EAAOI,KAAK6B,QAAQI,OAAOE,QAAQtB,EAAW,MAEpD,OAAOc,CAAI,2BACiB/B,qEAGtBA,EACCQ,MAAM,KACNgC,KACCC,GACEV,CAAI,yBACsB,QAAtBU,EAAIC,eAlEIC,UAAUC,SAASC,QAAQ,QAAU,EAmE3Cd,CAAI,oBD/EH,2CCgFDU,sBAxDXnB,SAASwB,EAGhBC,GADCC,EAAS,CAAEzD,KAAMQ,wCAIlBgD,GADCC,EAAS,CAAEzD,KAAM0D,0CANC3B,KADpB4B,EAAc,6BACM5B,SAAAA"}
+{"version":3,"file":"CommandMenuAction-879382c7.js","sources":["../node_modules/lit/node_modules/lit-html/directives/class-map.js","../../icons/lib/assets/arrow-right.js","../../icons/lib/assets/keyboard-option.js","../src/command-menu/CommandMenuAction.ts"],"sourcesContent":["import{noChange as t}from\"../lit-html.js\";import{directive as i,Directive as s,PartType as r}from\"../directive.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=i(class extends s{constructor(t){var i;if(super(t),t.type!==r.ATTRIBUTE||\"class\"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error(\"`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.\")}render(t){return\" \"+Object.keys(t).filter((i=>t[i])).join(\" \")+\" \"}update(i,[s]){var r,o;if(void 0===this.st){this.st=new Set,void 0!==i.strings&&(this.et=new Set(i.strings.join(\" \").split(/\\s/).filter((t=>\"\"!==t))));for(const t in s)s[t]&&!(null===(r=this.et)||void 0===r?void 0:r.has(t))&&this.st.add(t);return this.render(s)}const e=i.element.classList;this.st.forEach((t=>{t in s||(e.remove(t),this.st.delete(t))}));for(const t in s){const i=!!s[t];i===this.st.has(t)||(null===(o=this.et)||void 0===o?void 0:o.has(t))||(i?(e.add(t),this.st.add(t)):(e.remove(t),this.st.delete(t)))}return t}});export{o as classMap};\n//# sourceMappingURL=class-map.js.map\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m38.5 7 60.9 58.044a7 7 0 0 1 0 9.912L38.5 133\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"14\"/></svg>'\nexport const title = \"arrow-right\"\nexport const tags = \"nordicon arrow right caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(14,0,0,14,0,0)\"><path d=\"M0.5 3L3 3 6.5 7 9.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M6.5 3L9.5 3\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></g></svg>'\nexport const title = \"keyboard-option\"\nexport const tags = \"nordicon keyboard option key shortcut\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport * as chevronIcon from \"@nordhealth/icons/lib/assets/arrow-right.js\"\nimport * as altKeyIcon from \"@nordhealth/icons/lib/assets/keyboard-option.js\"\n\nimport { ICommandMenuAction } from \"./ICommandMenuAction.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./CommandMenuAction.css\"\n\nconst KEY_REGEX = /(?:Key|Digit)([A-Z0-9])/g\nconst isMacintosh = () => navigator.platform.indexOf(\"Mac\") > -1\n\nIcon.registerIcon(chevronIcon)\nIcon.registerIcon(altKeyIcon)\n\n/**\n * Command Menu Action displays a single action that can be executed by the user. For usage examples, please see Command Menu component.\n *\n * @status internal\n */\n@customElement(\"nord-command-menu-action\")\nexport default class CommandMenuAction extends LitElement {\n  static styles = style\n\n  @property({ type: Object })\n  command!: ICommandMenuAction\n\n  @property({ type: Boolean })\n  selected = false\n\n  /**\n   * Scroll to show element\n   */\n  private ensureInView() {\n    requestAnimationFrame(() => this.scrollIntoView({ block: \"nearest\" }))\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(\"selected\") && this.selected) {\n      this.ensureInView()\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          \"n-selected\": this.selected,\n          \"n-command\": true,\n        })}\n      >\n        <div aria-hidden=\"true\" class=\"n-command-icon\">\n          <nord-icon size=\"s\" name=${this.command.icon ?? chevronIcon.title}></nord-icon>\n        </div>\n        <div class=\"n-title\">${this.command.title}</div>\n        ${this.renderShortcut()}\n      </div>\n    `\n  }\n\n  private renderShortcut() {\n    if (!this.command.hotkey) {\n      return nothing\n    }\n\n    const keys = this.command.hotkey.replace(KEY_REGEX, \"$1\")\n\n    return html`\n      <nord-visually-hidden>, ${keys}</nord-visually-hidden>\n\n      <div aria-hidden=\"true\" class=\"n-hotkeys\">\n        ${keys\n          .split(\"+\")\n          .map(\n            key =>\n              html`<div class=\"n-hotkey\">\n                ${key.toLowerCase() === \"alt\" && isMacintosh()\n                  ? html`<nord-icon name=${altKeyIcon.title} size=\"s\"></nord-icon>`\n                  : key}\n              </div>`\n          )}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-command-menu-action\": CommandMenuAction\n  }\n}\n"],"names":["o","i","s","constructor","t","super","type","r","ATTRIBUTE","name","strings","length","Error","render","Object","keys","filter","join","update","this","st","Set","et","split","has","add","e","element","classList","forEach","remove","delete","KEY_REGEX","Icon","registerIcon","chevronIcon","altKeyIcon","CommandMenuAction","LitElement","ensureInView","requestAnimationFrame","scrollIntoView","block","updated","changedProperties","selected","html","classMap","command","icon","title","renderShortcut","hotkey","nothing","replace","map","key","toLowerCase","navigator","platform","indexOf","style","__decorate","property","Boolean","customElement"],"mappings":";;;;;GAKQ,MAACA,EAAEC,EAAE,cAAcC,EAAEC,YAAYC,GAAG,IAAIH,EAAE,GAAGI,MAAMD,GAAGA,EAAEE,OAAOC,EAAEC,WAAW,UAAUJ,EAAEK,OAAO,QAAQR,EAAEG,EAAEM,eAAU,IAAST,OAAE,EAAOA,EAAEU,QAAQ,EAAE,MAAMC,MAAM,sGAAsGC,OAAOT,GAAG,MAAM,IAAIU,OAAOC,KAAKX,GAAGY,QAAQf,GAAGG,EAAEH,KAAKgB,KAAK,KAAK,IAAIC,OAAOjB,GAAGC,IAAI,IAAIK,EAAEP,EAAE,QAAG,IAASmB,KAAKC,GAAG,CAACD,KAAKC,GAAG,IAAIC,SAAI,IAASpB,EAAES,UAAUS,KAAKG,GAAG,IAAID,IAAIpB,EAAES,QAAQO,KAAK,KAAKM,MAAM,MAAMP,QAAQZ,GAAG,KAAKA,MAAM,IAAI,MAAMA,KAAKF,EAAEA,EAAEE,MAAM,QAAQG,EAAEY,KAAKG,UAAK,IAASf,OAAE,EAAOA,EAAEiB,IAAIpB,KAAKe,KAAKC,GAAGK,IAAIrB,GAAG,OAAOe,KAAKN,OAAOX,GAAG,MAAMwB,EAAEzB,EAAE0B,QAAQC,UAAUT,KAAKC,GAAGS,SAASzB,IAAIA,KAAKF,IAAIwB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,OAAO,IAAI,MAAMA,KAAKF,EAAE,CAAC,MAAMD,IAAIC,EAAEE,GAAGH,IAAIkB,KAAKC,GAAGI,IAAIpB,KAAK,QAAQJ,EAAEmB,KAAKG,UAAK,IAAStB,OAAE,EAAOA,EAAEwB,IAAIpB,MAAMH,GAAGyB,EAAED,IAAIrB,GAAGe,KAAKC,GAAGK,IAAIrB,KAAKsB,EAAEI,OAAO1B,GAAGe,KAAKC,GAAGW,OAAO3B,KAAK,OAAOA,iDCL90B,0OACM,mBACD,qGCFL,8VACM,uBACD,m2CCUd4B,EAAY,2BAGlBC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAQlB,IAAqBC,EAArB,cAA+CC,EAA/CnC,kCAOEgB,eAAW,EAKHoB,eACNC,uBAAsB,IAAMrB,KAAKsB,eAAe,CAAEC,MAAO,cAGlDC,QAAQC,GACXA,EAAkBpB,IAAI,aAAeL,KAAK0B,UAC5C1B,KAAKoB,eAIA1B,eACP,OAAOiC,CAAI,eAECC,EAAS,CACf,aAAc5B,KAAK0B,SACnB,aAAa,2FAIc1B,KAAK6B,QAAQC,oBFtD7B,yDEwDU9B,KAAK6B,QAAQE,cAClC/B,KAAKgC,yBAKLA,iBACN,IAAKhC,KAAK6B,QAAQI,OAChB,OAAOC,EAGT,MAAMtC,EAAOI,KAAK6B,QAAQI,OAAOE,QAAQtB,EAAW,MAEpD,OAAOc,CAAI,2BACiB/B,qEAGtBA,EACCQ,MAAM,KACNgC,KACCC,GACEV,CAAI,yBACsB,QAAtBU,EAAIC,eAlEIC,UAAUC,SAASC,QAAQ,QAAU,EAmE3Cd,CAAI,oBD/EH,2CCgFDU,sBAxDXnB,SAASwB,EAGhBC,GADCC,EAAS,CAAEzD,KAAMQ,wCAIlBgD,GADCC,EAAS,CAAEzD,KAAM0D,0CANC3B,KADpB4B,EAAc,6BACM5B,SAAAA"}

package/lib/CommandMenuAction.js

@@ -1,2 +1,2 @@
-import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";export{C as default}from"./CommandMenuAction-f4f42d6b.js";import"./Icon-6e1f3f35.js";import"./VisuallyHidden.js";import"./directive-40a31ee2.js";import"./unsafe-html-7028f0a1.js";
+import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";export{C as default}from"./CommandMenuAction-879382c7.js";import"./Icon-f6f1c764.js";import"./VisuallyHidden.js";import"./directive-40a31ee2.js";import"./unsafe-html-7028f0a1.js";
 //# sourceMappingURL=CommandMenuAction.js.map

package/lib/Icon-f6f1c764.js

@@ -0,0 +1,7 @@
+import{r as e,D as i,p as s,_ as t,n as o,s as r}from"./DraftComponentMixin-4bb26f5d.js";import{e as n}from"./property-03f59dce.js";import{l}from"./directive-40a31ee2.js";import{o as a}from"./unsafe-html-7028f0a1.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function c(e){return n({...e,state:!0})}const h=e`:host{all:initial;display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size);line-height:var(--n-line-height);color:inherit}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="m"]){--n-icon-size:var(--n-size-icon-m)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let d=v=class extends(i(r)){constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,i){let s,t;if("string"==typeof e?(s=e,t=i):(s=e.title,t=e.default),!s)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");v.registeredIcons.has(s)||v.registeredIcons.set(s,t)}willUpdate(e){if(!e.has("name"))return;const i=this.resolve();"string"==typeof i?this.svg=i:i.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return s`<div role="${l(this.label?"img":void 0)}" aria-label="${l(this.label)}"><slot style="${l(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${a(this.svg)}</slot></div>`}resolve(){return this.name?v.registeredIcons.has(this.name)?v.registeredIcons.get(this.name):v.resolver(this.name):""}};d.styles=h,d.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.1/assets/${e}.svg`).then((e=>e.text())),d.registeredIcons=new Map,t([n({reflect:!0})],d.prototype,"name",void 0),t([n({reflect:!0})],d.prototype,"size",void 0),t([n({reflect:!0})],d.prototype,"color",void 0),t([n({reflect:!0})],d.prototype,"label",void 0),t([c()],d.prototype,"svg",void 0),d=v=t([o("nord-icon")],d);var p=d;export{p as I,c as t};
+//# sourceMappingURL=Icon-f6f1c764.js.map

package/lib/{Icon-6e1f3f35.js.map → Icon-f6f1c764.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Icon-6e1f3f35.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js","../src/icon/Icon.ts"],"sourcesContent":["import{property as r}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function t(t){return r({...t,state:!0})}export{t as state};\n//# sourceMappingURL=state.js.map\n","import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport styles from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status draft\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends DraftComponentMixin(LitElement) {\n  static styles = styles\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["t","r","state","Icon","DraftComponentMixin","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","styles","fetch","response","text","Map","__decorate","property","reflect","customElement"],"mappings":";;;;;GAKG,SAASA,EAAEA,GAAG,OAAOC,EAAE,IAAID,EAAEE,OAAM,ylBCoBtC,IAAqBC,IAArB,cAAkCC,EAAoBC,IAAtDC,kCA0D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAjE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAiBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAjHJV,SAASgC,EAEDhC,WAhBIU,GACnBuB,MAAM,6CAAmEvB,SAAYY,MAAKY,GAAYA,EAASC,SAgBhGnC,kBAAkB,IAAIoC,IAsDRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARtC,+BA7EkBC,OADpBwC,EAAc,cACMxC,SAAAA"}
+{"version":3,"file":"Icon-f6f1c764.js","sources":["../node_modules/@lit/reactive-element/decorators/state.js","../src/icon/Icon.ts"],"sourcesContent":["import{property as r}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function t(t){return r({...t,state:!0})}export{t as state};\n//# sourceMappingURL=state.js.map\n","import { html, LitElement, PropertyValues } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport styles from \"./Icon.css\"\n\n// in dev we should just load from node_modules\nconst loadIcon = (name: string) => import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => response.text())\n\nexport type IconResolver = ((iconName: string) => string) | ((iconName: string) => Promise<string>)\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status draft\n * @category image\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends DraftComponentMixin(LitElement) {\n  static styles = styles\n\n  private static resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n  private static registeredIcons = new Map<string, string>()\n\n  /**\n   * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n   * Can return a string synchronously, or a promise of a string.\n   * By default, will load icons from the Nord CDN.\n   * @param resolver The resolver function to register.\n   */\n  static registerResolver(resolver: IconResolver) {\n    Icon.resolver = resolver\n  }\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n   * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n   */\n  static registerIcon(icon: { title: string; default: string }): void\n\n  /**\n   * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n   * @param name The name of the icon to be registered.\n   * @param icon The SVG string for the icon.\n   */\n  static registerIcon(name: string, icon: string): void\n\n  static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    if (!Icon.registeredIcons.has(name)) {\n      Icon.registeredIcons.set(name, svg)\n    }\n  }\n\n  /**\n   * The name of the icon to display, as defined by nordicons.\n   */\n  @property({ reflect: true }) name: string = \"\"\n\n  /**\n   * The size of the icon.\n   */\n  @property({ reflect: true }) size: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n  /**\n   * The color of the icon.\n   * Can accept any valid CSS color value, including custom properties.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the icon.\n   * If no label is supplied, the icon is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  @state() private svg: string = \"\"\n\n  override willUpdate(changedProperties: PropertyValues<this>) {\n    if (!changedProperties.has(\"name\")) {\n      return\n    }\n\n    const resolved = this.resolve()\n\n    if (typeof resolved === \"string\") {\n      this.svg = resolved\n    } else {\n      resolved\n        .then(svg => {\n          this.svg = svg\n        })\n        .catch(() => {\n          this.svg = \"\"\n        })\n    }\n  }\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    // we always hide the inner svg, since the svg does not have any text/title/label itself.\n    return html`\n      <div role=${ifDefined(this.label ? \"img\" : undefined)} aria-label=${ifDefined(this.label)}>\n        <slot style=${ifDefined(this.color ? `color:${this.color}` : undefined)} aria-hidden=\"true\">\n          ${unsafeHTML(this.svg)}\n        </slot>\n      </div>\n    `\n  }\n\n  private resolve(): string | Promise<string> {\n    if (!this.name) {\n      return \"\"\n    }\n\n    if (Icon.registeredIcons.has(this.name)) {\n      return Icon.registeredIcons.get(this.name) as string // we know it is there, so cast to string to keep TS happy.\n    }\n\n    return Icon.resolver(this.name)\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-icon\": Icon\n  }\n}\n"],"names":["t","r","state","Icon","DraftComponentMixin","LitElement","constructor","this","static","resolver","Icon_1","iconOrName","icon","name","svg","title","default","Error","registeredIcons","has","set","willUpdate","changedProperties","resolved","resolve","then","catch","render","html","ifDefined","label","undefined","color","unsafeHTML","get","styles","fetch","response","text","Map","__decorate","property","reflect","customElement"],"mappings":";;;;;GAKG,SAASA,EAAEA,GAAG,OAAOC,EAAE,IAAID,EAAEE,OAAM,6kBCoBtC,IAAqBC,IAArB,cAAkCC,EAAoBC,IAAtDC,kCA0D+BC,UAAe,GAKfA,UAA8C,IAc1DA,SAAc,GAjE/BC,wBAAwBC,GACtBC,EAAKD,SAAWA,EAiBlBD,oBAAoBG,EAAyDC,GAC3E,IAAIC,EACAC,EAWJ,GAT0B,iBAAfH,GACTE,EAAOF,EACPG,EAAMF,IAENC,EAAOF,EAAWI,MAClBD,EAAMH,EAAWK,UAIdH,EACH,MAAM,IAAII,MAAM,6CAElB,IAAKH,EACH,MAAM,IAAIG,MAAM,0BAGbP,EAAKQ,gBAAgBC,IAAIN,IAC5BH,EAAKQ,gBAAgBE,IAAIP,EAAMC,GA4B1BO,WAAWC,GAClB,IAAKA,EAAkBH,IAAI,QACzB,OAGF,MAAMI,EAAWhB,KAAKiB,UAEE,iBAAbD,EACThB,KAAKO,IAAMS,EAEXA,EACGE,MAAKX,IACJP,KAAKO,IAAMA,KAEZY,OAAM,KACLnB,KAAKO,IAAM,MAKnBa,SAIE,OAAOC,CAAI,cACGC,EAAUtB,KAAKuB,MAAQ,WAAQC,mBAAyBF,EAAUtB,KAAKuB,wBACnED,EAAUtB,KAAKyB,MAAQ,SAASzB,KAAKyB,aAAUD,0BACzDE,EAAW1B,KAAKO,oBAMlBU,UACN,OAAKjB,KAAKM,KAINH,EAAKQ,gBAAgBC,IAAIZ,KAAKM,MACzBH,EAAKQ,gBAAgBgB,IAAI3B,KAAKM,MAGhCH,EAAKD,SAASF,KAAKM,MAPjB,KAjHJV,SAASgC,EAEDhC,WAhBIU,GACnBuB,MAAM,6CAAmEvB,SAAYY,MAAKY,GAAYA,EAASC,SAgBhGnC,kBAAkB,IAAIoC,IAsDRC,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAEZF,GAARtC,+BA7EkBC,OADpBwC,EAAc,cACMxC,SAAAA"}

package/lib/Icon.js

@@ -1,2 +1,2 @@
-import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";export{I as default}from"./Icon-6e1f3f35.js";import"./directive-40a31ee2.js";import"./unsafe-html-7028f0a1.js";
+import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";export{I as default}from"./Icon-f6f1c764.js";import"./directive-40a31ee2.js";import"./unsafe-html-7028f0a1.js";
 //# sourceMappingURL=Icon.js.map

package/lib/Input.js

@@ -1,2 +1,2 @@
-import{r as e,D as n,T as t,p as r,_ as o,n as i,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as l}from"./property-03f59dce.js";import{l as s}from"./directive-40a31ee2.js";import{n as d}from"./ref-857246ae.js";import{o as c}from"./unsafe-html-7028f0a1.js";import{I as p,F as h}from"./InputMixin-3e737480.js";import{F as v}from"./FormAssociatedMixin-c9674b41.js";import"./VisuallyHidden.js";import"./events.js";const u=e`:host{all:initial;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-caption{font-size:var(--n-font-size-s);line-height:1.3}.n-label-container{padding-block-end:calc(var(--n-space-s) * 1.5);display:inline-block}label{display:block;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);line-height:var(--n-line-height-heading)}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-input-container{position:relative}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){input{font-size:var(--n-font-size-l)}}:host([expand]) input{display:block;inline-size:100%}.n-label-container:hover+.n-input-container input,input:hover{--n-input-border-color:var(--n-color-border-hover)}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)}input::placeholder{color:var(--n-color-text-weaker)}input:focus::placeholder{color:var(--n-color-text-weakest)}input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}input::-webkit-search-cancel-button,input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:calc(var(--n-space-s) * 1.5);block-size:100%;pointer-events:none}slot[name=before]+input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-input);inline-size:var(--n-size-icon-input);color:var(--n-color-icon)}input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)}.n-error{margin-block-start:calc(var(--n-space-s));color:var(--n-color-text-error)}`;let b=class extends(v(p(h(n(a))))){constructor(){super(...arguments),this.type="text",this.hideLabel=!1,this.expand=!1}render(){var e;const n=null!=this.hint||this.hasSlottedContent("hint"),o=null!=this.error||this.hasSlottedContent("error"),i="search"===this.type||this.hasSlottedContent("before"),a="number"===this.type,l="search"===this.type?c('<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>'):t;let p;return n&&o?p="hint error":n?p="hint":o&&(p="error"),r`${this.renderLabel(n)}<div class="n-input-container">${i?r`<slot name="before" @slotchange="${this.handleSlotChange}">${l}</slot>`:t} <input ${d(this.focusableRef)} id="input" type="${a?"text":this.type}" inputmode="${s(a?"numeric":void 0)}" pattern="${s(a?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${s(p)}" aria-invalid="${s(o?"true":void 0)}"></div>${o?this.renderError():t}`}renderLabel(e){const n=r`<label for="input"><slot name="label">${this.label}</slot></label> ${e?this.renderHint():t}`;return this.hideLabel?r`<nord-visually-hidden>${n}</nord-visually-hidden>`:r`<div class="n-label-container">${n}</div>`}renderHint(){return r`<div class="n-caption n-hint" id="hint"><slot name="hint" @slotchange="${this.handleSlotChange}">${this.hint}</slot></div>`}renderError(){return r`<div class="n-caption n-error" id="error" role="alert"><slot name="error" @slotchange="${this.handleSlotChange}">${this.error}</slot></div>`}handleSlotChange(){this.requestUpdate()}hasSlottedContent(e){return null!=this.querySelector(`[slot="${e}"]`)}};b.styles=u,o([l()],b.prototype,"type",void 0),o([l()],b.prototype,"hint",void 0),o([l({type:Boolean,attribute:"hide-label"})],b.prototype,"hideLabel",void 0),o([l()],b.prototype,"placeholder",void 0),o([l()],b.prototype,"error",void 0),o([l({reflect:!0,type:Boolean})],b.prototype,"expand",void 0),b=o([i("nord-input")],b);var f=b;export{f as default};
+import{r as e,D as n,T as r,p as t,_ as o,n as i,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as l}from"./property-03f59dce.js";import{l as s}from"./directive-40a31ee2.js";import{n as d}from"./ref-857246ae.js";import{o as c}from"./unsafe-html-7028f0a1.js";import{I as p,F as h}from"./InputMixin-3e737480.js";import{F as v}from"./FormAssociatedMixin-c9674b41.js";import"./VisuallyHidden.js";import"./events.js";const u=e`:host{all:initial;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-caption{font-size:var(--n-font-size-s);line-height:1.3}.n-label-container{padding-block-end:calc(var(--n-space-s) * 1.5);display:inline-block}label{display:block;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);line-height:var(--n-line-height-heading)}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-input-container{position:relative}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){input{font-size:var(--n-font-size-l)}}:host([expand]) input{display:block;inline-size:100%}.n-label-container:hover+.n-input-container input,input:hover{--n-input-border-color:var(--n-color-border-hover)}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)}input::placeholder{color:var(--n-color-text-weaker)}input:focus::placeholder{color:var(--n-color-text-weakest)}input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}input::-webkit-search-cancel-button,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]+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)}input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)}.n-label-container:hover+.n-input-container input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)}.n-error{margin-block-start:calc(var(--n-space-s));color:var(--n-color-text-error)}`;let b=class extends(v(p(h(n(a))))){constructor(){super(...arguments),this.type="text",this.hideLabel=!1,this.expand=!1}render(){var e;const n=null!=this.hint||this.hasSlottedContent("hint"),o=null!=this.error||this.hasSlottedContent("error"),i="search"===this.type||this.hasSlottedContent("before"),a="number"===this.type,l="search"===this.type?c('<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>'):r;let p;return n&&o?p="hint error":n?p="hint":o&&(p="error"),t`${this.renderLabel(n)}<div class="n-input-container">${i?t`<slot name="before" @slotchange="${this.handleSlotChange}">${l}</slot>`:r} <input ${d(this.focusableRef)} id="input" type="${a?"text":this.type}" inputmode="${s(a?"numeric":void 0)}" pattern="${s(a?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${s(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${s(p)}" aria-invalid="${s(o?"true":void 0)}"></div>${o?this.renderError():r}`}renderLabel(e){const n=t`<label for="input"><slot name="label">${this.label}</slot></label> ${e?this.renderHint():r}`;return this.hideLabel?t`<nord-visually-hidden>${n}</nord-visually-hidden>`:t`<div class="n-label-container">${n}</div>`}renderHint(){return t`<div class="n-caption n-hint" id="hint"><slot name="hint" @slotchange="${this.handleSlotChange}">${this.hint}</slot></div>`}renderError(){return t`<div class="n-caption n-error" id="error" role="alert"><slot name="error" @slotchange="${this.handleSlotChange}">${this.error}</slot></div>`}handleSlotChange(){this.requestUpdate()}hasSlottedContent(e){return null!=this.querySelector(`[slot="${e}"]`)}};b.styles=u,o([l()],b.prototype,"type",void 0),o([l()],b.prototype,"hint",void 0),o([l({type:Boolean,attribute:"hide-label"})],b.prototype,"hideLabel",void 0),o([l()],b.prototype,"placeholder",void 0),o([l()],b.prototype,"error",void 0),o([l({reflect:!0,type:Boolean})],b.prototype,"expand",void 0),b=o([i("nord-input")],b);var f=b;export{f 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 \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./Input.css\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\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 = style\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  /**\n   * Optional hint text to be displayed with input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n  /**\n   * Placeholder of the input.\n   */\n  @property() placeholder?: string\n\n  /**\n   * Optional error to be shown with input. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const hasHint = this.hint != null || this.hasSlottedContent(\"hint\")\n    const hasError = this.error != null || this.hasSlottedContent(\"error\")\n    const hasIcon = this.type === \"search\" || this.hasSlottedContent(\"before\")\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    let describedBy: string | undefined\n\n    if (hasHint && hasError) {\n      describedBy = \"hint error\"\n    } else if (hasHint) {\n      describedBy = \"hint\"\n    } else if (hasError) {\n      describedBy = \"error\"\n    }\n\n    return html`\n      ${this.renderLabel(hasHint)}\n\n      <div class=\"n-input-container\">\n        ${hasIcon ? html`<slot name=\"before\" @slotchange=${this.handleSlotChange}>${defaultIcon}</slot>` : nothing}\n        <input\n          ${ref(this.focusableRef)}\n          id=\"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(describedBy)}\n          aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        />\n      </div>\n\n      ${hasError ? this.renderError() : nothing}\n    `\n  }\n\n  private renderLabel(hasHint: boolean) {\n    const label = html`\n      <label for=\"input\">\n        <slot name=\"label\">${this.label}</slot>\n      </label>\n\n      ${hasHint ? this.renderHint() : nothing}\n    `\n\n    return this.hideLabel\n      ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n      : html`<div class=\"n-label-container\">${label}</div>`\n  }\n\n  private renderHint() {\n    return html`\n      <div class=\"n-caption n-hint\" id=\"hint\">\n        <slot name=\"hint\" @slotchange=${this.handleSlotChange}>${this.hint}</slot>\n      </div>\n    `\n  }\n\n  private renderError() {\n    return html`\n      <div class=\"n-caption n-error\" id=\"error\" role=\"alert\">\n        <slot name=\"error\" @slotchange=${this.handleSlotChange}>${this.error}</slot>\n      </div>\n    `\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate()\n  }\n\n  private hasSlottedContent(slotName: string) {\n    return this.querySelector(`[slot=\"${slotName}\"]`) != null\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","hasHint","hint","hasSlottedContent","hasError","error","hasIcon","type","isNumber","defaultIcon","unsafeHTML","nothing","describedBy","html","renderLabel","handleSlotChange","ref","focusableRef","ifDefined","undefined","disabled","required","name","value","placeholder","handleChange","renderError","label","renderHint","hideLabel","requestUpdate","slotName","querySelector","style","__decorate","property","Boolean","attribute","reflect","customElement"],"mappings":"mwFA2BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAArGC,kCAMcC,UAA4E,OAUlCA,gBAAY,EAetBA,aAAS,EAErDC,eACE,MAAMC,EAAuB,MAAbF,KAAKG,MAAgBH,KAAKI,kBAAkB,QACtDC,EAAyB,MAAdL,KAAKM,OAAiBN,KAAKI,kBAAkB,SACxDG,EAAwB,WAAdP,KAAKQ,MAAqBR,KAAKI,kBAAkB,UAC3DK,EAAyB,WAAdT,KAAKQ,KAChBE,EAA4B,WAAdV,KAAKQ,KAAoBG,ECjElC,iQDiE2DC,EAEtE,IAAIC,EAUJ,OARIX,GAAWG,EACbQ,EAAc,aACLX,EACTW,EAAc,OACLR,IACTQ,EAAc,SAGTC,CAAI,GACPd,KAAKe,YAAYb,oCAGfK,EAAUO,CAAI,oCAAmCd,KAAKgB,qBAAoBN,WAAuBE,YAE/FK,EAAIjB,KAAKkB,kCAEJT,EAAW,OAAST,KAAKQ,oBACpBW,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BpB,KAAKqB,wBACLrB,KAAKsB,mBACVH,EAAUnB,KAAKuB,4BACbvB,KAAKwB,qBAAS,oBACTL,EAAUnB,KAAKyB,0BACnBzB,KAAK0B,mCACIP,EAAUN,qBACdM,EAAUd,EAAW,YAASe,aAI/Cf,EAAWL,KAAK2B,cAAgBf,IAI9BG,YAAYb,GAClB,MAAM0B,EAAQd,CAAI,yCAEOd,KAAK4B,wBAG1B1B,EAAUF,KAAK6B,aAAejB,IAGlC,OAAOZ,KAAK8B,UACRhB,CAAI,yBAAyBc,2BAC7Bd,CAAI,kCAAkCc,UAGpCC,aACN,OAAOf,CAAI,0EAEyBd,KAAKgB,qBAAoBhB,KAAKG,oBAK5DwB,cACN,OAAOb,CAAI,0FAE0Bd,KAAKgB,qBAAoBhB,KAAKM,qBAK7DU,mBACNhB,KAAK+B,gBAGC3B,kBAAkB4B,GACxB,OAAqD,MAA9ChC,KAAKiC,cAAc,UAAUD,SA9G/BvC,SAASyC,EAKJC,GAAXC,gCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAE5B,KAAM6B,QAASC,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAK2CD,GAA3CC,EAAS,CAAEG,SAAS,EAAM/B,KAAM6B,wCA/Bd5C,KADpB+C,EAAc,eACM/C,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 \"../visually-hidden/VisuallyHidden.js\"\n\nimport style from \"./Input.css\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\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 = style\n\n  /**\n   * The type of the input.\n   */\n  @property() type: \"text\" | \"email\" | \"password\" | \"tel\" | \"url\" | \"search\" | \"number\" = \"text\"\n\n  /**\n   * Optional hint text to be displayed with input. Alternatively use the hint slot.\n   */\n  @property() hint?: string\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n  /**\n   * Placeholder of the input.\n   */\n  @property() placeholder?: string\n\n  /**\n   * Optional error to be shown with input. Alternatively use the error slot.\n   */\n  @property() error?: string\n\n  /**\n   * Controls whether the input expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const hasHint = this.hint != null || this.hasSlottedContent(\"hint\")\n    const hasError = this.error != null || this.hasSlottedContent(\"error\")\n    const hasIcon = this.type === \"search\" || this.hasSlottedContent(\"before\")\n    const isNumber = this.type === \"number\"\n    const defaultIcon = this.type === \"search\" ? unsafeHTML(searchIcon) : nothing\n\n    let describedBy: string | undefined\n\n    if (hasHint && hasError) {\n      describedBy = \"hint error\"\n    } else if (hasHint) {\n      describedBy = \"hint\"\n    } else if (hasError) {\n      describedBy = \"error\"\n    }\n\n    return html`\n      ${this.renderLabel(hasHint)}\n\n      <div class=\"n-input-container\">\n        ${hasIcon ? html`<slot name=\"before\" @slotchange=${this.handleSlotChange}>${defaultIcon}</slot>` : nothing}\n        <input\n          ${ref(this.focusableRef)}\n          id=\"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(describedBy)}\n          aria-invalid=${ifDefined(hasError ? \"true\" : undefined)}\n        />\n      </div>\n\n      ${hasError ? this.renderError() : nothing}\n    `\n  }\n\n  private renderLabel(hasHint: boolean) {\n    const label = html`\n      <label for=\"input\">\n        <slot name=\"label\">${this.label}</slot>\n      </label>\n\n      ${hasHint ? this.renderHint() : nothing}\n    `\n\n    return this.hideLabel\n      ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n      : html`<div class=\"n-label-container\">${label}</div>`\n  }\n\n  private renderHint() {\n    return html`\n      <div class=\"n-caption n-hint\" id=\"hint\">\n        <slot name=\"hint\" @slotchange=${this.handleSlotChange}>${this.hint}</slot>\n      </div>\n    `\n  }\n\n  private renderError() {\n    return html`\n      <div class=\"n-caption n-error\" id=\"error\" role=\"alert\">\n        <slot name=\"error\" @slotchange=${this.handleSlotChange}>${this.error}</slot>\n      </div>\n    `\n  }\n\n  private handleSlotChange() {\n    this.requestUpdate()\n  }\n\n  private hasSlottedContent(slotName: string) {\n    return this.querySelector(`[slot=\"${slotName}\"]`) != null\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","hasHint","hint","hasSlottedContent","hasError","error","hasIcon","type","isNumber","defaultIcon","unsafeHTML","nothing","describedBy","html","renderLabel","handleSlotChange","ref","focusableRef","ifDefined","undefined","disabled","required","name","value","placeholder","handleChange","renderError","label","renderHint","hideLabel","requestUpdate","slotName","querySelector","style","__decorate","property","Boolean","attribute","reflect","customElement"],"mappings":"w2FA2BA,IAAqBA,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAArGC,kCAMcC,UAA4E,OAUlCA,gBAAY,EAetBA,aAAS,EAErDC,eACE,MAAMC,EAAuB,MAAbF,KAAKG,MAAgBH,KAAKI,kBAAkB,QACtDC,EAAyB,MAAdL,KAAKM,OAAiBN,KAAKI,kBAAkB,SACxDG,EAAwB,WAAdP,KAAKQ,MAAqBR,KAAKI,kBAAkB,UAC3DK,EAAyB,WAAdT,KAAKQ,KAChBE,EAA4B,WAAdV,KAAKQ,KAAoBG,ECjElC,iQDiE2DC,EAEtE,IAAIC,EAUJ,OARIX,GAAWG,EACbQ,EAAc,aACLX,EACTW,EAAc,OACLR,IACTQ,EAAc,SAGTC,CAAI,GACPd,KAAKe,YAAYb,oCAGfK,EAAUO,CAAI,oCAAmCd,KAAKgB,qBAAoBN,WAAuBE,YAE/FK,EAAIjB,KAAKkB,kCAEJT,EAAW,OAAST,KAAKQ,oBACpBW,EAAUV,EAAW,eAAYW,gBACnCD,EAAUV,EAAW,cAAWW,kBAC9BpB,KAAKqB,wBACLrB,KAAKsB,mBACVH,EAAUnB,KAAKuB,4BACbvB,KAAKwB,qBAAS,oBACTL,EAAUnB,KAAKyB,0BACnBzB,KAAK0B,mCACIP,EAAUN,qBACdM,EAAUd,EAAW,YAASe,aAI/Cf,EAAWL,KAAK2B,cAAgBf,IAI9BG,YAAYb,GAClB,MAAM0B,EAAQd,CAAI,yCAEOd,KAAK4B,wBAG1B1B,EAAUF,KAAK6B,aAAejB,IAGlC,OAAOZ,KAAK8B,UACRhB,CAAI,yBAAyBc,2BAC7Bd,CAAI,kCAAkCc,UAGpCC,aACN,OAAOf,CAAI,0EAEyBd,KAAKgB,qBAAoBhB,KAAKG,oBAK5DwB,cACN,OAAOb,CAAI,0FAE0Bd,KAAKgB,qBAAoBhB,KAAKM,qBAK7DU,mBACNhB,KAAK+B,gBAGC3B,kBAAkB4B,GACxB,OAAqD,MAA9ChC,KAAKiC,cAAc,UAAUD,SA9G/BvC,SAASyC,EAKJC,GAAXC,gCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAE5B,KAAM6B,QAASC,UAAW,gDAK1BH,GAAXC,uCAKWD,GAAXC,iCAK2CD,GAA3CC,EAAS,CAAEG,SAAS,EAAM/B,KAAM6B,wCA/Bd5C,KADpB+C,EAAc,eACM/C,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-6e1f3f35.js";export{default as CommandMenu}from"./CommandMenu.js";export{C as CommandMenuAction}from"./CommandMenuAction-f4f42d6b.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";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./directive-40a31ee2.js";import"./ref-857246ae.js";import"./InputMixin-3e737480.js";import"./unsafe-html-7028f0a1.js";import"./FormAssociatedMixin-c9674b41.js";import"./events.js";import"./collection.js";import"./number.js";import"./focus.js";import"./KeyboardController-28c7135b.js";import"./events2.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";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./directive-40a31ee2.js";import"./ref-857246ae.js";import"./InputMixin-3e737480.js";import"./unsafe-html-7028f0a1.js";import"./FormAssociatedMixin-c9674b41.js";import"./events.js";import"./collection.js";import"./number.js";import"./focus.js";import"./KeyboardController-28c7135b.js";import"./events2.js";
 //# sourceMappingURL=index.js.map

package/lib/src/button/Button.d.ts

@@ -17,7 +17,7 @@ export default class Button extends Button_base {
     /**
      * The style variant of the button.
      */
-    variant: "default" | "primary" | "dashed" | "plain";
+    variant: "default" | "primary" | "dashed" | "plain" | "danger";
     /**
      * The type of the button.
      */
@@ -26,7 +26,7 @@ export default class Button extends Button_base {
      * The size of the button.
      * This affects font-size and padding.
      */
-    size: "s" | "m";
+    size: "s" | "m" | "l";
     /**
      * When provided, renders the button as a link,
      * with it's href attribute set to the given value.

package/lib/src/button/Button.test.d.ts

@@ -1 +1,2 @@
 import "../stack/Stack.js";
+import "../icon/Icon.js";

package/lib/src/input/Input.test.d.ts

@@ -1 +1,2 @@
 import "../stack/Stack.js";
+import "../icon/Icon.js";

package/lib/src/table/Table.test.d.ts

@@ -2,3 +2,5 @@ import "../stack/Stack.js";
 import "../card/Card.js";
 import "../badge/Badge.js";
 import "../button/Button.js";
+import "../icon/Icon.js";
+import "../visually-hidden/VisuallyHidden.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.37",
   "description": "This package includes Nord Design System web components",
   "author": "Nordhealth <info@nordhealth.com>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -35,8 +35,8 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.5",
     "@nordhealth/fonts": "^2.0.9",
-    "@nordhealth/themes": "^3.0.1",
-    "@nordhealth/tokens": "^2.0.1",
+    "@nordhealth/themes": "^3.0.2",
+    "@nordhealth/tokens": "^2.0.2",
     "@open-wc/eslint-config": "^7.0.0",
     "@open-wc/testing": "^2.5.33",
     "@rollup/plugin-node-resolve": "^13.0.5",
@@ -137,5 +137,5 @@
       }
     ]
   },
-  "gitHead": "27ed0430f48a2c3ac67d3b9cbf6074b3a5de4fdc"
+  "gitHead": "6fed149e7490b085733544197e3ca603b9427b53"
 }

package/lib/Icon-6e1f3f35.js

@@ -1,7 +0,0 @@
-import{r as e,D as i,p as s,_ as t,n as o,s as r}from"./DraftComponentMixin-4bb26f5d.js";import{e as n}from"./property-03f59dce.js";import{l}from"./directive-40a31ee2.js";import{o as a}from"./unsafe-html-7028f0a1.js";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */function c(e){return n({...e,state:!0})}const h=e`:host{all:initial;display:inline-block;block-size:var(--n-icon-size);inline-size:var(--n-icon-size);line-height:var(--n-line-height);color:var(--n-color-text)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="m"]){--n-icon-size:var(--n-size-icon-m)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var v;let d=v=class extends(i(r)){constructor(){super(...arguments),this.name="",this.size="m",this.svg=""}static registerResolver(e){v.resolver=e}static registerIcon(e,i){let s,t;if("string"==typeof e?(s=e,t=i):(s=e.title,t=e.default),!s)throw new Error("name is required when registering an icon");if(!t)throw new Error("icon must not be empty");v.registeredIcons.has(s)||v.registeredIcons.set(s,t)}willUpdate(e){if(!e.has("name"))return;const i=this.resolve();"string"==typeof i?this.svg=i:i.then((e=>{this.svg=e})).catch((()=>{this.svg=""}))}render(){return s`<div role="${l(this.label?"img":void 0)}" aria-label="${l(this.label)}"><slot style="${l(this.color?`color:${this.color}`:void 0)}" aria-hidden="true">${a(this.svg)}</slot></div>`}resolve(){return this.name?v.registeredIcons.has(this.name)?v.registeredIcons.get(this.name):v.resolver(this.name):""}};d.styles=h,d.resolver=e=>fetch(`https://nordcdn.net/ds/icons/1.3.1/assets/${e}.svg`).then((e=>e.text())),d.registeredIcons=new Map,t([n({reflect:!0})],d.prototype,"name",void 0),t([n({reflect:!0})],d.prototype,"size",void 0),t([n({reflect:!0})],d.prototype,"color",void 0),t([n({reflect:!0})],d.prototype,"label",void 0),t([c()],d.prototype,"svg",void 0),d=v=t([o("nord-icon")],d);var p=d;export{p as I,c as t};
-//# sourceMappingURL=Icon-6e1f3f35.js.map