@ndwnu/design-system 1.1.1 → 3.0.0

package/components/icon/action-icon/action-icon.component.d.ts

@@ -0,0 +1,33 @@
+import { IconSize } from '../icon.component';
+import * as i0 from "@angular/core";
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type IconVariant = 'primary' | 'link' | 'grey' | 'white';
+export declare class ActionIconComponent {
+    /**
+     * Used to give meaning to the button, used by screen readers.
+     */
+    ariaLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * Color scheme of the ActionIcon, available `primary`, `link`,
+     * `grey` and `white` (defaults to primary).
+     */
+    variant: import("@angular/core").InputSignal<IconVariant>;
+    /**
+     * Specify button type, defaults to `button`
+     */
+    buttonType: import("@angular/core").InputSignal<ButtonType>;
+    /**
+     * Disables the button, defaults to `false`.
+     */
+    disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Sets the size of the button, defaults to `md`.
+     */
+    size: import("@angular/core").InputSignal<IconSize>;
+    /**
+     * Event emitted when the button is clicked.
+     */
+    readonly onClick: import("@angular/core").OutputEmitterRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionIconComponent, "ndw-action-icon", never, { "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "buttonType": { "alias": "buttonType"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}

package/components/icon/action-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './action-icon.component';

package/components/icon/icon.component.d.ts

@@ -1,14 +1,12 @@
 import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
+export type IconSize = 'sm' | 'md';
 export declare class IconComponent implements OnInit {
+    size: import("@angular/core").InputSignal<IconSize>;
     private readonly elementRef;
     private readonly renderer;
-    interactive: import("@angular/core").InputSignal<boolean>;
-    protected iconClass: string;
-    protected get interactiveClass(): boolean;
-    protected get role(): string;
-    protected get tabIndex(): number;
+    get hostClass(): string;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ndw-icon", never, { "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ndw-icon", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/icon/index.d.ts

@@ -1 +1,2 @@
+export * from './action-icon';
 export * from './icon.component';

package/components/index.d.ts

@@ -18,4 +18,5 @@ export * from './router-breadcrumbs';
 export * from './tab';
 export * from './tab-group';
 export * from './tooltip';
+export * from './toast';
 export * from './removable-pill';

package/components/main-navigation/main-navigation.component.d.ts

@@ -1,23 +1,32 @@
 import { ConnectedPosition } from '@angular/cdk/overlay';
-import { AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { AfterViewInit, ElementRef, OnDestroy, TemplateRef } from '@angular/core';
 import { MainNavigationMenuComponent } from '../main-navigation-menu';
 import { MenuItem, NdwBrand, SimpleMenuItem } from './main-navigation.model';
 import * as i0 from "@angular/core";
-export declare class MainNavigationComponent implements AfterViewInit {
+export declare class MainNavigationComponent implements AfterViewInit, OnDestroy {
     applicationName: import("@angular/core").InputSignal<string>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     bottomMenuItems: import("@angular/core").InputSignal<MenuItem[] | undefined>;
     brand: import("@angular/core").InputSignal<NdwBrand>;
     footerTexts: import("@angular/core").InputSignal<string[] | undefined>;
     isCollapsible: import("@angular/core").InputSignal<boolean>;
-    selected: import("@angular/core").OutputEmitterRef<number>;
+    version: import("@angular/core").InputSignal<string | undefined>;
+    closeButtonLabel: import("@angular/core").InputSignal<string>;
+    menuButtonLabel: import("@angular/core").InputSignal<string>;
     isExpanded: import("@angular/core").ModelSignal<boolean>;
+    isMobileExpanded: import("@angular/core").ModelSignal<boolean>;
     buttons: import("@angular/core").Signal<readonly ElementRef<HTMLButtonElement>[]>;
     childMenuTemplate: import("@angular/core").Signal<TemplateRef<MainNavigationMenuComponent>>;
+    isMobile: import("@angular/core").WritableSignal<boolean>;
     brandImagePath: import("@angular/core").Signal<string>;
+    protected mobilePortal?: TemplatePortal<MainNavigationMenuComponent>;
+    private activeId?;
     protected get brandAttribute(): string;
     protected get expandedClass(): boolean;
+    protected get mobileClass(): boolean;
     onMouseMove(event: MouseEvent): void;
+    onWindowResize(): void;
     activeChildItems: SimpleMenuItem[];
     overlayPositions: ConnectedPosition[];
     private overlay;
@@ -25,11 +34,15 @@ export declare class MainNavigationComponent implements AfterViewInit {
     private activeButton?;
     private overlayRef?;
     ngAfterViewInit(): void;
-    close(): void;
+    ngOnDestroy(): void;
+    close(toggleMobileView?: boolean): void;
+    handleClick(item: MenuItem): void;
+    handleLogoClick(): void;
     open(item: MenuItem): void;
-    handleSelected(id: number): void;
+    toggleChildMenu(item: MenuItem, event?: KeyboardEvent): void;
+    toggleMobileView(): void;
     toggleView(): void;
     private setPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "isExpanded": "isExpandedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "isMobileExpanded": { "alias": "isMobileExpanded"; "required": false; "isSignal": true; }; }, { "isExpanded": "isExpandedChange"; "isMobileExpanded": "isMobileExpandedChange"; }, never, never, true, never>;
 }

package/components/main-navigation/main-navigation.imports.d.ts

@@ -0,0 +1,9 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { BadgeComponent } from '../badge';
+import { IconComponent } from '../icon';
+import { MainNavigationMenuComponent } from '../main-navigation-menu';
+import { TooltipDirective } from '../tooltip';
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof IconComponent | typeof NgClass | typeof NgTemplateOutlet | typeof BadgeComponent | typeof CdkPortalOutlet | typeof MainNavigationMenuComponent | typeof OverlayModule | typeof RouterLink | typeof TooltipDirective)[];

package/components/main-navigation-menu/main-navigation-menu.component.d.ts

@@ -2,6 +2,9 @@ import { SimpleMenuItem } from '../main-navigation';
 import * as i0 from "@angular/core";
 export declare class MainNavigationMenuComponent {
     menuItems: import("@angular/core").InputSignal<SimpleMenuItem[]>;
+    isMobile: import("@angular/core").InputSignal<boolean>;
+    close: import("@angular/core").OutputEmitterRef<void>;
+    handleSelected(item: SimpleMenuItem): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationMenuComponent, "ndw-main-navigation-menu", never, { "menuItems": { "alias": "menuItems"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationMenuComponent, "ndw-main-navigation-menu", never, { "menuItems": { "alias": "menuItems"; "required": true; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
 }

package/components/modal/index.d.ts

@@ -1,2 +1,8 @@
-export * from './modal.service';
+import { ModalContentComponent } from './modal-content';
+export * from './modal-content';
+export * from './modal-footer';
+export * from './modal-header';
 export * from './modal-trigger.directive';
+export * from './modal.component';
+export * from './modal.service';
+export declare const MODAL_COMPONENTS: (typeof ModalContentComponent)[];

package/components/modal/modal-content/index.d.ts

@@ -0,0 +1 @@
+export * from './modal-content.component';

package/components/modal/modal-content/modal-content.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ModalContentComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalContentComponent, "ndw-modal-content", never, {}, {}, never, ["*"], true, never>;
+}

package/components/modal/modal-footer/index.d.ts

@@ -0,0 +1 @@
+export * from './modal-footer.component';

package/components/modal/modal-footer/modal-footer.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ModalFooterComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalFooterComponent, "ndw-modal-footer", never, {}, {}, never, ["*"], true, never>;
+}

package/components/modal/modal-header/index.d.ts

@@ -0,0 +1 @@
+export * from './modal-header.component';

package/components/modal/modal-header/modal-header.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ModalHeaderComponent {
+    private readonly modalService;
+    detachModal(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalHeaderComponent, "ndw-modal-header", never, {}, {}, never, ["*"], true, never>;
+}

package/components/modal/modal.component.d.ts

@@ -0,0 +1,11 @@
+import { CardComponent } from '../card';
+import * as i0 from "@angular/core";
+export type ModalSize = 'sm' | 'md';
+export declare class ModalComponent extends CardComponent {
+    size: import("@angular/core").InputSignal<ModalSize>;
+    get isSmall(): boolean;
+    get isMedium(): boolean;
+    readonly roleAttr = "dialog";
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "ndw-modal", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/modal/modal.service.d.ts

@@ -10,7 +10,6 @@ export declare class ModalService {
     detach(): void;
     dispose(): void;
     open(templateRef: TemplateRef<unknown>, viewContainerRef: ViewContainerRef): void;
-    private actions;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
 }

package/components/multi-select/multi-select.component.d.ts

@@ -3,19 +3,20 @@ import { CheckboxData } from './checkbox-data.interface';
 import { SelectAllText } from './select-all-text.interface';
 import * as i0 from "@angular/core";
 export declare class MultiSelectComponent {
-    readonly disabled: import("@angular/core").InputSignal<boolean>;
     readonly dropdownTrigger: import("@angular/core").Signal<PopoverTriggerDirective>;
     readonly buttonText: import("@angular/core").InputSignal<string>;
+    readonly searchLabel: import("@angular/core").InputSignal<string>;
     readonly prefixIcon: import("@angular/core").InputSignal<string>;
-    readonly chevron: import("@angular/core").InputSignal<boolean>;
-    readonly searchInputValue: import("@angular/core").ModelSignal<string>;
     readonly searchPlaceholder: import("@angular/core").InputSignal<string>;
     readonly noResultText: import("@angular/core").InputSignal<string>;
+    readonly chevron: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
     readonly selectAllText: import("@angular/core").InputSignal<SelectAllText>;
     readonly lastCheckedElementId: import("@angular/core").ModelSignal<string | number | null | undefined>;
+    readonly dataSource: import("@angular/core").ModelSignal<CheckboxData[]>;
+    readonly searchInputValue: import("@angular/core").ModelSignal<string>;
     readonly selectAmount: import("@angular/core").Signal<number>;
     readonly noSearchResults: import("@angular/core").Signal<boolean>;
-    readonly dataSource: import("@angular/core").ModelSignal<CheckboxData[]>;
     filterSearch(value: string): boolean;
     searchInputChanged(event: Event): void;
     checkboxChanged(id: string | number): void;
@@ -23,5 +24,5 @@ export declare class MultiSelectComponent {
     isOpenChanged(isOpen: boolean): void;
     private determineLastCheckedElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; }, { "searchInputValue": "searchInputValueChange"; "lastCheckedElementId": "lastCheckedElementIdChange"; "dataSource": "dataSourceChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent, "ndw-multi-select", never, { "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": true; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "lastCheckedElementId": { "alias": "lastCheckedElementId"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "searchInputValue": { "alias": "searchInputValue"; "required": false; "isSignal": true; }; }, { "lastCheckedElementId": "lastCheckedElementIdChange"; "dataSource": "dataSourceChange"; "searchInputValue": "searchInputValueChange"; }, never, never, true, never>;
 }

package/components/pill/pill.component.d.ts

@@ -1,8 +1,16 @@
 import { PillColor } from './pill.model';
 import * as i0 from "@angular/core";
 export declare class PillComponent {
+    /**
+     * The color of the pill.
+     */
     readonly color: import("@angular/core").InputSignal<PillColor>;
+    /**
+     * The content of the pill.
+     */
+    private readonly content;
     get hostClass(): string[];
+    protected get title(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<PillComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PillComponent, "ndw-pill", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/components/popover/popover-trigger.directive.d.ts

@@ -14,7 +14,7 @@ export declare class PopoverTriggerDirective implements OnDestroy {
     private focusTrapFactory;
     private overlayRef?;
     ngOnDestroy(): void;
-    private togglePopover;
+    togglePopover(): void;
     private open;
     private trapFocus;
     private closeOverlayOnEscapeKey;

package/components/removable-pill/removable-pill.component.d.ts

@@ -1,7 +1,14 @@
 import * as i0 from "@angular/core";
 export declare class RemovablePillComponent {
+    /**
+     * Disables the pill
+     */
     disabled: import("@angular/core").InputSignal<boolean>;
-    get tabindexAttr(): number;
+    /**
+     * Aria label for the remove button
+     */
+    removeAriaLabel: import("@angular/core").InputSignal<string>;
+    onClick: import("@angular/core").OutputEmitterRef<Event>;
     static ɵfac: i0.ɵɵFactoryDeclaration<RemovablePillComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RemovablePillComponent, "ndw-removable-pill", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RemovablePillComponent, "ndw-removable-pill", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeAriaLabel": { "alias": "removeAriaLabel"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
 }

package/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toast.component';
+export * from './toast.service';

package/components/toast/toast.component.d.ts

@@ -0,0 +1,19 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ToastComponent implements OnInit, OnDestroy {
+    readonly message: import("@angular/core").ModelSignal<string>;
+    readonly close: import("@angular/core").OutputEmitterRef<void>;
+    private interval;
+    private readonly renderer;
+    private readonly toastContainer;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    open(): void;
+    private updateGradient;
+    protected startFadeOut(): void;
+    private checkForExistingToast;
+    private clearInterval;
+    private truncateText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "ndw-toast", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "message": "messageChange"; "close": "close"; }, never, never, true, never>;
+}

package/components/toast/toast.service.d.ts

@@ -0,0 +1,12 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+export declare class ToastService {
+    private readonly overlay;
+    private isOpen;
+    overlayRef?: OverlayRef;
+    detach(): void;
+    dispose(): void;
+    open(message: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
+}

package/components/tooltip/tooltip.directive.d.ts

@@ -1,14 +1,19 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { OnChanges, OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class TooltipDirective implements OnDestroy, OnInit {
+export declare class TooltipDirective implements OnChanges, OnDestroy, OnInit {
     text: import("@angular/core").InputSignal<string>;
     private readonly elementRef;
     private readonly overlay;
+    private readonly ariaDescriber;
     private overlayRef;
     ngOnInit(): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     protected show(): void;
     protected hide(): void;
+    protected hideOnEscape(): void;
+    private updateAriaDescription;
+    private getFlexibleConnectedPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[ndwTooltip]", never, { "text": { "alias": "ndwTooltip"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/core/styles/ndw-styles.scss

@@ -223,6 +223,7 @@
   --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
   --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
   --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
+  --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
   /* Spacing */
   --ndw-spacing-3xs: 0.125rem;
   --ndw-spacing-2xs: 0.25rem;
@@ -264,6 +265,7 @@
   --ndw-font-family-body: "Nunito Sans", sans-serif;
   --ndw-font-family-heading: "DM Sans", sans-serif;
   --ndw-base-font-size: 16px;
+  --ndw-font-size-2xs: 0.5625rem;
   --ndw-font-size-xs: 0.6875rem;
   --ndw-font-size-sm: 0.8125rem;
   --ndw-font-size-md: 1.125rem;
@@ -271,13 +273,31 @@
   --ndw-font-size-xl: 1.5rem;
   --ndw-font-weight-regular: 400;
   --ndw-font-weight-bold: 650;
-  --ndw-line-height-sm: 1.375em;
-  --ndw-line-height-md: 1.5em;
+  --ndw-line-height-sm: 1.375rem;
+  --ndw-line-height-md: 1.5rem;
   /* Transform */
   --ndw-rotate-half: rotate(180deg);
+  /* Modal */
+  --ndw-modal-width-sm: 31.25rem;
+  --ndw-modal-width-md: 45rem;
 }
 
 /* Screen sizes */
+/**
+ Utilities for improving accessibility with screen readers.
+*/
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+}
+
 /* Mixins */
 /* Classes */
 .ndw-heading-xl {
@@ -562,12 +582,21 @@
   }
 }
 
+.ndw-overlay-backdrop {
+  background-color: var(--ndw-backdrop-color);
+}
+
+button:not(:disabled) {
+  cursor: pointer;
+}
+
 [ndwButton] {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--ndw-spacing-2xs);
   height: var(--ndw-spacing-xl);
+  justify-content: center;
   padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
   width: fit-content;
   cursor: pointer;
@@ -580,6 +609,7 @@
   font-size: var(--ndw-font-size-sm);
   font-weight: var(--ndw-font-weight-regular);
   text-align: start;
+  text-decoration: none;
 }
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
@@ -594,35 +624,47 @@
   border-color: var(--ndw-background-primary-active);
   color: var(--ndw-foreground-primary-active);
 }
-[ndwButton][outline] {
+[ndwButton][secondary], [ndwButton][tertiary] {
   background-color: transparent;
-  border-color: var(--ndw-background-primary);
   color: var(--ndw-text-primary);
 }
-[ndwButton][outline]:hover {
-  background-color: var(--ndw-background-primary);
+[ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
+  background-color: var(--ndw-alpha-primary-007);
+  color: var(--ndw-text-primary);
+}
+[ndwButton][secondary]:active, [ndwButton][tertiary]:active {
+  background-color: var(--ndw-alpha-primary-015);
+}
+[ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
+  color: var(--ndw-color-grey-700);
+}
+[ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
+  background-color: var(--ndw-alpha-black-007);
+}
+[ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
+  background-color: var(--ndw-alpha-black-015);
+}
+[ndwButton][secondary] {
   border-color: var(--ndw-background-primary);
-  color: var(--ndw-foreground-primary);
 }
-[ndwButton][outline]:active {
-  background-color: var(--ndw-background-primary-hover);
+[ndwButton][secondary]:active {
   border-color: var(--ndw-background-primary-hover);
-  color: var(--ndw-foreground-primary-hover);
 }
-[ndwButton][secondary] {
-  background-color: transparent;
+[ndwButton][secondary][alternative] {
   border-color: var(--ndw-color-grey-300);
-  color: var(--ndw-color-grey-700);
 }
-[ndwButton][secondary]:hover {
-  background-color: var(--ndw-color-grey-500);
+[ndwButton][secondary][alternative]:hover {
   border-color: var(--ndw-color-grey-500);
-  color: var(--ndw-color-white);
 }
-[ndwButton][secondary]:active {
-  background-color: var(--ndw-color-grey-700);
+[ndwButton][secondary][alternative]:active {
   border-color: var(--ndw-color-grey-700);
-  color: var(--ndw-color-white);
+}
+[ndwButton][tertiary] {
+  border-color: transparent;
+}
+[ndwButton][extra-small] {
+  height: var(--ndw-spacing-lg);
+  padding-inline: var(--ndw-spacing-2xs);
 }
 [ndwButton][large] {
   height: var(--ndw-spacing-2xl);
@@ -686,7 +728,7 @@
   line-height: var(--ndw-line-height-md);
   outline: var(--ndw-border-size-sm) solid transparent;
   outline-offset: calc(var(--ndw-border-size-sm) * -1);
-  padding: var(--ndw-spacing-sm);
+  padding-inline: var(--ndw-spacing-sm);
   position: relative;
   transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
 }
@@ -704,10 +746,22 @@
 [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
   display: none;
 }
-[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
+[ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
   cursor: pointer;
   opacity: 0;
 }
+[ndwInput][success] {
+  background-color: var(--ndw-color-positive-100);
+  border-color: var(--ndw-color-positive-500);
+}
+[ndwInput][success]:hover {
+  border-color: var(--ndw-color-grey-300);
+}
+[ndwInput][success]:active, [ndwInput][success]:focus, [ndwInput][success]:focus-visible {
+  background-color: var(--ndw-color-white);
+  border-color: transparent;
+  outline-color: var(--ndw-color-secondary-500);
+}
 [ndwInput][error] {
   background-color: var(--ndw-color-critical-100);
   border-color: var(--ndw-color-critical-500);
@@ -733,7 +787,6 @@
 select[ndwInput] {
   appearance: none;
   cursor: pointer;
-  padding-top: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
   width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -749,7 +802,7 @@ select[ndwInput] option:not([disabled]) {
 
 textarea[ndwInput] {
   min-height: 4rem;
-  padding-top: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
   resize: vertical;
 }
 
@@ -775,37 +828,36 @@ textarea[ndwInput] {
   color: var(--ndw-color-grey-400);
 }
 
-a[ndwLink] {
-  align-items: baseline;
-  color: var(--ndw-color-link-400);
+[ndwLink] {
   display: inline-flex;
-  font-size: inherit;
+  align-items: baseline;
   gap: var(--ndw-spacing-2xs);
+  padding: 0;
+  border: 0;
+  font-size: inherit;
   text-decoration: underline var(--ndw-border-size-sm) transparent;
   text-underline-offset: var(--ndw-border-size-md);
+  color: var(--ndw-color-link-400);
+  background-color: transparent;
   transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
 }
-a[ndwLink] > * {
+[ndwLink] > * {
   align-self: center;
 }
-a[ndwLink] ndw-icon {
+[ndwLink] ndw-icon {
   font-size: 1.25em;
   overflow: hidden;
 }
-a[ndwLink]:hover {
+[ndwLink]:hover {
   color: var(--ndw-color-link-500);
   text-decoration-color: var(--ndw-color-link-500);
 }
-a[ndwLink][disabled] {
+[ndwLink][disabled] {
   color: var(--ndw-color-grey-400);
   pointer-events: none;
   user-select: none;
 }
 
-.ndw-overlay-backdrop {
-  background-color: var(--ndw-backdrop-color);
-}
-
 @keyframes show {
   from {
     opacity: 0;
@@ -815,7 +867,7 @@ a[ndwLink][disabled] {
   }
 }
 .cdk-overlay-pane.ndw-popover-panel {
-  animation: show var(--ndw-animation-speed-default) ease-in;
+  animation: show var(--ndw-animation-speed-fast) ease-out;
   background-color: var(--ndw-color-white);
   border-radius: var(--ndw-border-radius-md);
   box-shadow: var(--ndw-elevation-popover);
@@ -834,7 +886,7 @@ a[ndwLink][disabled] {
   position: relative;
   width: 100%;
 }
-[ndwButton][menu]:hover {
+[ndwButton][menu]:hover, [ndwButton][menu][active] {
   background-color: var(--ndw-color-grey-600);
   border-color: var(--ndw-color-grey-600);
   color: var(--ndw-color-white);