@nordhealth/components 1.0.0-beta.0 → 1.0.0-beta.3

package/custom-elements.json

@@ -190,6 +190,30 @@
             "name": "default",
             "module": "\"./navigation/Navigation.js\""
           }
+        },
+        {
+          "kind": "js",
+          "name": "Layout",
+          "declaration": {
+            "name": "default",
+            "module": "\"./layout/Layout.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EmptyState",
+          "declaration": {
+            "name": "default",
+            "module": "\"./empty-state/EmptyState.js\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Banner",
+          "declaration": {
+            "name": "default",
+            "module": "\"./banner/Banner.js\""
+          }
         }
       ]
     },
@@ -281,6 +305,94 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Use established color patterns so that users can clearly identify the importance level.\n- Always position badge so that it’s clear to understand what object it’s related to.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n\n</div>\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n<div class=\"n-usage n-usage-do\">Complete</div>\n<div class=\"n-usage n-usage-dont\">Action completed</div>\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Partially refunded</div>\n<div class=\"n-usage n-usage-dont\">Partially Refunded</div>\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Pending</div>\n<div class=\"n-usage n-usage-dont\">Item is pending</div>\n\nAlways describe the status in the past tense:\n\n<div class=\"n-usage n-usage-do\">Refunded</div>\n<div class=\"n-usage n-usage-dont\">Refund</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name        | Purpose                                                                                                                                 |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `info`      | The default variant. Used to convey general information that isn’t critical.                                                            |\n| `success`   | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful.                |\n| `highlight` | Used to highlight specific items in the interface, like notifications.                                                                  |\n| `danger`    | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning`   | Used to display information that needs a user’s attention attention and may require further steps.                                      |\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.",
+          "name": "Banner",
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"info\" | \"danger\" | \"success\" | \"warning\""
+              },
+              "default": "\"info\"",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "feedback",
+          "tagName": "nord-banner",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-banner",
+          "declaration": {
+            "name": "Banner",
+            "module": "src/banner/Banner.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/button/Button.ts",
@@ -686,114 +798,6 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name       | Purpose                                                                                                                                                                                                  |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default`  | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element.                                                                  |\n| `primary`  | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action.                                                                        |\n| `dashed`   | Dashed style should be used for actions that trigger filtering.                                                                                                                                          |\n| `danger`   | Danger style should be used for actions that delete data or otherwise make it hard to undo the action.                                                                                                   |\n| `plain`    | Used for less important or less common actions. Can be also used for linking to other pages.                                                                                                             |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/card/Card.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
-            },
-            {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
-            },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"header\")"
-            },
-            {
-              "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, \"footer\")"
-            },
-            {
-              "kind": "field",
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_warningLogged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "static": true,
-              "default": "false",
-              "inheritedFrom": {
-                "name": "DraftComponentMixin",
-                "module": "src/common/mixins/DraftComponentMixin.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "padding",
-              "type": {
-                "text": "\"m\" | \"l\" | \"none\""
-              },
-              "default": "\"m\"",
-              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DraftComponentMixin",
-              "module": "/src/common/mixins/DraftComponentMixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "status": "draft",
-          "category": "structure",
-          "tagName": "nord-card",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "nord-card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
-          }
-        }
-      ],
-      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
-    },
     {
       "kind": "javascript-module",
       "path": "src/calendar/Calendar.ts",
@@ -1273,6 +1277,114 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/card/Card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
+          "slots": [
+            {
+              "description": "The card content.",
+              "name": ""
+            },
+            {
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
+            },
+            {
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"header\")"
+            },
+            {
+              "kind": "field",
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, \"footer\")"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "padding",
+              "type": {
+                "text": "\"m\" | \"l\" | \"none\""
+              },
+              "default": "\"m\"",
+              "description": "Controls the padding of card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-card",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-card",
+          "declaration": {
+            "name": "Card",
+            "module": "src/card/Card.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to display content and actions on a single topic inside a container.\n- Use to visually separate specific parts of content in an application view.\n- Use to wrap a form into a container, for example a login form.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when you need to capture user’s attention in a prominent way.\n- Don’t use to inform user about important changes or conditions in the interface.\n- Don’t use multiple primary buttons inside a card. A card should only contain a single primary action.\n\n</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/checkbox/Checkbox.ts",
@@ -4493,6 +4605,72 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use the fieldset component when you need to create a relationship between multiple form inputs.\n- It is especially important to use with a group of radio components.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place interactive content (buttons, links etc) inside the label.\n- Don’t use with a checkbox component when there is **only one** checkbox. For example, when accepting terms and conditions.\n\n</div>\n\n-------\n\n## Content guidelines\n\nFieldset label should be clear, accurate and predictable. It should help the user to understand how the items in the fieldset are grouped together, or what kind of choice the user is making:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Choose</div>\n\nWhen writing fieldset labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick A Color</div>\n\nAvoid ending in punctuation if it’s a single sentence, word, or a fragment:\n\n<div class=\"n-usage n-usage-do\">Pick a color</div>\n<div class=\"n-usage n-usage-dont\">Pick a color.</div>\n\nDo not use colons in fieldset label:\n\n<div class=\"n-usage n-usage-do\">Payment details</div>\n<div class=\"n-usage n-usage-dont\">Payment details:</div>\n\n-------\n\n## Additional considerations\n\n- A label (which becomes to `<legend>` inside the fieldset) is always required.\n- Hint text can be used to offer further information or explanation for an option.\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/empty-state/EmptyState.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state should provide\nexplanation or guidance to help user progress.",
+          "name": "EmptyState",
+          "slots": [
+            {
+              "description": "default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "feedback",
+          "tagName": "nord-empty-state",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-empty-state",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "src/empty-state/EmptyState.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/header/Header.ts",
@@ -5466,6 +5644,80 @@
       ],
       "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to provide a text input where the expected input is short.\n- Use to only ask for information that’s really needed. Hide optional fields by default if possible or have them shown with a lower priority.\n- Use help text and placeholder to provide additional, non-critical instructions.\n- Validate input as soon as users have finished interacting with them (but not before).\n- Where necessary, label the input as “Optional” when you need to request input that’s not required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use when the expected text input is long. Use textarea component instead.\n- Don’t use the placeholder to provide information that’s required to use the input. Hint text should be used for this purpose instead.\n\n</div>\n\n---\n\n## Content guidelines\n\nInput labels act as a title for the text field. Labels should typically be short and in noun form:\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">What is your company name?</div>\n\nWhen writing input labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Company name</div>\n<div class=\"n-usage n-usage-dont\">Company Name</div>\n\nWhen an input isn’t part of a form and is placed individually on a page, you could provide the input label as a call to action:\n\n<div class=\"n-usage n-usage-do\">Leave a comment</div>\n<div class=\"n-usage n-usage-dont\">Comment</div>\n\nDo not use colons in input label:\n\n<div class=\"n-usage n-usage-do\">First name</div>\n<div class=\"n-usage n-usage-dont\">First name:</div>\n\n---\n\n## Types\n\nThis section describes the different input types, their purpose, and when to use each type.\n\n| Name       | Purpose                                                                                                                                                      |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `text`     | The default and most common variant. Displayed as a single-line text field. Line-breaks are automatically removed from the input value.                      |\n| `email`    | A field for editing an email address. Looks similar to a text input, but has validation parameters and relevant keyboard for devices with dynamic keyboards. |\n| `password` | A single-line text field where the value is obscured. This type will alert user if a site is not secure.                                                     |\n| `tel`      | A field for entering a telephone number. Displays a number keypad on mobile devices.                                                                         |\n| `url`      | A field variant that is used to let the user enter and edit an URL.                                                                                          |\n| `search`   | A single-line text field for entering search strings.                                                                                                        |\n| `number`   | Used to let the user enter a number.                                                                                                                         |\n"
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/layout/Layout.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Layout component is used to create the main layout of an app. Layout\ncurrently comes with one main configurations: one-column. Please note\nthat responsive behaviour is still under work.",
+          "name": "Layout",
+          "slots": [
+            {
+              "description": "The default main section content.",
+              "name": ""
+            },
+            {
+              "description": "Used to place content inside the navigation sidebar.",
+              "name": "nav"
+            },
+            {
+              "description": "Used to place content inside the header section.",
+              "name": "header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "structure",
+          "tagName": "nord-layout",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-layout",
+          "declaration": {
+            "name": "Layout",
+            "module": "src/layout/Layout.ts"
+          }
+        }
+      ],
+      "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- To visually group content in a layout section, use the Card component.\n- To lay out a set of smaller components, use the Stack component.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Never put layout component inside another HTML landmark.\n- Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.\n\n</div>\n\n---\n\n## Additional considerations\n\n- Layout component uses `<main>` element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.\n"
+    },
     {
       "kind": "javascript-module",
       "path": "src/nav-group/NavGroup.ts",

package/lib/Banner.js

@@ -0,0 +1,2 @@
+import{D as n,_ as r,n as a}from"./DraftComponentMixin-30345acf.js";import{r as o,$ as e,s as t}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{s}from"./Component-a19be7c9.js";const c=o`:host{--n-banner-padding:var(--n-space-m);--n-banner-background:var(--n-color-status-info-weak);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-banner{background:var(--n-banner-background);box-shadow:var(--n-box-shadow-card);border-radius:var(--n-border-radius);margin-block-start:var(--n-space-l);padding:var(--n-space-m) var(--n-space-l);inline-size:100%}.n-banner-content{inline-size:calc(100% - var(--n-space-xl))}nord-icon{transform:translateY(2px);color:var(--n-color-icon-hover)}::slotted(a){color:var(--n-color-text)!important;text-decoration:underline!important}:host([variant=success]){--n-banner-background:var(--n-color-status-success-weak)}:host([variant=danger]){--n-banner-background:var(--n-color-status-danger-weak)}:host([variant=warning]){--n-banner-background:var(--n-color-status-warning-weak)}`;let d=class extends(n(t)){constructor(){super(...arguments),this.variant="info"}render(){return e`<div class="n-banner"><nord-stack align-items="start" direction="horizontal"><nord-icon name="interface-warning" size="m" ?hidden="${"warning"!==this.variant}"></nord-icon><nord-icon name="interface-warning" size="m" ?hidden="${"danger"!==this.variant}"></nord-icon><nord-icon name="interface-info" size="m" ?hidden="${"info"!==this.variant}"></nord-icon><nord-icon name="interface-help-2" size="m" ?hidden="${"success"!==this.variant}"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};d.styles=[s,c],r([i({reflect:!0})],d.prototype,"variant",void 0),d=r([a("nord-banner")],d);var l=d;export{l as default};
+//# sourceMappingURL=Banner.js.map

package/lib/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Banner.css\"\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status draft\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-banner\")\nexport default class Banner extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * The style variant of the banner.\n   */\n  @property({ reflect: true }) variant: \"info\" | \"danger\" | \"success\" | \"warning\" = \"info\"\n\n  render() {\n    return html`\n      <div class=\"n-banner\">\n        <nord-stack align-items=\"start\" direction=\"horizontal\">\n          <nord-icon name=\"interface-warning\" size=\"m\" ?hidden=${this.variant !== \"warning\"}></nord-icon>\n          <nord-icon name=\"interface-warning\" size=\"m\" ?hidden=${this.variant !== \"danger\"}></nord-icon>\n          <nord-icon name=\"interface-info\" size=\"m\" ?hidden=${this.variant !== \"info\"}></nord-icon>\n          <nord-icon name=\"interface-help-2\" size=\"m\" ?hidden=${this.variant !== \"success\"}></nord-icon>\n          <div class=\"n-banner-content\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-banner\": Banner\n  }\n}\n"],"names":["Banner","DraftComponentMixin","LitElement","constructor","this","render","html","variant","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"yhCAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAM+BC,aAAqD,OAElFC,SACE,OAAOC,CAAI,sIAGmE,YAAjBF,KAAKG,8EACY,WAAjBH,KAAKG,2EACS,SAAjBH,KAAKG,6EACc,YAAjBH,KAAKG,8FAd5DP,SAAS,CAACQ,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,mCANFZ,KADpBa,EAAc,gBACMb,SAAAA"}

package/lib/Card.js

@@ -1,2 +1,2 @@
-import{D as o,_ as a,n as r}from"./DraftComponentMixin-30345acf.js";import{r as d,$ as n,s as t}from"./lit-element-9646ab7e.js";import{e}from"./property-03f59dce.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-a19be7c9.js";const l=d`:host{--n-card-padding:var(--n-space-m);--n-card-slot-padding:var(--n-space-m);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-card{background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-card)}@media (max-width:1000px){slot:not([name]){overflow-x:auto}}:host([padding="l"]){--n-card-padding:var(--n-space-l);--n-card-slot-padding:var(--n-space-l)}:host([padding=none]){--n-card-padding:0;--n-card-slot-padding:var(--n-space-m)}slot{display:block}slot[hidden]{display:none}slot:not([name]){padding:var(--n-card-padding)}slot[name=header]{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--n-card-slot-padding)}slot[name=footer]{padding:var(--n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}`;let p=class extends(o(t)){constructor(){super(...arguments),this.headerSlot=new s(this,"header"),this.footerSlot=new s(this,"footer"),this.padding="m"}render(){return n`<div class="n-card"><slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><slot></slot><slot name="footer" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};p.styles=[i,l],a([e({reflect:!0})],p.prototype,"padding",void 0),p=a([r("nord-card")],p);var c=p;export{c as default};
+import{D as o,_ as a,n as r}from"./DraftComponentMixin-30345acf.js";import{r as t,$ as n,s as d}from"./lit-element-9646ab7e.js";import{e}from"./property-03f59dce.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-a19be7c9.js";const l=t`:host{--n-card-padding:var(--n-space-m);--n-card-slot-padding:var(--n-space-m);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-card{background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-card)}@media (max-width:1000px){slot:not([name]){overflow-x:auto}}:host([padding="l"]){--n-card-padding:var(--n-space-l);--n-card-slot-padding:var(--n-space-l)}:host([padding=none]){--n-card-padding:0;--n-card-slot-padding:var(--n-space-m)}slot{display:block}slot[hidden]{display:none}slot:not([name]){padding:var(--n-card-padding)}slot[name=header]{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--n-card-slot-padding)}slot[name=footer]{padding:var(--n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let p=class extends(o(d)){constructor(){super(...arguments),this.headerSlot=new s(this,"header"),this.footerSlot=new s(this,"footer"),this.padding="m"}render(){return n`<div class="n-card"><slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><slot></slot><slot name="footer" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};p.styles=[i,l],a([e({reflect:!0})],p.prototype,"padding",void 0),p=a([r("nord-card")],p);var c=p;export{c as default};
 //# sourceMappingURL=Card.js.map

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status draft\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot footer - Optional slot that holds footer content for the card.\n */\n@customElement(\"nord-card\")\nexport default class Card extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  /**\n   * Controls the padding of card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n        <slot></slot>\n        <slot name=\"footer\" ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-card\": Card\n  }\n}\n"],"names":["Card","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","headerSlot","isEmpty","footerSlot","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"+oCAmBA,IAAqBA,EAArB,cAAkCC,EAAoBC,IAAtDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,gBAAa,IAAIC,EAAeD,KAAM,UAMjBA,aAA8B,IAE3DE,SACE,OAAOC,CAAI,oDAEuBH,KAAKI,WAAWC,6DAEhBL,KAAKM,WAAWD,2BAhB7CT,SAAS,CAACW,EAAgBC,GASJC,GAA5BC,EAAS,CAAEC,SAAS,mCAVFf,KADpBgB,EAAc,cACMhB,SAAAA"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Card.css\"\n\n/**\n * Cards are shadowed surfaces that display content and actions on a\n * single topic. They should be easy to scan for relevant and\n * actionable information.\n *\n * @status draft\n * @category structure\n * @slot - The card content.\n * @slot header - Optional slot that holds a header for the card.\n * @slot footer - Optional slot that holds footer content for the card.\n */\n@customElement(\"nord-card\")\nexport default class Card extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, \"header\")\n  private footerSlot = new SlotController(this, \"footer\")\n\n  /**\n   * Controls the padding of card component. When set to “none”,\n   * the header and footer slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"l\" | \"none\" = \"m\"\n\n  render() {\n    return html`\n      <div class=\"n-card\">\n        <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n        <slot></slot>\n        <slot name=\"footer\" ?hidden=${this.footerSlot.isEmpty}></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-card\": Card\n  }\n}\n"],"names":["Card","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","headerSlot","isEmpty","footerSlot","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"6vCAmBA,IAAqBA,EAArB,cAAkCC,EAAoBC,IAAtDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,gBAAa,IAAIC,EAAeD,KAAM,UAMjBA,aAA8B,IAE3DE,SACE,OAAOC,CAAI,oDAEuBH,KAAKI,WAAWC,6DAEhBL,KAAKM,WAAWD,2BAhB7CT,SAAS,CAACW,EAAgBC,GASJC,GAA5BC,EAAS,CAAEC,SAAS,mCAVFf,KADpBgB,EAAc,cACMhB,SAAAA"}

package/lib/EmptyState.js

@@ -0,0 +1,2 @@
+import{D as t,_ as e,n}from"./DraftComponentMixin-30345acf.js";import{r as a,$ as o,s as r}from"./lit-element-9646ab7e.js";import{s as i}from"./Component-a19be7c9.js";const s=a`:host{--n-empty-state-text-width:400px;background:var(--n-color-surface);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width)}`;let l=class extends(t(r)){render(){return o`<div class="n-empty-state"><slot></slot></div>`}};l.styles=[i,s],l=e([n("nord-empty-state")],l);var m=l;export{m as default};
+//# sourceMappingURL=EmptyState.js.map

package/lib/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state should provide\n * explanation or guidance to help user progress.\n *\n * @status draft\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-empty-state\">\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-empty-state\": EmptyState\n  }\n}\n"],"names":["EmptyState","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"giCAiBA,IAAqBA,EAArB,cAAwCC,EAAoBC,IAG1DC,SACE,OAAOC,CAAI,mDAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,qBACMP,SAAAA"}

package/lib/Header.js

@@ -1,2 +1,2 @@
-import{D as a,_ as e,n as o}from"./DraftComponentMixin-30345acf.js";import{r,$ as n,s}from"./lit-element-9646ab7e.js";import{S as t}from"./SlotController-5bfc47d1.js";import{s as i}from"./Component-a19be7c9.js";const l=r`:host{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let c=class extends(a(s)){constructor(){super(...arguments),this.actionSlot=new t(this,"action")}render(){return n`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};c.styles=[i,l],c=e([o("nord-header")],c);var d=c;export{d as default};
+import{D as o,_ as e,n as a}from"./DraftComponentMixin-30345acf.js";import{r,$ as t,s as n}from"./lit-element-9646ab7e.js";import{S as s}from"./SlotController-5bfc47d1.js";import{s as l}from"./Component-a19be7c9.js";const i=r`:host{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-actions{display:flex;flex-flow:row wrap;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--n-space-m) var(--n-space-l);background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--n-box-shadow-header);min-block-size:var(--n-space-xxl)}.n-header-actions{margin-inline-start:auto;gap:var(--n-space-s)}`;let c=class extends(o(n)){constructor(){super(...arguments),this.actionSlot=new s(this,"action")}render(){return t`<header class="n-header"><slot></slot><div class="n-header-actions" ?hidden="${this.actionSlot.isEmpty}"><slot name="action"></slot></div></header>`}};c.styles=[l,i],c=e([a("nord-header")],c);var d=c;export{d as default};
 //# sourceMappingURL=Header.js.map

package/lib/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"urBAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}
+{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status draft\n * @category structure\n * @slot - The header content.\n * @slot action - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private actionSlot = new SlotController(this, \"action\")\n\n  render() {\n    return html`\n      <header class=\"n-header\">\n        <slot></slot>\n        <div class=\"n-header-actions\" ?hidden=${this.actionSlot.isEmpty}>\n          <slot name=\"action\"></slot>\n        </div>\n      </header>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-header\": Header\n  }\n}\n"],"names":["Header","DraftComponentMixin","LitElement","constructor","this","SlotController","render","html","actionSlot","isEmpty","componentStyle","style","customElement"],"mappings":"0yBAiBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAAxDC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UAE9CE,SACE,OAAOC,CAAI,gFAGiCH,KAAKI,WAAWC,wDARvDT,SAAS,CAACU,EAAgBC,GADdX,KADpBY,EAAc,gBACMZ,SAAAA"}

package/lib/Layout.js

@@ -0,0 +1,2 @@
+import{D as n,_ as t,n as a}from"./DraftComponentMixin-30345acf.js";import{r as o,$ as e,s as i}from"./lit-element-9646ab7e.js";import{s}from"./Component-a19be7c9.js";const l=o`:host{--nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--nav-width))}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let r=class extends(n(i)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};r.styles=[s,l],r=t([a("nord-layout")],r);var d=r;export{d as default};
+//# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configurations: one-column. Please note\n * that responsive behaviour is still under work.\n *\n * @status draft\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`\n      <div class=\"n-layout\">\n        <div class=\"n-layout-nav\">\n          <slot name=\"nav\"></slot>\n        </div>\n        <div class=\"n-layout-main\">\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n"],"names":["Layout","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"0yBAmBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,+KAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,gBACMP,SAAAA"}