@daffodil/design 0.90.0 → 0.92.3-rc.0

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.90.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.90.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"},"./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"},"./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"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-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"},"./tag/examples":{"types":"./tag/examples/index.d.ts","default":"./fesm2022/daffodil-design-tag-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.6.2"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.92.3-rc.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"An Angular component library built to support ecommerce applications with accessible UI components and theming. Part of the Daffodil ecommerce framework.","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.92.3-rc.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":"^10.3.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"},"./spinner":{"types":"./spinner/index.d.ts","default":"./fesm2022/daffodil-design-spinner.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/README.md

@@ -1,8 +1,20 @@
 # Paginator
-Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
+Pagination organizes and divides large amounts of content on separate pages and gives the user control over how much content they want to view on each page.
 
-## Default Paginator
-<design-land-example-viewer-container example="basic-paginator"></design-land-example-viewer-container>
+## Overview
+Pagination can be used with a data table or on a page. It automatically truncates page numbers when there are many pages, using ellipses to indicate skipped pages.
+
+<daff-docs-example-viewer example="basic-paginator"></daff-docs-example-viewer>
+
+## Best practices
+
+**When to use**
+- Displaying large datasets or lists that would be overwhelming on a single page
+- Navigating through search results or product listings
+- Breaking up long-form content into manageable sections
+
+**When not to use**
+- Do not use it to display linear journeys, for example, in a form progression. Instead, use the [progress bar](/libs/design/progress-bar/README.md) or [button](/libs/design/button/README.md) components to navigate forward and backward.
 
 ## Usage
 
@@ -44,10 +56,34 @@ import { CustomComponent } from './custom.component';
 export class CustomComponentModule { }
 ```
 
+> **Warning**
+>
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Truncation
-An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
+## Basic structure
+```html
+<daff-paginator aria-label="Search results page"></daff-paginator>
+```
+
+## Features
+
+### Truncation
+Ellipses are used to truncate page numbers when the total number of pages exceeds the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
 
 ## Accessibility
-Use `aria-label` or `aria-labelledby` to give a meaningful label to `daff-paginator` that describes the content controlled by the paginator. If more than one paginator component is used on a page, each will need a unique `aria-label`.
+
+### Daffodil provides
+`role="navigation"` on the paginator element to ensure proper semantic structure.
+
+### Developer responsibilities
+Use `aria-label` or `aria-labelledby` to give a meaningful label to `<daff-paginator>` that describes the content controlled by the paginator. If more than one paginator is used on a page, each will need a unique `aria-label`.
+
+```html
+<daff-paginator aria-label="Product list paginator">
+  <!-- paginator content -->
+</daff-paginator>
+
+<daff-paginator aria-label="Search results paginator">
+  <!-- paginator content -->
+</daff-paginator>
+```

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
      */
@@ -17,13 +16,10 @@ declare class DaffPaginatorComponent implements OnChanges {
      */
     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.
+     * 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.
      */
     numberOfPages: number;
     /**

package/progress-bar/README.md

@@ -4,7 +4,7 @@ A progress bar provides visual feedback about the duration or progress of a task
 ## Overview
 Progress bars help users understand the status of ongoing processes or tasks. They can display either determinate progress (when the percentage is known) or indeterminate progress (when the percentage is unknown or cannot be calculated).
 
-<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="progress-bar-default"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -81,7 +81,7 @@ Use determinate progress bars when the percentage of completion is known. This i
 ### Indeterminate
 Use indeterminate progress bars when when the percentage of completion is unknown or cannot be calculated. Set the `indeterminate` property to `true`:
 
-<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="progress-bar-indeterminate"></daff-docs-example-viewer>
 
 ## Features
 
@@ -90,7 +90,7 @@ The default color is `primary`. Use the `color` property to change a progress ba
 
 > `theme`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
 
-<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="progress-bar-themes"></daff-docs-example-viewer>
 
 ## Accessibility
 Progress bar implements the ARIA `role="progressbar"` pattern.

package/quantity-field/README.md

@@ -4,7 +4,7 @@ Quantity field is a form control element that switches between a native select a
 ## Overview
 Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.
 
-<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-quantity-field"></daff-docs-example-viewer>
 
 ## Usage
 
@@ -52,12 +52,12 @@ export class CustomComponentModule { }
 The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more information.
 
 ## Disabled quantity field
-<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="disabled-quantity-field"></daff-docs-example-viewer>
 
 ## Custom Select Max Value (15)
 The maximum value at which the field will switch to using an input is configurable.
-<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="select-max-quantity-field"></daff-docs-example-viewer>
 
 ## Custom Range Limits (5 - 50)
 Custom range limits is the absolute minimum and maximum values can be specified.
-<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="custom-range-quantity-field"></daff-docs-example-viewer>

package/quantity-field/index.d.ts

@@ -96,6 +96,9 @@ declare class DaffQuantitySelectComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * @deprecated in favor of DaffSfQuantityFieldComponent. Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ */
 declare class DaffQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number> {
     ngControl: NgControl;
     private cd;
@@ -157,7 +160,7 @@ declare class DaffQuantityFieldComponent extends DaffFormFieldControl<number> im
 }
 
 /**
- * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ * @deprecated in favor of DaffSfQuantityFieldComponent. Deprecated in version 0.92.0. Will be removed in version 0.95.0.
  */
 declare class DaffQuantityFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldModule, never>;

package/radio/README.md

@@ -4,7 +4,7 @@ Radio is used to select a single value from a selection of values.
 ## Overview
 It can be hooked into Angular's `FormControl` to accomodate custom functionality. The `DaffRadioSetComponent` serves as a wrapper around a logical group of radios to provide styling.
 
-<design-land-example-viewer-container example="basic-radio"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-radio"></daff-docs-example-viewer>
 
 ## Usage
 

package/radio/index.d.ts

@@ -6,28 +6,12 @@ import { NgControl, ControlValueAccessor } from '@angular/forms';
 declare class DaffRadioSetComponent {
     name: string;
     constructor();
-    /**
-     * @docs-private
-     */
-    role: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioSetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioSetComponent, "daff-radio-set", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class DaffRadioComponent implements OnInit {
     private radioset;
-    /**
-     * @docs-private
-     */
-    role: string;
-    /**
-     * @docs-private
-     */
-    get focusClass(): boolean;
-    /**
-     * @docs-private
-     */
-    get disabledClass(): boolean;
     /**
      * @docs-private
      */

package/scss/layout/_breakpoint.scss

@@ -20,7 +20,7 @@
 ///
 @mixin breakpoint($point) {
 	@if not map.has-key($map: v.$breakpoints, $key: $point) {
-		@warn 'breakpoint(): "#{$key}" is not defined in your $breakpoints setting.';
+		@warn 'breakpoint(): "#{$point}" is not defined in the $breakpoints map.';
 	}
 
 	@media (min-width: map.get(v.$breakpoints, $point)) {

package/scss/theme.scss

@@ -27,15 +27,14 @@
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
 @use '../tag/src/tag-theme' as tag;
-@use '../form-field/src/error-message/error-message-theme' as error-message;
-@use '../form-field/src/hint/hint-theme' as hint;
+@use '../form/src/error-message/error-message-theme' as error-message;
+@use '../form/src/hint/hint-theme' as hint;
 @use '../form-field/src/form-field-theme' as form-field;
 @use '../native-select/src/native-select-theme' as native-select;
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
 @use '../card/src/card-base-theme' as card-base;
-@use '../card/src/card/raised/raised-theme' as raised-card;
 @use '../card/src/card/stroked/stroked-theme' as stroked-card;
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
@@ -47,10 +46,12 @@
 @use '../paginator/src/paginator-theme' as paginator;
 @use '../select/src/select-theme' as select;
 @use '../sidebar/src/sidebar-theme' as sidebar;
+@use '../spinner/src/spinner-theme' as spinner;
 @use '../switch/src/switch-theme' as switch;
 @use '../progress-bar/src/progress-bar-theme' as progress-bar;
 @use '../scss/state/skeleton/mixins' as skeleton;
 @use '../tabs/src/tabs-theme' as tabs;
+@use '../text-snippet//src/text-snippet-theme' as text-snippet;
 @use '../tree/src/tree-theme' as tree;
 @use '../toast/src/toast-theme' as toast;
 
@@ -84,7 +85,6 @@
 
 	@include callout.daff-callout-theme($theme);
 	@include card-base.daff-card-base-theme($theme);
-	@include raised-card.daff-raised-card-theme($theme);
 	@include stroked-card.daff-stroked-card-theme($theme);
 
 	@include form-field.daff-form-field-theme($theme);
@@ -93,7 +93,7 @@
 	@include select.daff-select-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
 
-	@include loading-icon.daff-loading-icon-theme($theme);
+	@include spinner.daff-spinner-theme($theme);
 	@include progress-bar.daff-progress-bar-theme($theme);
 
 	@include accordion.daff-accordion-theme($theme);
@@ -101,7 +101,10 @@
 	@include callout.daff-callout-theme($theme);
 	@include hero.daff-hero-theme($theme);
 	@include list.daff-list-theme($theme);
+
+	// deprecated
 	@include loading-icon.daff-loading-icon-theme($theme);
+
 	@include media-gallery.daff-media-gallery-theme($theme);
 	@include menu.daff-menu-theme($theme);
 	@include modal.daff-modal-theme($theme);
@@ -112,6 +115,7 @@
 	@include sidebar.daff-sidebar-theme($theme);
 	@include switch.daff-switch-theme($theme);
 	@include tabs.daff-tabs-theme($theme);
+	@include text-snippet.daff-text-snippet-theme($theme);
 	@include toast.daff-toast-theme($theme);
 	@include tree.daff-tree-theme($theme);
 }

package/scss/theming/_color-palettes.scss

@@ -1,10 +1,17 @@
+////
+/// @group color-palettes
+////
+
 // Base colors
-$daff-white: #ffffff;
+/// @access private
+$white: #ffffff;
+/// @access private
+$black: #070707;
+// need to deprecate
+/// @access private
 $error: #dd0000;
 
-// 60 apart passes AAA level for any size text (except for 10/70)
-// 50 apart passes AA level for any size text (except for 10/60)
-
+/// @access private
 $daff-blue: (
 	10: #ebf1ff,
 	20: #c4d8ff,
@@ -18,8 +25,7 @@ $daff-blue: (
 	100: #000033
 );
 
-$daff-primary: $daff-blue;
-
+/// @access private
 $daff-purple: (
 	10: #ebebff,
 	20: #d4d3ff,
@@ -33,8 +39,7 @@ $daff-purple: (
 	100: #110033
 );
 
-$daff-accent: $daff-purple;
-
+/// @access private
 $daff-turquoise: (
 	10: #d6fcea,
 	20: #9dfbd3,
@@ -48,6 +53,7 @@ $daff-turquoise: (
 	100: #082218
 );
 
+/// @access private
 $daff-yellow: (
 	10: #fffaeb,
 	20: #fff1c2,
@@ -61,6 +67,7 @@ $daff-yellow: (
 	100: #7a5e00
 );
 
+/// @access private
 $daff-red: (
 	10: #fcf1f1,
 	20: #fae0e0,
@@ -74,6 +81,7 @@ $daff-red: (
 	100: #3f0809,
 );
 
+/// @access private
 $daff-bronze: (
 	10: #fcf2eb,
 	20: #f7dac6,
@@ -87,6 +95,7 @@ $daff-bronze: (
 	100: #1a0f00,
 );
 
+/// @access private
 $daff-green: (
 	10: #d1fbd6,
 	20: #97f8a5,
@@ -100,8 +109,8 @@ $daff-green: (
 	100: #07230d,
 );
 
+/// @access private
 $daff-neutral: (
-	0: #ffffff,
 	10: #fafafa,
 	20: #e8e8e8,
 	30: #d3d3d3,
@@ -111,6 +120,5 @@ $daff-neutral: (
 	70: #5e5e5e,
 	80: #474747,
 	90: #323232,
-	100: #1a1a1a,
-	110: #070707
+	100: #1a1a1a
 );

package/scss/theming/_configure-theme.scss

@@ -5,21 +5,21 @@
 
 $daff-light-theme: (
 	'mode': 'light',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 110),
-	'base': get-color.daff-color(palette.$daff-neutral, 0),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$black,
+	'base': palette.$white,
+	'base-contrast': palette.$black,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 60),
 );
 
 $daff-dark-theme: (
 	'mode': 'dark',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 0),
-	'base': get-color.daff-color(palette.$daff-neutral, 100),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$white,
+	'base': palette.$black,
+	'base-contrast': palette.$white,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
 );
 
@@ -28,6 +28,7 @@ $supported-theme-modes: (
 	'dark': $daff-dark-theme
 );
 
+/// @deprecated Use `daff-create-theme` instead.
 /// Create a theme object given some initial settings.
 ///
 /// Sets light and dark mode defaults for `$info`, `$warn`, `$critical`, and `$success`

package/scss/theming/_daff-theme.scss

@@ -1,5 +1,5 @@
 @use 'configure-palette';
-@use 'configure-theme';
+@use './create-theme/create-theme';
 @use 'color-palettes' as palette;
 @use '../core';
 
@@ -7,23 +7,14 @@ $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
 $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
 
-$theme: configure-theme.daff-configure-theme(
-	$primary,
-	$secondary,
-	$tertiary,
-	'light'
+$theme: create-theme.daff-create-theme(
+	('primary': $primary, 'secondary': $secondary, 'tertiary': $tertiary, 'mode': 'light')
 );
 
 $primary-dark: configure-palette.daff-configure-palette(palette.$daff-blue, 50);
 $secondary-dark: configure-palette.daff-configure-palette(palette.$daff-purple, 50);
 $tertiary-dark: configure-palette.daff-configure-palette(palette.$daff-turquoise, 50);
 
-$theme-dark: configure-theme.daff-configure-theme(
-	$primary-dark,
-	$secondary-dark,
-	$tertiary-dark,
-	'dark'
+$theme-dark: create-theme.daff-create-theme(
+	('primary': $primary-dark, 'secondary': $secondary-dark, 'tertiary': $tertiary-dark, 'mode': 'dark')
 );
-
-$black: core.daff-map-get($theme, 'core', 'black');
-$white: core.daff-map-get($theme, 'core', 'white');

package/scss/theming/_get-base-color.scss

@@ -3,13 +3,13 @@
 /// Retrieves a core base color from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with the `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with the `daff-create-theme` function.
 /// @param {String} $color — The core color to retrieve. Supported colors: `white`, `black`, `base`, or `base-contrast`.
 ///
 /// @throws Will throw an error if `$color` is not supported as part of Daffodil's core colors.

package/scss/theming/_get-palette.scss

@@ -3,13 +3,13 @@
 /// Retrieves a specific color palette from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with with `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with with `daff-create-theme` function.
 /// @param {Map} $palette — The palette being retrieved.
 /// Supported values: `primary`, `secondary`, `tertiary`, `informational`, `warn`, `critical`, `success`, or `neutral`.
 ///