@nordhealth/components 1.8.3 → 1.10.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-e5fc9c3b.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";import"./query-assigned-elements-ef860822.js";import"./lit-element-67e6cd99.js";import"./property-03f59dce.js";import"./Component-a61df53a.js";import"./ref-57ff8ffc.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./FocusableMixin-175ea4d7.js";import"./InputMixin-9334d385.js";import"./SlotController-ea6eff46.js";import"./if-defined-fe1a64e3.js";import"./class-map-f1b6f1fa.js";import"./unsafe-html-61a04601.js";import"./FormAssociatedMixin-d3124755.js";import"./events-731d0007.js";import"./FormField-d3767c2e.js";import"./TextField-93a3922f.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./repeat-084c4167.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"./date-adapter.js";import"./positioning-b660767c.js";import"./fsm-50373df9.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.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-2797d956.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-ef860822.js";import"./lit-element-67e6cd99.js";import"./property-03f59dce.js";import"./Component-a61df53a.js";import"./ref-57ff8ffc.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./FocusableMixin-175ea4d7.js";import"./InputMixin-9334d385.js";import"./SlotController-ea6eff46.js";import"./if-defined-fe1a64e3.js";import"./class-map-f1b6f1fa.js";import"./unsafe-html-61a04601.js";import"./FormAssociatedMixin-d0d98a92.js";import"./events-731d0007.js";import"./TextField-f48e2e5c.js";import"./AutocompleteMixin-ca948bdb.js";import"./FormField-d3767c2e.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./repeat-084c4167.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-b660767c.js";import"./fsm-50373df9.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./DraftComponentMixin-9e4b7b34.js";
 //# sourceMappingURL=index.js.map

package/lib/interface-close-small-44ababc3.js

@@ -0,0 +1,2 @@
+var e=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});export{e as c};
+//# sourceMappingURL=interface-close-small-44ababc3.js.map

package/lib/interface-close-small-44ababc3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface-close-small-44ababc3.js","sources":["../../icons/lib/assets/interface-close-small.js"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n"],"names":[],"mappings":"4CAAe,+YACM,6BACD"}

package/lib/src/common/controllers/ScrollbarController.d.ts

@@ -8,4 +8,5 @@ export declare class ScrollbarController implements ReactiveController {
     get width(): number;
     hide(): void;
     restore(): void;
+    private setStyle;
 }

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

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+declare type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
+declare type AutocompleteAttribute = "off" | "on" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
+export declare class AutocompleteMixinInterface {
+    autocomplete: AutocompleteAttribute;
+}
+export declare function AutocompleteMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<AutocompleteMixinInterface> & T;
+export {};

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

@@ -4,7 +4,7 @@ export declare class InputMixinInterface {
     name: string | undefined;
     value: string;
     disabled: boolean;
-    form?: HTMLFormElement;
+    get form(): HTMLFormElement | null;
 }
 export declare function InputMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<InputMixinInterface> & T;
 export {};

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

@@ -0,0 +1,7 @@
+import { LitElement } from "lit";
+declare type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
+export declare class ReadonlyMixinInterface {
+    readonly: boolean;
+}
+export declare function ReadonlyMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<ReadonlyMixinInterface> & T;
+export {};

package/lib/src/date-picker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import "../visually-hidden/VisuallyHidden.js";
 import "../calendar/Calendar.js";
 import type { DateDisabledPredicate } from "../calendar/Calendar.js";
 import { DateAdapter } from "./date-adapter.js";
-declare const DatePicker_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+declare const DatePicker_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/ReadonlyMixin.js").ReadonlyMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
 /**
  *
  * Date Picker allows user to enter a date either through text input,

package/lib/src/divider/Divider.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+declare const Divider_base: typeof LitElement;
+/**
+ * Divider components are used to separate and distinguish sections of
+ * content or groups of menu items. Visually, they look like
+ * horizontal or vertical lines.
+ *
+ * @status draft
+ * @category structure
+ */
+export default class Divider extends Divider_base {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The direction of the divider.
+     */
+    direction: "vertical" | "horizontal";
+    firstUpdated(): void;
+    private handleDirectionChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-divider": Divider;
+    }
+}
+export {};

package/lib/src/divider/Divider.test.d.ts

@@ -0,0 +1,2 @@
+import "../stack/Stack.js";
+import "../card/Card.js";

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

@@ -11,7 +11,7 @@ import "../popout/Popout.js";
  * @slot - The dropdown content.
  * @slot toggle - Used to place the toggle for dropdown.
  */
-export default class Dropdown extends LitElement {
+export default class Dropdown extends LitElement implements Pick<Popout, "hide" | "show"> {
     static styles: import("lit").CSSResult[];
     /**
      * we delegate focus, to ensure focus does not move to body if you click
@@ -45,6 +45,8 @@ export default class Dropdown extends LitElement {
      */
     expand: boolean;
     connectedCallback(): void;
+    hide(moveFocusToButton?: boolean): void;
+    show(): void;
     render(): import("lit-html").TemplateResult<1>;
     private handleBlur;
     private handleOpen;

package/lib/src/index.d.ts

@@ -38,3 +38,7 @@ export { default as TabPanel } from "./tab-panel/TabPanel.js";
 export { default as Toggle } from "./toggle/Toggle.js";
 export { default as Modal } from "./modal/Modal.js";
 export { default as Skeleton } from "./skeleton/Skeleton.js";
+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";

package/lib/src/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-declare const Input_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+declare const Input_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/AutocompleteMixin.js").AutocompleteMixinInterface) & (new (...args: any[]) => import("../common/mixins/ReadonlyMixin.js").ReadonlyMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
 /**
  * Inputs are used to allow users to provide text input when the expected input is short.
  * As well as plain text, Input supports various types of text, including passwords and numbers.
@@ -20,6 +20,10 @@ export default class Input extends Input_base {
      * The type of the input.
      */
     type: "text" | "email" | "password" | "tel" | "url" | "search" | "number";
+    /**
+     * Controls whether the input expands to fill the width of its container.
+     */
+    expand: boolean;
     render(): import("lit-html").TemplateResult<1>;
     private handleKeydown;
 }

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

@@ -1,5 +1,4 @@
 import { LitElement } from "lit";
-import "../icon/Icon.js";
 declare const Modal_base: typeof LitElement;
 /**
  * Modal component is used to display content that temporarily blocks interactions

package/lib/src/qrcode/Qrcode.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from "lit";
+declare const Qrcode_base: typeof LitElement;
+/**
+ * QR Code component is used for providing information or links
+ * to users which they can quickly scan with their smartphone.
+ *
+ * @status draft
+ * @category image
+ * @displayName QR Code
+ */
+export default class Qrcode extends Qrcode_base {
+    static styles: import("lit").CSSResult[];
+    private canvas;
+    private computed;
+    /**
+     * The value of the QR Code, most commonly an URL.
+     */
+    value: string;
+    /**
+     * Label used by assistive technology. If unspecified, the value will
+     * be used instead.
+     */
+    label: string;
+    /**
+     * The size of the rendered QR Code in pixels.
+     */
+    size: number;
+    /**
+     * The fill color of the QR Code.
+     * Can accept any valid CSS color value, including custom properties.
+     */
+    color: string;
+    /**
+     * The background color of the QR Code.
+     * Can accept any valid CSS color value, including custom properties.
+     */
+    background: string;
+    /**
+     * Error correction level makes the QR Code bigger and helps users to
+     * scan it without issues. L, M, Q and H values will use 7%, 15%, 25%
+     * and 30% of the QR code for error correction respectively.
+     */
+    correction: "L" | "M" | "Q" | "H";
+    firstUpdated(): void;
+    private generate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-qrcode": Qrcode;
+    }
+}
+export {};

package/lib/src/qrcode/Qrcode.test.d.ts

@@ -0,0 +1,2 @@
+import "../stack/Stack.js";
+import "../input/Input.js";

package/lib/src/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import "../button/Button.js";
-declare const Select_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+declare const Select_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/AutocompleteMixin.js").AutocompleteMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
 /**
  * Select lets users choose one option from an options menu.
  * Consider using select when you have 5 or more options to choose from.
@@ -17,6 +17,10 @@ export default class Select extends Select_base {
     protected get formValue(): string | undefined;
     private defaultSlot;
     protected inputId: string;
+    /**
+     * Controls whether the select expands to fill the width of its container.
+     */
+    expand: boolean;
     render(): import("lit-html").TemplateResult<1>;
     private get options();
     private getButtonText;

package/lib/src/textarea/Textarea.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-declare const Textarea_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
+declare const Textarea_base: (new (...args: any[]) => import("../common/mixins/FormAssociatedMixin.js").FormAssociatedMixinInterface) & (new (...args: any[]) => import("../common/mixins/AutocompleteMixin.js").AutocompleteMixinInterface) & (new (...args: any[]) => import("../common/mixins/ReadonlyMixin.js").ReadonlyMixinInterface) & (new (...args: any[]) => import("../common/mixins/InputMixin.js").InputMixinInterface) & (new (...args: any[]) => import("../common/mixins/FocusableMixin.js").FocusableMixinInterface) & typeof LitElement;
 /**
  * Textarea is a component that allows user to write text over
  * multiple rows. Used when the expected user input is long.
@@ -20,6 +20,10 @@ export default class Textarea extends Textarea_base {
      * Set to "auto" to enable auto-resizing as content grows.
      */
     resize: "vertical" | "auto";
+    /**
+     * Controls whether the textarea expands to fill the width of its container.
+     */
+    expand: boolean;
     render(): import("lit-html").TemplateResult<1>;
     protected resizeToFitContent(): void;
 }

package/lib/src/toast/Toast.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+declare const Toast_base: typeof LitElement;
+/**
+ * Toasts are non-disruptive messages that appear in the interface
+ * to provide quick, at-a-glance feedback on the outcome of an action.
+ *
+ * @status draft
+ * @category feedback
+ * @slot - Default slot used for the toast text/message.
+ * @fires dismiss - 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.
+ */
+export default class Toast extends Toast_base {
+    static styles: import("lit").CSSResult[];
+    private timeoutId?;
+    private events;
+    private toast;
+    private dismissed;
+    /**
+     * The style variant of the toast.
+     */
+    variant: "default" | "danger";
+    /**
+     * Timeout in milliseconds before the toast is automatically dismissed.
+     */
+    autoDismiss?: number | undefined;
+    disconnectedCallback(): void;
+    /**
+     * Programmatically dismiss the toast.
+     * The returned promise resolves when toast's exit animation is complete.
+     */
+    dismiss(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    protected handleAutoDismissChange(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-toast": Toast;
+    }
+}
+export {};

package/lib/src/toast/Toast.test.d.ts

@@ -0,0 +1,2 @@
+import "../toast-group/ToastGroup.js";
+import "../button/Button.js";

package/lib/src/toast-group/ToastGroup.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+import Toast from "../toast/Toast.js";
+declare type ToastOptions = Partial<Pick<Toast, "variant" | "autoDismiss">>;
+declare const ToastGroup_base: typeof LitElement;
+/**
+ * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.
+ *
+ * @status draft
+ * @category feedback
+ * @slot - Default slot in which to place toasts.
+ */
+export default class ToastGroup extends ToastGroup_base {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Convenience method for creating and adding a toast to the group.
+     * @param {string} text - The text/message of the toast.
+     * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.
+     * @returns The toast instance.
+     */
+    addToast(text: string, options?: ToastOptions): Toast;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nord-toast-group": ToastGroup;
+    }
+}
+export {};

package/lib/src/toast-group/ToastGroup.test.d.ts

@@ -0,0 +1,2 @@
+import "../toast/Toast.js";
+import "../button/Button.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "1.8.3",
+  "version": "1.10.0",
   "description": "This package includes Nord Design System web components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -34,6 +34,7 @@
     "@floating-ui/dom": "0.5.3",
     "@nordhealth/icons": "^1.3.9",
     "lit": "2.2.5",
+    "qr-creator": "1.0.0",
     "tinykeys": "1.4.0"
   },
   "devDependencies": {
@@ -178,5 +179,5 @@
       }
     ]
   },
-  "gitHead": "25d9c4f8b4aefdb2a1507f2eb54432094bd99276"
+  "gitHead": "b1935444f7bb41f66d311cff82e9891e6e9586df"
 }

package/lib/FormAssociatedMixin-d3124755.js

@@ -1,2 +0,0 @@
-import{_ as t}from"./query-assigned-elements-ef860822.js";import{$ as e}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{E as o}from"./EventController-d99ebeef.js";import{S as i}from"./SlotController-ea6eff46.js";import{N as s}from"./events-731d0007.js";import"./VisuallyHidden.js";class n{constructor(t,e){this.host=t,this.options=e,this.handleFormData=t=>{const{disabled:e,name:r}=this.host;if(e)return;const o=this.options.value();r&&null!=o&&t.formData.append(r,o)},t.addController(this),this.events=new o(t)}hostConnected(){this.host.form&&this.events.listen(this.host.form,"formdata",this.handleFormData)}}function h(o){class h extends o{constructor(){super(...arguments),this.labelSlot=new i(this,"label"),this.errorSlot=new i(this,"error"),this.hintSlot=new i(this,"hint"),this.formData=new n(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(){const t=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${t}</nord-visually-hidden>`:e`<div class="n-label-container">${t}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r()],h.prototype,"label",void 0),t([r()],h.prototype,"hint",void 0),t([r({type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r()],h.prototype,"placeholder",void 0),t([r()],h.prototype,"error",void 0),t([r({type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"expand",void 0),h}export{h as F};
-//# sourceMappingURL=FormAssociatedMixin-d3124755.js.map

package/lib/FormAssociatedMixin-d3124755.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormAssociatedMixin-d3124755.js","sources":["../src/common/controllers/FormDataController.ts","../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\nimport { EventController } from \"./EventController.js\"\n\ntype FormDataOptions = {\n  value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n  private events: EventController\n  constructor(private host: ReactiveControllerHost & InputMixinInterface, private options: FormDataOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n  }\n\n  hostConnected() {\n    if (this.host.form) {\n      this.events.listen(this.host.form, \"formdata\", this.handleFormData)\n    }\n  }\n\n  private handleFormData = (e: FormDataEvent) => {\n    const { disabled, name } = this.host\n\n    if (disabled) {\n      return\n    }\n\n    const value = this.options.value()\n\n    if (name && value != null) {\n      e.formData.append(name, value)\n    }\n  }\n}\n","/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n  expand: boolean\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, \"label\")\n    protected errorSlot = new SlotController(this, \"error\")\n    protected hintSlot = new SlotController(this, \"hint\")\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = \"input\"\n    protected errorId = \"error\"\n    protected hintId = \"hint\"\n\n    /**\n     * Label for the input.\n     */\n    @property() label: string = \"\"\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property() hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property() placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property() error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ type: Boolean }) required = false\n\n    /**\n     * Controls whether the input expands to fill the width of its container.\n     */\n    @property({ reflect: true, type: Boolean }) expand = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent(\"input\"))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent(\"change\"))\n    }\n\n    protected renderLabel() {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? \"true\" : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormDataController","constructor","host","options","this","handleFormData","e","disabled","name","value","formData","append","addController","events","EventController","hostConnected","form","listen","FormAssociatedMixin","superClass","FormAssociatedElement","labelSlot","SlotController","errorSlot","hintSlot","formValue","inputId","errorId","hintId","label","hideLabel","required","expand","handleInput","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","prototype","type","attribute","reflect"],"mappings":"iUAQaA,EAEXC,YAAoBC,EAA4DC,GAA5DC,KAAIF,KAAJA,EAA4DE,KAAOD,QAAPA,EAWxEC,KAAAC,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASJ,KAAKF,KAEhC,GAAIK,EACF,OAGF,MAAME,EAAQL,KAAKD,QAAQM,QAEvBD,GAAiB,MAATC,GACVH,EAAEI,SAASC,OAAOH,EAAMC,IApB1BP,EAAKU,cAAcR,MACnBA,KAAKS,OAAS,IAAIC,EAAgBZ,GAGpCa,gBACMX,KAAKF,KAAKc,MACZZ,KAAKS,OAAOI,OAAOb,KAAKF,KAAKc,KAAM,WAAYZ,KAAKC,iBCwBpD,SAAUa,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApClB,kCACYG,KAASiB,UAAG,IAAIC,EAAelB,KAAM,SACrCA,KAASmB,UAAG,IAAID,EAAelB,KAAM,SACrCA,KAAQoB,SAAG,IAAIF,EAAelB,KAAM,QACpCA,KAAAM,SAAW,IAAIV,EAAmBI,KAAM,CAAEK,MAAO,IAAML,KAAKqB,YAM5DrB,KAAOsB,QAAG,QACVtB,KAAOuB,QAAG,QACVvB,KAAMwB,OAAG,OAKPxB,KAAKyB,MAAW,GAU0BzB,KAAS0B,WAAG,EAiBrC1B,KAAQ2B,UAAG,EAKI3B,KAAM4B,QAAG,EA3CvCP,gBACZ,OAAOrB,KAAKK,MA4CJwB,YAAY3B,GACpBA,EAAE4B,kBACF,MAAMC,EAAS7B,EAAE6B,OACjB/B,KAAKK,MAAQ0B,EAAO1B,MAKpBL,KAAKgC,cAAc,IAAIC,EAAU,UAGzBC,aAAahC,GACrBA,EAAE4B,kBAKF9B,KAAKgC,cAAc,IAAIC,EAAU,WAGzBE,cACR,MAAMV,EAAQW,CAAI,eACHpC,KAAKsB,+BACKtB,KAAKyB,yDAGOzB,KAAKwB,qBAAmBxB,KAAKqC,8BAC1CrC,KAAKsC,oBAI7B,OAAOtC,KAAK0B,UACRU,CAAI,yBAAyBX,2BAC7BW,CAAI,kCAAkCX,UAGlCc,cACR,OAAOH,CAAI,sCAC2BpC,KAAKuB,mCAAiCvB,KAAKwC,gCACxDxC,KAAKyC,qBAKtBC,iBACR,MAAML,QAAEA,EAAOG,SAAEA,GAAaxC,KAE9B,OAAIqC,GAAWG,EACN,GAAGxC,KAAKwB,UAAUxB,KAAKuB,UAE5Bc,EACKrC,KAAKwB,OAEVgB,EACKxC,KAAKuB,aADd,EAOQoB,aACR,OAAO3C,KAAKwC,SAAW,YAASI,EAGpBP,cACZ,OAAOQ,QAAQ7C,KAAKsC,OAAStC,KAAKoB,SAAS0B,WAG/BN,eACZ,OAAOK,QAAQ7C,KAAKyC,QAAUzC,KAAKmB,UAAU2B,YAIjD,OA3GcC,EAAA,CAAXC,KAA6BhC,EAAAiC,UAAA,aAAA,GAKlBF,EAAA,CAAXC,KAAwBhC,EAAAiC,UAAA,YAAA,GAK6BF,EAAA,CAArDC,EAAS,CAAEE,KAAML,QAASM,UAAW,gBAAiCnC,EAAAiC,UAAA,iBAAA,GAK3DF,EAAA,CAAXC,KAA+BhC,EAAAiC,UAAA,mBAAA,GAKpBF,EAAA,CAAXC,KAAyBhC,EAAAiC,UAAA,aAAA,GAOGF,EAAA,CAA5BC,EAAS,CAAEE,KAAML,WAA2B7B,EAAAiC,UAAA,gBAAA,GAKDF,EAAA,CAA3CC,EAAS,CAAEI,SAAS,EAAMF,KAAML,WAAyB7B,EAAAiC,UAAA,cAAA,GA2ErDjC"}

package/lib/TextField-93a3922f.js

@@ -1,2 +0,0 @@
-import{r as n}from"./lit-element-67e6cd99.js";const r=n`.n-input-container{position:relative;inline-size:var(--n-input-width,240px)}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);inline-size:100%;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){--n-input-width:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-accent);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled,.n-label-container:hover+.n-input-container .n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
-//# sourceMappingURL=TextField-93a3922f.js.map

package/lib/TextField-93a3922f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextField-93a3922f.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}