@nordhealth/components 4.16.1 → 4.17.0

package/custom-elements.json

@@ -873,6 +873,211 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/banner/Banner.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{ title: 'Components/Banner', component: 'nord-banner', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['info', 'danger', 'success', 'warning'], }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Playground",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'This is a banner message.', variant: 'info', }, render: args => html` <nord-banner variant=${args.variant}>${args.content}</nord-banner> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Basic",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-stack> <nord-banner variant=\"info\"> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> <nord-banner variant=\"danger\"> We’re experiencing an incident. Please see our <a href=\"#\">status page</a> for more details. </nord-banner> <nord-banner variant=\"warning\"> Payment details missing. To stay on your current plan, <a href=\"#\">add payment details</a>. </nord-banner> <nord-banner variant=\"success\"> Your order has been shipped and will arrive on May 27th. <a href=\"#\">Track order</a>. </nord-banner> </nord-stack> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "InfoBanner",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-banner> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "InsideCard",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-card> <h2 slot=\"header\">Paid invoices</h2> <nord-stack> <nord-banner variant=\"info\"> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> <nord-banner variant=\"danger\"> We’re experiencing an incident. Please see our <a href=\"#\">status page</a> for more details. </nord-banner> <nord-banner variant=\"warning\"> Payment details missing. To stay on your current plan, <a href=\"#\">add payment details</a>. </nord-banner> <nord-banner variant=\"success\"> Your order has been shipped and will arrive on May 27th. <a href=\"#\">Track order</a>. </nord-banner> </nord-stack> </nord-card> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "NextToButton",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-stack direction=\"horizontal\" justify-content=\"start\"> <nord-button href=\"#\" variant=\"primary\" size=\"l\">Submit ticket</nord-button> <nord-banner>You need to be logged in with a Nordhealth account to submit tickets.</nord-banner> </nord-stack> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithForm",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-xl) auto\"> <nord-banner shadow variant=\"warning\">You’ve been signed out. Please sign in to continue.</nord-banner> <nord-card padding=\"l\"> <h1 slot=\"header\">Sign in to Nord</h1> <form action=\"#\"> <nord-stack> <nord-input label=\"Username\" expand required hide-required name=\"username\" type=\"email\" placeholder=\"user@example.com\" ></nord-input> <nord-input label=\"Password\" expand required hide-required name=\"password\" type=\"password\" placeholder=\"••••••••\" > </nord-input> <nord-button type=\"submit\" expand variant=\"primary\">Sign in</nord-button> </nord-stack> </form> </nord-card> <nord-card class=\"n-align-center\"> New to Nord? <a href=\"#\">Create an account</a>. </nord-card> </nord-stack> `, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Playground",
+          "declaration": {
+            "name": "Playground",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Basic",
+          "declaration": {
+            "name": "Basic",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InfoBanner",
+          "declaration": {
+            "name": "InfoBanner",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InsideCard",
+          "declaration": {
+            "name": "InsideCard",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NextToButton",
+          "declaration": {
+            "name": "NextToButton",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithForm",
+          "declaration": {
+            "name": "WithForm",
+            "module": "src/banner/Banner.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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",
+          "cssProperties": [
+            {
+              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
+              "name": "--n-banner-border-radius",
+              "default": "var(--n-border-radius)"
+            },
+            {
+              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
+              "name": "--n-banner-box-shadow",
+              "default": "var(--n-box-shadow-card)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "default slot",
+              "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
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'danger' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "The style variant of the banner.",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "localization": [],
+          "status": "ready",
+          "category": "feedback",
+          "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\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it 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\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
+          "examples": [],
+          "dependencies": [
+            "icon"
+          ],
+          "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"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/badge/Badge.stories.ts",
@@ -1160,7 +1365,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/banner/Banner.stories.ts",
+      "path": "src/button/Button.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1168,7 +1373,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Banner', component: 'nord-banner', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['info', 'danger', 'success', 'warning'], }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
+          "default": "{ title: 'Components/Button', component: 'nord-button', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['default', 'primary', 'dashed', 'plain', 'danger'], }, size: { control: 'select', options: ['s', 'm', 'l'], }, href: { control: 'text' }, download: { control: 'boolean' }, target: { control: 'select', options: ['_self', '_blank', '_parent', '_top'], }, expand: { control: 'boolean' }, square: { control: 'boolean' }, loading: { control: 'boolean' }, hideDropdownIcon: { control: 'boolean' }, disabled: { control: 'boolean' }, name: { control: 'text' }, value: { control: 'text' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
         },
         {
           "kind": "variable",
@@ -1176,260 +1381,55 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'This is a banner message.', variant: 'info', }, render: args => html` <nord-banner variant=${args.variant}>${args.content}</nord-banner> `, }"
+          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Button', variant: 'default', size: 'm', download: false, target: '_self', expand: false, square: false, loading: false, hideDropdownIcon: false, disabled: false, }, render: args => html` <nord-button variant=${args.variant} size=${args.size} href=${args.href || nothing} ?download=${args.download} target=${args.target} ?expand=${args.expand} ?square=${args.square} ?loading=${args.loading} ?hide-dropdown-icon=${args.hideDropdownIcon} ?disabled=${args.disabled} name=${args.name || nothing} value=${args.value || nothing}>${args.content}</nord-button> `, }"
         },
         {
           "kind": "variable",
-          "name": "Basic",
+          "name": "ButtonAsLink",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-stack> <nord-banner variant=\"info\"> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> <nord-banner variant=\"danger\"> We’re experiencing an incident. Please see our <a href=\"#\">status page</a> for more details. </nord-banner> <nord-banner variant=\"warning\"> Payment details missing. To stay on your current plan, <a href=\"#\">add payment details</a>. </nord-banner> <nord-banner variant=\"success\"> Your order has been shipped and will arrive on May 27th. <a href=\"#\">Track order</a>. </nord-banner> </nord-stack> `, }"
+          "default": "{ render: () => html` <nord-stack gap=\"s\" direction=\"horizontal\" wrap> <nord-button href=\"#\">Default</nord-button> <nord-button href=\"#\" variant=\"primary\">Primary</nord-button> <nord-button href=\"#\" variant=\"danger\">Danger</nord-button> <nord-button href=\"#\" variant=\"dashed\"> <nord-icon slot=\"start\" name=\"interface-filter\"></nord-icon> Filter </nord-button> <nord-button href=\"#\" square> <nord-icon name=\"interface-menu-small\" label=\"Options\"></nord-icon> </nord-button> <nord-button href=\"#\" variant=\"plain\">Plain</nord-button> <nord-button href=\"#\" disabled>Disabled</nord-button> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "InfoBanner",
+          "name": "ButtonWithDropdownButHideIcon",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-banner> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> `, }"
+          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-dropdown size=\"s\"> <nord-button variant=\"primary\" slot=\"toggle\" hide-dropdown-icon> Create new </nord-button> <nord-dropdown-item>Patient record</nord-dropdown-item> <nord-dropdown-item>User record</nord-dropdown-item> </nord-dropdown> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "InsideCard",
+          "name": "ButtonWithDropdown",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card> <h2 slot=\"header\">Paid invoices</h2> <nord-stack> <nord-banner variant=\"info\"> We’ve updated your plan, make sure you know how these changes affect it. <a href=\"#\">Learn more</a>. </nord-banner> <nord-banner variant=\"danger\"> We’re experiencing an incident. Please see our <a href=\"#\">status page</a> for more details. </nord-banner> <nord-banner variant=\"warning\"> Payment details missing. To stay on your current plan, <a href=\"#\">add payment details</a>. </nord-banner> <nord-banner variant=\"success\"> Your order has been shipped and will arrive on May 27th. <a href=\"#\">Track order</a>. </nord-banner> </nord-stack> </nord-card> `, }"
+          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-dropdown size=\"s\"> <nord-button variant=\"primary\" slot=\"toggle\"> Create new </nord-button> <nord-dropdown-item>Patient record</nord-dropdown-item> <nord-dropdown-item>User record</nord-dropdown-item> </nord-dropdown> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "NextToButton",
+          "name": "CustomBackground",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-stack direction=\"horizontal\" justify-content=\"start\"> <nord-button href=\"#\" variant=\"primary\" size=\"l\">Submit ticket</nord-button> <nord-banner>You need to be logged in with a Nordhealth account to submit tickets.</nord-banner> </nord-stack> `, }"
+          "default": "{ render: () => html` <nord-stack gap=\"s\" direction=\"horizontal\" wrap> <nord-button style=\"--n-button-background-color: var(--n-color-status-success)\" variant=\"primary\"> Primary </nord-button> <nord-button style=\"--n-button-background-color: var(--n-color-status-success-weak)\">Default</nord-button> <nord-button style=\"--n-button-background-color: var(--n-color-status-success-weak)\" variant=\"plain\"> Plain </nord-button> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "WithForm",
+          "name": "Disabled",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-xl) auto\"> <nord-banner shadow variant=\"warning\">You’ve been signed out. Please sign in to continue.</nord-banner> <nord-card padding=\"l\"> <h1 slot=\"header\">Sign in to Nord</h1> <form action=\"#\"> <nord-stack> <nord-input label=\"Username\" expand required hide-required name=\"username\" type=\"email\" placeholder=\"user@example.com\" ></nord-input> <nord-input label=\"Password\" expand required hide-required name=\"password\" type=\"password\" placeholder=\"••••••••\" > </nord-input> <nord-button type=\"submit\" expand variant=\"primary\">Sign in</nord-button> </nord-stack> </form> </nord-card> <nord-card class=\"n-align-center\"> New to Nord? <a href=\"#\">Create an account</a>. </nord-card> </nord-stack> `, }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "meta",
-            "module": "src/banner/Banner.stories.ts"
-          }
+          "default": "{ render: () => html`<nord-button disabled>Disabled</nord-button>`, }"
         },
         {
-          "kind": "js",
-          "name": "Playground",
-          "declaration": {
-            "name": "Playground",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Basic",
-          "declaration": {
-            "name": "Basic",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InfoBanner",
-          "declaration": {
-            "name": "InfoBanner",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InsideCard",
-          "declaration": {
-            "name": "InsideCard",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "NextToButton",
-          "declaration": {
-            "name": "NextToButton",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithForm",
-          "declaration": {
-            "name": "WithForm",
-            "module": "src/banner/Banner.stories.ts"
-          }
-        }
-      ]
-    },
-    {
-      "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",
-          "cssProperties": [
-            {
-              "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-banner-border-radius",
-              "default": "var(--n-border-radius)"
-            },
-            {
-              "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-banner-box-shadow",
-              "default": "var(--n-box-shadow-card)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "default slot",
-              "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
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'info' | 'danger' | 'success' | 'warning'"
-              },
-              "default": "'info'",
-              "description": "The style variant of the banner.",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "localization": [],
-          "status": "ready",
-          "category": "feedback",
-          "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\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident. Please see our status page for more details.</div>\n<div class=\"n-usage n-usage-dont\">There was an error.</div>\n\nWhen writing banner content, always write it 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\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re Experiencing An Incident.</div>\n\nAlways end in punctuation:\n\n<div class=\"n-usage n-usage-do\">We’re experiencing an incident.</div>\n<div class=\"n-usage n-usage-dont\">We’re experiencing an incident</div>\n",
-          "examples": [],
-          "dependencies": [
-            "icon"
-          ],
-          "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"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/button/Button.stories.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "meta",
-          "type": {
-            "text": "Meta"
-          },
-          "default": "{ title: 'Components/Button', component: 'nord-button', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['default', 'primary', 'dashed', 'plain', 'danger'], }, size: { control: 'select', options: ['s', 'm', 'l'], }, href: { control: 'text' }, download: { control: 'boolean' }, target: { control: 'select', options: ['_self', '_blank', '_parent', '_top'], }, expand: { control: 'boolean' }, square: { control: 'boolean' }, loading: { control: 'boolean' }, hideDropdownIcon: { control: 'boolean' }, disabled: { control: 'boolean' }, name: { control: 'text' }, value: { control: 'text' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Playground",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Button', variant: 'default', size: 'm', download: false, target: '_self', expand: false, square: false, loading: false, hideDropdownIcon: false, disabled: false, }, render: args => html` <nord-button variant=${args.variant} size=${args.size} href=${args.href || nothing} ?download=${args.download} target=${args.target} ?expand=${args.expand} ?square=${args.square} ?loading=${args.loading} ?hide-dropdown-icon=${args.hideDropdownIcon} ?disabled=${args.disabled} name=${args.name || nothing} value=${args.value || nothing}>${args.content}</nord-button> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "ButtonAsLink",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack gap=\"s\" direction=\"horizontal\" wrap> <nord-button href=\"#\">Default</nord-button> <nord-button href=\"#\" variant=\"primary\">Primary</nord-button> <nord-button href=\"#\" variant=\"danger\">Danger</nord-button> <nord-button href=\"#\" variant=\"dashed\"> <nord-icon slot=\"start\" name=\"interface-filter\"></nord-icon> Filter </nord-button> <nord-button href=\"#\" square> <nord-icon name=\"interface-menu-small\" label=\"Options\"></nord-icon> </nord-button> <nord-button href=\"#\" variant=\"plain\">Plain</nord-button> <nord-button href=\"#\" disabled>Disabled</nord-button> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "ButtonWithDropdownButHideIcon",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-dropdown size=\"s\"> <nord-button variant=\"primary\" slot=\"toggle\" hide-dropdown-icon> Create new </nord-button> <nord-dropdown-item>Patient record</nord-dropdown-item> <nord-dropdown-item>User record</nord-dropdown-item> </nord-dropdown> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "ButtonWithDropdown",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-dropdown size=\"s\"> <nord-button variant=\"primary\" slot=\"toggle\"> Create new </nord-button> <nord-dropdown-item>Patient record</nord-dropdown-item> <nord-dropdown-item>User record</nord-dropdown-item> </nord-dropdown> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "CustomBackground",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack gap=\"s\" direction=\"horizontal\" wrap> <nord-button style=\"--n-button-background-color: var(--n-color-status-success)\" variant=\"primary\"> Primary </nord-button> <nord-button style=\"--n-button-background-color: var(--n-color-status-success-weak)\">Default</nord-button> <nord-button style=\"--n-button-background-color: var(--n-color-status-success-weak)\" variant=\"plain\"> Plain </nord-button> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Disabled",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html`<nord-button disabled>Disabled</nord-button>`, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Expanded",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack direction=\"vertical\" gap=\"s\"> <nord-button expand>Default</nord-button> <nord-button variant=\"primary\" expand>Primary</nord-button> <nord-button variant=\"danger\" expand>Danger</nord-button> <nord-button variant=\"dashed\" expand>Filter</nord-button> <nord-button variant=\"plain\" expand>Plain</nord-button> <nord-button disabled expand>Disabled</nord-button> </nord-stack> `, }"
+          "kind": "variable",
+          "name": "Expanded",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-stack direction=\"vertical\" gap=\"s\"> <nord-button expand>Default</nord-button> <nord-button variant=\"primary\" expand>Primary</nord-button> <nord-button variant=\"danger\" expand>Danger</nord-button> <nord-button variant=\"dashed\" expand>Filter</nord-button> <nord-button variant=\"plain\" expand>Plain</nord-button> <nord-button disabled expand>Disabled</nord-button> </nord-stack> `, }"
         },
         {
           "kind": "variable",
@@ -2560,7 +2560,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.stories.ts",
+      "path": "src/card/Card.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -2568,7 +2568,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Calendar', component: 'nord-calendar', tags: ['autodocs'], argTypes: { value: { control: 'text' }, firstDayOfWeek: { control: 'text' }, min: { control: 'text' }, max: { control: 'text' }, today: { control: 'text' }, expand: { control: 'boolean' }, }, parameters: { controls: { disable: true } }, }"
+          "default": "{ title: 'Components/Card', component: 'nord-card', tags: ['autodocs'], argTypes: { padding: { control: 'select', options: ['m', 'l', 'none'], }, footerDivider: { control: 'boolean' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
         },
         {
           "kind": "variable",
@@ -2576,7 +2576,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ parameters: { controls: { disable: false } }, args: { expand: false, }, render: args => html` <nord-calendar value=${args.value || nothing} first-day-of-week=${args.firstDayOfWeek || nothing} min=${args.min || nothing} max=${args.max || nothing} today=${args.today || nothing} ?expand=${args.expand}>Content</nord-calendar> `, }"
+          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Card content goes here.', padding: 'm', footerDivider: false, }, render: args => html` <nord-card padding=${args.padding} ?footer-divider=${args.footerDivider}>${args.content}</nord-card> `, }"
         },
         {
           "kind": "variable",
@@ -2584,71 +2584,95 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html`<nord-calendar></nord-calendar>`, }"
+          "default": "{ render: () => html` <nord-card> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> `, }"
         },
         {
           "kind": "variable",
-          "name": "ChangeToday",
+          "name": "Padding",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html`<nord-calendar value=\"2025-01-03\" today=\"2026-03-06\"></nord-calendar>`, }"
+          "default": "{ render: () => html` <nord-stack> <nord-card padding=\"none\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> <nord-card padding=\"m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> <nord-card padding=\"l\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "DateSelected",
+          "name": "ResponsiveCardLayout",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html`<nord-calendar value=\"2022-01-11\"></nord-calendar>`, }"
+          "default": "{ render: () => html` <style>@media (max-width: 768px) { .stack { flex-direction: column; } }</style> <nord-stack class=\"stack\" direction=\"horizontal\" gap=\"l\"> <nord-card padding=\"l\"> <h2 slot=\"header\">Account overview</h2> <nord-stack direction=\"horizontal\"> <nord-stack gap=\"l\"> <p> View all saved data on your Nordhealth account and choose what activity is kept to personalize your experience. </p> <nord-button variant=\"primary\">Manage your account</nord-button> </nord-stack> </nord-stack> </nord-card> <nord-card padding=\"l\"> <h2 slot=\"header\">Security checkup</h2> <nord-stack direction=\"horizontal\"> <nord-stack gap=\"l\"> <p>Our Security Checkup analyzed your account and data. We found no recommended actions this time.</p> <nord-button variant=\"primary\">Manage security</nord-button> </nord-stack> </nord-stack> </nord-card> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "DisablingDays",
+          "name": "WithAlignedFooters",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-calendar value=\"2022-01-12\"></nord-calendar>` const calendar = container.querySelector('nord-calendar') calendar.isDateDisabled = function isWeekend(date) { return date.getDay() === 0 || date.getDay() === 6 } return container }, }"
+          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "Expanded",
+          "name": "WithCustomHeader",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html`<nord-calendar expand></nord-calendar>`, }"
+          "default": "{ render: () => html` <style>nord-card { --n-card-header-background: var(--n-color-surface-raised); }</style> <nord-card padding=\"m\"> <h2 slot=\"header\">Header content</h2> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> `, }"
         },
         {
           "kind": "variable",
-          "name": "FocusDateEvent",
+          "name": "WithForm",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-stack> <output></output> <nord-calendar value=\"2022-02-16\"></nord-calendar> </nord-stack>` const calendar = container.querySelector('nord-calendar') const output = container.querySelector('output') calendar.addEventListener('nord-focus-date', (e) => { const formatted = e.date.toLocaleDateString('en', { year: 'numeric', month: 'long', day: 'numeric' }) output.innerText = `Focused day: ${formatted}` }) return container }, }"
+          "default": "{ render: () => html` <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-xl) auto\"> <nord-banner shadow variant=\"warning\">You’ve been signed out. Please sign in to continue.</nord-banner> <nord-card padding=\"l\"> <h1 slot=\"header\">Sign in to Nord</h1> <form action=\"#\"> <nord-stack> <nord-input label=\"Username\" expand required hide-required name=\"username\" type=\"email\" placeholder=\"user@example.com\" ></nord-input> <nord-input label=\"Password\" expand required hide-required name=\"password\" type=\"password\" placeholder=\"••••••••\" > </nord-input> <nord-button type=\"submit\" expand variant=\"primary\">Sign in</nord-button> </nord-stack> </form> </nord-card> <nord-card class=\"n-align-center\"> New to Nord? <a href=\"#\">Create an account</a>. </nord-card> </nord-stack> `, }"
         },
         {
           "kind": "variable",
-          "name": "HighlightingDays",
+          "name": "WithHeaderActions",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-stack> <p>Highlighted dates are fully booked</p> <nord-calendar value=\"2022-01-12\"></nord-calendar> </nord-stack>` const calendar = container.querySelector('nord-calendar') // as an example, highlight every sixth day calendar.isDateHighlighted = (date) => { return date.getDate() % 6 === 0 ? 'fully booked' : false } return container }, }"
+          "default": "{ render: () => html` <nord-card padding=\"none\"> <h2 slot=\"header\">Your items</h2> <div slot=\"header-end\"> <nord-input size=\"s\" label=\"Search\" hide-label placeholder=\"Item name\" type=\"search\"></nord-input> <nord-select hide-label size=\"s\" label=\"Filter by state\" placeholder=\"Please select\"> <nord-icon slot=\"icon\" name=\"interface-filter\"></nord-icon> <option value=\"active\">Active</option> <option value=\"archived\">Archived</option> </nord-select> <nord-select hide-label size=\"s\" label=\"Sort\" placeholder=\"Please select\"> <nord-icon slot=\"icon\" name=\"arrow-up-down-long\"></nord-icon> <option>Creation date</option> <option>Last modified date</option> </nord-select> </div> <nord-table> <table> <thead> <tr> <th class=\"n-table-align-right\">ID</th> <th>Name</th> <th>Description</th> <th>State</th> <th class=\"n-table-align-right\">Creation date</th> <th class=\"n-table-align-right\">Last modified date</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">01</td> <td>Item name 1</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">20.3.2020</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">02</td> <td>Item name 2</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"warning\">Archived</nord-badge> </td> <td class=\"n-caption n-table-align-right\">19.3.2020</td> <td class=\"n-caption n-table-align-right\">19.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">03</td> <td>Item name 3</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">18.3.2020</td> <td class=\"n-caption n-table-align-right\">18.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">04</td> <td>Item name 4</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">17.3.2020</td> <td class=\"n-caption n-table-align-right\">17.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">05</td> <td>Item name 5</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"warning\">Archived</nord-badge> </td> <td class=\"n-caption n-table-align-right\">16.3.2020</td> <td class=\"n-caption n-table-align-right\">16.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
         },
         {
           "kind": "variable",
-          "name": "Inline",
+          "name": "WithHeaderAndFooter",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html`<nord-calendar style=\"--n-calendar-box-shadow: none\"></nord-calendar>`, }"
+          "default": "{ render: () => html` <nord-card padding=\"m\"> <h2 slot=\"header\">Header content</h2> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? <div slot=\"footer\">Footer content</div> </nord-card> `, }"
         },
         {
           "kind": "variable",
-          "name": "UsingMinMax",
+          "name": "WithScrollableContent",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-calendar value=\"2021-02-14\" min=\"2021-02-08\" max=\"2021-02-21\"></nord-calendar> `, }"
+          "default": "{ render: () => html` <style>.content { padding: var(--n-space-m); max-block-size: 200px; overflow-x: auto; }</style> <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-l) auto\"> <nord-card padding=\"none\"> <h2 slot=\"header\">Header content</h2> <div class=\"content\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? Vivamus non tincidunt lacus. Vestibulum et vestibulum turpis, non elementum justo. Cras nec est tincidunt, faucibus neque vitae, pretium purus. Nulla euismod mauris purus, a hendrerit sapien pretium interdum. Nulla at quam enim. Vestibulum leo sem, hendrerit ultricies porttitor eu, facilisis eget leo. Aliquam molestie sapien arcu, eu pulvinar magna suscipit quis. Fusce at ultricies nunc. Aenean vitae nulla at ligula imperdiet vulputate. Aliquam erat volutpat. </div> </nord-card> </nord-stack> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithScrollableTable",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <style>nord-table.scrollable { max-block-size: 240px; } nord-table.scrollable th { position: sticky; inset-block-start: 0; z-index: var(--n-index-sticky); }</style> <nord-card padding=\"none\"> <h2 slot=\"header\">Table heading</h2> <nord-table class=\"scrollable\"> <table> <thead> <tr> <th class=\"n-table-align-right\">Amount</th> <th>Status</th> <th>Description</th> <th>Method</th> <th class=\"n-table-align-right\">Date</th> <th class=\"n-table-align-right\">Actions</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge>Neutral</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td><nord-badge>Neutral</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">19.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">49,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">17.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">1023,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">12.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">32,00&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">10.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">40,00&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">9.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">28,52&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">4.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">4.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">220,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">3.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">1.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">30.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">28.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">28.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">49,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">26.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">1023,00&thinsp;€</td> <td><nord-badge variant=\"danger\">Alert</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">24.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">32,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">23.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">40,00&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">22.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">28,52&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">21.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">220,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">18.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithSections",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-card padding=\"none\"> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> <nord-divider></nord-divider> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> <nord-divider></nord-divider> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> </nord-card> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithTable",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ render: () => html` <nord-card padding=\"none\"> <h2 slot=\"header\">Table heading</h2> <nord-table> <table> <thead> <tr> <th class=\"n-table-align-right\">Amount</th> <th>Description</th> <th>Method</th> <th class=\"n-table-align-right\">Date</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">20.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">19.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">18.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">290,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">17.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">49,90&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">16.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">25,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">15.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
         }
       ],
       "exports": [
@@ -2657,7 +2681,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/calendar/Calendar.stories.ts"
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
@@ -2665,7 +2689,7 @@
           "name": "Playground",
           "declaration": {
             "name": "Playground",
-            "module": "src/calendar/Calendar.stories.ts"
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
@@ -2673,529 +2697,245 @@
           "name": "Basic",
           "declaration": {
             "name": "Basic",
-            "module": "src/calendar/Calendar.stories.ts"
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "ChangeToday",
+          "name": "Padding",
           "declaration": {
-            "name": "ChangeToday",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "Padding",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DateSelected",
+          "name": "ResponsiveCardLayout",
           "declaration": {
-            "name": "DateSelected",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "ResponsiveCardLayout",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "DisablingDays",
+          "name": "WithAlignedFooters",
           "declaration": {
-            "name": "DisablingDays",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithAlignedFooters",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Expanded",
+          "name": "WithCustomHeader",
           "declaration": {
-            "name": "Expanded",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithCustomHeader",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "FocusDateEvent",
+          "name": "WithForm",
           "declaration": {
-            "name": "FocusDateEvent",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithForm",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "HighlightingDays",
+          "name": "WithHeaderActions",
           "declaration": {
-            "name": "HighlightingDays",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithHeaderActions",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Inline",
+          "name": "WithHeaderAndFooter",
           "declaration": {
-            "name": "Inline",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithHeaderAndFooter",
+            "module": "src/card/Card.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "UsingMinMax",
+          "name": "WithScrollableContent",
           "declaration": {
-            "name": "UsingMinMax",
-            "module": "src/calendar/Calendar.stories.ts"
+            "name": "WithScrollableContent",
+            "module": "src/card/Card.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithScrollableTable",
+          "declaration": {
+            "name": "WithScrollableTable",
+            "module": "src/card/Card.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithSections",
+          "declaration": {
+            "name": "WithSections",
+            "module": "src/card/Card.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WithTable",
+          "declaration": {
+            "name": "WithTable",
+            "module": "src/card/Card.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/calendar/Calendar.ts",
+      "path": "src/card/Card.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
-          "name": "Calendar",
+          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
+          "name": "Card",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-calendar-border-radius",
+              "name": "--n-card-border-radius",
               "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-calendar-box-shadow",
+              "name": "--n-card-box-shadow",
               "default": "var(--n-box-shadow-popout)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "monthSelectNode",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "focusedDayNode",
-              "type": {
-                "text": "HTMLButtonElement"
-              },
-              "privacy": "private"
+              "description": "Controls the padding on all sides of the card.",
+              "name": "--n-card-padding",
+              "default": "var(--n-space-m)"
             },
             {
-              "kind": "field",
-              "name": "direction",
-              "privacy": "private",
-              "default": "new DirectionController(this)"
+              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
+              "name": "--n-card-slot-padding",
+              "default": "var(--n-space-m)"
             },
             {
-              "kind": "field",
-              "name": "swipe",
-              "privacy": "private",
-              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
+              "description": "Controls the background color of the card header.",
+              "name": "--n-card-header-background",
+              "default": "transparent"
             },
             {
-              "kind": "field",
-              "name": "shortcuts",
-              "privacy": "private"
+              "description": "Controls the border color of the card header and footer divider.",
+              "name": "--n-card-border-color",
+              "default": "var(--n-color-border)"
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "default": "new LocalizeController<'nord-calendar'>(this, { onLangChange: () => this.handleLangChange(), })"
+              "description": "Controls the block (top and bottom) padding of the card header.",
+              "name": "--n-card-header-padding-block",
+              "default": "var(--n-space-m)"
             },
             {
-              "kind": "field",
-              "name": "dateFormatShort",
-              "type": {
-                "text": "Intl.DateTimeFormat"
-              },
-              "privacy": "private",
-              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+              "description": "Controls the inline (left and right) padding of the card header.",
+              "name": "--n-card-header-padding-inline",
+              "default": "var(--n-card-slot-padding)"
             },
             {
-              "kind": "field",
-              "name": "monthNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
-            },
+              "description": "Controls the flex-grow value of the header slot.",
+              "name": "--n-card-header-slot-flex-grow",
+              "default": "0"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "monthNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "description": "The card content.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "dayNames",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "description": "Optional slot that holds a header for the card.",
+              "name": "header"
             },
             {
-              "kind": "field",
-              "name": "dayNamesShort",
-              "type": {
-                "text": "string[]"
-              },
-              "privacy": "private"
+              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
+              "name": "header-end"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "attribute": "value"
-            },
+              "description": "Optional slot that holds footer content for the card.",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "firstDayOfWeek",
-              "type": {
-                "text": "DaysOfWeek"
-              },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "attribute": "first-day-of-week",
-              "reflects": true
+              "name": "headerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, 'header')"
             },
             {
               "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "attribute": "min",
-              "reflects": true
+              "name": "headerEndSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, 'header-end')"
             },
             {
               "kind": "field",
-              "name": "max",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "attribute": "max",
-              "reflects": true
+              "name": "footerSlot",
+              "privacy": "private",
+              "default": "new SlotController(this, 'footer')"
             },
             {
               "kind": "field",
-              "name": "today",
+              "name": "padding",
               "type": {
-                "text": "string | undefined"
+                "text": "'m' | 'l' | 'none'"
               },
-              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
-              "attribute": "today",
+              "default": "'m'",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "attribute": "padding",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "expand",
+              "name": "footerDivider",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "attribute": "expand",
+              "description": "When set, adds a divider border above the footer slot.",
+              "attribute": "footer-divider",
               "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "isDateDisabled",
+              "name": "padding",
               "type": {
-                "text": "DatePredicate"
+                "text": "'m' | 'l' | 'none'"
               },
-              "default": "isDateDisabled",
-              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+              "default": "'m'",
+              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
+              "fieldName": "padding"
             },
             {
-              "kind": "field",
-              "name": "isDateHighlighted",
-              "type": {
-                "text": "(date: Date) => string | boolean"
-              },
-              "default": "isDateHighlighted",
-              "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
-            },
-            {
-              "kind": "field",
-              "name": "activeFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "focusedDay",
-              "privacy": "private",
-              "default": "new Date()"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions & { target: 'day' | 'month' }"
-                  },
-                  "description": "An object which controls aspects of the focusing process."
-                }
-              ],
-              "description": "Programmatically move focus to the calendar."
-            },
-            {
-              "kind": "method",
-              "name": "handleValueChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleFocusedDayChange",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "handleLangChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleDaySelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "getToday",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "addDays",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "days",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addMonths",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "months",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "addYears",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "years",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "startOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "endOfWeek",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setMonth",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "month",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setYear",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "year",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setFocusedDay",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "day",
-                  "type": {
-                    "text": "Date"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleMonthSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleYearSelect",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleNextMonthClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePreviousMonthClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "enableActiveFocus",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "disableActiveFocus",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "name": "nord-focus-date",
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when the calendar's focused date changes."
-            },
-            {
-              "type": {
-                "text": "DateSelectEvent"
-              },
-              "description": "Dispatched when a date is selected and the value changes.",
-              "name": "change"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
-              "fieldName": "value"
-            },
-            {
-              "name": "first-day-of-week",
-              "type": {
-                "text": "DaysOfWeek"
-              },
-              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
-              "fieldName": "firstDayOfWeek"
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
-              "fieldName": "max"
-            },
-            {
-              "name": "today",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
-              "fieldName": "today"
-            },
-            {
-              "name": "expand",
+              "name": "footer-divider",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the calendar expands to fill the width of its container.",
-              "fieldName": "expand"
+              "description": "When set, adds a divider border above the footer slot.",
+              "fieldName": "footerDivider"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "localization": [
-            {
-              "name": "prevMonthLabel",
-              "description": "Accessible label for the previous month button."
-            },
-            {
-              "name": "nextMonthLabel",
-              "description": "Accessible label for the next month button."
-            },
-            {
-              "name": "monthSelectLabel",
-              "description": "Accessible label for the month select."
-            },
-            {
-              "name": "yearSelectLabel",
-              "description": "Accessible label for the year select."
-            }
-          ],
+          "localization": [],
           "status": "ready",
-          "category": "list",
-          "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",
+          "category": "structure",
+          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
           "examples": [],
-          "dependencies": [
-            "icon",
-            "button",
-            "visually-hidden"
-          ],
-          "tagName": "nord-calendar",
+          "dependencies": [],
+          "tagName": "nord-card",
           "customElement": true
         }
       ],
@@ -3204,72 +2944,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-calendar",
-          "declaration": {
-            "name": "Calendar",
-            "module": "src/calendar/Calendar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/DateSelectEvent.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "DateSelectEvent",
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DateSelectEvent",
-          "declaration": {
-            "name": "DateSelectEvent",
-            "module": "src/calendar/DateSelectEvent.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/calendar/localization.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "calendarLocalization",
-          "type": {
-            "text": "object"
-          },
-          "default": "{ prevMonthLabel: 'Previous month', nextMonthLabel: 'Next month', monthSelectLabel: 'Month', yearSelectLabel: 'Year', }"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "nord-card",
           "declaration": {
-            "name": "calendarLocalization",
-            "module": "src/calendar/localization.ts"
+            "name": "Card",
+            "module": "src/card/Card.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.stories.ts",
+      "path": "src/calendar/Calendar.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -3277,7 +2968,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Card', component: 'nord-card', tags: ['autodocs'], argTypes: { padding: { control: 'select', options: ['m', 'l', 'none'], }, footerDivider: { control: 'boolean' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }"
+          "default": "{ title: 'Components/Calendar', component: 'nord-calendar', tags: ['autodocs'], argTypes: { value: { control: 'text' }, firstDayOfWeek: { control: 'text' }, min: { control: 'text' }, max: { control: 'text' }, today: { control: 'text' }, expand: { control: 'boolean' }, }, parameters: { controls: { disable: true } }, }"
         },
         {
           "kind": "variable",
@@ -3285,7 +2976,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Card content goes here.', padding: 'm', footerDivider: false, }, render: args => html` <nord-card padding=${args.padding} ?footer-divider=${args.footerDivider}>${args.content}</nord-card> `, }"
+          "default": "{ parameters: { controls: { disable: false } }, args: { expand: false, }, render: args => html` <nord-calendar value=${args.value || nothing} first-day-of-week=${args.firstDayOfWeek || nothing} min=${args.min || nothing} max=${args.max || nothing} today=${args.today || nothing} ?expand=${args.expand}>Content</nord-calendar> `, }"
         },
         {
           "kind": "variable",
@@ -3293,95 +2984,71 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "Padding",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack> <nord-card padding=\"none\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> <nord-card padding=\"m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> <nord-card padding=\"l\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "ResponsiveCardLayout",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <style>@media (max-width: 768px) { .stack { flex-direction: column; } }</style> <nord-stack class=\"stack\" direction=\"horizontal\" gap=\"l\"> <nord-card padding=\"l\"> <h2 slot=\"header\">Account overview</h2> <nord-stack direction=\"horizontal\"> <nord-stack gap=\"l\"> <p> View all saved data on your Nordhealth account and choose what activity is kept to personalize your experience. </p> <nord-button variant=\"primary\">Manage your account</nord-button> </nord-stack> </nord-stack> </nord-card> <nord-card padding=\"l\"> <h2 slot=\"header\">Security checkup</h2> <nord-stack direction=\"horizontal\"> <nord-stack gap=\"l\"> <p>Our Security Checkup analyzed your account and data. We found no recommended actions this time.</p> <nord-button variant=\"primary\">Manage security</nord-button> </nord-stack> </nord-stack> </nord-card> </nord-stack> `, }"
-        },
-        {
-          "kind": "variable",
-          "name": "WithAlignedFooters",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ render: () => html` <nord-stack direction=\"horizontal\"> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> <nord-card footer-divider> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? <div slot=\"footer\"> <p class=\"n-typescale-m\">Footer content</p> </div> </nord-card> </nord-stack> `, }"
+          "default": "{ render: () => html`<nord-calendar></nord-calendar>`, }"
         },
         {
           "kind": "variable",
-          "name": "WithCustomHeader",
+          "name": "ChangeToday",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <style>nord-card { --n-card-header-background: var(--n-color-surface-raised); }</style> <nord-card padding=\"m\"> <h2 slot=\"header\">Header content</h2> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </nord-card> `, }"
+          "default": "{ render: () => html`<nord-calendar value=\"2025-01-03\" today=\"2026-03-06\"></nord-calendar>`, }"
         },
         {
           "kind": "variable",
-          "name": "WithForm",
+          "name": "DateSelected",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-xl) auto\"> <nord-banner shadow variant=\"warning\">You’ve been signed out. Please sign in to continue.</nord-banner> <nord-card padding=\"l\"> <h1 slot=\"header\">Sign in to Nord</h1> <form action=\"#\"> <nord-stack> <nord-input label=\"Username\" expand required hide-required name=\"username\" type=\"email\" placeholder=\"user@example.com\" ></nord-input> <nord-input label=\"Password\" expand required hide-required name=\"password\" type=\"password\" placeholder=\"••••••••\" > </nord-input> <nord-button type=\"submit\" expand variant=\"primary\">Sign in</nord-button> </nord-stack> </form> </nord-card> <nord-card class=\"n-align-center\"> New to Nord? <a href=\"#\">Create an account</a>. </nord-card> </nord-stack> `, }"
+          "default": "{ render: () => html`<nord-calendar value=\"2022-01-11\"></nord-calendar>`, }"
         },
         {
           "kind": "variable",
-          "name": "WithHeaderActions",
+          "name": "DisablingDays",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card padding=\"none\"> <h2 slot=\"header\">Your items</h2> <div slot=\"header-end\"> <nord-input size=\"s\" label=\"Search\" hide-label placeholder=\"Item name\" type=\"search\"></nord-input> <nord-select hide-label size=\"s\" label=\"Filter by state\" placeholder=\"Please select\"> <nord-icon slot=\"icon\" name=\"interface-filter\"></nord-icon> <option value=\"active\">Active</option> <option value=\"archived\">Archived</option> </nord-select> <nord-select hide-label size=\"s\" label=\"Sort\" placeholder=\"Please select\"> <nord-icon slot=\"icon\" name=\"arrow-up-down-long\"></nord-icon> <option>Creation date</option> <option>Last modified date</option> </nord-select> </div> <nord-table> <table> <thead> <tr> <th class=\"n-table-align-right\">ID</th> <th>Name</th> <th>Description</th> <th>State</th> <th class=\"n-table-align-right\">Creation date</th> <th class=\"n-table-align-right\">Last modified date</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">01</td> <td>Item name 1</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">20.3.2020</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">02</td> <td>Item name 2</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"warning\">Archived</nord-badge> </td> <td class=\"n-caption n-table-align-right\">19.3.2020</td> <td class=\"n-caption n-table-align-right\">19.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">03</td> <td>Item name 3</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">18.3.2020</td> <td class=\"n-caption n-table-align-right\">18.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">04</td> <td>Item name 4</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"success\">Active</nord-badge> </td> <td class=\"n-caption n-table-align-right\">17.3.2020</td> <td class=\"n-caption n-table-align-right\">17.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">05</td> <td>Item name 5</td> <td class=\"n-caption\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, necessitatibus!</td> <td> <nord-badge variant=\"warning\">Archived</nord-badge> </td> <td class=\"n-caption n-table-align-right\">16.3.2020</td> <td class=\"n-caption n-table-align-right\">16.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
+          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-calendar value=\"2022-01-12\"></nord-calendar>` const calendar = container.querySelector('nord-calendar') calendar.isDateDisabled = function isWeekend(date) { return date.getDay() === 0 || date.getDay() === 6 } return container }, }"
         },
         {
           "kind": "variable",
-          "name": "WithHeaderAndFooter",
+          "name": "Expanded",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card padding=\"m\"> <h2 slot=\"header\">Header content</h2> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? <div slot=\"footer\">Footer content</div> </nord-card> `, }"
+          "default": "{ render: () => html`<nord-calendar expand></nord-calendar>`, }"
         },
         {
           "kind": "variable",
-          "name": "WithScrollableContent",
+          "name": "FocusDateEvent",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <style>.content { padding: var(--n-space-m); max-block-size: 200px; overflow-x: auto; }</style> <nord-stack style=\"max-inline-size: 340px; margin: var(--n-space-l) auto\"> <nord-card padding=\"none\"> <h2 slot=\"header\">Header content</h2> <div class=\"content\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? Vivamus non tincidunt lacus. Vestibulum et vestibulum turpis, non elementum justo. Cras nec est tincidunt, faucibus neque vitae, pretium purus. Nulla euismod mauris purus, a hendrerit sapien pretium interdum. Nulla at quam enim. Vestibulum leo sem, hendrerit ultricies porttitor eu, facilisis eget leo. Aliquam molestie sapien arcu, eu pulvinar magna suscipit quis. Fusce at ultricies nunc. Aenean vitae nulla at ligula imperdiet vulputate. Aliquam erat volutpat. </div> </nord-card> </nord-stack> `, }"
+          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-stack> <output></output> <nord-calendar value=\"2022-02-16\"></nord-calendar> </nord-stack>` const calendar = container.querySelector('nord-calendar') const output = container.querySelector('output') calendar.addEventListener('nord-focus-date', (e) => { const formatted = e.date.toLocaleDateString('en', { year: 'numeric', month: 'long', day: 'numeric' }) output.innerText = `Focused day: ${formatted}` }) return container }, }"
         },
         {
           "kind": "variable",
-          "name": "WithScrollableTable",
+          "name": "HighlightingDays",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <style>nord-table.scrollable { max-block-size: 240px; } nord-table.scrollable th { position: sticky; inset-block-start: 0; z-index: var(--n-index-sticky); }</style> <nord-card padding=\"none\"> <h2 slot=\"header\">Table heading</h2> <nord-table class=\"scrollable\"> <table> <thead> <tr> <th class=\"n-table-align-right\">Amount</th> <th>Status</th> <th>Description</th> <th>Method</th> <th class=\"n-table-align-right\">Date</th> <th class=\"n-table-align-right\">Actions</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge>Neutral</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td><nord-badge>Neutral</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">19.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">49,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">17.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">1023,00&thinsp;€</td> <td><nord-badge variant=\"info\">Info</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">12.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">32,00&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">10.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">40,00&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">9.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">28,52&thinsp;€</td> <td><nord-badge variant=\"highlight\">Highlight</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">4.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">4.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">220,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">3.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">1.3.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">30.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">28.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">28.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">49,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">26.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">1023,00&thinsp;€</td> <td><nord-badge variant=\"danger\">Alert</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">24.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">32,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">23.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">40,00&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">22.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">28,52&thinsp;€</td> <td><nord-badge variant=\"warning\">Warning</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">21.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">20.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> <tr> <td class=\"n-table-align-right\">220,00&thinsp;€</td> <td><nord-badge variant=\"success\">Success</nord-badge></td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td class=\"n-caption\">Card</td> <td class=\"n-caption n-table-align-right\">18.2.2021</td> <td> <div class=\"n-table-actions\"> <nord-button size=\"s\" square> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-icon name=\"interface-menu-small\"></nord-icon> </nord-button> </div> </td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
+          "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `<nord-stack> <p>Highlighted dates are fully booked</p> <nord-calendar value=\"2022-01-12\"></nord-calendar> </nord-stack>` const calendar = container.querySelector('nord-calendar') // as an example, highlight every sixth day calendar.isDateHighlighted = (date) => { return date.getDate() % 6 === 0 ? 'fully booked' : false } return container }, }"
         },
         {
           "kind": "variable",
-          "name": "WithSections",
+          "name": "Inline",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card padding=\"none\"> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> <nord-divider></nord-divider> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> <nord-divider></nord-divider> <div class=\"n-padding-m\"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam? </div> </nord-card> `, }"
+          "default": "{ render: () => html`<nord-calendar style=\"--n-calendar-box-shadow: none\"></nord-calendar>`, }"
         },
         {
           "kind": "variable",
-          "name": "WithTable",
+          "name": "UsingMinMax",
           "type": {
             "text": "Story"
           },
-          "default": "{ render: () => html` <nord-card padding=\"none\"> <h2 slot=\"header\">Table heading</h2> <nord-table> <table> <thead> <tr> <th class=\"n-table-align-right\">Amount</th> <th>Description</th> <th>Method</th> <th class=\"n-table-align-right\">Date</th> </tr> </thead> <tbody> <tr> <td class=\"n-table-align-right\">350,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">20.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">29,90&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">19.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">50,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">18.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">290,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">17.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">49,90&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">16.3.2021</td> </tr> <tr> <td class=\"n-table-align-right\">25,00&thinsp;€</td> <td class=\"n-table-ellipsis\"> Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing </td> <td>Card</td> <td class=\"n-table-align-right\">15.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> `, }"
+          "default": "{ render: () => html` <nord-calendar value=\"2021-02-14\" min=\"2021-02-08\" max=\"2021-02-21\"></nord-calendar> `, }"
         }
       ],
       "exports": [
@@ -3390,7 +3057,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/card/Card.stories.ts"
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
@@ -3398,7 +3065,7 @@
           "name": "Playground",
           "declaration": {
             "name": "Playground",
-            "module": "src/card/Card.stories.ts"
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
@@ -3406,245 +3073,529 @@
           "name": "Basic",
           "declaration": {
             "name": "Basic",
-            "module": "src/card/Card.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Padding",
-          "declaration": {
-            "name": "Padding",
-            "module": "src/card/Card.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ResponsiveCardLayout",
-          "declaration": {
-            "name": "ResponsiveCardLayout",
-            "module": "src/card/Card.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WithAlignedFooters",
-          "declaration": {
-            "name": "WithAlignedFooters",
-            "module": "src/card/Card.stories.ts"
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithCustomHeader",
+          "name": "ChangeToday",
           "declaration": {
-            "name": "WithCustomHeader",
-            "module": "src/card/Card.stories.ts"
+            "name": "ChangeToday",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithForm",
+          "name": "DateSelected",
           "declaration": {
-            "name": "WithForm",
-            "module": "src/card/Card.stories.ts"
+            "name": "DateSelected",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithHeaderActions",
+          "name": "DisablingDays",
           "declaration": {
-            "name": "WithHeaderActions",
-            "module": "src/card/Card.stories.ts"
+            "name": "DisablingDays",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithHeaderAndFooter",
+          "name": "Expanded",
           "declaration": {
-            "name": "WithHeaderAndFooter",
-            "module": "src/card/Card.stories.ts"
+            "name": "Expanded",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithScrollableContent",
+          "name": "FocusDateEvent",
           "declaration": {
-            "name": "WithScrollableContent",
-            "module": "src/card/Card.stories.ts"
+            "name": "FocusDateEvent",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithScrollableTable",
+          "name": "HighlightingDays",
           "declaration": {
-            "name": "WithScrollableTable",
-            "module": "src/card/Card.stories.ts"
+            "name": "HighlightingDays",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithSections",
+          "name": "Inline",
           "declaration": {
-            "name": "WithSections",
-            "module": "src/card/Card.stories.ts"
+            "name": "Inline",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "WithTable",
+          "name": "UsingMinMax",
           "declaration": {
-            "name": "WithTable",
-            "module": "src/card/Card.stories.ts"
+            "name": "UsingMinMax",
+            "module": "src/calendar/Calendar.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/card/Card.ts",
+      "path": "src/calendar/Calendar.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Cards are shadowed surfaces that display content and actions on a\nsingle topic. They should be easy to scan for relevant and\nactionable information.",
-          "name": "Card",
+          "description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
+          "name": "Calendar",
           "cssProperties": [
             {
               "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).",
-              "name": "--n-card-border-radius",
+              "name": "--n-calendar-border-radius",
               "default": "var(--n-border-radius)"
             },
             {
               "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).",
-              "name": "--n-card-box-shadow",
+              "name": "--n-calendar-box-shadow",
               "default": "var(--n-box-shadow-popout)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "monthSelectNode",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Controls the padding on all sides of the card.",
-              "name": "--n-card-padding",
-              "default": "var(--n-space-m)"
+              "kind": "field",
+              "name": "focusedDayNode",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "privacy": "private"
             },
             {
-              "description": "Controls the padding of items slotted within the card. This does not affect the block padding of items slotted into the header.",
-              "name": "--n-card-slot-padding",
-              "default": "var(--n-space-m)"
+              "kind": "field",
+              "name": "direction",
+              "privacy": "private",
+              "default": "new DirectionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "swipe",
+              "privacy": "private",
+              "default": "new SwipeController(this, { matchesGesture: isHorizontalSwipe, onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1), })"
+            },
+            {
+              "kind": "field",
+              "name": "shortcuts",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "default": "new LocalizeController<'nord-calendar'>(this, { onLangChange: () => this.handleLangChange(), })"
+            },
+            {
+              "kind": "field",
+              "name": "dateFormatShort",
+              "type": {
+                "text": "Intl.DateTimeFormat"
+              },
+              "privacy": "private",
+              "description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
+            },
+            {
+              "kind": "field",
+              "name": "monthNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "monthNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dayNames",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "dayNamesShort",
+              "type": {
+                "text": "string[]"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "firstDayOfWeek",
+              "type": {
+                "text": "DaysOfWeek"
+              },
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "attribute": "first-day-of-week",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "attribute": "min",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "attribute": "today",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expand",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "attribute": "expand",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isDateDisabled",
+              "type": {
+                "text": "DatePredicate"
+              },
+              "default": "isDateDisabled",
+              "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
+            },
+            {
+              "kind": "field",
+              "name": "isDateHighlighted",
+              "type": {
+                "text": "(date: Date) => string | boolean"
+              },
+              "default": "isDateHighlighted",
+              "description": "Controls which days are highlighted with a small indicator.\nReturning a \"falsy\" value will not show an indicator.\nReturning \"truthy\" value will show the indicator, but without an accessible label.\nReturning a string will show the indicator, and use the string as accessible label.\nIt is recommended to return a string rather than a truthy value whenever possible."
+            },
+            {
+              "kind": "field",
+              "name": "activeFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "focusedDay",
+              "privacy": "private",
+              "default": "new Date()"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions & { target: 'day' | 'month' }"
+                  },
+                  "description": "An object which controls aspects of the focusing process."
+                }
+              ],
+              "description": "Programmatically move focus to the calendar."
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocusedDayChange",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleLangChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDaySelect",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getToday",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addDays",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "days",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addMonths",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "months",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "addYears",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "years",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "description": "Controls the background color of the card header.",
-              "name": "--n-card-header-background",
-              "default": "transparent"
+              "kind": "method",
+              "name": "startOfWeek",
+              "privacy": "private"
             },
             {
-              "description": "Controls the border color of the card header and footer divider.",
-              "name": "--n-card-border-color",
-              "default": "var(--n-color-border)"
+              "kind": "method",
+              "name": "endOfWeek",
+              "privacy": "private"
             },
             {
-              "description": "Controls the block (top and bottom) padding of the card header.",
-              "name": "--n-card-header-padding-block",
-              "default": "var(--n-space-m)"
+              "kind": "method",
+              "name": "setMonth",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "description": "Controls the inline (left and right) padding of the card header.",
-              "name": "--n-card-header-padding-inline",
-              "default": "var(--n-card-slot-padding)"
+              "kind": "method",
+              "name": "setYear",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "description": "Controls the flex-grow value of the header slot.",
-              "name": "--n-card-header-slot-flex-grow",
-              "default": "0"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card content.",
-              "name": ""
+              "kind": "method",
+              "name": "setFocusedDay",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "day",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
-              "description": "Optional slot that holds a header for the card.",
-              "name": "header"
+              "kind": "field",
+              "name": "handleMonthSelect",
+              "privacy": "private"
             },
             {
-              "description": "Optional slot that positions content at the end of the header. Useful for actions or additional info.",
-              "name": "header-end"
+              "kind": "field",
+              "name": "handleYearSelect",
+              "privacy": "private"
             },
-            {
-              "description": "Optional slot that holds footer content for the card.",
-              "name": "footer"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "headerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, 'header')"
+              "name": "handleNextMonthClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "headerEndSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, 'header-end')"
+              "name": "handlePreviousMonthClick",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "footerSlot",
-              "privacy": "private",
-              "default": "new SlotController(this, 'footer')"
+              "name": "enableActiveFocus",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "disableActiveFocus",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "nord-focus-date",
               "type": {
-                "text": "'m' | 'l' | 'none'"
+                "text": "DateSelectEvent"
               },
-              "default": "'m'",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "attribute": "padding",
-              "reflects": true
+              "description": "Dispatched when the calendar's focused date changes."
             },
             {
-              "kind": "field",
-              "name": "footerDivider",
               "type": {
-                "text": "boolean"
+                "text": "DateSelectEvent"
               },
-              "default": "false",
-              "description": "When set, adds a divider border above the footer slot.",
-              "attribute": "footer-divider",
-              "reflects": true
+              "description": "Dispatched when a date is selected and the value changes.",
+              "name": "change"
             }
           ],
           "attributes": [
             {
-              "name": "padding",
+              "name": "value",
               "type": {
-                "text": "'m' | 'l' | 'none'"
+                "text": "string"
               },
-              "default": "'m'",
-              "description": "Controls the padding of the card component. When set to “none”,\nthe header and footer slots will still have padding.",
-              "fieldName": "padding"
+              "default": "''",
+              "description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
+              "fieldName": "value"
             },
             {
-              "name": "footer-divider",
+              "name": "first-day-of-week",
+              "type": {
+                "text": "DaysOfWeek"
+              },
+              "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
+              "fieldName": "firstDayOfWeek"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
+              "fieldName": "max"
+            },
+            {
+              "name": "today",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\nIf not set, the current local date of the user is used.",
+              "fieldName": "today"
+            },
+            {
+              "name": "expand",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When set, adds a divider border above the footer slot.",
-              "fieldName": "footerDivider"
+              "description": "Controls whether the calendar expands to fill the width of its container.",
+              "fieldName": "expand"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "localization": [],
+          "localization": [
+            {
+              "name": "prevMonthLabel",
+              "description": "Accessible label for the previous month button."
+            },
+            {
+              "name": "nextMonthLabel",
+              "description": "Accessible label for the next month button."
+            },
+            {
+              "name": "monthSelectLabel",
+              "description": "Accessible label for the month select."
+            },
+            {
+              "name": "yearSelectLabel",
+              "description": "Accessible label for the year select."
+            }
+          ],
           "status": "ready",
-          "category": "structure",
-          "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- Include a header when placing a [Table](/components/table) component inside the card.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t place cards within cards. Consider using the [divider](/components/divider/) component to break up sections instead.\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",
+          "category": "list",
+          "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",
           "examples": [],
-          "dependencies": [],
-          "tagName": "nord-card",
+          "dependencies": [
+            "icon",
+            "button",
+            "visually-hidden"
+          ],
+          "tagName": "nord-calendar",
           "customElement": true
         }
       ],
@@ -3653,16 +3604,65 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-card",
+          "name": "nord-calendar",
           "declaration": {
-            "name": "Card",
-            "module": "src/card/Card.ts"
+            "name": "Calendar",
+            "module": "src/calendar/Calendar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/DateSelectEvent.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DateSelectEvent",
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DateSelectEvent",
+          "declaration": {
+            "name": "DateSelectEvent",
+            "module": "src/calendar/DateSelectEvent.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/calendar/localization.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "calendarLocalization",
+          "type": {
+            "text": "object"
+          },
+          "default": "{ prevMonthLabel: 'Previous month', nextMonthLabel: 'Next month', monthSelectLabel: 'Month', yearSelectLabel: 'Year', }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "calendarLocalization",
+            "module": "src/calendar/localization.ts"
           }
         }
       ]