@daffodil/design 0.91.0 → 0.92.3-rc.0

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:**

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.91.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^20.0.0","@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/cdk":"^20.0.0","@daffodil/core":"0.91.0","@fortawesome/angular-fontawesome":"^3.0.0","@fortawesome/fontawesome-svg-core":"^7.0.1","@fortawesome/free-solid-svg-icons":"^7.0.1","@fortawesome/free-brands-svg-icons":"^7.0.1","@fortawesome/free-regular-svg-icons":"^7.0.1","modern-normalize":"^3.0.1","rxjs":"^7.0.0"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./checkbox":{"types":"./checkbox/index.d.ts","default":"./fesm2022/daffodil-design-checkbox.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form":{"types":"./form/index.d.ts","default":"./fesm2022/daffodil-design-form.mjs"},"./form-field":{"types":"./form-field/index.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./native-select/index.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./radio":{"types":"./radio/index.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./tag":{"types":"./tag/index.d.ts","default":"./fesm2022/daffodil-design-tag.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./textarea/index.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.6.2"}}
+{"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

@@ -16,8 +16,10 @@ declare class DaffPaginatorComponent implements OnChanges {
      */
     faChevronLeft: _fortawesome_fontawesome_common_types.IconDefinition;
     /**
-     * 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/scss/theme.scss

@@ -46,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;
 
@@ -91,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);
@@ -99,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);
@@ -110,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

@@ -25,9 +25,6 @@ $daff-blue: (
 	100: #000033
 );
 
-/// @access private
-$daff-primary: $daff-blue;
-
 /// @access private
 $daff-purple: (
 	10: #ebebff,
@@ -42,9 +39,6 @@ $daff-purple: (
 	100: #110033
 );
 
-/// @access private
-$daff-accent: $daff-purple;
-
 /// @access private
 $daff-turquoise: (
 	10: #d6fcea,

package/select/README.md

@@ -4,7 +4,7 @@ Select allows users to choose from a dropdown panel with a list of options, simi
 ## Overview
 Use select when you need users to pick one option from a list. It works like a standard dropdown menu but gives you more control over how options look and behave. 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="basic-select"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-select"></daff-docs-example-viewer>
 
 ## Usage
 To use select, import the components directly into your custom component:
@@ -48,19 +48,19 @@ Use `daffSelectOption` to render a list of options in the select panel:
 ### Disabled
 Select can be disabled using Angular's reactive forms with `FormControl`.
 
-<design-land-example-viewer-container example="disabled-select"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="disabled-select"></daff-docs-example-viewer>
 
 ### Error
 Select supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the select is invalid and has been touched or submitted.
 
-<design-land-example-viewer-container example="select-with-error"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="select-with-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 textarea. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
-<design-land-example-viewer-container example="select-with-hint"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="select-with-hint"></daff-docs-example-viewer>
 
 ## Accessibility
 Select follows the [Combobox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/). The combobox activator is combined with an inner `role="listbox"` element opened in a popup.

package/sidebar/README.md

@@ -4,7 +4,7 @@ A sidebar is a component used to display additional information alongside a page
 ## Overview
 Sidebars provide a flexible way to display additional content alongside the main page content. While commonly used for navigation, they can accommodate any type of content. Sidebars support multiple display modes, positions, and include optional header and footer components with minimal styling.
 
-<design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-sidebar"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -162,16 +162,16 @@ Use the `mode` property to control how the sidebar is displayed:
 | `under` | Sits beneath the main content, which slides over the sidebar when closed. |
 
 **Over and under sidebars**
-<design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="over-and-under-sidebars"></daff-docs-example-viewer>
 
 **Side fixed sidebar**
-<design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="side-fixed-sidebar"></daff-docs-example-viewer>
 
 **Two fixed sidebars on either side**
-<design-land-example-viewer-container example="two-fixed-sidebars-either-side"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="two-fixed-sidebars-either-side"></daff-docs-example-viewer>
 
 **Fixed and over sidebar**
-<design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="fixed-and-over-sidebar"></daff-docs-example-viewer>
 
 ### Sides
 Use the `side` property to control the placement of the sidebar:
@@ -181,7 +181,7 @@ Use the `side` property to control the placement of the sidebar:
 | `left` (default) | Places the sidebar on the left side of the screen.  |
 | `right` | Places the sidebar on the right side of the screen. |
 
-<design-land-example-viewer-container example="sidebar-sides"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="sidebar-sides"></daff-docs-example-viewer>
 
 ## Customizations
 

package/spinner/README.md

@@ -0,0 +1,57 @@
+# Spinner
+A spinner is an animated indicator that lets users know content or action is being loaded.
+
+## Overview
+Use a spinner to indicate a short, indeterminate loading state. It can appear on its own or paired with a loading message. For longer processes with measurable progress, use the [progress bar](/libs/design/progress-bar/README.md) component.
+
+## Usage
+To use spinner, import `DAFF_SPINNER_COMPONENTS` directly into your custom component:
+
+```ts
+import { DAFF_SPINNER_COMPONENTS } from '@daffodil/design/spinner';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_SPINNER_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Anatomy
+
+### Label
+Labels are used to describe the loading state and provide context for users. They are optional.
+
+```html
+<daff-spinner>
+  <daff-spinner-label>Loading products...</daff-spinner-label>
+</daff-spinner>
+```
+
+<daff-docs-example-viewer example="spinner-with-label"></daff-docs-example-viewer>
+
+## Features
+
+### Colors
+Use the `color` property to change the color of a spinner.
+
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for sufficient contrast.
+
+<daff-docs-example-viewer example="spinner-colors"></daff-docs-example-viewer>
+
+### Sizes
+Use the `size` proeprty to change the size of a spinner. The default size is `md`.
+
+<daff-docs-example-viewer example="spinner-sizes"></daff-docs-example-viewer>
+
+## Accessibility
+The spinner has `role="status"` which announces content changes to assistive technologies.
+
+When using `<daff-spinner-label>`, the visible text serves as the accessible name. When no label is provided, the spinner defaults to `aria-label="loading"`. You can customize this with the `aria-label` input:
+
+```html
+<daff-spinner aria-label="Saving changes"></daff-spinner>
+```