@daffodil/design 0.90.0 → 0.92.3-rc.0

package/modal/README.md

@@ -1,8 +1,20 @@
 # 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.
 
-## Basic Modal
-<design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>
+## 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.
+
+<daff-docs-example-viewer example="basic-modal"></daff-docs-example-viewer>
+
+## 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
 
@@ -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,27 +1,70 @@
 import * as rxjs from 'rxjs';
-import { AnimationEvent } from '@angular/animations';
+import { Observable } from 'rxjs';
 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 } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffOpenable, DaffOpenableDirective, DaffFocusStackService } from '@daffodil/design';
 import * as i3 from '@angular/cdk/overlay';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/common';
 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';
 
+/**
+ * Reference to modal instance.
+ */
+interface DaffModalRef<T> {
+    /**
+     * The component instance inside the modal.
+     */
+    instance: T;
+    /**
+     * Closes the modal.
+     */
+    close(): void;
+    /**
+     * Emits when the modal close animation completes.
+     */
+    afterClosed: Observable<boolean>;
+}
+
+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,9 +74,11 @@ declare class DaffModalService {
     private defaultConfiguration;
     private _attachModal;
     private _attachModalContent;
+    private _createPositionStrategy;
     private _createOverlayRef;
     private _removeModal;
-    open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModalComponent;
+    private _closeAllModals;
+    open<T>(component: Type<T>, configuration?: Partial<DaffModalConfiguration>): DaffModalRef<T>;
     close(component: DaffModalComponent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffModalService>;
@@ -46,17 +91,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 +113,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 +129,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
-     */
-    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.
+     * Tracks the open state of the modal.
      */
-    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;
     /**
@@ -174,21 +222,10 @@ declare class DaffModalModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffModalModule>;
 }
 
-interface DaffModal {
-    /**
-     * The reference to the modal in question
-     */
-    modal: ComponentRef<DaffModalComponent>;
-    /**
-     * The overlay associated with a given modal.
-     */
-    overlay: OverlayRef;
-}
-
 /**
  * @docs-private
  */
 declare const DAFF_MODAL_COMPONENTS: readonly [typeof DaffModalHeaderComponent, typeof DaffModalTitleDirective, typeof DaffModalContentComponent, typeof DaffModalActionsComponent, typeof DaffModalCloseDirective];
 
 export { DAFF_MODAL_COMPONENTS, DaffModalActionsComponent, DaffModalCloseDirective, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective };
-export type { DaffModal };
+export type { DaffModalRef };

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>
+<daff-docs-example-viewer example="basic-native-select"></daff-docs-example-viewer>
 
-## 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.
+
+<daff-docs-example-viewer example="native-select-disabled"></daff-docs-example-viewer>
+
+### 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.
+
+<daff-docs-example-viewer example="native-select-error"></daff-docs-example-viewer>
+
+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.
+
+<daff-docs-example-viewer example="native-select-hint"></daff-docs-example-viewer>
+
+## 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/native-select/index.d.ts

@@ -29,6 +29,11 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
      * Implemented as part of DaffFormFieldControl.
      */
     private get _id();
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
     /**
      * @docs-private
      */
@@ -42,7 +47,7 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
     /**
      * @docs-private
      */
-    get disabledAttribute(): true;
+    get disabledAttribute(): boolean;
     private _required;
     /**
      * @docs-private
@@ -55,19 +60,15 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
      * @docs-private
      */
     get requiredAttribute(): true;
-    /**
-     * @docs-private
-     */
     focus(): void;
     /**
      * @docs-private
      */
-    blur(): void;
-    constructor(
+    _handleFocus(): void;
     /**
      * @docs-private
      */
-    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
+    _handleBlur(): void;
     /** @docs-private */
     ngOnInit(): void;
     /**

package/navbar/README.md

@@ -1,11 +1,10 @@
 # Navbar
-Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
+Navbar is a flexible and extensible component that provides a container for navigation elements.
 
 ## 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>
+<daff-docs-example-viewer example="basic-navbar"></daff-docs-example-viewer>
 
 ## Usage
 
@@ -49,34 +48,41 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## 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.
+## Features
 
-Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+### Elevation
+Use the `elevated` property to add a shadow effect to the navbar.
 
-<design-land-example-viewer-container example="navbar-theming"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="elevated-navbar"></daff-docs-example-viewer>
 
-## Contained Navbar
-A navbar can be contained to a specific width by using the [Container](/libs/design/container/README.md) component. The layout styles set on the navbar will automatically be passed down to the container.
+### Blurred background
+Use the `blurred` property to add a semi-transparent background effect to the navbar, creating a frosted glass appearance.
 
-<design-land-example-viewer-container example="contained-navbar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="blurred-navbar"></daff-docs-example-viewer>
 
-## Raised Navbar
-The raised property adds elevation to a navbar. To enable it, set the `raised` property on `<nav daff-navbar>`.
+Both `elevated` and `blurred` can be combined for a layered effect:
 
-<design-land-example-viewer-container example="raised-navbar"></design-land-example-viewer-container>
+```html
+<nav daff-navbar [elevated]="true" [blurred]="true">
+  <!-- navigation items -->
+</nav>
+```
+
+### Contained navbar
+A navbar can be contained to a specific width by using the [container](/libs/design/container/README.md) component. The layout styles set on the navbar will automatically be passed down to the container.
+
+<daff-docs-example-viewer example="contained-navbar"></daff-docs-example-viewer>
 
 ## 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.
+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-label` attribute.
 
-### Example
 ```html
-<nav daff-navbar aria-labelledby="main-navigation">
+<nav daff-navbar aria-label="main navigation">
 <!--  navigation items -->
 </nav>
 
 <footer>
-  <nav daff-navbar aria-labelledby="footer-navigation">
+  <nav daff-navbar aria-label="footer navigation">
   <!--  navigation items -->
   </nav>
 </footer>

package/navbar/index.d.ts

@@ -2,10 +2,20 @@ import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
 
+/**
+ * Navbar is a flexible and extensible component that provides a container for navigation elements.
+ */
 declare class DaffNavbarComponent {
-    raised: boolean;
+    /**
+     * Whether the navbar should have an elevated appearance with a shadow effect.
+     */
+    elevated: i0.InputSignal<boolean>;
+    /**
+     * Whether the navbar should have a blurred background effect.
+     */
+    blurred: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNavbarComponent, "nav[daff-navbar]", never, { "raised": { "alias": "raised"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNavbarComponent, "nav[daff-navbar]", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "blurred": { "alias": "blurred"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }]>;
 }
 
 /**

package/navbar/src/navbar-theme.scss

@@ -1,61 +1,19 @@
 @use '../../scss/theming' as *;
 
-@mixin daff-navbar-theme-variant($color) {
-	background: $color;
-	color: daff-text-contrast($color);
-}
-
 // stylelint-disable selector-class-pattern
 @mixin daff-navbar-theme($theme) {
-	$primary: daff-get-palette($theme, primary);
-	$secondary: daff-get-palette($theme, secondary);
-	$tertiary: daff-get-palette($theme, tertiary);
-	$neutral: daff-get-palette($theme, neutral);
 	$base: daff-get-base-color($theme, base);
-	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$white: daff-get-base-color($theme, 'white');
 	$black: daff-get-base-color($theme, 'black');
-	$mode: daff-get-theme-mode($theme);
 
 	.daff-navbar {
-		@include light($mode) {
-			@include daff-navbar-theme-variant(daff-color($neutral, 10));
-		}
+		background: $base;
 
-		@include dark($mode) {
-			@include daff-navbar-theme-variant(daff-color($neutral, 90));
+		&.blurred {
+			background: rgba($base, 0.5);
 		}
 
-		&.raised {
+		&.elevated {
 			box-shadow: 0 4px 10px rgba($black, 0.08);
 		}
-
-		&.daff-primary {
-			@include daff-navbar-theme-variant(daff-color($primary));
-		}
-
-		&.daff-secondary {
-			@include daff-navbar-theme-variant(daff-color($secondary));
-		}
-
-		&.daff-tertiary {
-			@include daff-navbar-theme-variant(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/README.md

@@ -6,7 +6,7 @@ Notifications display short messages that are closely associated with nearby con
 
 Notifications should not be used to display app-level alerts. For global messages, use the [Toast](/libs/design/toast/README.md) component.
 
-<design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="default-notification"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -93,19 +93,19 @@ Use the `[daffPrefix]` element to add a decorative icon that provides a quick vi
 ### Status
 Use the `status` property to visually differentiate between notification types such as `info`, `warn`, `critical`, or `success`.
 
-<design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="notification-status"></daff-docs-example-viewer>
 
 ### Orientation
 Use the `orientation` property to stack notification content either `vertical` (default) or `horizontal`.
 
-<design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="notification-orientations"></daff-docs-example-viewer>
 
 ### Dismissing a notification
 Notifications are persistent by default. To display a close button, set the `dismissible` property to `true`.
 
 > Avoid making critical notifications dismissible to ensure users can read or interact with the necessary information.
 
-<design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="dismissible-notification"></daff-docs-example-viewer>
 
 ## Accessibility
 **Live region roles:**