@daffodil/design 0.81.1 → 0.83.0

package/sidebar/sidebar.module.d.ts

@@ -7,12 +7,11 @@ import * as i5 from "./sidebar-header/sidebar-header.component";
 import * as i6 from "./sidebar-footer/sidebar-footer.component";
 import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.directive";
 import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
-import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
 /**
  * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffSidebarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffSidebarModule>;
 }

package/switch/README.md

@@ -7,13 +7,14 @@ Switches provide a way to toggle between two states with a visual indicator of t
 ## Usage
 
 ### Within a standalone component
-To use a switch in a standalone component, import it directly into your custom component:
+To use a switch in a standalone component, import `DAFF_SWITCH_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_SWITCH_COMPONENTS } from '@daffodil/design/switch';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_SWITCH_COMPONENTS,
   ],

package/switch/src/switch-theme.scss

@@ -4,27 +4,46 @@
 
 @mixin daff-switch-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-switch {
 		&__toggle {
-			background-color: theming.daff-illuminate($base, $neutral, 3);
 			border: 2px solid transparent;
 
-			&:focus-within {
-				border: 2px solid theming.daff-illuminate($base, $neutral, 2);
-			}
-
 			&.daff-checked {
 				background-color: theming.daff-color($primary);
 			}
 
-			&::before {
-				background-color: $base;
+			@include theming.light($type) {
+				background-color: theming.daff-color($neutral, 30);
+
+				&:focus-within {
+					border: 2px solid theming.daff-color($neutral, 20);
+				}
+
+				&::before {
+					background-color: $white;
+				}
+			}
+
+			@include theming.dark($type) {
+				background-color: theming.daff-color($neutral, 80);
+
+				&:focus-within {
+					border: 2px solid theming.daff-color($neutral, 90);
+				}
+
+				&::before {
+					background-color: theming.daff-color($neutral, 40);
+				}
+
+				&.daff-checked {
+					&::before {
+						background-color: $white;
+					}
+				}
 			}
 		}
 	}

package/switch/switch/switch.component.d.ts

@@ -4,12 +4,9 @@ import * as i0 from "@angular/core";
 /**
  * The switch component provides a way to toggle between two settings.
  *
- * @example
- *
  * ```html
- * <daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="top">
- *    Label
- *    <daff-error-message>Error message</daff-error-message>
+ * <daff-switch>
+ *  Label
  * </daff-switch>
  * ```
  */
@@ -19,8 +16,17 @@ export declare class DaffSwitchComponent {
      */
     get disabled(): any;
     set disabled(value: any);
+    /**
+     * @docs-private
+     */
     get disabledAttribute(): boolean;
+    /**
+     * @docs-private
+     */
     get ariaDisabled(): boolean;
+    /**
+     * @docs-private
+     */
     get classes(): string;
     /**
      * Whether the switch is loading.
@@ -31,13 +37,16 @@ export declare class DaffSwitchComponent {
      */
     checked: boolean;
     /**
-     * The position of the label relative to the switch. Defaults to 'daff-left'.
+     * The position of the label relative to the switch.
      */
     labelPosition: DaffLabelPosition;
     /**
      * Whether the switch shows an error.
      */
     error: boolean;
+    /**
+     * @docs-private
+     */
     _disabled: boolean;
     handleKeydown(event: KeyboardEvent): void;
     /**
@@ -48,8 +57,24 @@ export declare class DaffSwitchComponent {
      * aria-label for the switch.
      */
     ariaLabel: string;
+    /**
+     * A unique id for the switch.
+     *
+     * The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.
+     *
+     * @example Using the `id` property
+     * ```html
+     * <daff-switch [id]="'custom-id'"></daff-switch>
+     * ```
+     */
     id: string;
+    /**
+     * Output event triggered when the switch has been toggled.
+     */
     toggled: EventEmitter<boolean>;
+    /**
+     * @docs-private
+     */
     onToggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;

package/switch/switch.d.ts

@@ -1,3 +1,6 @@
 import { DaffErrorMessageModule } from '@daffodil/design';
 import { DaffSwitchComponent } from './switch/switch.component';
+/**
+ * @docs-private
+ */
 export declare const DAFF_SWITCH_COMPONENTS: readonly [typeof DaffSwitchComponent, typeof DaffErrorMessageModule];

package/tabs/README.md

@@ -4,12 +4,45 @@ Tabs provide a way to navigate between panels that display related content.
 ## Overview
 Tabs allow for users to navigate between related content without having to leave the page. They can be used within components like modals or cards.
 
+## Usage
+
+### Within a standalone component
+To use a tabs in a standalone component, import `DAFF_TABS_COMPONENTS` directly into your custom component:
+
+```ts
+import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_TABS_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Properties
+
+### Link Mode
+Tabs in link mode replaces the tab buttons with anchors. This allows the selected tab to be connected to a URL. By default, the current URL and `tab` query param will be used. These can be overriden with the `url` and `queryParam` inputs respectively.
+
+```html
+<daff-tabs [linkMode]="true">
+</daff-tabs>
+```
+
 ## Accessbility
 Tabs follow the [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Tabs compose of `tablist`, `tab`, and `tabpanel` elements,  each with its appropriate role and integrated keyboard interactions.
 
 ### Label
 A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-label` property. This will set the `aria-label` on the `tablist` element.
 
+```html
+<daff-tabs aria-label="Custom aria label">
+</daff-tabs>
+```
+
 ### Keyboard Interactions
 | Key | Action |
 | --- | ------ |
@@ -17,6 +50,3 @@ A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-labe
 | Right Arrow |  Moves focus and activates next tab. If focus is on the last tab, moves focus to the first tab. |
 | Home |  Moves focus and activates first tab. |
 | End |  Moves focus and activates last tab. |
-
-### Link Mode
-Tabs can operate in "link mode" which replaces the tab buttons with anchors. This allows the selected tab to be connected to the URL. To use this mode, set `linkMode` to `true` on the tabs component. By default, the current URL and `tab` query param will be used. These can be overriden with the `url` and `queryParam` inputs respectively.

package/tabs/src/tabs-theme.scss

@@ -4,27 +4,45 @@
 
 @mixin daff-tabs-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
-	.daff-tabs {
-		&__tab-list {
-			&::after {
-				background: theming.daff-illuminate($base, $neutral, 2);
+	@include theming.light($type) {
+		.daff-tabs {
+			&__tab-list {
+				&::after {
+					background: theming.daff-color($neutral, 20);
+				}
+			}
+		}
+
+		.daff-tab-activator {
+			border-bottom: 2px solid theming.daff-color($neutral, 20);
+			color: $base-contrast;
+
+			&.daff-selected {
+				border-bottom: 2px solid theming.daff-color($primary);
 			}
 		}
 	}
 
-	.daff-tab-activator {
-		border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
+	@include theming.dark($type) {
+		.daff-tabs {
+			&__tab-list {
+				&::after {
+					background: theming.daff-color($neutral, 80);
+				}
+			}
+		}
 
-		&.daff-selected {
-			border-bottom: 2px solid theming.daff-color($primary);
+		.daff-tab-activator {
+			border-bottom: 2px solid theming.daff-color($neutral, 80);
+			color: $base-contrast;
+
+			&.daff-selected {
+				border-bottom: 2px solid theming.daff-color($primary);
+			}
 		}
 	}
 }

package/tabs/tabs/tab/tab.component.d.ts

@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
  *
- * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
+ * A `<daff-tab>` should include the DaffTabLabelComponent and DaffTabPanelComponent components in order to properly structure the UI.
  *
  * @example Basic structure of tab
  * ```html

package/tabs/tabs/tab-label/tab-label.component.d.ts

@@ -13,7 +13,13 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {
+    /**
+     * @docs-private
+     */
     _prefix: DaffPrefixDirective;
+    /**
+     * @docs-private
+     */
     _suffix: DaffSuffixDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabLabelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabLabelComponent, "daff-tab-label", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;

package/tabs/tabs/tab-panel/tab-panel.component.d.ts

@@ -17,19 +17,27 @@ export declare class DaffTabPanelComponent {
      */
     private class;
     /**
+     * @docs-private
+     *
      * Sets the `role` to tabpanel.
      */
     role: string;
     /**
+     * @docs-private
+     *
      * `aria-labelledby` for the tab.
      */
     ariaLabelledBy: string;
     /**
+     * @docs-private
+     *
      * Sets the `tabindex` to 0.
      */
     tabIndex: string;
     private _id;
     /**
+     * @docs-private
+     *
      * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.
      */
     get tabPanelId(): string;

package/tabs/tabs/tabs.component.d.ts

@@ -40,23 +40,26 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
      */
     private class;
     /**
+     * @docs-private
+     *
      * The currently selected tab. This property is dynamically updated when a user selects a tab.
      */
     selectedTab: string;
     /**
-     * The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
+     * The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
      */
     initiallySelected: string;
     /**
-     * @docs-private
+     * aria-label for the tab.
      */
     private externalAriaLabel;
     /**
-     * aria-label for the tab.
+     * @docs-private
+     *
      */
     ariaLabel: string;
     /**
-     * Replace the tab buttons with links.
+     * Replace the tab buttons as links.
      */
     linkMode: boolean;
     /**
@@ -84,8 +87,12 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
      * @docs-private
      */
     _tabActivators: QueryList<DaffTabActivatorComponent>;
+    /**
+     * @docs-private
+     */
     get currentPath(): string;
     constructor(cdRef: ChangeDetectorRef, location: Location);
+    private reset;
     /**
      * @docs-private
      */
@@ -95,6 +102,8 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
      */
     ngAfterContentInit(): void;
     /**
+     * @docs-private
+     *
      * Selects a tab and sets focus on the selected tab.
      */
     select(tabId: string): void;
@@ -108,18 +117,26 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
      */
     _buildQueryParams(tab: string): Params;
     /**
+     * @docs-private
+     *
      * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
      */
     previous(): void;
     /**
+     * @docs-private
+     *
      * Selects the next tab and wraps around to the first tab if the last tab is currently selected.
      */
     next(): void;
     /**
+     * @docs-private
+     *
      * Selects the first tab.
      */
     selectFirst(event: KeyboardEvent | null): void;
     /**
+     * @docs-private
+     *
      * Selects the last tab.
      */
     selectLast(event: KeyboardEvent | null): void;

package/tabs/tabs.d.ts

@@ -1,6 +1,12 @@
-import { DaffPrefixSuffixModule } from '@daffodil/design';
 import { DaffTabComponent } from './tabs/tab/tab.component';
 import { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';
 import { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
 import { DaffTabsComponent } from './tabs/tabs.component';
-export declare const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffPrefixSuffixModule, typeof DaffTabComponent];
+/**
+ * @docs-private
+ *
+ * ```ts
+ * import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
+ * ```
+ */
+export declare const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffTabComponent];

package/text-snippet/README.md

@@ -1,2 +1,20 @@
 # Text Snippet
-The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.
+The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.
+
+## Usage
+
+### Within a standalone component
+To use a text snippet in a standalone component, import `DaffTextSnippetComponent` directly into your custom component:
+
+```ts
+import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffTextSnippetComponent,
+  ],
+})
+export class CustomComponent {}
+```

package/toast/README.md

@@ -4,187 +4,57 @@ Toasts are small messages designed to mimic push notifications. They are used to
 ## Overview
 Toasts should be used to display temporary messages about actions or events that occured or in need of attention, with no relation to content on a page. For messaging that provide context in close promixity to a piece of content within a page, use the [Notification](/libs/design/notification/README.md) component.
 
-## Basic Toast
+## Basic toast
 <design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
 
 ## Setting up the component
-`provideDaffToast()` should be added as a provider either in your application's root component for global use or in a specific feature component.
+`provideDaffToast()` must be added as a provider in your application's root component for global use or in a specific feature component for the toast functionality to work properly.
 
 ```ts
 import { provideDaffToast } from '@daffodil/design/toast';
 
 @NgModule({
-	providers: [
-		provideDaffToast(),
-	]
+  providers: [
+    provideDaffToast(),
+  ]
 )}
 
 export class AppModule {}
 ```
 
-### Configurations
-Toast can be configured by using the `DaffToastService`.
-
-The following is an example of a toast with a duration:
-
-```ts
-import {
-  ChangeDetectionStrategy,
-  Component,
-} from '@angular/core';
-
-import {
-	DaffToast
-  DaffToastService,
-} from '@daffodil/design/toast';
-
-@Component({
-  selector: 'custom-toast',
-  templateUrl: './custom-toast.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-})
-export class CustomToastComponent {
-	private toast: DaffToast;
-
-	constructor(private toastService: DaffToastService) {}
-
-	open() {
-		this.toast = this.toastService.open({
-			title: 'Update Complete',
-			message: 'This page has been updated to the newest version.',
-		},
-		{
-			duration: 5000,
-		});
-	}
-}
-```
-
-The following is an example of a toast with actions:
-
-```ts
-import {
-  ChangeDetectionStrategy,
-  Component,
-	EventEmitter,
-	OnInit,
-} from '@angular/core';
-
-import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
-import {
-  DaffToast,
-  DaffToastAction,
-  DaffToastService,
-} from '@daffodil/design/toast';
-
-@Component({
-  selector: 'action-toast',
-  templateUrl: './action-toast.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-	imports: [
-		DAFF_BUTTON_COMPONENTS,
-	],
-})
-export class ActionToastComponent implements OnInit {
-	private toast: DaffToast;
-
-	constructor(private toastService: DaffToastService) {}
-
-	update = new EventEmitter<DaffToastAction>();
-
-  closeToast = new EventEmitter<DaffToastAction>();
-
-	open() {
-		this.toast = this.toastService.open({
-			title: 'Update Available',
-			message: 'A new version of this page is available.',
-			actions: [
-				{ content: 'Update', color: 'theme-contrast', size: 'sm', eventEmitter: this.update },
-				{ content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
-			]
-		});
-	}
-
-	ngOnInit() {
-    this.update.subscribe(() => {
-    });
-
-    this.closeToast.subscribe(() => {
-      this.toastService.close(this.toast);
-    });
-  }
-}
-```
-
-The following configurations are available in the `DaffToastService`:
-
-| Property | Type   | Description                     | Default |
-| -------- | ------ | ------------------------------- | ------- |
-| title    | string | A quick overview of the toast   | --      |
-| message  | string | Additional details about the message that should be limited to one or two sentences | --      |
-| actions  | `DaffToastAction` | Adds a `daff-button` that allow users to perform an action related to the message. Actions should be limited to two buttons. | --      |
-| dismissible  | boolean | Allows a toast to be dismissible via a close button | true |
-| duration  | number | The duration in milliseconds that a toast is visible before it's dismissed | 5000 |
-
-The `actions` configurations are based on the properties of the `DaffButtonComponent` (view [Button Documentation](/libs/design/button/README.md)) with the addition of `data` and `eventEmitter`.
-
 ## Dismissal
-A toast can be dismissed via a timed duration, a close button, or the `ESC` key.
+A toast can be dismissed via a timed duration or a close button.
+
+The `duration` and `dismissible` properties can be updated when you open it with the `DaffToastService`.
 
 ### Timed duration
-A toast with actions will persist until one of the actions have been interacted with, or is dismissed by the close button or the `ESC` key. Actionable toasts should be persistent, but a duration is allowed to be set. If duration must be set, make sure it's long enough for users to engage with the actions.
+A toast with actions will persist until one of the actions have been interacted with or dismissed by the close button. By default, a toast without actions will be dismissed after `5000ms`.
 
-By default, a toast without actions will be dismissed after `5000ms`. This can be updated by setting `duration` through the `DaffToastService`.
+> Actionable toasts should be persistent, but a duration is allowed to be set. If duration must be set, make sure it's long enough for users to engage with the actions.
 
-#### Toast with custom duration
 <design-land-example-viewer-container example="toast-with-custom-duration"></design-land-example-viewer-container>
 
 ### Close button
-The close button is shown by default but can be hidden by setting `dismissible: false` through the `DaffToastService`.
+The close button is hidden by default, and dismissible is ignored when there are actions in a toast. You can change the visibility of the close button via the `dismissible` property.
 
-### Escape Key
-A toast can be dismissed by using the `ESC` key if it has actions and is focus trapped.
+<design-land-example-viewer-container example="dismissible-toast"></design-land-example-viewer-container>
 
 ## Stacking
 A maximum of three toasts can be shown at a time. Toasts are stacked vertically, with the most recent toast displayed on top.
 
 ## Statuses
-The status color of a toast can be updated by using the `status` property.
-
-Supported statuses: `warn | critical | success`
+You can set the status of a toast when opening it with `DaffToastService`, using values defined by `DaffStatus`.
 
-### Toast with statuses
 <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
 
-## Positions
-
-| Property     | Value                    | Default |
-| ------------ | ------------------------ | ------- |
-| `vertical`   | `top | bottom`           | top     |
-| `horizontal` | `left | center | right ` | right   |
-
-To change the horizontal and vertical position of a toast, add the `provideDaffToastOptions` dependency key to the `providers` key in the module as shown below:
-
-```ts
-providers: [
-	provideDaffToastOptions({
-		position: {
-			vertical: 'bottom',
-			horizontal: 'center',
-		}
-		useParent: false,
-	})
-]
-```
-
-The position of a toast on a mobile device will always be on the bottom center.
+## Accessibility
+By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement.
 
-### Toast with configurable positions
-<design-land-example-viewer-container example="toast-positions"></design-land-example-viewer-container>
+`role="alertdialog"` is used when a toast has action. The toast will be focus trapped and focus immediately moves to the actions.
 
-## Accessibility
-By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement. When a toast has actions, a `role="alertdialog"` is used. The toast will be focus trapped and focus immediately moves to the actions.
+Avoid setting a duration on toasts with actions because they will disappear automatically, making it difficult for users to interact with the actions.
 
-Avoid setting a duration on toasts with actions because they will disappear automatically, making it difficult for users to interact with the actions.
+### Keyboard Interactions
+| Key   | Action |
+| ----- | ------ |
+| `ESC` |  Dismisses a toast if it has actions and is focus trapped. |