@nordhealth/components 4.11.0 → 4.12.1

package/lib/react.d.ts

@@ -1,12 +1,14 @@
-import type * as Components from "./src/index"
-import type { LitElement } from "lit"
-import type * as React from "react"
+import type * as Components from "./src/index";
+import type { LitElement } from "lit";
+import type * as React from "react";
 
-type WCProps<TWebComponent extends HTMLElement> = Partial<Omit<TWebComponent, keyof LitElement | "render">>
+type WCProps<TWebComponent extends HTMLElement> = Partial<
+  Omit<TWebComponent, keyof LitElement | "render">
+>;
 
 type MapEvents<T> = {
-  [K in keyof T as K extends `on${infer E}` ? `on${Lowercase<E>}` : K]: T[K]
-}
+  [K in keyof T as K extends `on${infer E}` ? `on${Lowercase<E>}` : K]: T[K];
+};
 
 declare module "react" {
   namespace JSX {
@@ -14,27 +16,27 @@ declare module "react" {
       "nord-avatar": WCProps<Components.Avatar> &
         React.RefAttributes<Components.Avatar> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-badge": WCProps<Components.Badge> &
         React.RefAttributes<Components.Badge> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-banner": WCProps<Components.Banner> &
         React.RefAttributes<Components.Banner> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-button": WCProps<Components.Button> &
         React.RefAttributes<Components.Button> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-button-group": WCProps<Components.ButtonGroup> &
         React.RefAttributes<Components.ButtonGroup> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-calendar": WCProps<Components.Calendar> &
         React.RefAttributes<Components.Calendar> &
@@ -43,18 +45,18 @@ declare module "react" {
           /**
            * Dispatched when a date is selected and the value changes.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Dispatched when the calendar's focused date changes.
            */
-          "onnord-focus-date"?: (event: Event) => void
-        }
+          "onnord-focus-date"?: (event: Event) => void;
+        };
 
       "nord-card": WCProps<Components.Card> &
         React.RefAttributes<Components.Card> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-checkbox": WCProps<Components.Checkbox> &
         React.RefAttributes<Components.Checkbox> &
@@ -63,13 +65,13 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-command-menu": WCProps<Components.CommandMenu> &
         React.RefAttributes<Components.CommandMenu> &
@@ -78,23 +80,23 @@ declare module "react" {
           /**
            * The command menu was closed.
            */
-          onclose?: (event: Event) => void
+          onclose?: (event: Event) => void;
 
           /**
            * Fired as the user types into the search input.
            */
-          oninput?: (event: Event) => void
+          oninput?: (event: Event) => void;
 
           /**
            * User selected a command from the menu.
            */
-          "onnord-select"?: (event: Event) => void
+          "onnord-select"?: (event: Event) => void;
 
           /**
            * The command menu was opened.
            */
-          onopen?: (event: Event) => void
-        }
+          onopen?: (event: Event) => void;
+        };
 
       "nord-date-picker": WCProps<Components.DatePicker> &
         React.RefAttributes<Components.DatePicker> &
@@ -103,38 +105,38 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Dispatched when the popout is closed.
            */
-          onclose?: (event: Event) => void
+          onclose?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
+          oninput?: (event: Event) => void;
 
           /**
            * Dispatched when the calendar's focused date changes.
            */
-          "onnord-focus-date"?: (event: Event) => void
+          "onnord-focus-date"?: (event: Event) => void;
 
           /**
            * Dispatched when the popout is opened.
            */
-          onopen?: (event: Event) => void
-        }
+          onopen?: (event: Event) => void;
+        };
 
       "nord-divider": WCProps<Components.Divider> &
         React.RefAttributes<Components.Divider> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-drawer": WCProps<Components.Drawer> &
         React.RefAttributes<Components.Drawer> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-dropdown": WCProps<Components.Dropdown> &
         React.RefAttributes<Components.Dropdown> &
@@ -143,48 +145,48 @@ declare module "react" {
           /**
            * Dispatched when the popout is closed.
            */
-          onclose?: (event: Event) => void
+          onclose?: (event: Event) => void;
 
           /**
            * Dispatched when the popout is opened.
            */
-          onopen?: (event: Event) => void
-        }
+          onopen?: (event: Event) => void;
+        };
 
       "nord-dropdown-group": WCProps<Components.DropdownGroup> &
         React.RefAttributes<Components.DropdownGroup> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-dropdown-item": WCProps<Components.DropdownItem> &
         React.RefAttributes<Components.DropdownItem> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-empty-state": WCProps<Components.EmptyState> &
         React.RefAttributes<Components.EmptyState> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-fieldset": WCProps<Components.Fieldset> &
         React.RefAttributes<Components.Fieldset> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-footer": WCProps<Components.Footer> &
         React.RefAttributes<Components.Footer> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-header": WCProps<Components.Header> &
         React.RefAttributes<Components.Header> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-icon": WCProps<Components.Icon> &
         React.RefAttributes<Components.Icon> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-input": WCProps<Components.Input> &
         React.RefAttributes<Components.Input> &
@@ -193,28 +195,28 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
+          oninput?: (event: Event) => void;
 
           /**
            * Fired when some text has been selected.
            */
-          onselect?: (event: Event) => void
-        }
+          onselect?: (event: Event) => void;
+        };
 
       "nord-layout": WCProps<Components.Layout> &
         React.RefAttributes<Components.Layout> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-message": WCProps<Components.Message> &
         React.RefAttributes<Components.Message> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-modal": WCProps<Components.Modal> &
         React.RefAttributes<Components.Modal> &
@@ -223,13 +225,13 @@ declare module "react" {
           /**
            * Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.
            */
-          oncancel?: (event: Event) => void
+          oncancel?: (event: Event) => void;
 
           /**
            * Dispatched when a modal is closed for any reason.
            */
-          onclose?: (event: Event) => void
-        }
+          onclose?: (event: Event) => void;
+        };
 
       "nord-nav-group": WCProps<Components.NavGroup> &
         React.RefAttributes<Components.NavGroup> &
@@ -238,13 +240,13 @@ declare module "react" {
           /**
            * Dispatched whenever a nav item has been marked as active
            */
-          onactivate?: (event: Event) => void
+          onactivate?: (event: Event) => void;
 
           /**
            * Dispatched whenever a nav item's state changes between open and closed.
            */
-          ontoggle?: (event: Event) => void
-        }
+          ontoggle?: (event: Event) => void;
+        };
 
       "nord-navigation": WCProps<Components.Navigation> &
         React.RefAttributes<Components.Navigation> &
@@ -253,13 +255,13 @@ declare module "react" {
           /**
            * Dispatched whenever a nav item has been marked as active
            */
-          onactivate?: (event: Event) => void
+          onactivate?: (event: Event) => void;
 
           /**
            * Dispatched whenever a nav item's state changes between open and closed.
            */
-          ontoggle?: (event: Event) => void
-        }
+          ontoggle?: (event: Event) => void;
+        };
 
       "nord-nav-item": WCProps<Components.NavItem> &
         React.RefAttributes<Components.NavItem> &
@@ -268,18 +270,18 @@ declare module "react" {
           /**
            * Dispatched whenever a nav item has been marked as active
            */
-          onactivate?: (event: Event) => void
+          onactivate?: (event: Event) => void;
 
           /**
            * Dispatched whenever a nav item's state changes between open and closed.
            */
-          ontoggle?: (event: Event) => void
-        }
+          ontoggle?: (event: Event) => void;
+        };
 
       "nord-nav-toggle": WCProps<Components.NavToggle> &
         React.RefAttributes<Components.NavToggle> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-notification": WCProps<Components.Notification> &
         React.RefAttributes<Components.Notification> &
@@ -288,8 +290,8 @@ declare module "react" {
           /**
            * Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
            */
-          ondismiss?: (event: Event) => void
-        }
+          ondismiss?: (event: Event) => void;
+        };
 
       "nord-notification-group": WCProps<Components.NotificationGroup> &
         React.RefAttributes<Components.NotificationGroup> &
@@ -298,8 +300,8 @@ declare module "react" {
           /**
            * Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
            */
-          ondismiss?: (event: Event) => void
-        }
+          ondismiss?: (event: Event) => void;
+        };
 
       "nord-popout": WCProps<Components.Popout> &
         React.RefAttributes<Components.Popout> &
@@ -308,23 +310,28 @@ declare module "react" {
           /**
            * Dispatched when the popout is closed.
            */
-          onclose?: (event: Event) => void
+          onclose?: (event: Event) => void;
 
           /**
            * Dispatched when the popout is opened.
            */
-          onopen?: (event: Event) => void
-        }
+          onopen?: (event: Event) => void;
+        };
+
+      "nord-progress": WCProps<Components.Progress> &
+        React.RefAttributes<Components.Progress> &
+        React.HTMLAttributes<HTMLElement> &
+        React.Attributes & {};
 
       "nord-progress-bar": WCProps<Components.ProgressBar> &
         React.RefAttributes<Components.ProgressBar> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-qrcode": WCProps<Components.Qrcode> &
         React.RefAttributes<Components.Qrcode> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-radio": WCProps<Components.Radio> &
         React.RefAttributes<Components.Radio> &
@@ -333,13 +340,13 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-range": WCProps<Components.Range> &
         React.RefAttributes<Components.Range> &
@@ -348,13 +355,13 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-segmented-control": WCProps<Components.SegmentedControl> &
         React.RefAttributes<Components.SegmentedControl> &
@@ -363,8 +370,8 @@ declare module "react" {
           /**
            * Fired whenever a segmented control item has been checked.
            */
-          onchange?: (event: Event) => void
-        }
+          onchange?: (event: Event) => void;
+        };
 
       "nord-segmented-control-item": WCProps<Components.SegmentedControlItem> &
         React.RefAttributes<Components.SegmentedControlItem> &
@@ -373,13 +380,13 @@ declare module "react" {
           /**
            * Fired whenever the segmented control item has been checked.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-select": WCProps<Components.Select> &
         React.RefAttributes<Components.Select> &
@@ -388,48 +395,48 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-skeleton": WCProps<Components.Skeleton> &
         React.RefAttributes<Components.Skeleton> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-spinner": WCProps<Components.Spinner> &
         React.RefAttributes<Components.Spinner> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-stack": WCProps<Components.Stack> &
         React.RefAttributes<Components.Stack> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-tab": WCProps<Components.Tab> &
         React.RefAttributes<Components.Tab> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-tab-group": WCProps<Components.TabGroup> &
         React.RefAttributes<Components.TabGroup> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-table": WCProps<Components.Table> &
         React.RefAttributes<Components.Table> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-tab-panel": WCProps<Components.TabPanel> &
         React.RefAttributes<Components.TabPanel> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-tag": WCProps<Components.Tag> &
         React.RefAttributes<Components.Tag> &
@@ -438,13 +445,13 @@ declare module "react" {
           /**
            * Fired whenever the tag has been checked or unchecked via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.
            */
-          onremove?: (event: Event) => void
-        }
+          onremove?: (event: Event) => void;
+        };
 
       "nord-tag-group": WCProps<Components.TagGroup> &
         React.RefAttributes<Components.TagGroup> &
@@ -453,13 +460,13 @@ declare module "react" {
           /**
            * Fired whenever a tag has been checked or unchecked via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.
            */
-          onremove?: (event: Event) => void
-        }
+          onremove?: (event: Event) => void;
+        };
 
       "nord-textarea": WCProps<Components.Textarea> &
         React.RefAttributes<Components.Textarea> &
@@ -468,18 +475,18 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
+          oninput?: (event: Event) => void;
 
           /**
            * Fired when some text has been selected.
            */
-          onselect?: (event: Event) => void
-        }
+          onselect?: (event: Event) => void;
+        };
 
       "nord-toast": WCProps<Components.Toast> &
         React.RefAttributes<Components.Toast> &
@@ -488,8 +495,8 @@ declare module "react" {
           /**
            * Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
            */
-          ondismiss?: (event: Event) => void
-        }
+          ondismiss?: (event: Event) => void;
+        };
 
       "nord-toast-group": WCProps<Components.ToastGroup> &
         React.RefAttributes<Components.ToastGroup> &
@@ -498,8 +505,8 @@ declare module "react" {
           /**
            * Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
            */
-          ondismiss?: (event: Event) => void
-        }
+          ondismiss?: (event: Event) => void;
+        };
 
       "nord-toggle": WCProps<Components.Toggle> &
         React.RefAttributes<Components.Toggle> &
@@ -508,28 +515,28 @@ declare module "react" {
           /**
            * Fired whenever the input's value is changed via user interaction.
            */
-          onchange?: (event: Event) => void
+          onchange?: (event: Event) => void;
 
           /**
            * Fired as the user types into the input.
            */
-          oninput?: (event: Event) => void
-        }
+          oninput?: (event: Event) => void;
+        };
 
       "nord-tooltip": WCProps<Components.Tooltip> &
         React.RefAttributes<Components.Tooltip> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-top-bar": WCProps<Components.TopBar> &
         React.RefAttributes<Components.TopBar> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
 
       "nord-visually-hidden": WCProps<Components.VisuallyHidden> &
         React.RefAttributes<Components.VisuallyHidden> &
         React.HTMLAttributes<HTMLElement> &
-        React.Attributes & {}
+        React.Attributes & {};
     }
   }
 }

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

@@ -1,6 +1,6 @@
-import { LitElement, nothing } from "lit";
-import "../visually-hidden/VisuallyHidden.js";
-import "../icon/Icon.js";
+import { LitElement, nothing } from 'lit';
+import '../visually-hidden/VisuallyHidden.js';
+import '../icon/Icon.js';
 /**
  * Avatar is used for showing a thumbnail representation of a single user or entity.
  * Default avatar illustration is displayed when no src is specified.
@@ -19,7 +19,7 @@ export default class Avatar extends LitElement {
     /**
      * The size of the avatar.
      */
-    size: "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+    size: 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
     /**
      * The URL of the avatar image uploaded by the user.
      */
@@ -35,7 +35,7 @@ export default class Avatar extends LitElement {
     /**
      * The style variant of the avatar.
      */
-    variant: "default" | "square";
+    variant: 'default' | 'square';
     render(): import("lit").TemplateResult<1>;
     protected handleSrcChange(): void;
     protected renderImage(): import("lit").TemplateResult<1> | typeof nothing;
@@ -45,6 +45,6 @@ export default class Avatar extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "nord-avatar": Avatar;
+        'nord-avatar': Avatar;
     }
 }