@daffodil/design 0.66.1 → 0.68.0

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

@@ -0,0 +1,52 @@
+import { AnimationEvent } from '@angular/animations';
+import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { EventEmitter, ElementRef, AfterContentInit, AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DaffModalComponent implements AfterContentInit, AfterViewInit {
+    private _focusTrapFactory;
+    private _elementRef;
+    /**
+     * HostBinding to set the default modal class on the host element.
+     */
+    modalClass: boolean;
+    /**
+     * Dictates whether or not a modal is open or closed.
+     */
+    open: boolean;
+    /**
+     * The CDK Portal outlet used to portal content into the modal.
+     */
+    private _portalOutlet;
+    /**
+     * Event fired when the close animation is completed.
+     */
+    animationCompleted: EventEmitter<any>;
+    /**
+     * Event fired when the close animation is completed.
+     */
+    closedAnimationCompleted: EventEmitter<any>;
+    /**
+     * Event fired when the backdrop is clicked. This is often used to close the modal.
+     */
+    hide: EventEmitter<void>;
+    private _focusTrap;
+    constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _elementRef: ElementRef<HTMLElement>);
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    /**
+     * Helper method to attach portable content to modal.
+     */
+    attachContent(portal: ComponentPortal<any>): any;
+    /** Animation hook that controls the entrance and exit animations of the modal. */
+    get fadeState(): string;
+    /**
+     * Animation event that can used to hook into when
+     * animations are fully completed. We use this in the DaffModalService
+     * to determine when to actually remove the dynamically rendered element from the DOM
+     * so that the animation does not clip as the element is removed.
+     */
+    animationDone(e: AnimationEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffModalComponent, "daff-modal", never, { "open": { "alias": "open"; "required": false; }; }, {}, never, never, false, never>;
+}

package/modal/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { ComponentRef } from '@angular/core';
+import { DaffModalComponent } from './modal.component';
+export interface DaffModal {
+    /**
+     * The reference to the modal in question
+     */
+    modal: ComponentRef<DaffModalComponent>;
+    /**
+     * The overlay associated with a given modal.
+     */
+    overlay: OverlayRef;
+}

package/modal/public_api.d.ts

@@ -0,0 +1,8 @@
+export * from './modal/modal.component';
+export { DaffModalModule } from './modal.module';
+export { DaffModalService } from './service/modal.service';
+export { DaffModal } from './modal/modal';
+export { DaffModalHeaderComponent } from './modal-header/modal-header.component';
+export { DaffModalTitleDirective } from './modal-title/modal-title.directive';
+export { DaffModalContentComponent } from './modal-content/modal-content.component';
+export { DaffModalActionsComponent } from './modal-actions/modal-actions.component';

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

@@ -0,0 +1,19 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { Type } from '@angular/core';
+import { DaffModal } from '../modal/modal';
+import { DaffModalConfiguration } from '../modal/modal-config';
+import * as i0 from "@angular/core";
+export declare class DaffModalService {
+    private overlay;
+    private _modals;
+    constructor(overlay: Overlay);
+    private defaultConfiguration;
+    private _attachModal;
+    private _attachModalContent;
+    private _createOverlayRef;
+    private _removeModal;
+    open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModal;
+    close(modal: DaffModal): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffModalService>;
+}

package/modal/src/modal-theme.scss

@@ -0,0 +1,9 @@
+@use '../../scss/core';
+
+@mixin daff-modal-theme($theme) {
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-modal {
+		background: $base;
+	}
+}

package/molecules/backdrop/animation/backdrop-animation-state.d.ts

@@ -1,2 +1,2 @@
-export declare type DaffBackdropAnimationState = 'interactable' | 'non-interactable';
+export type DaffBackdropAnimationState = 'interactable' | 'non-interactable';
 export declare const getAnimationState: (interactable: boolean) => DaffBackdropAnimationState;

package/molecules/backdrop/backdrop/backdrop.component.d.ts

@@ -34,5 +34,5 @@ export declare class DaffBackdropComponent implements OnInit {
      */
     onBackdropClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBackdropComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBackdropComponent, "daff-backdrop", never, { "transparent": "transparent"; "interactable": "interactable"; "fullscreen": "fullscreen"; }, { "backdropClicked": "backdropClicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBackdropComponent, "daff-backdrop", never, { "transparent": { "alias": "transparent"; "required": false; }; "interactable": { "alias": "interactable"; "required": false; }; "fullscreen": { "alias": "fullscreen"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, never, never, false, never>;
 }

package/molecules/feature/feature/feature.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-export declare type DaffFeatureMode = 'compact' | 'normal' | undefined;
+export type DaffFeatureMode = 'compact' | 'normal' | undefined;
 export declare enum DaffFeatureModeEnum {
     Compact = "compact",
     Normal = "normal"
@@ -22,5 +22,5 @@ export declare class DaffFeatureComponent {
      */
     get normal(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFeatureComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFeatureComponent, "daff-feature", never, { "mode": "mode"; }, {}, never, ["[daffFeatureIcon]", "[daffFeatureSubheader]", "[daffFeatureTitle]", "[daffFeatureSubtitle]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFeatureComponent, "daff-feature", never, { "mode": { "alias": "mode"; "required": false; }; }, {}, never, ["[daffFeatureIcon]", "[daffFeatureSubheader]", "[daffFeatureTitle]", "[daffFeatureSubtitle]", "*"], false, never>;
 }

package/molecules/image-gallery/gallery-image/gallery-image.component.d.ts

@@ -6,5 +6,5 @@ export declare class DaffGalleryImageComponent {
     selected: boolean;
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffGalleryImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffGalleryImageComponent, "daff-gallery-image", never, { "selected": "selected"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffGalleryImageComponent, "daff-gallery-image", never, { "selected": { "alias": "selected"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/molecules/qty-dropdown/qty-dropdown.component.d.ts

@@ -57,5 +57,5 @@ export declare class DaffQtyDropdownComponent implements OnInit {
     private isQtyOutsideDropdownRange;
     private selectInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQtyDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQtyDropdownComponent, "daff-qty-dropdown", never, { "qty": "qty"; "id": "id"; }, { "qtyChanged": "qtyChanged"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQtyDropdownComponent, "daff-qty-dropdown", never, { "qty": { "alias": "qty"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "qtyChanged": "qtyChanged"; }, never, never, false, never>;
 }

package/navbar/README.md

@@ -0,0 +1,41 @@
+# Navbar
+Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
+
+## Overview
+The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the `flex` display and is customizable with all the flexbox properties. It's required to be used with the native HTML `<nav>` element to ensure an accessible experience by default.
+
+## Basic Navbar
+<design-land-example-viewer-container example="basic-navbar"></design-land-example-viewer-container>
+
+## Theming
+The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="navbar-theming"></design-land-example-viewer-container>
+
+## Contained Navbar
+A navbar can be contained to a specific width by using `<daff-container>`. [View Container Documentation](/libs/design/src/atoms/container/README.md) The layout styles for the navbar will be passed down to the container by utilizing the `daffManageContainerLayoutMixin`.
+
+<design-land-example-viewer-container example="contained-navbar"></design-land-example-viewer-container>
+
+## Raised Navbar
+The raised property adds elevation to a navbar. To enable it, set the `raised` property on `<nav daff-navbar>`.
+
+<design-land-example-viewer-container example="raised-navbar"></design-land-example-viewer-container>
+
+## Accessibility
+Daffodil enforces the usage of the native `<nav>` HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the `aria-labelledby` attribute.
+
+### Example
+```html
+<nav daff-navbar aria-labelledby="main-navigation">
+<!--  navigation items -->
+</nav>
+
+<footer>
+  <nav daff-navbar aria-labelledby="footer-navigation">
+  <!--  navigation items -->
+  </nav>
+</footer>
+```

package/navbar/examples/basic-navbar/basic-navbar.module.d.ts

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./basic-navbar.component";
 import * as i2 from "@angular/common";
-import * as i3 from "@daffodil/design";
+import * as i3 from "@daffodil/design/navbar";
+import * as i4 from "@daffodil/design/button";
+import * as i5 from "@daffodil/design/container";
 export declare class BasicNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicNavbarModule, [typeof i1.BasicNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i3.DaffButtonModule, typeof i3.DaffContainerModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicNavbarModule, [typeof i1.BasicNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i4.DaffButtonModule, typeof i5.DaffContainerModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BasicNavbarModule>;
 }

package/navbar/examples/contained-navbar/contained-navbar.module.d.ts

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./contained-navbar.component";
 import * as i2 from "@angular/common";
-import * as i3 from "@daffodil/design";
+import * as i3 from "@daffodil/design/navbar";
+import * as i4 from "@daffodil/design/button";
+import * as i5 from "@daffodil/design/container";
 export declare class ContainedNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ContainedNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ContainedNavbarModule, [typeof i1.ContainedNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i3.DaffButtonModule, typeof i3.DaffContainerModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ContainedNavbarModule, [typeof i1.ContainedNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i4.DaffButtonModule, typeof i5.DaffContainerModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ContainedNavbarModule>;
 }

package/navbar/examples/navbar-theming/navbar-theming.module.d.ts

@@ -2,9 +2,10 @@ import * as i0 from "@angular/core";
 import * as i1 from "./navbar-theming.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
-import * as i4 from "@daffodil/design";
+import * as i4 from "@daffodil/design/navbar";
+import * as i5 from "@daffodil/design/button";
 export declare class NavbarThemingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NavbarThemingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NavbarThemingModule, [typeof i1.NavbarThemingComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffNavbarModule, typeof i4.DaffButtonModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NavbarThemingModule, [typeof i1.NavbarThemingComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffNavbarModule, typeof i5.DaffButtonModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NavbarThemingModule>;
 }

package/navbar/examples/raised-navbar/raised-navbar.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./raised-navbar.component";
 import * as i2 from "@angular/common";
-import * as i3 from "@daffodil/design";
+import * as i3 from "@daffodil/design/navbar";
+import * as i4 from "@daffodil/design/button";
 export declare class RaisedNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RaisedNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<RaisedNavbarModule, [typeof i1.RaisedNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i3.DaffButtonModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RaisedNavbarModule, [typeof i1.RaisedNavbarComponent], [typeof i2.CommonModule, typeof i3.DaffNavbarModule, typeof i4.DaffButtonModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<RaisedNavbarModule>;
 }

package/navbar/index.d.ts

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

package/navbar/navbar/navbar.component.d.ts

@@ -0,0 +1,40 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import { DaffColorable } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * An _elementRef is needed for the Colorable mixin
+ */
+declare class DaffNavbarBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffNavbarBase: (new (...args: any[]) => {
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & (new (...args: any[]) => {
+    _color: import("@daffodil/design").DaffPalette;
+    color: import("@daffodil/design").DaffPalette;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & typeof DaffNavbarBase;
+/**
+ * @inheritdoc
+ */
+export declare class DaffNavbarComponent extends _daffNavbarBase implements DaffColorable {
+    private elementRef;
+    private renderer;
+    raised: boolean;
+    /**
+     * @docs-private
+     */
+    get raisedClass(): boolean;
+    /**
+     * @docs-private
+     */
+    hostClass: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffNavbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNavbarComponent, "nav[daff-navbar]", never, { "color": { "alias": "color"; "required": false; }; "raised": { "alias": "raised"; "required": false; }; }, {}, never, ["*"], false, never>;
+}
+export {};

package/navbar/navbar.module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./navbar/navbar.component";
+export declare class DaffNavbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffNavbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffNavbarModule, [typeof i1.DaffNavbarComponent], never, [typeof i1.DaffNavbarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffNavbarModule>;
+}

package/navbar/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffNavbarModule } from './navbar.module';
+export * from './navbar/navbar.component';

package/navbar/src/navbar-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-navbar-theme-variant($color) {
+	background: $color;
+	color: theming.daff-text-contrast($color);
+}
+
+@mixin daff-navbar-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	.daff-navbar {
+		@include daff-navbar-theme-variant(
+			theming.daff-illuminate($base, $neutral, 1)
+		);
+
+		&--raised {
+			box-shadow: 0 4px 10px rgba($black, 0.08);
+		}
+
+		&.daff-primary {
+			@include daff-navbar-theme-variant(theming.daff-color($primary));
+		}
+
+		&.daff-secondary {
+			@include daff-navbar-theme-variant(theming.daff-color($secondary));
+		}
+
+		&.daff-tertiary {
+			@include daff-navbar-theme-variant(theming.daff-color($tertiary));
+		}
+
+		&.daff-black {
+			@include daff-navbar-theme-variant($black);
+		}
+
+		&.daff-white {
+			@include daff-navbar-theme-variant($white);
+		}
+
+		&.daff-theme {
+			@include daff-navbar-theme-variant($base);
+		}
+
+		&.daff-theme-contrast {
+			@include daff-navbar-theme-variant($base-contrast);
+		}
+	}
+}

package/notification/examples/default-notification/default-notification.module.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "./default-notification.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@daffodil/design/notification";
 import * as i4 from "@fortawesome/angular-fontawesome";
-import * as i5 from "@daffodil/design";
+import * as i5 from "@daffodil/design/button";
 export declare class DefaultNotificationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultNotificationModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DefaultNotificationModule, [typeof i1.DefaultNotificationComponent], [typeof i2.CommonModule, typeof i3.DaffNotificationModule, typeof i4.FontAwesomeModule, typeof i5.DaffButtonModule], [typeof i1.DefaultNotificationComponent]>;

package/notification/examples/dismissable-notification/dismissable-notification.module.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "./dismissable-notification.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@daffodil/design/notification";
 import * as i4 from "@fortawesome/angular-fontawesome";
-import * as i5 from "@daffodil/design";
+import * as i5 from "@daffodil/design/button";
 export declare class DismissableNotificationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DismissableNotificationModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DismissableNotificationModule, [typeof i1.DismissableNotificationComponent], [typeof i2.CommonModule, typeof i3.DaffNotificationModule, typeof i4.FontAwesomeModule, typeof i5.DaffButtonModule], [typeof i1.DismissableNotificationComponent]>;

package/notification/examples/notification-orientations/notification-orientations.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "./notification-orientations.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@daffodil/design/notification";
-import * as i4 from "@daffodil/design";
+import * as i4 from "@daffodil/design/button";
 import * as i5 from "@fortawesome/angular-fontawesome";
 import * as i6 from "@angular/forms";
 export declare class NotificationOrientationsModule {

package/notification/examples/notification-status/notification-status.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "./notification-status.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@daffodil/design/notification";
-import * as i4 from "@daffodil/design";
+import * as i4 from "@daffodil/design/button";
 import * as i5 from "@fortawesome/angular-fontawesome";
 import * as i6 from "@angular/forms";
 export declare class NotificationStatusModule {

package/notification/notification/notification.component.d.ts

@@ -18,7 +18,7 @@ declare const _daffNotificationBase: (new (...args: any[]) => {
     _elementRef: ElementRef<any>;
     _renderer: Renderer2;
 }) & typeof DaffNotificationBase;
-export declare type DaffNotificationOrientation = 'horizontal' | 'vertical';
+export type DaffNotificationOrientation = 'horizontal' | 'vertical';
 /**
  * DaffNotificationComponent provides a way to display and
  * communicate information for user actions or system updates.
@@ -42,6 +42,6 @@ export declare class DaffNotificationComponent extends _daffNotificationBase imp
     _prefix: DaffPrefixDirective;
     onCloseNotification(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "status": "status"; "dismissable": "dismissable"; "orientation": "orientation"; }, { "closeNotification": "closeNotification"; }, ["_prefix"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationSubtitle]", "[daffNotificationActions]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "status": { "alias": "status"; "required": false; }; "dismissable": { "alias": "dismissable"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "closeNotification": "closeNotification"; }, ["_prefix"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationSubtitle]", "[daffNotificationActions]"], false, never>;
 }
 export {};

package/notification/src/notification-theme.scss

@@ -6,16 +6,16 @@
 	$primary: map.get($theme, primary);
 	$secondary: map.get($theme, secondary);
 	$tertiary: map.get($theme, tertiary);
-	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
 	$base: core.daff-map-deep-get($theme, 'core.base');
 	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$white: core.daff-map-deep-get($theme, 'core.white');
 	$black: core.daff-map-deep-get($theme, 'core.black');
 
 	.daff-notification {
-		background: theming.daff-illuminate($base, $gray, 1);
-		border: 1px solid theming.daff-illuminate($base, $gray, 2);
-		color: theming.daff-text-contrast(theming.daff-illuminate($base, $gray, 1));
+		background: theming.daff-illuminate($base, $neutral, 1);
+		border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 1));
 
 		&.daff-success {
 			background: theming.daff-color(theming.$daff-green, 10);

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.66.1","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^15.0.0","@angular/common":"^15.0.0","@angular/core":"^15.0.0","@angular/forms":"^15.0.0","@angular/cdk":"^15.0.0","@daffodil/core":"0.66.1","@fortawesome/angular-fontawesome":"^0.12.1","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.scss"},"./scss/typography/classes":{"sass":"./scss/typography/_classes.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/daffodil-design.mjs","es2020":"./fesm2020/daffodil-design.mjs","es2015":"./fesm2015/daffodil-design.mjs","node":"./fesm2015/daffodil-design.mjs","default":"./fesm2020/daffodil-design.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2020":"./esm2020/accordion/examples/daffodil-design-accordion-examples.mjs","es2020":"./fesm2020/daffodil-design-accordion-examples.mjs","es2015":"./fesm2015/daffodil-design-accordion-examples.mjs","node":"./fesm2015/daffodil-design-accordion-examples.mjs","default":"./fesm2020/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2020":"./esm2020/article/examples/daffodil-design-article-examples.mjs","es2020":"./fesm2020/daffodil-design-article-examples.mjs","es2015":"./fesm2015/daffodil-design-article-examples.mjs","node":"./fesm2015/daffodil-design-article-examples.mjs","default":"./fesm2020/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2020":"./esm2020/button/examples/daffodil-design-button-examples.mjs","es2020":"./fesm2020/daffodil-design-button-examples.mjs","es2015":"./fesm2015/daffodil-design-button-examples.mjs","node":"./fesm2015/daffodil-design-button-examples.mjs","default":"./fesm2020/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2020":"./esm2020/callout/examples/daffodil-design-callout-examples.mjs","es2020":"./fesm2020/daffodil-design-callout-examples.mjs","es2015":"./fesm2015/daffodil-design-callout-examples.mjs","node":"./fesm2015/daffodil-design-callout-examples.mjs","default":"./fesm2020/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2020":"./esm2020/card/examples/daffodil-design-card-examples.mjs","es2020":"./fesm2020/daffodil-design-card-examples.mjs","es2015":"./fesm2015/daffodil-design-card-examples.mjs","node":"./fesm2015/daffodil-design-card-examples.mjs","default":"./fesm2020/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2020":"./esm2020/checkbox/examples/daffodil-design-checkbox-examples.mjs","es2020":"./fesm2020/daffodil-design-checkbox-examples.mjs","es2015":"./fesm2015/daffodil-design-checkbox-examples.mjs","node":"./fesm2015/daffodil-design-checkbox-examples.mjs","default":"./fesm2020/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2020":"./esm2020/container/examples/daffodil-design-container-examples.mjs","es2020":"./fesm2020/daffodil-design-container-examples.mjs","es2015":"./fesm2015/daffodil-design-container-examples.mjs","node":"./fesm2015/daffodil-design-container-examples.mjs","default":"./fesm2020/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2020":"./esm2020/hero/examples/daffodil-design-hero-examples.mjs","es2020":"./fesm2020/daffodil-design-hero-examples.mjs","es2015":"./fesm2015/daffodil-design-hero-examples.mjs","node":"./fesm2015/daffodil-design-hero-examples.mjs","default":"./fesm2020/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2020":"./esm2020/image/examples/daffodil-design-image-examples.mjs","es2020":"./fesm2020/daffodil-design-image-examples.mjs","es2015":"./fesm2015/daffodil-design-image-examples.mjs","node":"./fesm2015/daffodil-design-image-examples.mjs","default":"./fesm2020/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2020":"./esm2020/input/examples/daffodil-design-input-examples.mjs","es2020":"./fesm2020/daffodil-design-input-examples.mjs","es2015":"./fesm2015/daffodil-design-input-examples.mjs","node":"./fesm2015/daffodil-design-input-examples.mjs","default":"./fesm2020/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2020":"./esm2020/list/examples/daffodil-design-list-examples.mjs","es2020":"./fesm2020/daffodil-design-list-examples.mjs","es2015":"./fesm2015/daffodil-design-list-examples.mjs","node":"./fesm2015/daffodil-design-list-examples.mjs","default":"./fesm2020/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2020":"./esm2020/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","es2020":"./fesm2020/daffodil-design-loading-icon-examples.mjs","es2015":"./fesm2015/daffodil-design-loading-icon-examples.mjs","node":"./fesm2015/daffodil-design-loading-icon-examples.mjs","default":"./fesm2020/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2020":"./esm2020/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","es2020":"./fesm2020/daffodil-design-media-gallery-examples.mjs","es2015":"./fesm2015/daffodil-design-media-gallery-examples.mjs","node":"./fesm2015/daffodil-design-media-gallery-examples.mjs","default":"./fesm2020/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2020":"./esm2020/menu/examples/daffodil-design-menu-examples.mjs","es2020":"./fesm2020/daffodil-design-menu-examples.mjs","es2015":"./fesm2015/daffodil-design-menu-examples.mjs","node":"./fesm2015/daffodil-design-menu-examples.mjs","default":"./fesm2020/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2020":"./esm2020/modal/examples/daffodil-design-modal-examples.mjs","es2020":"./fesm2020/daffodil-design-modal-examples.mjs","es2015":"./fesm2015/daffodil-design-modal-examples.mjs","node":"./fesm2015/daffodil-design-modal-examples.mjs","default":"./fesm2020/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2020":"./esm2020/navbar/examples/daffodil-design-navbar-examples.mjs","es2020":"./fesm2020/daffodil-design-navbar-examples.mjs","es2015":"./fesm2015/daffodil-design-navbar-examples.mjs","node":"./fesm2015/daffodil-design-navbar-examples.mjs","default":"./fesm2020/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2020":"./esm2020/notification/examples/daffodil-design-notification-examples.mjs","es2020":"./fesm2020/daffodil-design-notification-examples.mjs","es2015":"./fesm2015/daffodil-design-notification-examples.mjs","node":"./fesm2015/daffodil-design-notification-examples.mjs","default":"./fesm2020/daffodil-design-notification-examples.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2020":"./esm2020/notification/daffodil-design-notification.mjs","es2020":"./fesm2020/daffodil-design-notification.mjs","es2015":"./fesm2015/daffodil-design-notification.mjs","node":"./fesm2015/daffodil-design-notification.mjs","default":"./fesm2020/daffodil-design-notification.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2020":"./esm2020/paginator/examples/daffodil-design-paginator-examples.mjs","es2020":"./fesm2020/daffodil-design-paginator-examples.mjs","es2015":"./fesm2015/daffodil-design-paginator-examples.mjs","node":"./fesm2015/daffodil-design-paginator-examples.mjs","default":"./fesm2020/daffodil-design-paginator-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2020":"./esm2020/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","es2020":"./fesm2020/daffodil-design-quantity-field-examples.mjs","es2015":"./fesm2015/daffodil-design-quantity-field-examples.mjs","node":"./fesm2015/daffodil-design-quantity-field-examples.mjs","default":"./fesm2020/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2020":"./esm2020/radio/examples/daffodil-design-radio-examples.mjs","es2020":"./fesm2020/daffodil-design-radio-examples.mjs","es2015":"./fesm2015/daffodil-design-radio-examples.mjs","node":"./fesm2015/daffodil-design-radio-examples.mjs","default":"./fesm2020/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2020":"./esm2020/sidebar/examples/daffodil-design-sidebar-examples.mjs","es2020":"./fesm2020/daffodil-design-sidebar-examples.mjs","es2015":"./fesm2015/daffodil-design-sidebar-examples.mjs","node":"./fesm2015/daffodil-design-sidebar-examples.mjs","default":"./fesm2020/daffodil-design-sidebar-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2020":"./esm2020/tree/examples/daffodil-design-tree-examples.mjs","es2020":"./fesm2020/daffodil-design-tree-examples.mjs","es2015":"./fesm2015/daffodil-design-tree-examples.mjs","node":"./fesm2015/daffodil-design-tree-examples.mjs","default":"./fesm2020/daffodil-design-tree-examples.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2020":"./esm2020/tree/daffodil-design-tree.mjs","es2020":"./fesm2020/daffodil-design-tree.mjs","es2015":"./fesm2015/daffodil-design-tree.mjs","node":"./fesm2015/daffodil-design-tree.mjs","default":"./fesm2020/daffodil-design-tree.mjs"}},"module":"fesm2015/daffodil-design.mjs","es2020":"fesm2020/daffodil-design.mjs","esm2020":"esm2020/daffodil-design.mjs","fesm2020":"fesm2020/daffodil-design.mjs","fesm2015":"fesm2015/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.68.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^17.0.0","@angular/common":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/cdk":"^17.0.0","@daffodil/core":"0.68.0","@fortawesome/angular-fontawesome":"^0.14.1","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.scss"},"./scss/typography/classes":{"sass":"./scss/typography/_classes.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/daffodil-design.mjs","esm":"./esm2022/daffodil-design.mjs","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","esm2022":"./esm2022/accordion/daffodil-design-accordion.mjs","esm":"./esm2022/accordion/daffodil-design-accordion.mjs","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","esm2022":"./esm2022/article/daffodil-design-article.mjs","esm":"./esm2022/article/daffodil-design-article.mjs","default":"./fesm2022/daffodil-design-article.mjs"},"./button":{"types":"./button/index.d.ts","esm2022":"./esm2022/button/daffodil-design-button.mjs","esm":"./esm2022/button/daffodil-design-button.mjs","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","esm2022":"./esm2022/callout/daffodil-design-callout.mjs","esm":"./esm2022/callout/daffodil-design-callout.mjs","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","esm2022":"./esm2022/card/daffodil-design-card.mjs","esm":"./esm2022/card/daffodil-design-card.mjs","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","esm2022":"./esm2022/container/daffodil-design-container.mjs","esm":"./esm2022/container/daffodil-design-container.mjs","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","esm2022":"./esm2022/hero/daffodil-design-hero.mjs","esm":"./esm2022/hero/daffodil-design-hero.mjs","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","esm2022":"./esm2022/image/daffodil-design-image.mjs","esm":"./esm2022/image/daffodil-design-image.mjs","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","esm2022":"./esm2022/link-set/daffodil-design-link-set.mjs","esm":"./esm2022/link-set/daffodil-design-link-set.mjs","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","esm2022":"./esm2022/list/daffodil-design-list.mjs","esm":"./esm2022/list/daffodil-design-list.mjs","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","esm2022":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","esm":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","esm2022":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","esm":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","esm2022":"./esm2022/menu/daffodil-design-menu.mjs","esm":"./esm2022/menu/daffodil-design-menu.mjs","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","esm2022":"./esm2022/modal/daffodil-design-modal.mjs","esm":"./esm2022/modal/daffodil-design-modal.mjs","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","esm2022":"./esm2022/navbar/daffodil-design-navbar.mjs","esm":"./esm2022/navbar/daffodil-design-navbar.mjs","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2022":"./esm2022/notification/daffodil-design-notification.mjs","esm":"./esm2022/notification/daffodil-design-notification.mjs","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","esm2022":"./esm2022/paginator/daffodil-design-paginator.mjs","esm":"./esm2022/paginator/daffodil-design-paginator.mjs","default":"./fesm2022/daffodil-design-paginator.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","esm2022":"./esm2022/sidebar/daffodil-design-sidebar.mjs","esm":"./esm2022/sidebar/daffodil-design-sidebar.mjs","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2022":"./esm2022/tree/daffodil-design-tree.mjs","esm":"./esm2022/tree/daffodil-design-tree.mjs","default":"./fesm2022/daffodil-design-tree.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2022":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","esm":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2022":"./esm2022/article/examples/daffodil-design-article-examples.mjs","esm":"./esm2022/article/examples/daffodil-design-article-examples.mjs","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2022":"./esm2022/button/examples/daffodil-design-button-examples.mjs","esm":"./esm2022/button/examples/daffodil-design-button-examples.mjs","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2022":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","esm":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2022":"./esm2022/card/examples/daffodil-design-card-examples.mjs","esm":"./esm2022/card/examples/daffodil-design-card-examples.mjs","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2022":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","esm":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2022":"./esm2022/container/examples/daffodil-design-container-examples.mjs","esm":"./esm2022/container/examples/daffodil-design-container-examples.mjs","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2022":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","esm":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2022":"./esm2022/image/examples/daffodil-design-image-examples.mjs","esm":"./esm2022/image/examples/daffodil-design-image-examples.mjs","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2022":"./esm2022/input/examples/daffodil-design-input-examples.mjs","esm":"./esm2022/input/examples/daffodil-design-input-examples.mjs","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2022":"./esm2022/list/examples/daffodil-design-list-examples.mjs","esm":"./esm2022/list/examples/daffodil-design-list-examples.mjs","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2022":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","esm":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2022":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","esm":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2022":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","esm":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2022":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","esm":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2022":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","esm":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2022":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","esm":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2022":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","esm":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2022":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","esm":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2022":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","esm":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2022":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","esm":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2022":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","esm":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}

package/paginator/README.md

@@ -0,0 +1,11 @@
+# Paginator
+Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
+
+## Truncation
+An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
+
+## Accessibility
+Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
+
+## Usage
+<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>

package/paginator/examples/paginator-examples.module.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "./basic-paginator/basic-paginator.component";
 import * as i2 from "./link-paginator/link-paginator.component";
 import * as i3 from "@angular/common";
-import * as i4 from "@daffodil/design";
+import * as i4 from "@daffodil/design/paginator";
 export declare class PaginatorExamplesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginatorExamplesModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<PaginatorExamplesModule, [typeof i1.BasicPaginatorComponent, typeof i2.LinkPaginatorComponent], [typeof i3.CommonModule, typeof i4.DaffPaginatorModule], never>;

package/paginator/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/paginator" />
+export * from './public_api';