@ndwnu/design-system 7.0.1 → 8.0.0

package/lib/components/avatar/avatar.component.d.ts

@@ -0,0 +1,9 @@
+import { AvatarStatus, AvatarColor } from './avatar.model';
+import * as i0 from "@angular/core";
+export declare class AvatarComponent {
+    status: import("@angular/core").InputSignal<AvatarStatus>;
+    initials: import("@angular/core").InputSignal<boolean>;
+    color: import("@angular/core").InputSignal<AvatarColor | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "ndw-avatar", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/avatar/avatar.model.d.ts

@@ -0,0 +1,2 @@
+export type AvatarStatus = 'approved' | 'open' | 'none';
+export type AvatarColor = 'default' | 'blue' | 'purple' | 'red' | 'green' | 'yellow' | 'orange';

package/lib/components/avatar/index.d.ts

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

package/lib/components/edit-bar/edit-bar-actions/edit-bar-actions.component.d.ts

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

package/lib/components/edit-bar/edit-bar-message/edit-bar-message.component.d.ts

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

package/lib/components/edit-bar/edit-bar.component.d.ts

@@ -0,0 +1,15 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { EditBarPosition, EditBarWidth } from './edit-bar.model';
+import * as i0 from "@angular/core";
+export declare class EditBarComponent implements AfterViewInit, OnDestroy {
+    #private;
+    readonly grid: import("@angular/core").InputSignal<boolean>;
+    readonly position: import("@angular/core").InputSignal<EditBarPosition>;
+    readonly positionFixedWidth: import("@angular/core").InputSignal<EditBarWidth>;
+    readonly editBar: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    readonly height: import("@angular/core").WritableSignal<number | null>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditBarComponent, "ndw-edit-bar", never, { "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "positionFixedWidth": { "alias": "positionFixedWidth"; "required": false; "isSignal": true; }; }, {}, never, ["ndw-edit-bar-message", "ndw-edit-bar-actions"], true, never>;
+}

package/lib/components/edit-bar/edit-bar.model.d.ts

@@ -0,0 +1,2 @@
+export type EditBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute';
+export type EditBarWidth = 'full' | 'layout';

package/lib/components/edit-bar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './edit-bar.component';
+export * from './edit-bar.model';
+export * from './edit-bar-actions/edit-bar-actions.component';
+export * from './edit-bar-message/edit-bar-message.component';

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

@@ -35,6 +35,13 @@ export declare class FileUploadComponent implements ControlValueAccessor {
     private resetFile;
     private correctFileSize;
     private correctFileType;
+    /**
+     * Ensures that the provided File has a valid MIME type.
+     *
+     * NOTE: Some file extensions are not automatically mapped to a valid MIME type by the operating system.
+     * In such cases, the MIME_TYPE_MAP is used to assign the correct MIME type.
+     */
+    private ensureFileType;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "ndw-file-upload", never, { "allowedFileTypeRegex": { "alias": "allowedFileTypeRegex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "maxFileSizeInBytes": { "alias": "maxFileSizeInBytes"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "uploadDate": { "alias": "uploadDate"; "required": false; "isSignal": true; }; "draggingOver": { "alias": "draggingOver"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "incorrectFileSize": { "alias": "incorrectFileSize"; "required": false; "isSignal": true; }; "incorrectFileType": { "alias": "incorrectFileType"; "required": false; "isSignal": true; }; "selectedFile": { "alias": "selectedFile"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "draggingOver": "draggingOverChange"; "error": "errorChange"; "incorrectFileSize": "incorrectFileSizeChange"; "incorrectFileType": "incorrectFileTypeChange"; "selectedFile": "selectedFileChange"; "success": "successChange"; }, never, never, true, never>;
 }

package/lib/components/form-field/input/input.directive.d.ts

@@ -3,6 +3,7 @@ import { AbstractControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class InputDirective implements OnInit {
     set disabled(disabled: boolean);
+    get error(): boolean;
     set error(error: boolean);
     set success(success: boolean);
     set id(id: string);
@@ -13,6 +14,7 @@ export declare class InputDirective implements OnInit {
     get element(): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
     get control(): AbstractControl | null;
     ngOnInit(): void;
+    updateErrorAttribute(formFieldError?: boolean): void;
     private setSelectPlaceholderAttribute;
     private updateRequiredAttribute;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputDirective, never>;

package/lib/components/form-field/month-input/month-input.component.d.ts

@@ -29,6 +29,7 @@ export declare class MonthInputComponent implements ControlValueAccessor, OnInit
     private onChange;
     constructor();
     ngOnInit(): void;
+    updateErrorAttribute(formFieldError?: boolean): void;
     writeValue(value: Date | null): void;
     registerOnChange(fn: (value: Date | null) => void): void;
     setDisabledState(isDisabled: boolean): void;

package/lib/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './alert';
+export * from './avatar';
 export * from './badge';
 export * from './banner';
 export * from './breadcrumb';
@@ -9,6 +10,7 @@ export * from './card';
 export * from './collapsible';
 export * from './dashboard-card';
 export * from './dropdown';
+export * from './edit-bar';
 export * from './form-field';
 export * from './icon';
 export * from './layout';
@@ -20,9 +22,10 @@ export * from './multi-select';
 export * from './pill';
 export * from './popover';
 export * from './router-breadcrumbs';
+export * from './splitter';
+export * from './summary-card';
 export * from './tab';
 export * from './tab-group';
 export * from './tag';
 export * from './toast';
 export * from './tooltip';
-export * from './summary-card';

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

@@ -9,6 +9,7 @@ export declare class LayoutComponent {
     menuFooterTexts: import("@angular/core").InputSignal<string[] | undefined>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     version: import("@angular/core").InputSignal<string | undefined>;
+    environment: import("@angular/core").InputSignal<"local" | "staging" | "acceptance" | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

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

@@ -2,7 +2,7 @@ import { ConnectedPosition } from '@angular/cdk/overlay';
 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 { Environment, MenuItem, NdwBrand, SimpleMenuItem } from './main-navigation.model';
 import * as i0 from "@angular/core";
 export declare class MainNavigationComponent implements AfterViewInit, OnDestroy {
     #private;
@@ -13,6 +13,7 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     isCollapsible: import("@angular/core").InputSignal<boolean>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     version: import("@angular/core").InputSignal<string | undefined>;
+    environment: import("@angular/core").InputSignal<Environment | undefined>;
     closeButtonLabel: import("@angular/core").InputSignal<string>;
     menuButtonLabel: import("@angular/core").InputSignal<string>;
     isExpanded: import("@angular/core").ModelSignal<boolean>;
@@ -21,6 +22,7 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     childMenuTemplate: import("@angular/core").Signal<TemplateRef<MainNavigationMenuComponent>>;
     isMobile: import("@angular/core").WritableSignal<boolean>;
     brandImagePath: import("@angular/core").Signal<string>;
+    environmentPillColor: import("@angular/core").Signal<"blue" | "green" | "yellow" | "gray">;
     activeId?: number;
     protected mobilePortal?: TemplatePortal<MainNavigationMenuComponent>;
     onMouseMove(event: MouseEvent): void;
@@ -38,5 +40,5 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     toggleMobileView(): void;
     toggleView(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "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; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "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; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "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/lib/components/main-navigation/main-navigation.imports.d.ts

@@ -6,4 +6,5 @@ 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 BadgeComponent | typeof IconComponent | typeof NgTemplateOutlet | typeof RouterLink | typeof NgClass | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];
+import { PillComponent } from '../pill';
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof BadgeComponent | typeof IconComponent | typeof NgClass | typeof NgTemplateOutlet | typeof RouterLink | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof PillComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];

package/lib/components/main-navigation/main-navigation.model.d.ts

@@ -10,3 +10,4 @@ export interface MenuItem extends SimpleMenuItem {
     notifications?: number;
 }
 export type NdwBrand = 'NDW' | 'NWB';
+export type Environment = 'local' | 'staging' | 'acceptance';

package/lib/components/splitter/index.d.ts

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

package/lib/components/splitter/splitter.component.d.ts

@@ -0,0 +1,69 @@
+import { Point } from '@angular/cdk/drag-drop';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SplitterComponent implements AfterViewInit, OnDestroy {
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional width of the first panel (in pixels) when the component is initialized.
+     */
+    readonly initialPanelWidth: import("@angular/core").InputSignal<number | undefined>;
+    /**
+     * Minimum width of both panels (in pixels).
+     */
+    readonly minimumPanelWidth: import("@angular/core").InputSignal<number>;
+    protected readonly firstPanelWidth: import("@angular/core").WritableSignal<number>;
+    protected readonly secondPanelWidth: import("@angular/core").Signal<number>;
+    protected readonly isDragging: import("@angular/core").WritableSignal<boolean>;
+    private readonly container;
+    private readonly splitter;
+    private readonly cdkDrag;
+    private storedFirstPanelWidth;
+    /**
+     * Flag to indicate if the mouse click event should be
+     * ignored because the user is dragging the splitter.
+     */
+    private ignoreMouseClick;
+    /**
+     * Reactive object to store the dimensions of the drag elements.
+     * Updated by a resize observer on the container.
+     */
+    private readonly dragElementDimensions;
+    private readonly resizeObserver;
+    /**
+     * Available width for the panels, without considering the `minimumPanelWidth` input.
+     */
+    private readonly availableWidth;
+    /**
+     * Position of the drag handle when the component is initialized.
+     * The drag position is always relative to this starting position.
+     */
+    private readonly dragStartPosition;
+    /**
+     * Minimum panel width that is safe to use, considering the
+     * available container width and the `minimumPanelWidth` input.
+     */
+    protected readonly safeMinPanelWidth: import("@angular/core").Signal<number>;
+    /**
+     * Maximum panel width that is safe to use, considering the
+     * available container width and the `minimumPanelWidth
+     */
+    protected readonly safeMaxPanelWidth: import("@angular/core").Signal<number>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    protected constrainPosition: (userPointerPosition: Point) => {
+        x: number;
+        y: number;
+    };
+    protected onDragStarted(): void;
+    protected onDragEnded(): void;
+    protected onDragMoved(): void;
+    protected onSplitterMouseDown(): void;
+    protected onSplitterMouseUp(): void;
+    protected setDragPosition(position: number): void;
+    protected storeFirstPanelWidth(): void;
+    private setFirstPanelWidth;
+    private clampPanelWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "ndw-splitter", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "initialPanelWidth": { "alias": "initialPanelWidth"; "required": false; "isSignal": true; }; "minimumPanelWidth": { "alias": "minimumPanelWidth"; "required": false; "isSignal": true; }; }, {}, never, ["[first-panel]", "[second-panel]"], true, never>;
+}

package/lib/components/summary-card/index.d.ts

@@ -2,7 +2,6 @@ export * from './summary-card.model';
 export * from './summary-card.component';
 export * from './summary-card-actions/summary-card-actions.component';
 export * from './summary-card-action/summary-card-action.component';
-export * from './summary-card-avatar/summary-card-avatar.component';
 export * from './summary-card-content/summary-card-content.component';
 export * from './summary-card-header/summary-card-header.component';
 export * from './summary-card-tags/summary-card-tags.component';

package/lib/components/summary-card/summary-card.component.d.ts

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

package/lib/components/summary-card/summary-card.model.d.ts

@@ -1,2 +1 @@
-export type SummaryVariant = 'default' | 'orange' | 'blue' | 'green' | 'yellow' | 'red' | 'purple';
 export type SummaryActionsView = 'visible' | 'popover' | 'auto';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "peerDependencies": {
     "@angular/animations": "~19.0.0",
     "@angular/cdk": "~19.0.0",

package/styles/base/_variables.scss

@@ -72,8 +72,15 @@
   /* Modal */
   --ndw-modal-width-sm: 31.25rem;
   --ndw-modal-width-md: 45rem;
+
+  /* Navigation */
+  --main-navigation-collapse-width: 2.75rem;
+  --main-navigation-expanded-width: 12.5rem;
+  --main-navigation-mobile-header-height: 6.25rem;
 }
 
 /* Screen sizes */
+$ndw-screen-2xs: 480px;
+$ndw-screen-xs: 768px;
 $ndw-screen-sm: 1024px;
 $ndw-screen-md: 1440px;

package/styles/base/typography.stories.ts

@@ -98,7 +98,7 @@ const meta: Meta<StoryArgs> = {
                 <span>150%</span>
                 <span>.${typography.class}</span>
               </div>
-            `
+            `,
               )
               .join('')}
           </section>

package/styles/components/_divider.scss

@@ -1,12 +1,10 @@
-hr {
-  &[ndwDivider] {
-    background-color: var(--ndw-color-grey-300);
-    border: none;
-    height: var(--ndw-border-size-sm);
-    margin: var(--ndw-spacing-xs) 0;
-  }
+hr[ndwDivider] {
+  background-color: var(--ndw-color-grey-300);
+  border: none;
+  height: var(--ndw-border-size-sm);
+  margin: var(--ndw-spacing-xs) 0;
 
-  &[noMargin] {
+  & [noMargin] {
     margin-block: 0;
   }
 }

package/styles/components/_edit-bar.scss

@@ -0,0 +1,97 @@
+@use '../../styles/base/variables';
+
+$min-width-sm: variables.$ndw-screen-sm + 0.1;
+
+.ndw-edit-bar {
+  --left-position: 0;
+
+  display: block;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  padding: var(--ndw-spacing-md);
+  border-block-start: 1px solid var(--ndw-color-grey-300);
+
+  background-color: var(--ndw-color-white);
+
+  &.ndw-edit-bar--fixed {
+    position: fixed;
+    left: var(--left-position);
+
+    @media screen and (min-width: $min-width-sm) {
+      [data-main-navigation-expanded='true'] & {
+        --left-position: var(--main-navigation-expanded-width);
+      }
+
+      [data-main-navigation-expanded='false'] & {
+        --left-position: var(--main-navigation-collapse-width);
+      }
+    }
+  }
+
+  &.ndw-edit-bar--full-width {
+    left: 0;
+    right: 0;
+  }
+
+  &.ndw-edit-bar--layout-width {
+    right: 0;
+  }
+
+  &.ndw-edit-bar--sticky {
+    position: sticky;
+  }
+
+  &.ndw-edit-bar--static {
+    position: static;
+  }
+
+  &.ndw-edit-bar--absolute {
+    position: absolute;
+  }
+
+  &.ndw-edit-bar--grid {
+    padding-inline: 0;
+  }
+
+  &__inner {
+    gap: var(--ndw-spacing-xs);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .grid {
+    box-sizing: border-box;
+  }
+}
+
+.ndw-edit-bar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+  width: 100%;
+
+  > * {
+    flex: 1;
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: variables.$ndw-screen-xs) {
+    width: max-content;
+    margin-left: auto;
+
+    > * {
+      flex: unset;
+    }
+  }
+}
+
+.ndw-edit-bar-message {
+  display: block;
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-700);
+}

package/styles/components/_input.scss

@@ -47,6 +47,10 @@
     background-color: var(--ndw-color-critical-100);
     border-color: var(--ndw-color-critical-500);
 
+    [ndwInput] {
+      background-color: var(--ndw-color-critical-100);
+    }
+
     &:hover {
       border-color: var(--ndw-color-grey-300);
     }
@@ -69,17 +73,37 @@
     color: var(--ndw-color-grey-500);
     pointer-events: none;
 
+    [ndwInput] {
+      background-color: var(--ndw-color-grey-100);
+    }
+
     ndw-icon {
-      color: var(--ndw-color-grey-300);
+      color: var(--ndw-color-grey-500);
     }
   }
 }
 
+.input-container:has(> [ndwInput][error]) {
+  background-color: var(--ndw-color-critical-100);
+  border-color: var(--ndw-color-critical-500);
+}
+
 // Add input container right padding when select element is used
 .input-container:has(> select[ndwInput]) {
   padding-inline-end: var(--ndw-spacing-xs);
 }
 
+.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
+  background-color: var(--ndw-color-white);
+}
+
+.input-container[error]:has(> [ndwInput]:is(:active, :focus, :focus-visible)) {
+  background-color: var(--ndw-color-white);
+  select[ndwInput] {
+    background-color: var(--ndw-color-white);
+  }
+}
+
 // When an ndwInput is contained in an input-container hide the
 // ndwInput borders and instead put the borders on the container.
 .input-container:has(> [ndwInput]) {

package/styles/components/_link.scss

@@ -6,6 +6,7 @@
   border: 0;
 
   font-size: inherit;
+  font-family: var(--ndw-font-family-body);
   text-decoration: underline var(--ndw-border-size-sm) transparent;
   text-underline-offset: var(--ndw-border-size-md);
 

package/styles/components/_summary-card.scss

@@ -1,17 +1,30 @@
 .ndw-summary-card {
-  display: block;
+  position: relative;
+  box-sizing: border-box;
+
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  padding: var(--ndw-spacing-lg);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+
+  background-color: var(--ndw-color-white);
+  box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-xs) 0 rgba(64, 78, 84, 0.05);
+  transition: var(--ndw-animation-speed-fast);
+
+  &:has(.ndw-summary-card-header a:hover) {
+    border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+    box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-md) 0 rgba(64, 78, 84, 0.2);
+  }
 
   &__wrapper {
-    position: relative;
-    overflow: hidden;
-
     display: grid;
     gap: var(--ndw-spacing-md);
     height: 100%;
     align-items: start;
     box-sizing: border-box;
 
-    &:has(ndw-summary-card-avatar) {
+    &:has(ndw-avatar) {
       grid-template-columns: max-content 1fr;
     }
 
@@ -100,10 +113,6 @@
         text-decoration: none;
         font-family: var(--ndw-font-family-heading);
 
-        &:hover {
-          text-decoration: underline;
-        }
-
         &:after {
           content: '';
           position: absolute;
@@ -129,63 +138,6 @@
     color: var(--ndw-color-grey-500);
   }
 
-  .ndw-summary-card-avatar {
-    display: grid;
-    place-content: center;
-    position: relative;
-    width: 30px;
-    aspect-ratio: 1 / 1;
-    border-radius: 50%;
-    font-size: var(--ndw-font-size-sm);
-
-    &.ndw-summary-card-avatar--default {
-      color: var(--ndw-color-grey-700);
-      background-color: var(--ndw-color-grey-300);
-    }
-
-    &.ndw-summary-card-avatar--orange {
-      color: var(--ndw-color-primary-700);
-      background-color: var(--ndw-color-primary-050);
-    }
-
-    &.ndw-summary-card-avatar--blue {
-      color: var(--ndw-color-info-500);
-      background-color: var(--ndw-color-info-100);
-    }
-
-    &.ndw-summary-card-avatar--green {
-      color: var(--ndw-color-positive-500);
-      background-color: var(--ndw-color-positive-100);
-    }
-
-    &.ndw-summary-card-avatar--red {
-      color: var(--ndw-color-critical-500);
-      background-color: var(--ndw-color-critical-100);
-    }
-
-    &.ndw-summary-card-avatar--yellow {
-      color: var(--ndw-color-warning-500);
-      background-color: var(--ndw-color-warning-100);
-    }
-
-    &.ndw-summary-card-avatar--purple {
-      color: var(--ndw-color-alternative-500);
-      background-color: var(--ndw-color-alternative-100);
-    }
-
-    > img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 50%;
-    }
-
-    ndw-icon {
-      font-size: var(--ndw-font-size-lg);
-    }
-  }
-
   .ndw-summary-card-actions {
     flex: 1;
     display: flex;

package/styles/components/index.scss

@@ -2,6 +2,7 @@
 @forward 'card';
 @forward 'divider';
 @forward 'dropdown';
+@forward 'edit-bar';
 @forward 'filter-button';
 @forward 'input';
 @forward 'label';

package/styles/components/link.stories.ts

@@ -50,7 +50,7 @@ const meta: Meta<StoryArgs> = {
   title: 'Components/Link',
   decorators: [
     componentWrapperDecorator(
-      (story) => `<div style="font-size: var(--ndw-font-size-sm);">${story}</div>`
+      (story) => `<div style="font-size: var(--ndw-font-size-sm);">${story}</div>`,
     ),
     moduleMetadata({
       imports: [IconComponent],