@nordhealth/components 2.4.0 → 2.6.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-8b36a7e5.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 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{default as Popout}from"./Popout.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";import"./query-assigned-elements-e6cbac30.js";import"./lit-element-79bc2e0e.js";import"./property-03f59dce.js";import"./Component-49a41387.js";import"./ref-697b28b5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./FocusableMixin-99db12c1.js";import"./InputMixin-158f63fb.js";import"./SlotController-ea6eff46.js";import"./if-defined-f43b1487.js";import"./class-map-cd6c8cbd.js";import"./unsafe-html-be8023cd.js";import"./FormAssociatedMixin-f6e5b3cd.js";import"./events-731d0007.js";import"./TextField-94b0839b.js";import"./AutocompleteMixin-370de2be.js";import"./SizeMixin-4559b224.js";import"./FormField-72062bf1.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./repeat-e7acc0bd.js";import"./collection-800f5002.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"./DirectionController-8b298382.js";import"./query-2d22378e.js";import"./dates-a8de5b83.js";import"./month-view.js";import"./DateSelectEvent.js";import"./interface-close-small-44ababc3.js";import"./date-adapter.js";import"./positioning-3bbd3548.js";import"./fsm-50373df9.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.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-49dc5248.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 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{default as Popout}from"./Popout.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";import"./query-assigned-elements-e6cbac30.js";import"./lit-element-79bc2e0e.js";import"./property-03f59dce.js";import"./Component-49a41387.js";import"./ref-697b28b5.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-9a6e398f.js";import"./cond-0a8d4554.js";import"./FocusableMixin-99db12c1.js";import"./InputMixin-158f63fb.js";import"./SlotController-ea6eff46.js";import"./if-defined-f43b1487.js";import"./class-map-cd6c8cbd.js";import"./unsafe-html-be8023cd.js";import"./FormAssociatedMixin-f6e5b3cd.js";import"./events-731d0007.js";import"./TextField-94b0839b.js";import"./AutocompleteMixin-370de2be.js";import"./SizeMixin-4559b224.js";import"./FormField-72062bf1.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./repeat-e7acc0bd.js";import"./collection-800f5002.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"./DirectionController-8b298382.js";import"./query-2d22378e.js";import"./dates-a8de5b83.js";import"./month-view.js";import"./DateSelectEvent.js";import"./interface-close-small-44ababc3.js";import"./date-adapter.js";import"./positioning-3bbd3548.js";import"./fsm-50373df9.js";import"./ScrollbarController-680392c9.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";
 //# sourceMappingURL=index.js.map

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

@@ -15,6 +15,7 @@ declare const Button_base: (new (...args: any[]) => import("../common/mixins/Inp
  * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).
  * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).
  * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.
+ * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using [color tokens](/tokens/#color).
  * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using [color tokens](/tokens/#color).
  * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.
  */

package/lib/src/common/mixins/InputMixin.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 declare type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
 export declare class InputMixinInterface {
-    name: string | undefined;
+    name?: string;
     value: string;
     disabled: boolean;
     get form(): HTMLFormElement | null;

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

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+declare const Drawer_base: typeof LitElement;
+/**
+ * Drawer is used to display context-sensitive actions and  information.
+ * Drawer doesn’t block users from completing their task, like a modal would.
+ *
+ * @status draft
+ * @category structure
+ * @slot header - Optional slot that holds a header for the drawer.
+ * @slot - Default slot.
+ * @slot footer - Optional slot that holds footer content for the drawer.
+ *
+ * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).
+ */
+export default class Drawer extends Drawer_base {
+    static styles: import("lit").CSSResult[];
+    private footerSlot;
+    /**
+     * Controls the padding of the drawer component.
+     */
+    padding: "m" | "none";
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-drawer": Drawer;
+    }
+}
+export {};

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

@@ -0,0 +1,6 @@
+import "../layout/Layout.js";
+import "../stack/Stack.js";
+import "../button/Button.js";
+import "../icon/Icon.js";
+import "../tooltip/Tooltip.js";
+import "../header/Header.js";

package/lib/src/dropdown/Dropdown.d.ts

@@ -27,6 +27,10 @@ export default class Dropdown extends LitElement implements Pick<Popout, "hide"
         customElements?: CustomElementRegistry | undefined;
     };
     private popout;
+    /**
+     * Controls whether the dropdown is open or not.
+     */
+    open: boolean;
     /**
      * Set the alignment of the dropdown in relation to the toggle depending on the position.
      * `start` will align the left of the dropdown to the left of the toggle.
@@ -57,6 +61,7 @@ export default class Dropdown extends LitElement implements Pick<Popout, "hide"
     render(): import("lit-html").TemplateResult<1>;
     private handleBlur;
     private handleOpen;
+    private handleClose;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/lib/src/index.d.ts

@@ -42,3 +42,4 @@ export { default as Toast } from "./toast/Toast.js";
 export { default as ToastGroup } from "./toast-group/ToastGroup.js";
 export { default as Divider } from "./divider/Divider.js";
 export { default as Qrcode } from "./qrcode/Qrcode.js";
+export { default as Drawer } from "./drawer/Drawer.js";

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

@@ -13,12 +13,16 @@ declare type NavState = States<typeof navMachine>;
  * @slot - The default main section content.
  * @slot nav - Used to place content inside the navigation sidebar.
  * @slot header - Used to place content inside the header section.
+ * @slot drawer - Used to place additional content/details relating to a selected item.
  *
  * @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).
+ * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.
  */
 export default class Layout extends LitElement {
     static styles: import("lit").CSSResult[];
     private peekTimeoutId?;
+    private navSlot;
+    private drawerSlot;
     private direction;
     private events;
     private lightDismiss;

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

@@ -19,3 +19,4 @@ import "../dropdown-item/DropdownItem.js";
 import "../tab/Tab.js";
 import "../tab-panel/TabPanel.js";
 import "../tab-group/TabGroup.js";
+import "../drawer/Drawer.js";

package/lib/src/popout/Popout.d.ts

@@ -10,15 +10,20 @@ export default class Popout extends LitElement {
     static styles: import("lit").CSSResult[];
     private targetElement;
     private cleanupAutoUpdate?;
+    private popout;
+    private scrollBar;
     /**
      * Handle dismissal of the popout, clicking outside the target button and popout.
      */
     private dismiss;
     private events;
     private direction;
-    private open;
     private computedPosition?;
     private smallViewport;
+    /**
+     * Controls whether the popout is open or not.
+     */
+    open: boolean;
     /**
      * Set the alignment of the popout in relation to the toggle depending on the position.
      * `start` will align the left of the popout to the left of the toggle.
@@ -57,6 +62,7 @@ export default class Popout extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     protected handleIdChange(): void;
     protected handleOpenChange(): void;
+    private enableScroll;
     /**
      * Get the position of the element toggling the popout
      * and position the popout underneath it, taking into account the optional placement.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "This package includes Nord Design System web components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -179,5 +179,5 @@
       }
     ]
   },
-  "gitHead": "8354944582fd2b0129872044b2b17cc6e26bf918"
+  "gitHead": "d38a584a6f8d1c3e9715035585b8b43cb2702d60"
 }