@ndwnu/design-system 1.0.4 → 1.1.0

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

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

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

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

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

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

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

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

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

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

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

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

package/components/card/card.component.d.ts

@@ -1,5 +1,11 @@
+import { OnInit } from '@angular/core';
+import { CardHeaderComponent } from './card-header';
 import * as i0 from "@angular/core";
-export declare class CardComponent {
+export declare class CardComponent implements OnInit {
+    isModal: import("@angular/core").InputSignal<boolean>;
+    header: import("@angular/core").Signal<CardHeaderComponent | undefined>;
+    get modalClass(): boolean;
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ndw-card", never, {}, {}, never, ["[title]", "[body]", "[footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "ndw-card", never, { "isModal": { "alias": "isModal"; "required": false; "isSignal": true; }; }, {}, ["header"], ["*"], true, never>;
 }

package/components/card/index.d.ts

@@ -1 +1,4 @@
 export * from './card.component';
+export * from './card-content';
+export * from './card-footer';
+export * from './card-header';

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

@@ -1,10 +1,17 @@
-import { DropdownTriggerDirective } from './dropdown-trigger.directive';
+import { PopoverTriggerDirective } from '../popover';
 import * as i0 from "@angular/core";
 export declare class DropdownComponent {
+    readonly removablePillClicked: import("@angular/core").OutputEmitterRef<void>;
     readonly disabled: import("@angular/core").InputSignal<boolean>;
-    readonly dropdownTrigger: import("@angular/core").Signal<DropdownTriggerDirective>;
+    readonly isOpenChange: import("@angular/core").OutputEmitterRef<boolean>;
+    readonly dropdownTrigger: import("@angular/core").Signal<PopoverTriggerDirective>;
     readonly buttonIcon: import("@angular/core").Signal<"keyboard_arrow_up" | "keyboard_arrow_down">;
+    readonly chevron: import("@angular/core").InputSignal<unknown>;
     readonly buttonText: import("@angular/core").InputSignal<string>;
+    readonly prefixIcon: import("@angular/core").InputSignal<string>;
+    readonly selectAmount: import("@angular/core").InputSignal<number>;
+    onRemovablePillClicked(event: Event): 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; }; "buttonText": { "alias": "buttonText"; "required": true; "isSignal": true; }; }, {}, 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; }; }, { "removablePillClicked": "removablePillClicked"; "isOpenChange": "isOpenChange"; }, never, ["*"], true, never>;
 }

package/components/dropdown/index.d.ts

@@ -1,2 +1 @@
-export * from './dropdown-trigger.directive';
 export * from './dropdown.component';

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

@@ -1,5 +1,7 @@
+import { CheckboxComponent } from '../checkbox';
 import * as i0 from "@angular/core";
 export declare class CheckboxGroupComponent {
+    checkboxes: import("@angular/core").Signal<readonly CheckboxComponent[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxGroupComponent, "ndw-checkbox-group", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxGroupComponent, "ndw-checkbox-group", never, {}, {}, ["checkboxes"], ["*"], true, never>;
 }

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

@@ -1,11 +1,11 @@
-import { CheckboxComponent } from './checkbox';
+import { CheckboxGroupComponent } from './checkbox-group';
 import { InputDirective } from './input';
 import { RadioGroupComponent } from './radio-group';
 import * as i0 from "@angular/core";
 export declare class FormFieldComponent {
     input: import("@angular/core").Signal<InputDirective | undefined>;
     radioGroup: import("@angular/core").Signal<RadioGroupComponent | undefined>;
-    checkboxes: import("@angular/core").Signal<readonly CheckboxComponent[]>;
+    checkboxGroup: import("@angular/core").Signal<CheckboxGroupComponent | undefined>;
     label: import("@angular/core").InputSignal<string | undefined>;
     disabled: import("@angular/core").InputSignal<boolean>;
     error: import("@angular/core").InputSignal<string | undefined>;
@@ -25,5 +25,5 @@ export declare class FormFieldComponent {
     private setInputSuffix;
     private setRequiredState;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "ndw-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, ["input", "radioGroup", "checkboxes"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "ndw-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "info": { "alias": "info"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, ["input", "radioGroup", "checkboxGroup"], ["*"], true, never>;
 }

package/components/index.d.ts

@@ -11,8 +11,11 @@ export * from './form-field';
 export * from './icon';
 export * from './main-navigation';
 export * from './modal';
+export * from './multi-select';
 export * from './pill';
+export * from './popover';
 export * from './router-breadcrumbs';
 export * from './tab';
 export * from './tab-group';
 export * from './tooltip';
+export * from './removable-pill';

package/components/modal/index.d.ts

@@ -1 +1,2 @@
+export * from './modal.service';
 export * from './modal-trigger.directive';

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

@@ -1,20 +1,16 @@
-import { OnDestroy, TemplateRef } from '@angular/core';
+import { OnChanges, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { CardComponent } from '../card';
 import * as i0 from "@angular/core";
-export declare class ModalTriggerDirective implements OnDestroy {
-    connectedTemplate: TemplateRef<CardComponent>;
-    isOpen: import("@angular/core").ModelSignal<boolean>;
-    private overlay;
-    private overlayRef?;
+export declare class ModalTriggerDirective implements OnChanges, OnDestroy, OnInit {
+    private modalService;
     private viewContainerRef;
-    private destroyRef$;
-    constructor();
+    ndwModalTrigger: import("@angular/core").InputSignal<TemplateRef<CardComponent>>;
+    isOpen: import("@angular/core").ModelSignal<boolean>;
     onClick(): void;
+    ngOnChanges(): void;
+    ngOnInit(): void;
     ngOnDestroy(): void;
     private open;
-    private nodeOrParentsHaveAttribute;
-    private actions;
-    private detach;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalTriggerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ModalTriggerDirective, "[ndwModalTrigger]", never, { "connectedTemplate": { "alias": "ndwModalTrigger"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "isOpen": "isOpenChange"; }, never, never, true, 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.service.d.ts

@@ -0,0 +1,16 @@
+import { TemplateRef, ViewContainerRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class ModalService {
+    private readonly destroyRef;
+    private readonly overlay;
+    isOpen$: Subject<boolean>;
+    private isOpen;
+    private overlayRef?;
+    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/checkbox-data.interface.d.ts

@@ -0,0 +1,5 @@
+export interface CheckboxData {
+    id: string | number;
+    label: string;
+    value: boolean;
+}

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

@@ -0,0 +1,3 @@
+export * from './checkbox-data.interface';
+export * from './multi-select.component';
+export * from './select-all-text.interface';

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

@@ -0,0 +1,27 @@
+import { PopoverTriggerDirective } from '../popover';
+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 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 selectAllText: import("@angular/core").InputSignal<SelectAllText>;
+    readonly lastCheckedElementId: import("@angular/core").ModelSignal<string | number | null | undefined>;
+    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;
+    toggleSelectAll(selectAll?: boolean): void;
+    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>;
+}

package/components/multi-select/select-all-text.interface.d.ts

@@ -0,0 +1,4 @@
+export interface SelectAllText {
+    deselect: string;
+    select: string;
+}

package/components/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './popover-trigger.directive';

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

@@ -0,0 +1,27 @@
+import { EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PopoverTriggerDirective implements OnDestroy {
+    popoverToggled: EventEmitter<boolean>;
+    popoverPosition: import("@angular/core").InputSignal<string>;
+    popoverContent: import("@angular/core").InputSignal<TemplateRef<unknown>>;
+    toggleOnClick: import("@angular/core").InputSignal<boolean>;
+    isOpen: import("@angular/core").ModelSignal<boolean>;
+    toggle(): void;
+    private destroyRef;
+    private elementRef;
+    private overlay;
+    private viewContainerRef;
+    private focusTrapFactory;
+    private overlayRef?;
+    ngOnDestroy(): void;
+    private togglePopover;
+    private open;
+    private trapFocus;
+    private closeOverlayOnEscapeKey;
+    private nodeOrParentsHaveAttribute;
+    private closeOverlayOnBackdropClick;
+    private close;
+    private getPopoverPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[ndwPopoverTrigger]", ["ndwPopoverTrigger"], { "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverContent": { "alias": "ndwPopoverTrigger"; "required": true; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "popoverToggled": "popoverToggled"; "isOpen": "isOpenChange"; }, never, never, true, never>;
+}

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

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

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class RemovablePillComponent {
+    disabled: import("@angular/core").InputSignal<boolean>;
+    get tabindexAttr(): number;
+    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>;
+}

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

@@ -1,11 +1,12 @@
-import { OnInit } from '@angular/core';
+import { OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class TooltipDirective implements OnInit {
+export declare class TooltipDirective implements OnDestroy, OnInit {
     text: import("@angular/core").InputSignal<string>;
     private readonly elementRef;
     private readonly overlay;
     private overlayRef;
     ngOnInit(): void;
+    ngOnDestroy(): void;
     protected show(): void;
     protected hide(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;

package/core/styles/ndw-styles.scss

@@ -245,17 +245,21 @@
   --ndw-border-radius-md: 0.5rem;
   --ndw-border-radius-lg: 1.5rem;
   /* Elevation */
-  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_info-500), 0.25);
+  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
   --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
   --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
-  --ndw-backdrop-color: hsla(var(--_grey-600), var(--ndw-alpha-40));
+  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-backdrop-color: var(--ndw-alpha-black-040);
   /* Animation */
+  --ndw-animation-speed-very-fast: 100ms;
   --ndw-animation-speed-fast: 200ms;
   --ndw-animation-speed-default: 300ms;
   --ndw-animation-speed-slow: 500ms;
   /* Icon Size */
   --ndw-icon-size-md: 1rem;
   --ndw-icon-size-lg: 1.5rem;
+  /* Mult-select Size */
+  --multi-select-default-width: 18.75rem;
   /* Typography */
   --ndw-font-family-body: "Nunito Sans", sans-serif;
   --ndw-font-family-heading: "DM Sans", sans-serif;
@@ -640,32 +644,28 @@
     opacity: 1;
   }
 }
-.cdk-overlay-pane.ndw-dropdown-panel {
-  animation: show var(--ndw-animation-speed-default) ease-in;
-  background-color: var(--ndw-color-white);
-  border-radius: var(--ndw-border-radius-md);
-  box-shadow: var(--ndw-elevation-dropdown);
-  display: grid;
-  padding: var(--ndw-spacing-sm);
-}
-
 [ndwButton][filter] {
   background-color: var(--ndw-color-white);
   border-color: var(--ndw-color-grey-300);
   color: var(--ndw-color-grey-700);
   height: var(--ndw-spacing-2xl);
 }
-[ndwButton][filter] ndw-icon {
+[ndwButton][filter] ndw-icon.button-icon {
   color: var(--ndw-color-primary);
 }
+[ndwButton][filter] ndw-icon.prefix-icon {
+  color: var(--ndw-color-grey-300);
+}
 [ndwButton][filter]:hover {
   border-color: var(--ndw-color-primary);
 }
-[ndwButton][filter]:active {
-  background-color: var(--ndw-color-primary-050);
+[ndwButton][filter]:active, [ndwButton][filter]:focus, [ndwButton][filter]:focus-visible {
+  border-color: var(--ndw-color-secondary-500);
+  box-shadow: var(--ndw-elevation-info);
+  outline-color: var(--ndw-color-secondary-500);
 }
 [ndwButton][filter][disabled] {
-  background-color: var(--ndw-color-grey-300);
+  background-color: var(--ndw-color-grey-100);
   color: var(--ndw-color-grey-500);
   pointer-events: none;
   user-select: none;
@@ -720,7 +720,7 @@
   border-color: transparent;
   outline-color: var(--ndw-color-secondary-500);
 }
-[ndwInput][disabled] {
+[ndwInput][disabled], [ndwInput][readonly] {
   background-color: var(--ndw-color-grey-100);
   border-color: var(--ndw-color-grey-300);
   color: var(--ndw-color-grey-500);
@@ -806,6 +806,23 @@ a[ndwLink][disabled] {
   background-color: var(--ndw-backdrop-color);
 }
 
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.cdk-overlay-pane.ndw-popover-panel {
+  animation: show var(--ndw-animation-speed-default) ease-in;
+  background-color: var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+  box-shadow: var(--ndw-elevation-popover);
+  display: grid;
+  padding: var(--ndw-spacing-sm);
+}
+
 [ndwButton][menu] {
   background-color: transparent;
   border-color: transparent;
@@ -827,8 +844,3 @@ a[ndwLink][disabled] {
   border-color: transparent;
   color: var(--ndw-color-white);
 }
-
-.cdk-overlay-pane.tooltip-bottom ndw-tooltip::before {
-  bottom: auto;
-  top: calc(var(--ndw-spacing-2xs) * -1);
-}

package/core/styles/nwb-styles.scss

@@ -213,17 +213,21 @@
   --ndw-border-radius-md: 0.5rem;
   --ndw-border-radius-lg: 1.5rem;
   /* Elevation */
-  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_info-500), 0.25);
+  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
   --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
   --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
-  --ndw-backdrop-color: hsla(var(--_grey-600), var(--ndw-alpha-40));
+  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-backdrop-color: var(--ndw-alpha-black-040);
   /* Animation */
+  --ndw-animation-speed-very-fast: 100ms;
   --ndw-animation-speed-fast: 200ms;
   --ndw-animation-speed-default: 300ms;
   --ndw-animation-speed-slow: 500ms;
   /* Icon Size */
   --ndw-icon-size-md: 1rem;
   --ndw-icon-size-lg: 1.5rem;
+  /* Mult-select Size */
+  --multi-select-default-width: 18.75rem;
   /* Typography */
   --ndw-font-family-body: "Nunito Sans", sans-serif;
   --ndw-font-family-heading: "DM Sans", sans-serif;
@@ -608,32 +612,28 @@
     opacity: 1;
   }
 }
-.cdk-overlay-pane.ndw-dropdown-panel {
-  animation: show var(--ndw-animation-speed-default) ease-in;
-  background-color: var(--ndw-color-white);
-  border-radius: var(--ndw-border-radius-md);
-  box-shadow: var(--ndw-elevation-dropdown);
-  display: grid;
-  padding: var(--ndw-spacing-sm);
-}
-
 [ndwButton][filter] {
   background-color: var(--ndw-color-white);
   border-color: var(--ndw-color-grey-300);
   color: var(--ndw-color-grey-700);
   height: var(--ndw-spacing-2xl);
 }
-[ndwButton][filter] ndw-icon {
+[ndwButton][filter] ndw-icon.button-icon {
   color: var(--ndw-color-primary);
 }
+[ndwButton][filter] ndw-icon.prefix-icon {
+  color: var(--ndw-color-grey-300);
+}
 [ndwButton][filter]:hover {
   border-color: var(--ndw-color-primary);
 }
-[ndwButton][filter]:active {
-  background-color: var(--ndw-color-primary-050);
+[ndwButton][filter]:active, [ndwButton][filter]:focus, [ndwButton][filter]:focus-visible {
+  border-color: var(--ndw-color-secondary-500);
+  box-shadow: var(--ndw-elevation-info);
+  outline-color: var(--ndw-color-secondary-500);
 }
 [ndwButton][filter][disabled] {
-  background-color: var(--ndw-color-grey-300);
+  background-color: var(--ndw-color-grey-100);
   color: var(--ndw-color-grey-500);
   pointer-events: none;
   user-select: none;
@@ -688,7 +688,7 @@
   border-color: transparent;
   outline-color: var(--ndw-color-secondary-500);
 }
-[ndwInput][disabled] {
+[ndwInput][disabled], [ndwInput][readonly] {
   background-color: var(--ndw-color-grey-100);
   border-color: var(--ndw-color-grey-300);
   color: var(--ndw-color-grey-500);
@@ -774,6 +774,23 @@ a[ndwLink][disabled] {
   background-color: var(--ndw-backdrop-color);
 }
 
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.cdk-overlay-pane.ndw-popover-panel {
+  animation: show var(--ndw-animation-speed-default) ease-in;
+  background-color: var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+  box-shadow: var(--ndw-elevation-popover);
+  display: grid;
+  padding: var(--ndw-spacing-sm);
+}
+
 [ndwButton][menu] {
   background-color: transparent;
   border-color: transparent;
@@ -795,8 +812,3 @@ a[ndwLink][disabled] {
   border-color: transparent;
   color: var(--ndw-color-white);
 }
-
-.cdk-overlay-pane.tooltip-bottom ndw-tooltip::before {
-  bottom: auto;
-  top: calc(var(--ndw-spacing-2xs) * -1);
-}