@nordhealth/components 3.7.0 → 3.9.0

package/lib/index.js

@@ -1,2 +1,2 @@
-export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-38b5ce2b.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-2220e77b.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-cb2c3648.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./Component-2253424f.js";import"./ref-99418ab4.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./FocusableMixin-d30213b4.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./query-36bfe0e4.js";import"./if-defined-cccde88f.js";import"./class-map-512f0bc1.js";import"./style-map-f8a1c8d5.js";import"./FormAssociatedMixin-a278fda4.js";import"./events-d9666e88.js";import"./TextField-2d778949.js";import"./AutocompleteMixin-5a7e10b2.js";import"./SizeMixin-ab074eff.js";import"./FormField-87551be2.js";import"./DirectionController-f35f5476.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./collection-511dcfac.js";import"./number-c3ab3e95.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./dates-5b651fbe.js";import"./DateSelectEvent.js";import"./interface-close-small-f26b0299.js";import"./date-adapter.js";import"./positioning-2346bdd6.js";import"./fsm-50373df9.js";import"./DropdownItem-588f5a6b.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";import"./DraftComponentMixin-9e4b7b34.js";
+export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-3170b9d4.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-2220e77b.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-cb2c3648.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";export{default as Footer}from"./Footer.js";import"./query-assigned-elements-92ce7494.js";import"./property-c78323b1.js";import"./Component-2253424f.js";import"./ref-99418ab4.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";import"./LightDomController-5388d84c.js";import"./cond-bb9ee891.js";import"./FocusableMixin-d30213b4.js";import"./InputMixin-83b5bd46.js";import"./SlotController-d733c575.js";import"./query-36bfe0e4.js";import"./if-defined-cccde88f.js";import"./class-map-512f0bc1.js";import"./style-map-f8a1c8d5.js";import"./FormAssociatedMixin-a278fda4.js";import"./events-d9666e88.js";import"./TextField-2d778949.js";import"./AutocompleteMixin-5a7e10b2.js";import"./SizeMixin-ab074eff.js";import"./FormField-87551be2.js";import"./DirectionController-f35f5476.js";import"./state-d31c6912.js";import"./IconManager.js";import"./observe-a9c6dfb6.js";import"./collection-511dcfac.js";import"./number-c3ab3e95.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./dates-5b651fbe.js";import"./DateSelectEvent.js";import"./interface-close-small-f26b0299.js";import"./date-adapter.js";import"./positioning-2346bdd6.js";import"./fsm-50373df9.js";import"./DropdownItem-588f5a6b.js";import"./Sticky-c34c9b12.js";import"./ScrollbarController-773c79f4.js";import"./ModalController.js";import"./NotificationMixin-207f1f56.js";
 //# sourceMappingURL=index.js.map

package/lib/src/avatar/Avatar.d.ts

@@ -11,6 +11,7 @@ import "../icon/Icon.js";
  * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).
  * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).
  * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.
+ * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).
  */
 export default class Avatar extends LitElement {
     static styles: import("lit").CSSResult[];

package/lib/src/drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import "../footer/Footer.js";
 /**
  * Drawer is used to display context-sensitive actions and  information.
  * Drawer doesn’t block users from completing their task, like a modal would.

package/lib/src/footer/Footer.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.
+ *
+ * @status draft
+ * @category structure
+ * @slot - The footer content.
+ *
+ * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).
+ * @cssprop [--n-footer-box-shadow=var(--n-box-shadow-header)] - Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).
+ * @cssprop [--n-footer-background-color=var(--n-color-surface)] - Controls the background color of the footer, using [color tokens](/tokens/#color).
+ */
+export default class Footer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Controls the size of the footer component.
+     */
+    size: "m" | "s";
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-footer": Footer;
+    }
+}

package/lib/src/footer/Footer.test.d.ts

@@ -0,0 +1,3 @@
+import "../button/Button.js";
+import "../stack/Stack.js";
+import "../icon/Icon.js";

package/lib/src/index.d.ts

@@ -50,3 +50,4 @@ export { default as ButtonGroup } from "./button-group/ButtonGroup.js";
 export { default as Notification } from "./notification/Notification.js";
 export { default as NotificationGroup } from "./notification-group/NotificationGroup.js";
 export { default as TopBar } from "./top-bar/TopBar.js";
+export { default as Footer } from "./footer/Footer.js";

package/lib/src/layout/Layout.d.ts

@@ -14,7 +14,8 @@ type NavState = States<typeof navMachine>;
  * @slot - The default main section content.
  * @slot nav - Used to place content inside the navigation sidebar.
  * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.
- * @slot header - Used to place content inside the header section.
+ * @slot header - Used to place content inside the header section. This slot can be made sticky by utilizing the `sticky` property on the layout component.
+ * @slot footer - Used to place content inside the footer section. This slot can be made sticky by utilizing the `stickyFooter` property on the layout component.
  * @slot drawer - Used to place additional content/details relating to a selected item.
  * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.
  *
@@ -29,6 +30,7 @@ export default class Layout extends LitElement {
     private drawerSlot;
     private topBarSlot;
     private headerSlot;
+    private footerSlot;
     private direction;
     private events;
     private lightDismiss;
@@ -62,6 +64,10 @@ export default class Layout extends LitElement {
      * Controls whether the layout's header has sticky positioning.
      */
     sticky: boolean;
+    /**
+     * Controls whether the layout's footer has sticky positioning.
+     */
+    stickyFooter: boolean;
     /**
      * A getter whose values reflects whether the layout component considers the viewport to be narrow or not.
      * A narrow viewport is considered to be less than 768px wide.

package/lib/src/layout/Layout.test.d.ts

@@ -4,6 +4,7 @@ import "../stack/Stack.js";
 import "../table/Table.js";
 import "../input/Input.js";
 import "../button/Button.js";
+import "../button-group/ButtonGroup.js";
 import "../header/Header.js";
 import "../card/Card.js";
 import "../badge/Badge.js";
@@ -22,3 +23,4 @@ import "../tab/Tab.js";
 import "../tab-panel/TabPanel.js";
 import "../tab-group/TabGroup.js";
 import "../drawer/Drawer.js";
+import "../footer/Footer.js";

package/lib/src/message/Message.d.ts

@@ -5,7 +5,7 @@ declare const Message_base: (new (...args: any[]) => import("../common/mixins/Fo
  * such as notifications, tasks or conversations. Message
  * can be placed directly inside a dropdown component.
  *
- * @status draft
+ * @status new
  * @category action
  * @slot - The message content.
  * @slot footer - Used to place content after the message. Typically used for a timestamp.

package/lib/src/modal/Modal.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import "../footer/Footer.js";
 /**
  * Modal component is used to display content that temporarily blocks interactions
  * with the main view of an application. Modal should be used sparingly and

package/lib/src/notification/Notification.d.ts

@@ -6,7 +6,7 @@ declare const Notification_base: (new (...args: any[]) => import("../common/mixi
  * Notifications provide important information that requires action or acknowledgement.
  * A notification is displayed until the user dismisses it.
  *
- * @status draft
+ * @status new
  * @category feedback
  * @slot - Default slot used for the notification text/message.
  * @slot icon - Slot used for the notification icon.

package/lib/src/notification-group/NotificationGroup.d.ts

@@ -1,13 +1,12 @@
 import { LitElement } from "lit";
-declare const NotificationGroup_base: typeof LitElement;
 /**
  * Notification group is used to position and style a group of notifications.
  *
- * @status draft
+ * @status new
  * @category feedback
  * @slot - Default slot in which to place notifications.
  */
-export default class NotificationGroup extends NotificationGroup_base {
+export default class NotificationGroup extends LitElement {
     static styles: import("lit").CSSResult[];
     render(): import("lit").TemplateResult<1>;
 }
@@ -16,4 +15,3 @@ declare global {
         "nord-notification-group": NotificationGroup;
     }
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -43,10 +43,10 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.8.2",
-    "@nordhealth/css": "^3.1.1",
+    "@nordhealth/css": "^3.2.0",
     "@nordhealth/fonts": "^3.0.0",
-    "@nordhealth/themes": "^8.0.1",
-    "@nordhealth/tokens": "^7.0.1",
+    "@nordhealth/themes": "^8.0.2",
+    "@nordhealth/tokens": "^7.1.0",
     "@open-wc/eslint-config": "10.0.0",
     "@open-wc/testing": "3.1.8",
     "@rollup/plugin-node-resolve": "15.0.2",
@@ -184,5 +184,5 @@
       }
     ]
   },
-  "gitHead": "52d09b2a6048e9308b1248e9ba66eddce0122c6b"
+  "gitHead": "f01f00992d6e3935fa7eb879dbf217a51638d397"
 }

package/lib/DraftComponentMixin-9e4b7b34.js

@@ -1,2 +0,0 @@
-function n(n){class e extends n{connectedCallback(){super.connectedCallback(),e._warningLogged||(console.warn(`NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,"font-weight:bold","font-weight:normal"),e._warningLogged=!0)}}return e._warningLogged=!1,e}export{n as D};
-//# sourceMappingURL=DraftComponentMixin-9e4b7b34.js.map

package/lib/DraftComponentMixin-9e4b7b34.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraftComponentMixin-9e4b7b34.js","sources":["../src/common/mixins/DraftComponentMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport function DraftComponentMixin<T extends Constructable<LitElement>>(superClass: T): T {\n  class DraftComponent extends superClass {\n    private static _warningLogged = false\n\n    connectedCallback() {\n      super.connectedCallback()\n\n      if (process.env.NODE_ENV !== \"development\" && !DraftComponent._warningLogged) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `NORD: %c${this.localName}%c should not be used in production, as it is in draft status.`,\n          \"font-weight:bold\",\n          \"font-weight:normal\"\n        )\n        DraftComponent._warningLogged = true\n      }\n    }\n  }\n\n  return DraftComponent\n}\n"],"names":["DraftComponentMixin","superClass","DraftComponent","connectedCallback","super","_warningLogged","console","warn","this","localName"],"mappings":"AAIM,SAAUA,EAAyDC,GACvE,MAAMC,UAAuBD,EAG3B,iBAAAE,GACEC,MAAMD,oBAEyCD,EAAeG,iBAE5DC,QAAQC,KACN,WAAWC,KAAKC,0EAChB,mBACA,sBAEFP,EAAeG,gBAAiB,EAEnC,EAGH,OAjBiBH,EAAcG,gBAAG,EAiB3BH,CACT"}