@ndwnu/design-system 3.0.1 → 4.0.0

package/components/alert/alert.component.d.ts

@@ -1,4 +1,5 @@
-import { AlertType, AriaLive } from './alert.model';
+import { AriaLive } from '../../models';
+import { AlertType } from './alert.model';
 import * as i0 from "@angular/core";
 export declare class AlertComponent {
     /**
@@ -19,10 +20,6 @@ export declare class AlertComponent {
      */
     ariaLive: import("@angular/core").InputSignal<AriaLive>;
     close: import("@angular/core").OutputEmitterRef<void>;
-    get alertTypeClass(): string;
-    get actionableClass(): boolean;
-    readonly role = "alert";
-    get ariaLiveAttribute(): AriaLive;
     onClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ndw-alert", never, { "actionable": { "alias": "actionable"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;

package/components/alert/alert.model.d.ts

@@ -4,4 +4,3 @@ export declare enum AlertType {
     InfoGrey = "info-grey",
     Warning = "warning"
 }
-export type AriaLive = 'polite' | 'assertive' | 'off';

package/components/banner/banner.component.d.ts

@@ -0,0 +1,38 @@
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { AriaLive } from '../../models';
+import { BannerType } from './banner.model';
+import * as i0 from "@angular/core";
+export declare class BannerComponent implements AfterViewInit {
+    /**
+     * The title of the banner.
+     */
+    title: import("@angular/core").InputSignal<string>;
+    /**
+     * The message of the banner.
+     */
+    message: import("@angular/core").InputSignal<string>;
+    /**
+     * The read more label if the message is truncated.
+     */
+    readMoreLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * Use info, info-grey, warning or critical to indicate the type of banner.
+     */
+    type: import("@angular/core").InputSignal<BannerType>;
+    /**
+     * Use polite, assertive or off to indicate whether the alert is
+     * announced automatically by the screen reader.
+     */
+    ariaLive: import("@angular/core").InputSignal<AriaLive>;
+    /**
+     * Emits when the banner close button is clicked.
+     */
+    close: import("@angular/core").OutputEmitterRef<void>;
+    textContent: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    showReadMore: boolean;
+    ngAfterViewInit(): void;
+    onClose(event: MouseEvent): void;
+    private setReadMore;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BannerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BannerComponent, "ndw-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": true; "isSignal": true; }; "readMoreLabel": { "alias": "readMoreLabel"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLive": { "alias": "ariaLive"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
+}

package/components/banner/banner.model.d.ts

@@ -0,0 +1,4 @@
+export declare enum BannerType {
+    Negative = "critical",
+    Info = "info"
+}

package/components/banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './banner.component';
+export * from './banner.model';

package/components/breadcrumb-group/breadcrumb-group.component.d.ts

@@ -1,4 +1,4 @@
-import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { BreadcrumbComponent } from '../breadcrumb';
 import * as i0 from "@angular/core";
 export declare class BreadcrumbGroupComponent {
     protected breadcrumbs: import("@angular/core").Signal<readonly BreadcrumbComponent[]>;

package/components/collapsible/collapsible.component.d.ts

@@ -8,7 +8,6 @@ export declare class CollapsibleComponent {
     private readonly uuid;
     readonly toggleUuid: string;
     readonly sectionUuid: string;
-    get expandedClass(): boolean;
     animationState: import("@angular/core").Signal<"open" | "closed">;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleComponent, never>;

package/components/dropdown/dropdown.component.d.ts

@@ -7,16 +7,16 @@ export declare class DropdownComponent {
     readonly buttonText: import("@angular/core").InputSignal<string>;
     readonly prefixIcon: import("@angular/core").InputSignal<string>;
     readonly selectAmount: import("@angular/core").InputSignal<number>;
-    readonly removablePillClicked: import("@angular/core").OutputEmitterRef<void>;
+    readonly tagClicked: import("@angular/core").OutputEmitterRef<void>;
     readonly isOpenChange: import("@angular/core").OutputEmitterRef<boolean>;
     readonly popoverTrigger: import("@angular/core").Signal<PopoverTriggerDirective>;
     readonly dropdownButton: import("@angular/core").Signal<ElementRef<any>>;
     readonly buttonIcon: import("@angular/core").Signal<"keyboard_arrow_up" | "keyboard_arrow_down">;
-    onRemovablePillClicked($event: Event): void;
+    onTagClicked($event: Event): void;
     onKeyDown(event: KeyboardEvent): void;
     closeDropdown(): void;
-    onKeyDownRemovablePill(event: KeyboardEvent): void;
+    onTagKeyDown(event: KeyboardEvent): void;
     isOpenChanged(isOpen: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "ndw-dropdown", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "selectAmount": { "alias": "selectAmount"; "required": false; "isSignal": true; }; }, { "removablePillClicked": "removablePillClicked"; "isOpenChange": "isOpenChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "ndw-dropdown", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "chevron": { "alias": "chevron"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; "isSignal": true; }; "selectAmount": { "alias": "selectAmount"; "required": false; "isSignal": true; }; }, { "tagClicked": "tagClicked"; "isOpenChange": "isOpenChange"; }, never, ["*"], true, never>;
 }

package/components/form-field/autosuggest/autosuggest-highlight.pipe.d.ts

@@ -0,0 +1,7 @@
+import { type PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AutosuggestHighlightPipe implements PipeTransform {
+    transform(value: string | unknown, searchTerm: string): string | unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutosuggestHighlightPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AutosuggestHighlightPipe, "ndwAutosuggestHighlight", true>;
+}

package/components/form-field/autosuggest/autosuggest-item/autosuggest-item.component.d.ts

@@ -0,0 +1,15 @@
+import { Highlightable } from '@angular/cdk/a11y';
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AutosuggestItemComponent implements Highlightable {
+    readonly item: import("@angular/core").InputSignal<unknown>;
+    readonly searchTerm: import("@angular/core").InputSignal<string>;
+    readonly labelField: import("@angular/core").InputSignal<string | undefined>;
+    isActive: import("@angular/core").WritableSignal<boolean>;
+    getLabel: import("@angular/core").Signal<string>;
+    elementRef: ElementRef<any>;
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutosuggestItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutosuggestItemComponent, "ndw-autosuggest-item", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "labelField": { "alias": "labelField"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/form-field/autosuggest/autosuggest-trigger.directive.d.ts

@@ -0,0 +1,35 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { OnInit } from '@angular/core';
+import { AutosuggestComponent } from './autosuggest.component';
+import * as i0 from "@angular/core";
+export declare class AutosuggestTriggerDirective implements OnInit {
+    readonly ndwAutosuggest: import("@angular/core").InputSignal<AutosuggestComponent>;
+    readonly suggestionSelected: import("@angular/core").OutputEmitterRef<unknown>;
+    readonly suggestionsRequested: import("@angular/core").OutputEmitterRef<string>;
+    overlayRef: OverlayRef | undefined;
+    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
+    private readonly selectedSuggestion;
+    private readonly ngControl;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly overlay;
+    private readonly destroyRef;
+    private readonly changeDetectorRef;
+    private get control();
+    private get origin();
+    ngOnInit(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleBlur(): void;
+    private handleInput;
+    private updateSuggestions;
+    private updateSearchTerm;
+    private findMatchingSuggestion;
+    private handleAutosuggestResult;
+    private updateResult;
+    private openDropdown;
+    private close;
+    private overlayClickOutside;
+    private getOverlayPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutosuggestTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutosuggestTriggerDirective, "input[ndwAutosuggest], textarea[ndwAutosuggest]", ["ndwAutosuggest"], { "ndwAutosuggest": { "alias": "ndwAutosuggest"; "required": true; "isSignal": true; }; }, { "suggestionSelected": "suggestionSelected"; "suggestionsRequested": "suggestionsRequested"; }, never, never, true, never>;
+}

package/components/form-field/autosuggest/autosuggest.component.d.ts

@@ -0,0 +1,30 @@
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { AfterViewInit, OnDestroy, QueryList, TemplateRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AutosuggestItemComponent } from './autosuggest-item/autosuggest-item.component';
+import { Suggestion } from './autosuggest.model';
+import * as i0 from "@angular/core";
+export declare class AutosuggestComponent implements AfterViewInit, OnDestroy {
+    readonly noResultText: import("@angular/core").InputSignal<string>;
+    readonly maxResults: import("@angular/core").InputSignal<number>;
+    readonly forceSelection: import("@angular/core").InputSignal<boolean>;
+    readonly labelField: import("@angular/core").InputSignal<string | undefined>;
+    readonly suggestions: import("@angular/core").InputSignalWithTransform<unknown[], unknown[]>;
+    items: QueryList<AutosuggestItemComponent>;
+    template: import("@angular/core").Signal<TemplateRef<any>>;
+    private readonly destroyRef;
+    private readonly changeDetectorRef;
+    searchTerm: import("@angular/core").WritableSignal<string>;
+    keyManager: ActiveDescendantKeyManager<AutosuggestItemComponent> | undefined;
+    resultSubject: Subject<unknown>;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    selectItem(suggestion: Suggestion, index: number): void;
+    trackBy(item: Suggestion): string;
+    handleKeydown(event: KeyboardEvent): void;
+    private initializeKeyManager;
+    private updateControlValue;
+    private scrollActiveOptionIntoView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutosuggestComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutosuggestComponent, "ndw-autosuggest", never, { "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; "maxResults": { "alias": "maxResults"; "required": false; "isSignal": true; }; "forceSelection": { "alias": "forceSelection"; "required": false; "isSignal": true; }; "labelField": { "alias": "labelField"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/form-field/autosuggest/autosuggest.model.d.ts

@@ -0,0 +1 @@
+export type Suggestion = string | unknown;

package/components/form-field/autosuggest/autosuggest.utils.d.ts

@@ -0,0 +1,2 @@
+import { Suggestion } from './autosuggest.model';
+export declare const getSuggestionLabel: (suggestion: Suggestion, field?: string) => string;

package/components/form-field/autosuggest/index.d.ts

@@ -0,0 +1,5 @@
+export * from './autosuggest-highlight.pipe';
+export * from './autosuggest-item/autosuggest-item.component';
+export * from './autosuggest-trigger.directive';
+export * from './autosuggest.component';
+export * from './autosuggest.model';

package/components/form-field/checkbox/checkbox.component.d.ts

@@ -9,9 +9,6 @@ export declare class CheckboxComponent implements ControlValueAccessor {
     indeterminate: import("@angular/core").InputSignal<boolean>;
     required: import("@angular/core").InputSignal<boolean>;
     uuid: `${string}-${string}-${string}-${string}-${string}`;
-    get checkedClass(): boolean;
-    get disabledClass(): boolean;
-    get indeterminateClass(): boolean;
     onClick(): void;
     onKeyDown(event: KeyboardEvent): void;
     writeValue(value: boolean): void;

package/components/form-field/file-upload/file-upload.component.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef } from '@angular/core';
-import { FileUploadText } from './file-upload-text.interface';
 import { ControlValueAccessor } from '@angular/forms';
+import { FileUploadText } from './file-upload-text.interface';
 import * as i0 from "@angular/core";
 export declare class FileUploadComponent implements ControlValueAccessor {
     readonly fileInputElement: import("@angular/core").Signal<ElementRef<HTMLInputElement>>;
@@ -17,13 +17,6 @@ export declare class FileUploadComponent implements ControlValueAccessor {
     readonly incorrectFileType: import("@angular/core").ModelSignal<boolean>;
     readonly incorrectFileSize: import("@angular/core").ModelSignal<boolean>;
     private readonly canEdit;
-    get tabindexAttr(): number;
-    get hasError(): boolean;
-    get hasSuccess(): boolean;
-    get isDisabled(): boolean;
-    get isReadonly(): boolean;
-    get isDragging(): boolean;
-    get hasSelectedFile(): boolean;
     onKeyDown(event: KeyboardEvent): void;
     onClick(): void;
     onDragLeave(event: DragEvent): void;
@@ -34,13 +27,13 @@ export declare class FileUploadComponent implements ControlValueAccessor {
     onDeleteClick(event: Event): void;
     displayText(): string;
     onFileSelected(event: Event): void;
+    writeValue(value: File): void;
+    registerOnChange(fn: (value: File | null | undefined) => void): void;
+    registerOnTouched(): void;
     private selectFile;
     private resetFile;
     private correctFileSize;
     private correctFileType;
-    writeValue(value: File): void;
-    registerOnChange(fn: (value: File | null | undefined) => void): void;
-    registerOnTouched(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "ndw-file-upload", never, { "allowedFileTypeRegex": { "alias": "allowedFileTypeRegex"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "uploadDate": { "alias": "uploadDate"; "required": false; "isSignal": true; }; "maxFileSizeInBytes": { "alias": "maxFileSizeInBytes"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "draggingOver": { "alias": "draggingOver"; "required": false; "isSignal": true; }; "selectedFile": { "alias": "selectedFile"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; "incorrectFileType": { "alias": "incorrectFileType"; "required": false; "isSignal": true; }; "incorrectFileSize": { "alias": "incorrectFileSize"; "required": false; "isSignal": true; }; }, { "draggingOver": "draggingOverChange"; "selectedFile": "selectedFileChange"; "error": "errorChange"; "success": "successChange"; "incorrectFileType": "incorrectFileTypeChange"; "incorrectFileSize": "incorrectFileSizeChange"; }, never, never, true, never>;
 }

package/components/form-field/form-field.component.d.ts

@@ -2,6 +2,7 @@ import { InputDirective } from './input';
 import { MonthInputComponent } from './month-input';
 import * as i0 from "@angular/core";
 export declare class FormFieldComponent {
+    private readonly cdr;
     readonly monthInput: import("@angular/core").Signal<MonthInputComponent | undefined>;
     readonly regularInput: import("@angular/core").Signal<InputDirective | undefined>;
     input: import("@angular/core").Signal<InputDirective | undefined>;

package/components/form-field/index.d.ts

@@ -1,3 +1,4 @@
+export * from './autosuggest';
 export * from './checkbox';
 export * from './checkbox-group';
 export * from './error';

package/components/form-field/radio-button/radio-button.component.d.ts

@@ -9,8 +9,6 @@ export declare class RadioButtonComponent implements ControlValueAccessor {
     required: import("@angular/core").InputSignal<boolean>;
     value: import("@angular/core").ModelSignal<unknown>;
     uuid: `${string}-${string}-${string}-${string}-${string}`;
-    get checkedClass(): boolean;
-    get disabledClass(): boolean;
     onClick(): void;
     onKeyDown(event: KeyboardEvent): void;
     writeValue(value: boolean): void;

package/components/form-field/radio-group/radio-group.component.d.ts

@@ -6,7 +6,6 @@ export declare class RadioGroupComponent implements AfterContentInit, ControlVal
     radioButtons: import("@angular/core").Signal<readonly RadioButtonComponent[]>;
     private uuid;
     private onChange;
-    readonly roleAttr = "radiogroup";
     ngAfterContentInit(): void;
     writeValue(value: unknown): void;
     registerOnChange(fn: (value: unknown) => void): void;

package/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './alert';
 export * from './badge';
+export * from './banner';
 export * from './breadcrumb';
 export * from './breadcrumb-group';
 export * from './button';
@@ -9,6 +10,9 @@ export * from './collapsible';
 export * from './dropdown';
 export * from './form-field';
 export * from './icon';
+export * from './layout';
+export * from './layout-banners';
+export * from './loader';
 export * from './main-navigation';
 export * from './modal';
 export * from './multi-select';
@@ -19,4 +23,4 @@ export * from './tab';
 export * from './tab-group';
 export * from './tooltip';
 export * from './toast';
-export * from './removable-pill';
+export * from './tag';

package/components/layout/index.d.ts

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

package/components/layout/layout.component.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from '../main-navigation';
+import * as i0 from "@angular/core";
+export declare class LayoutComponent {
+    applicationName: import("@angular/core").InputSignal<string>;
+    topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
+    bottomMenuItems: import("@angular/core").InputSignal<MenuItem[] | undefined>;
+    menuFooterTexts: import("@angular/core").InputSignal<string[] | undefined>;
+    version: import("@angular/core").InputSignal<string | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/layout-banners/index.d.ts

@@ -0,0 +1 @@
+export * from './layout-banners.component';

package/components/layout-banners/layout-banners.component.d.ts

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

package/components/loader/index.d.ts

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

package/components/loader/loader.component.d.ts

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

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

@@ -22,9 +22,6 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     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[];

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

@@ -6,4 +6,4 @@ 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 NgClass | typeof NgTemplateOutlet | typeof BadgeComponent | typeof IconComponent | typeof RouterLink | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof BadgeComponent | typeof IconComponent | typeof NgTemplateOutlet | typeof RouterLink | typeof NgClass | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];

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

@@ -1,15 +1,16 @@
 import { OnChanges, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { CardComponent } from '../card';
+import { ModalComponent } from './modal.component';
 import * as i0 from "@angular/core";
 export declare class ModalTriggerDirective implements OnChanges, OnDestroy, OnInit {
     private modalService;
     private viewContainerRef;
-    ndwModalTrigger: import("@angular/core").InputSignal<TemplateRef<CardComponent>>;
+    ndwModalTrigger: import("@angular/core").InputSignal<TemplateRef<ModalComponent>>;
     isOpen: import("@angular/core").ModelSignal<boolean>;
     onClick(): void;
     ngOnChanges(): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
+    closeModal(): void;
     private open;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalTriggerDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ModalTriggerDirective, "[ndwModalTrigger]", never, { "ndwModalTrigger": { "alias": "ndwModalTrigger"; "required": true; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, never, true, never>;

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

@@ -3,9 +3,6 @@ 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

@@ -7,6 +7,7 @@ export declare class ModalService {
     isOpen$: Subject<boolean>;
     private isOpen;
     private overlayRef?;
+    private context?;
     detach(): void;
     dispose(): void;
     open(templateRef: TemplateRef<unknown>, viewContainerRef: ViewContainerRef): void;

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

@@ -8,9 +8,7 @@ export declare class PillComponent {
     /**
      * The content of the pill.
      */
-    private readonly contentRef;
-    get hostClass(): string[];
-    protected get title(): string | undefined;
+    private readonly content;
     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/tab/tab.component.d.ts

@@ -2,9 +2,6 @@ import * as i0 from "@angular/core";
 export declare class TabComponent {
     index: import("@angular/core").InputSignal<number>;
     active: import("@angular/core").ModelSignal<boolean>;
-    protected get activeAttribute(): boolean | null;
-    protected readonly role = "tab";
-    protected get tabIndex(): number;
     onClick(): void;
     onTabKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;

package/components/tab-group/tab-group.component.d.ts

@@ -1,10 +1,9 @@
 import { AfterContentInit } from '@angular/core';
-import { TabComponent } from '../tab/tab.component';
+import { TabComponent } from '../tab';
 import * as i0 from "@angular/core";
 export declare class TabGroupComponent implements AfterContentInit {
     tabs: import("@angular/core").Signal<readonly TabComponent[]>;
     activeTab: import("@angular/core").ModelSignal<number>;
-    protected readonly role = "tablist";
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "ndw-tab-group", never, { "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; }, ["tabs"], ["*"], true, never>;

package/components/tag/index.d.ts

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

package/components/tag/tag.component.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+export declare class TagComponent {
+    /**
+     * Disables the tag
+     */
+    disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Aria label for the interactive button
+     */
+    suffixAriaLabel: import("@angular/core").InputSignal<string>;
+    /**
+     * The name of the icon to display
+     */
+    suffixIcon: import("@angular/core").InputSignal<string>;
+    onClick: import("@angular/core").OutputEmitterRef<Event>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "ndw-tag", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}

package/core/styles/ndw-styles.scss

@@ -179,6 +179,8 @@
   --_alternative-500: 292, 95%, 33%;
   --_critical: 0, 100%;
   --_critical-100: var(--_critical), 98%;
+  --_critical-200: var(--_critical), 95%;
+  --_critical-300: var(--_critical), 90%;
   --_critical-500: var(--_critical), 46%;
   --ndw-color-positive-100: hsl(var(--_positive-100));
   --ndw-color-positive-500: hsl(var(--_positive-500));
@@ -189,6 +191,8 @@
   --ndw-color-alternative-100: hsl(var(--_alternative-100));
   --ndw-color-alternative-500: hsl(var(--_alternative-500));
   --ndw-color-critical-100: hsl(var(--_critical-100));
+  --ndw-color-critical-200: hsl(var(--_critical-200));
+  --ndw-color-critical-300: hsl(var(--_critical-300));
   --ndw-color-critical-500: hsl(var(--_critical-500));
   --ndw-color-notification: hsl(19, 100%, 35%);
   --_data-a-500: 133, 100%, 21%;
@@ -586,6 +590,10 @@
   background-color: var(--ndw-backdrop-color);
 }
 
+.cdk-overlay-pane:has(> ndw-modal) {
+  max-height: 90vh;
+}
+
 button:not(:disabled) {
   cursor: pointer;
 }
@@ -614,6 +622,10 @@ button:not(:disabled) {
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
 }
+[ndwButton] ndw-loader {
+  width: var(--ndw-spacing-sm);
+  height: var(--ndw-spacing-sm);
+}
 [ndwButton]:hover {
   background-color: var(--ndw-background-primary-hover);
   border-color: var(--ndw-background-primary-hover);
@@ -815,9 +827,9 @@ textarea[ndwInput] {
   font-weight: var(--ndw-font-weight-bold);
   gap: var(--ndw-spacing-3xs);
   grid-template-columns: repeat(3, auto);
-  height: 1.5rem;
   justify-content: start;
   line-height: 100%;
+  margin-bottom: var(--ndw-spacing-2xs);
 }
 [ndwLabel] ndw-icon {
   color: var(--ndw-color-grey-400);

package/core/styles/nwb-styles.scss

@@ -147,6 +147,8 @@
   --_alternative-500: 292, 95%, 33%;
   --_critical: 0, 100%;
   --_critical-100: var(--_critical), 98%;
+  --_critical-200: var(--_critical), 95%;
+  --_critical-300: var(--_critical), 90%;
   --_critical-500: var(--_critical), 46%;
   --ndw-color-positive-100: hsl(var(--_positive-100));
   --ndw-color-positive-500: hsl(var(--_positive-500));
@@ -157,6 +159,8 @@
   --ndw-color-alternative-100: hsl(var(--_alternative-100));
   --ndw-color-alternative-500: hsl(var(--_alternative-500));
   --ndw-color-critical-100: hsl(var(--_critical-100));
+  --ndw-color-critical-200: hsl(var(--_critical-200));
+  --ndw-color-critical-300: hsl(var(--_critical-300));
   --ndw-color-critical-500: hsl(var(--_critical-500));
   --ndw-color-notification: hsl(19, 100%, 35%);
   --_data-a-500: 133, 100%, 21%;
@@ -554,6 +558,10 @@
   background-color: var(--ndw-backdrop-color);
 }
 
+.cdk-overlay-pane:has(> ndw-modal) {
+  max-height: 90vh;
+}
+
 button:not(:disabled) {
   cursor: pointer;
 }
@@ -582,6 +590,10 @@ button:not(:disabled) {
 [ndwButton] ndw-icon {
   font-size: var(--ndw-spacing-md);
 }
+[ndwButton] ndw-loader {
+  width: var(--ndw-spacing-sm);
+  height: var(--ndw-spacing-sm);
+}
 [ndwButton]:hover {
   background-color: var(--ndw-background-primary-hover);
   border-color: var(--ndw-background-primary-hover);
@@ -783,9 +795,9 @@ textarea[ndwInput] {
   font-weight: var(--ndw-font-weight-bold);
   gap: var(--ndw-spacing-3xs);
   grid-template-columns: repeat(3, auto);
-  height: 1.5rem;
   justify-content: start;
   line-height: 100%;
+  margin-bottom: var(--ndw-spacing-2xs);
 }
 [ndwLabel] ndw-icon {
   color: var(--ndw-color-grey-400);