@daffodil/design 0.89.0 → 0.91.0

package/input/README.md

@@ -1,15 +1,15 @@
 # Input
-The input component allows a native HTML input element to work with the form field component.
+Input works alongside the native HTML input element, with additional custom styling and functionality.
 
 ## Overview
-The input component has the same functionality as a native HTML `<input>` element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [DaffFormFieldComponent](/libs/design/src/atoms/form/form-field/README.md).
+Input has the same functionality as a native HTML input element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [form field](/libs/design/form-field/README.md).
 
 <design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
 
 ## Usage
 
 ### Within a standalone component
-To use form field in a standalone component, import `DaffInputComponent` directly into your custom component:
+To use input in a standalone component, import `DaffInputComponent` directly into your custom component:
 
 ```ts
 import { DaffInputComponent } from '@daffodil/design/input';
@@ -25,7 +25,7 @@ export class CustomComponent {}
 ```
 
 ### Within a module (deprecated)
-To use form field in a module, import `DaffInputModule` into your custom module:
+To use input in a module, import `DaffInputModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
@@ -33,7 +33,7 @@ import { DaffInputModule } from '@daffodil/design/input';
 import { CustomComponent } from './custom.component';
 
 @NgModule({
-	declarations: [
+  declarations: [
     CustomComponent,
   ],
   exports: [
@@ -46,21 +46,41 @@ import { CustomComponent } from './custom.component';
 export class CustomComponentModule { }
 ```
 
+> **Warning**
+> 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Examples
+## Anatomy
+Input must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Disabled input
-The input in this example is disabled using the native HTML disabled attribute.
+### Basic structure
+```html
+<daff-form-field>
+  <daff-form-label>First Name</daff-form-label>
+  <input daff-input type="text" name="first-name" />
+</daff-form-field>
+```
+
+## States
+
+### Disabled
+Input can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
 
 <design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
 
-### Input with error messages
-The input in this example uses the `ReactiveFormsModule` to display errors.
+### Error
+Input supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the input is invalid and has been touched or submitted.
 
 <design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>
 
-### Input with hint
-The input in this example has a hint.
+Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.
+
+## Hints
+Hints provide additional context or instructions to help users complete the input field correctly. Use `<daff-hint>` within the form field to display helpful information below the input. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <design-land-example-viewer-container example="input-hint"></design-land-example-viewer-container>
+
+## Accessibility
+When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the input using the `for` and `id` attributes.
+
+If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.

package/modal/README.md

@@ -1,9 +1,21 @@
 # Modal
-Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+Modal is a dynamically rendered element that floats above the rest of a page's content, requiring user interaction before returning to the main application.
+
+## Overview
+Modals are used to capture information or attention. They overlay the main content and prevent interaction with the page until the modal is dismissed.
 
-## Basic Modal
 <design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>
 
+## Best practices
+
+**When to use**
+- Display important information that require a user response
+- Display non-essential but detailed content related to the underlying page
+
+**When not to use**
+- To display critical information or warnings
+- To provide status feedback or messages (use [Notification](/libs/design/notification/README.md) or [Toast](/libs/design/toast/README.md) instead)
+
 ## Usage
 
 ### Within a standalone component
@@ -46,31 +58,106 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Supported Content Types
-A modal includes minimally pre-styled components and directives to help structure the content in your modal.
+## Anatomy
+A modal consists of the following contents, displayed in the order listed:
 
 ### Header
-Header can be added to a modal by using `<daff-modal-header>`. The header includes a title and an optional close button.
+**`<daff-modal-header>`**: The header section containing the title and optional close button.
 
 #### Title
-Title can be added to the header by using the `[daffModalTitle]` directive.
+**`[daffModalTitle]`**: The primary text summarizing the modal.
 
-#### Close Button
+#### Close button
 The close button in the header is shown by default but can be hidden by setting the `dismissible` property to `false` on the header.
 
 ### Content
-Content can be added to a modal by using `<daff-modal-content>`. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.
+**`<daff-modal-content>`**: The scrollable container for the modal's main content. Use this once per modal to wrap all body content.
 
 ### Actions
-Buttons can be added to a modal by using `<daff-modal-actions>`. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to `end`.
+**`<daff-modal-actions>`**: The container for action buttons, positioned at the bottom of the modal with right-aligned buttons. If two buttons are needed, place the primary button the left and the secondary button on the right.
+
+### Basic structure
+```html
+<daff-modal-header>
+  <h2 daffModalTitle>Modal Title</h2>
+</daff-modal-header>
+<daff-modal-content>
+  <p>Modal content goes here</p>
+</daff-modal-content>
+<daff-modal-actions>
+  <button daff-button>Cancel</button>
+  <button daff-button color="primary">Confirm</button>
+</daff-modal-actions>
+```
 
-## Dismissing a Modal
-A modal can be dismissed via the close button or the `ESC` key. The close button is shown by default but can be hidden by setting the `dismissible` property to `false` on `<daff-modal-header>`. Additionally, the `[daffModalClose]` directive can be added to a `<button>` HTML element.
+## Dismissing a modal
+A modal can be dismissed via:
+- The close button in the header (shown by default)
+- The `ESC` key
+- A button with the `[daffModalClose]` directive within `<daff-modal-actions>`.
 
-## Accessibility
-Modal works with the ARIA `role="dialog"` and `aria-modal="true"` attributes to provide an accessible experience. The first tabbable element will receive focus when a modal is opened.
+To hide the close button, set `dismissible` to `false` on `<daff-modal-header>`:
 
-`aria-labelledby` is assigned the `[daffModalTitle]` string when it's used. If there is no title, `aria-labelledby` should be set in the configurations through the `DaffModalService`.
+```html
+<daff-modal-header [dismissible]="false">
+  <h2 daffModalTitle>Modal Title</h2>
+</daff-modal-header>
+```
+
+### Position configuration
+By default, modals are horizontally and vertically centered on the screen. You can position a modal at the top of the screen by passing a `position` configuration when opening the modal:
+
+```ts
+constructor(private modalService: DaffModalService) {}
+
+showModal() {
+  this.modal = this.modalService.open(
+    ModalContentComponent,
+    {
+      position: {
+        vertical: 'top',
+      },
+    },
+  );
+}
+```
+
+You can also adjust how far from the top the modal appears by setting `offsetTop`:
+
+```ts
+showModal() {
+  this.modal = this.modalService.open(
+    ModalContentComponent,
+    {
+      position: {
+        vertical: 'top',
+        offsetTop: '5rem',
+      }
+    },
+  );
+}
+```
+
+> Note: The horizontal position is always centered and cannot be customized.
+
+## Accessibility
+Modal implements the [Dialog (Modal) WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
+
+### Daffodil provides
+- `role="dialog"`
+- `aria-modal="true"`
+- `aria-labelledby` linked to the `[daffModalTitle]` element
+- When opened, focus moves to the first tabbable element within the modal
+- Focus is trapped within the modal while open
+- When closed, focus returns to the element that triggered the modal
+
+### Developer responsibilities
+- Provide an `aria-labelledby` through the `DafffModalService` if `[daffModalTitle]` is not used
+- Add `aria-haspopup="dialog"` to the element that opens the modal
+
+```html
+<button daff-button (click)="showModal()" aria-haspopup="dialog">Open Modal</button>
+```
 
 ```ts
 constructor(private modalService: DaffModalService) {}
@@ -83,5 +170,8 @@ showModal() {
 }
 ```
 
-### Keyboard Interactions
-A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the `ESC` key.
+### Keyboard interactions
+| Key | Action |
+| --- | ------ |
+| `Tab` | Moves focus to the next focusable element within the modal. |
+| `ESC` | Closes the modal and returns focus to the triggering element. |

package/modal/index.d.ts

@@ -1,10 +1,9 @@
 import * as rxjs from 'rxjs';
-import { AnimationEvent } from '@angular/animations';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/portal';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Type, AfterContentInit, AfterViewInit, OnDestroy, EventEmitter, ElementRef, ChangeDetectorRef, ComponentRef } from '@angular/core';
+import { Type, AfterContentInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef, ComponentRef } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffOpenable, DaffOpenableDirective, DaffFocusStackService } from '@daffodil/design';
 import * as i3 from '@angular/cdk/overlay';
@@ -14,14 +13,39 @@ import * as i4 from '@daffodil/design/button';
 import * as i5 from '@fortawesome/angular-fontawesome';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 
+type DaffModalVerticalPosition = 'top' | 'center';
+interface DaffModalPosition {
+    /**
+     * The vertical position of the modal. Can be 'top' or 'center'.
+     */
+    vertical?: DaffModalVerticalPosition;
+    /**
+     * Optional offset from the top edge. Defaults to `10rem`.
+     */
+    offsetTop?: string;
+}
 interface DaffModalConfiguration {
     /**
      * A hook for what to do when the backdrop behind a
      * DaffModalComponent is interacted with.
      */
     onBackdropClicked?: () => void;
-    /** Sets the `aria-labelledby` property on the modal */
+    /** Sets the `aria-labelledby` property on the modal. */
     ariaLabelledBy?: string;
+    /**
+     * The position of the modal. If not provided, defaults to centered horizontally and vertically.
+     * Horizontal position is always center.
+     *
+     * @example
+     * ```ts
+     * // Center (default)
+     * { vertical: 'center' }
+     *
+     * // Top with offset
+     * { vertical: 'top', offsetTop: '2rem' }
+     * ```
+     */
+    position?: DaffModalPosition;
 }
 
 declare class DaffModalService {
@@ -31,8 +55,10 @@ declare class DaffModalService {
     private defaultConfiguration;
     private _attachModal;
     private _attachModalContent;
+    private _createPositionStrategy;
     private _createOverlayRef;
     private _removeModal;
+    private _closeAllModals;
     open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModalComponent;
     close(component: DaffModalComponent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalService, never>;
@@ -46,17 +72,21 @@ declare class DaffModalComponent implements AfterContentInit, AfterViewInit, OnD
     private openDirective;
     private _focusStack;
     private changeDetector;
+    private closing;
     private _ariaLabelledBy;
+    /**
+     * @docs-private
+     *
+     * By default, the `aria-labelledby` of the modal is set to the `id` of the modal title.
+     */
     get ariaLabelledBy(): string;
     set ariaLabelledBy(value: string);
     /**
+     * @docs-private
+     *
      * The CDK Portal outlet used to portal content into the modal.
      */
     private _portalOutlet;
-    /**
-     * Event fired when the close animation is completed.
-     */
-    animationCompleted: EventEmitter<any>;
     /**
      * Private subject for closed animation completion events.
      */
@@ -64,7 +94,7 @@ declare class DaffModalComponent implements AfterContentInit, AfterViewInit, OnD
     /**
      * Observable that emits when the close animation is completed.
      */
-    readonly closedAnimationCompleted$: rxjs.Observable<AnimationEvent>;
+    readonly closedAnimationCompleted$: rxjs.Observable<boolean>;
     /**
      * @docs-private
      */
@@ -80,32 +110,31 @@ declare class DaffModalComponent implements AfterContentInit, AfterViewInit, OnD
      */
     ngAfterViewInit(): void;
     /**
+     * @docs-private
+     *
      * 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. */
     /**
-     * @docs-private
+     * Tracks the open state 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;
     get open(): boolean;
     /**
-     * Reveals the modal
+     * @docs-private
+     *
+     * Reveals the modal.
      */
     reveal(): void;
     /**
-     * Hides the modal
+     * @docs-private
+     *
+     * Hides the modal.
      */
     hide(): void;
     /**
-     * Toggles the visibility of the modal
+     * @docs-private
+     *
+     * Toggles the visibility of the modal.
      */
     toggle(): void;
     /**

package/native-select/README.md

@@ -1,25 +1,62 @@
-# Native select
-The native select component allows a native HTML select element to work with the form field component.
+# Native Select
+Native select works alongside the HTML select element, with additional custom styling and functionality.
 
 ## Overview
-The native select component has the same functionality as a native HTML `<select>` element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [DaffFormFieldComponent](/libs/design/src/atoms/form/form-field/README.md).
+Native select has the same functionality as a native HTML select element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [form field](/libs/design/form-field/README.md).
 
-<design-land-example-viewer-container example="default-select"></design-land-example-viewer-container>
+<design-land-example-viewer-container example="basic-native-select"></design-land-example-viewer-container>
 
-## Examples
+## Usage
+To use native select, import `DAFF_NATIVE_SELECT_COMPONENTS` directly into your custom component:
 
-### Disabled select
-<design-land-example-viewer-container example="disabled-select"></design-land-example-viewer-container>
+```ts
+import { DAFF_NATIVE_SELECT_COMPONENTS } from '@daffodil/design/native-select';
 
-### Select with error messages
-The select in this example uses the `ReactiveFormsModule` to display errors.
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_NATIVE_SELECT_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
 
-<design-land-example-viewer-container example="select-with-error"></design-land-example-viewer-container>
+## Anatomy
+Native select must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Select with hint
-The select in this example has a hint.
+### Basic structure
+```html
+<daff-form-field>
+  <daff-form-label>Sort By</daff-form-label>
+  <select daff-native-select>
+    <option value="price-low-high">Price: Low to High</option>
+    <option value="price-high-low">Price: High to Low</option>
+    <option value="newest">Newest Arrivals</option>
+  </select>
+</daff-form-field>
+```
 
-<design-land-example-viewer-container example="select-with-hint"></design-land-example-viewer-container>
+## States
 
-### Loading select
-<design-land-example-viewer-container example="skeleton-select"></design-land-example-viewer-container>
+### Disabled
+Native select can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
+
+<design-land-example-viewer-container example="native-select-disabled"></design-land-example-viewer-container>
+
+### Error
+Native select supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the select is invalid and has been touched or submitted.
+
+<design-land-example-viewer-container example="native-select-error"></design-land-example-viewer-container>
+
+Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.
+
+## Hints
+Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
+
+<design-land-example-viewer-container example="native-select-hint"></design-land-example-viewer-container>
+
+## Accessibility
+When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the select using the `for` and `id` attributes.
+
+If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.

package/notification/index.d.ts

@@ -2,28 +2,10 @@ import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-import { DaffPrefixDirective, DaffStatusableDirective } from '@daffodil/design';
+import { DaffPrefixDirective, DaffStatusableDirective, DaffOrientableDirective } from '@daffodil/design';
 import * as i3 from '@fortawesome/angular-fontawesome';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 
-/**
- * The available orientations for a notification.
- *
- * | Orientation | Description |
- * | -- | -- |
- * | `vertical` | Stacks notification content from top to bottom. This is the default orientation. |
- * | `horizontal` | Places notification content side-by-side. |
- */
-type DaffNotificationOrientation = 'horizontal' | 'vertical';
-/**
- * Enum for representing the available notification orientations.
- * See {@link DaffNotificationOrientation} for descriptions of each orientation.
- */
-declare enum DaffNotificationOrientationEnum {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
-}
-
 /**
  * Actions is used to include actionable buttons related to the notification (e.g., dismiss, navigate).
  *
@@ -60,6 +42,7 @@ declare class DaffNotificationActionsDirective {
  */
 declare class DaffNotificationComponent {
     private statusDirective;
+    private orientation;
     /**
      * @docs-private
      */
@@ -83,11 +66,7 @@ declare class DaffNotificationComponent {
      * Displays a close icon if `true`.
      */
     dismissible: boolean;
-    constructor(statusDirective: DaffStatusableDirective);
-    /**
-     * The orientation of a notification.
-     */
-    orientation: DaffNotificationOrientation;
+    constructor(statusDirective: DaffStatusableDirective, orientation: DaffOrientableDirective);
     /**
      * Emits when the notification is closed.
      */
@@ -99,8 +78,7 @@ declare class DaffNotificationComponent {
      */
     onCloseNotification(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "dismissible": { "alias": "dismissible"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "closeNotification": "closeNotification"; }, ["_prefix", "_actions"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationMessage]", "[daffNotificationActions]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }]>;
-    static ngAcceptInputType_orientation: DaffNotificationOrientation | null | undefined;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeNotification": "closeNotification"; }, ["_prefix", "_actions"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationMessage]", "[daffNotificationActions]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
 }
 
 /**
@@ -130,27 +108,18 @@ declare class DaffNotificationTitleDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationTitleDirective, "[daffNotificationTitle]", never, {}, {}, never, never, true, never>;
 }
 
-/**
- * @deprecated in favor of DaffNotificationMessageDirective. Deprecated in version 0.88.0. Will be removed in version 0.91.0.
- */
-declare class DaffNotificationSubtitleDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationSubtitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationSubtitleDirective, "[daffNotificationSubtitle]", never, {}, {}, never, never, true, never>;
-}
-
 /**
  * @deprecated in favor of {@link DAFF_NOTIFICATION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 declare class DaffNotificationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffNotificationModule, never, [typeof i1$1.CommonModule, typeof i1.DaffPrefixSuffixModule, typeof i3.FontAwesomeModule, typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective], [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof i1.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffNotificationModule, never, [typeof i1$1.CommonModule, typeof i1.DaffPrefixSuffixModule, typeof i3.FontAwesomeModule, typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective], [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof i1.DaffPrefixSuffixModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffNotificationModule>;
 }
 
 /**
  * @docs-private
  */
-declare const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof DaffPrefixDirective];
+declare const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffPrefixDirective];
 
-export { DAFF_NOTIFICATION_COMPONENTS, DaffNotificationActionsDirective, DaffNotificationComponent, DaffNotificationMessageDirective, DaffNotificationModule, DaffNotificationOrientationEnum, DaffNotificationSubtitleDirective, DaffNotificationTitleDirective };
-export type { DaffNotificationOrientation };
+export { DAFF_NOTIFICATION_COMPONENTS, DaffNotificationActionsDirective, DaffNotificationComponent, DaffNotificationMessageDirective, DaffNotificationModule, DaffNotificationTitleDirective };

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.89.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":"^20.0.0","@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/cdk":"^20.0.0","@daffodil/core":"0.89.0","@fortawesome/angular-fontawesome":"^3.0.0","@fortawesome/fontawesome-svg-core":"^7.0.1","@fortawesome/free-solid-svg-icons":"^7.0.1","@fortawesome/free-brands-svg-icons":"^7.0.1","@fortawesome/free-regular-svg-icons":"^7.0.1","modern-normalize":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form-field":{"types":"./form-field/index.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./native-select/index.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./textarea/index.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./form-field/examples":{"types":"./form-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-form-field-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./native-select/examples":{"types":"./native-select/examples/index.d.ts","default":"./fesm2022/daffodil-design-native-select-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./select/examples":{"types":"./select/examples/index.d.ts","default":"./fesm2022/daffodil-design-select-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./sticky/examples":{"types":"./sticky/examples/index.d.ts","default":"./fesm2022/daffodil-design-sticky-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./textarea/examples":{"types":"./textarea/examples/index.d.ts","default":"./fesm2022/daffodil-design-textarea-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/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.91.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":"^20.0.0","@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/cdk":"^20.0.0","@daffodil/core":"0.91.0","@fortawesome/angular-fontawesome":"^3.0.0","@fortawesome/fontawesome-svg-core":"^7.0.1","@fortawesome/free-solid-svg-icons":"^7.0.1","@fortawesome/free-brands-svg-icons":"^7.0.1","@fortawesome/free-regular-svg-icons":"^7.0.1","modern-normalize":"^3.0.1","rxjs":"^7.0.0"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./checkbox":{"types":"./checkbox/index.d.ts","default":"./fesm2022/daffodil-design-checkbox.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form":{"types":"./form/index.d.ts","default":"./fesm2022/daffodil-design-form.mjs"},"./form-field":{"types":"./form-field/index.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./native-select/index.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./radio":{"types":"./radio/index.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./tag":{"types":"./tag/index.d.ts","default":"./fesm2022/daffodil-design-tag.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./textarea/index.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.6.2"}}

package/paginator/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, ElementRef, EventEmitter } from '@angular/core';
+import { OnChanges, EventEmitter } from '@angular/core';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/router';
 import { Params } from '@angular/router';
@@ -7,7 +7,6 @@ import * as i3 from '@fortawesome/angular-fontawesome';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 
 declare class DaffPaginatorComponent implements OnChanges {
-    private elementRef;
     /**
      * @docs-private
      */
@@ -16,11 +15,6 @@ declare class DaffPaginatorComponent implements OnChanges {
      * @docs-private
      */
     faChevronLeft: _fortawesome_fontawesome_common_types.IconDefinition;
-    /**
-     * @docs-private
-     */
-    _paginatorId: string;
-    constructor(elementRef: ElementRef);
     /**
      * The total number of pages the paginator tracks. This number can change dynamically, but the end user is responsible for keeping numberOfPages
      * and currentPage in sync. For example, if the numberOfPages is dynamically changed to a value less than the currentPage, the paginator will break.