@daffodil/design 0.92.3-rc.2 → 0.93.0

package/modal/README.md

@@ -18,8 +18,7 @@ Modals are used to capture information or attention. They overlay the main conte
 
 ## Usage
 
-### Within a standalone component
-To use modal in a standalone component, import `DAFF_MODAL_COMPONENTS` directly into your custom component:
+Import `DAFF_MODAL_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_MODAL_COMPONENTS } from '@daffodil/design/modal';
@@ -34,49 +33,13 @@ import { DAFF_MODAL_COMPONENTS } from '@daffodil/design/modal';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use modal in a module, import `DaffModalModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffModalModule } from '@daffodil/design/modal';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffModalModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffModalModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A modal consists of the following contents, displayed in the order listed:
-
-### Header
-**`<daff-modal-header>`**: The header section containing the title and optional close button.
-
-#### Title
-**`[daffModalTitle]`**: The primary text summarizing the modal.
-
-#### Close button
-The close button in the header is shown by default but can be hidden by setting the `dismissible` property to `false` on the header.
+A modal is composed of a header, content, and actions, displayed in the order listed:
 
-### Content
-**`<daff-modal-content>`**: The scrollable container for the modal's main content. Use this once per modal to wrap all body content.
-
-### Actions
-**`<daff-modal-actions>`**: The container for action buttons, positioned at the bottom of the modal with right-aligned buttons. If two buttons are needed, place the primary button the left and the secondary button on the right.
-
-### Basic structure
 ```html
 <daff-modal-header>
   <h2 daffModalTitle>Modal Title</h2>
@@ -90,7 +53,14 @@ The close button in the header is shown by default but can be hidden by setting
 </daff-modal-actions>
 ```
 
-## Dismissing a modal
+- **`<daff-modal-header>`**: The header section containing the title and optional close button.
+- **`[daffModalTitle]`**: The primary text summarizing the modal.
+- **`<daff-modal-content>`**: The scrollable container for the modal's main content. Use this once per modal to wrap all body content.
+- **`<daff-modal-actions>`**: The container for action buttons, positioned at the bottom of the modal with right-aligned buttons. If two buttons are needed, place the primary button on the left and the secondary button on the right.
+
+## Features
+
+### Dismissal
 A modal can be dismissed via:
 - The close button in the header (shown by default)
 - The `ESC` key
@@ -104,7 +74,7 @@ To hide the close button, set `dismissible` to `false` on `<daff-modal-header>`:
 </daff-modal-header>
 ```
 
-### Position configuration
+### Position
 By default, modals are horizontally and vertically centered on the screen. You can position a modal at the top of the screen by passing a `position` configuration when opening the modal:
 
 ```ts
@@ -143,7 +113,7 @@ showModal() {
 ## Accessibility
 Modal implements the [Dialog (Modal) WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
-### Daffodil provides
+### Built-in behavior
 - `role="dialog"`
 - `aria-modal="true"`
 - `aria-labelledby` linked to the `[daffModalTitle]` element

package/native-select/README.md

@@ -7,7 +7,7 @@ Native select has the same functionality as a native HTML select element, with a
 <daff-docs-example-viewer example="basic-native-select"></daff-docs-example-viewer>
 
 ## Usage
-To use native select, import `DAFF_NATIVE_SELECT_COMPONENTS` directly into your custom component:
+Import `DAFF_NATIVE_SELECT_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_NATIVE_SELECT_COMPONENTS } from '@daffodil/design/native-select';
@@ -25,7 +25,6 @@ export class CustomComponent {}
 ## Anatomy
 Native select must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Basic structure
 ```html
 <daff-form-field>
   <daff-form-label>Sort By</daff-form-label>
@@ -37,7 +36,7 @@ Native select must be used inside `<daff-form-field>` to enable proper state man
 </daff-form-field>
 ```
 
-## States
+## Features
 
 ### Disabled
 Native select can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
@@ -51,12 +50,15 @@ Native select supports validation and error messages through Angular's form vali
 
 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
 Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <daff-docs-example-viewer example="native-select-hint"></daff-docs-example-viewer>
 
 ## Accessibility
-When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the select using the `for` and `id` attributes.
 
-If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.
+### Built-in behavior
+- When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the select using the `for` and `id` attributes.
+
+### Developer responsibilities
+- If a `<daff-form-label>` is not specified, use the `<label>` element to associate text with form elements explicitly. The `for` attribute of the label must exactly match the `id` of the form control.

package/navbar/README.md

@@ -8,8 +8,7 @@ The navbar contains minimal layout styles, allowing the content within it to be
 
 ## Usage
 
-### Within a standalone component
-To use navbar in a standalone component, import `DAFF_NAVBAR_COMPONENTS` directly into your custom component:
+Import`DAFF_NAVBAR_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
@@ -24,29 +23,20 @@ import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use navbar in a module, import `DaffNavbarModule` into your custom module:
+> **Deprecation notice:**
+> 
+> `DaffNavbarModule` is deprecated. Use the standalone component imports instead.
 
-```ts
-import { NgModule } from '@angular/core';
-import { DaffNavbarModule } from '@daffodil/design/navbar';
-import { CustomComponent } from './custom.component';
+## Anatomy
+A navbar is a directive applied to a native `<nav>` element:
 
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffNavbarModule,
-  ],
-})
-export class CustomComponentModule { }
+```html
+<nav daff-navbar>
+  <!-- navigation items -->
+</nav>
 ```
 
-> This method is deprecated. It's recommended to update all custom components to standalone.
+- **`nav[daff-navbar]`**: The directive applied to a native `<nav>` element. Provides flexbox layout and styling for navigation content.
 
 ## Features
 
@@ -62,11 +52,7 @@ Use the `blurred` property to add a semi-transparent background effect to the na
 
 Both `elevated` and `blurred` can be combined for a layered effect:
 
-```html
-<nav daff-navbar [elevated]="true" [blurred]="true">
-  <!-- navigation items -->
-</nav>
-```
+<daff-docs-example-viewer example="blurred-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.
@@ -74,7 +60,12 @@ A navbar can be contained to a specific width by using the [container](/libs/des
 <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-label` attribute.
+
+### Built-in behavior
+- Enforces the use of the native `<nav>` element so each navbar is recognized as a navigation landmark by assistive technology
+
+### Developer responsibilities
+- If more than one navbar is used on the page, give each one a meaningful `aria-label` to distinguish them
 
 ```html
 <nav daff-navbar aria-label="main navigation">

package/notification/README.md

@@ -17,8 +17,7 @@ Notifications should not be used to display app-level alerts. For global message
 
 ## Usage
 
-### Within a standalone component
-To use notification in a standalone component, import `DAFF_NOTIFICATION_COMPONENTS` directly into your custom component:
+Import `DAFF_NOTIFICATION_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
@@ -33,49 +32,13 @@ import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use notification in a module, import `DaffNotificationModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffNotificationModule } from '@daffodil/design/notification';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffNotificationModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffNotificationModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A notification consists of the following components, displayed in the order listed:
-
-### Container
-**`<daff-notification>`**: The wrapper component that contains all notification content.
-
-### Icon
-Use the `[daffPrefix]` element to add a decorative icon that provides a quick visual cue about the notification's purpose.
-
-### Title
-**`[daffNotificationTitle]`**: The primary text summarizing the notification.
+A notification is composed of a container with a title, message, and optional icon and actions:
 
-### Message
-**`[daffNotificationMessage]`**: Provides additional details or context. Keep this brief—ideally one to two short sentences.
-
-### Actions
-**`[daffNotificationActions]`**: Include actionable buttons related to the notification (e.g., dismiss, navigate). A maximum of two buttons is recommended to keep the notification concise.
-
-### Basic structure
 ```html
 <daff-notification>
   <fa-icon daffPrefix></fa-icon>
@@ -88,6 +51,12 @@ Use the `[daffPrefix]` element to add a decorative icon that provides a quick vi
 </daff-notification>
 ```
 
+- **`<daff-notification>`**: The wrapper component that contains all notification content.
+- **`[daffPrefix]`**: A decorative icon that provides a quick visual cue about the notification's purpose.
+- **`[daffNotificationTitle]`**: The primary text summarizing the notification.
+- **`[daffNotificationMessage]`**: Additional details or context. Keep this brief—ideally one to two short sentences.
+- **`[daffNotificationActions]`**: Actionable buttons related to the notification (e.g. dismiss, navigate). A maximum of two buttons is recommended to keep the notification concise.
+
 ## Features
 
 ### Status
@@ -100,7 +69,7 @@ Use the `orientation` property to stack notification content either `vertical` (
 
 <daff-docs-example-viewer example="notification-orientations"></daff-docs-example-viewer>
 
-### Dismissing a notification
+### Dismissable 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.
@@ -108,11 +77,7 @@ Notifications are persistent by default. To display a close button, set the `dis
 <daff-docs-example-viewer example="dismissible-notification"></daff-docs-example-viewer>
 
 ## Accessibility
-**Live region roles:**
-- Notifications with `critical` or `warn` status use `role="alert"` for immediate announcement by assistive technologies.
-- All other notifications use `role="status"` for non-interruptive announcements.
-
-See [live region roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles) for more information.
 
-**Keyboard focus:**
+### Built-in behavior
+- Notifications with `critical` or `warn` status use `role="alert"` for immediate announcement by assistive technologies, while all other notifications use `role="status"` for non-interruptive announcements. See [live region roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles) for more information.
 - Notifications include `tabindex="0"` so they can be discovered by keyboard users.

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.92.3-rc.2","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.2","@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"},"./radio":{"types":"./radio/index.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./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"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.93.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":"^21","@angular/common":"^21","@angular/core":"^21","@angular/forms":"^21","@angular/cdk":"^21","@daffodil/core":"0.93.0","@fortawesome/angular-fontawesome":"^4.0.0","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","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":"./types/daffodil-design.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./types/daffodil-design-accordion.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./types/daffodil-design-article.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./types/daffodil-design-breadcrumb.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./types/daffodil-design-button.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./types/daffodil-design-callout.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./types/daffodil-design-card.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./checkbox":{"types":"./types/daffodil-design-checkbox.d.ts","default":"./fesm2022/daffodil-design-checkbox.mjs"},"./container":{"types":"./types/daffodil-design-container.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./form":{"types":"./types/daffodil-design-form.d.ts","default":"./fesm2022/daffodil-design-form.mjs"},"./form-field":{"types":"./types/daffodil-design-form-field.d.ts","default":"./fesm2022/daffodil-design-form-field.mjs"},"./hero":{"types":"./types/daffodil-design-hero.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./types/daffodil-design-image.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./types/daffodil-design-input.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./types/daffodil-design-link-set.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./types/daffodil-design-list.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./types/daffodil-design-loading-icon.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./types/daffodil-design-media-gallery.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./types/daffodil-design-menu.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./types/daffodil-design-modal.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./native-select":{"types":"./types/daffodil-design-native-select.d.ts","default":"./fesm2022/daffodil-design-native-select.mjs"},"./navbar":{"types":"./types/daffodil-design-navbar.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./types/daffodil-design-notification.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./types/daffodil-design-paginator.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./types/daffodil-design-progress-bar.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./types/daffodil-design-quantity-field.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./radio":{"types":"./types/daffodil-design-radio.d.ts","default":"./fesm2022/daffodil-design-radio.mjs"},"./select":{"types":"./types/daffodil-design-select.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./types/daffodil-design-sidebar.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./spinner":{"types":"./types/daffodil-design-spinner.d.ts","default":"./fesm2022/daffodil-design-spinner.mjs"},"./switch":{"types":"./types/daffodil-design-switch.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./types/daffodil-design-tabs.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./tag":{"types":"./types/daffodil-design-tag.d.ts","default":"./fesm2022/daffodil-design-tag.mjs"},"./testing":{"types":"./types/daffodil-design-testing.d.ts","default":"./fesm2022/daffodil-design-testing.mjs"},"./text-snippet":{"types":"./types/daffodil-design-text-snippet.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./types/daffodil-design-textarea.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./types/daffodil-design-toast.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./types/daffodil-design-tree.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./types/daffodil-design-youtube-player.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"types/daffodil-design.d.ts","sideEffects":false,"type":"module","dependencies":{"tslib":"^2.6.2"}}

package/paginator/README.md

@@ -14,12 +14,11 @@ Pagination can be used with a data table or on a page. It automatically truncate
 - 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.
+- 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
 
-### Within a standalone component
-To use paginator in a standalone component, import `DAFF_PAGINATOR_COMPONENTS` directly into your custom component:
+Import `DAFF_PAGINATOR_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_PAGINATOR_COMPONENTS } from '@daffodil/design/paginator';
@@ -34,33 +33,13 @@ import { DAFF_PAGINATOR_COMPONENTS } from '@daffodil/design/paginator';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use paginator in a module, import `DaffPaginatorModule` into your custom module:
+> **Deprecation notice:**
+> 
+> `DaffPaginatorModule` is deprecated. Use the standalone component imports instead.
 
-```ts
-import { NgModule } from '@angular/core';
-import { DaffPaginatorModule } from '@daffodil/design/paginator';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffPaginatorModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
->
-> This method is deprecated. It's recommended to update all custom components to standalone.
+## Anatomy
+A paginator is a single navigation element labeled for the content it controls:
 
-## Basic structure
 ```html
 <daff-paginator aria-label="Search results page"></daff-paginator>
 ```
@@ -72,11 +51,12 @@ Ellipses are used to truncate page numbers when the total number of pages exceed
 
 ## Accessibility
 
-### Daffodil provides
-`role="navigation"` on the paginator element to ensure proper semantic structure.
+### Built-in behavior
+- `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`.
+- Use `aria-label` or `aria-labelledby` to give `<daff-paginator>` a meaningful label that describes the content it controls
+- If more than one paginator is used on a page, give each one a unique `aria-label`
 
 ```html
 <daff-paginator aria-label="Product list paginator">

package/paginator/src/paginator-theme.scss

@@ -16,7 +16,14 @@
 
 		@include light($mode) {
 			&__page-link {
-				&:hover,
+				@media (hover: hover) {
+					&:hover {
+						&::after {
+							background: daff-color($neutral, 20);
+						}
+					}
+				}
+
 				&.selected {
 					&::after {
 						background: daff-color($neutral, 20);
@@ -27,7 +34,14 @@
 
 		@include dark($mode) {
 			&__page-link {
-				&:hover,
+				@media (hover: hover) {
+					&:hover {
+						&::after {
+							background: daff-color($neutral, 90);
+						}
+					}
+				}
+
 				&.selected {
 					&::after {
 						background: daff-color($neutral, 90);

package/progress-bar/README.md

@@ -13,10 +13,12 @@ Progress bars help users understand the status of ongoing processes or tasks. Th
 - Indicating completion of multi-step processes
 - Displaying loading states for time-consuming operations
 
+**When not to use**
+- The operation is short or instantaneous. Use the [spinner](/libs/design/spinner/README.md) component instead.
+
 ## Usage
 
-### Within a standalone component
-To use progress bar in a standalone component, import `DAFF_PROGRESS_BAR_COMPONENTS` directly into your custom component:
+Import `DAFF_PROGRESS_BAR_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_PROGRESS_BAR_COMPONENTS } from '@daffodil/design/progress-bar';
@@ -31,60 +33,31 @@ import { DAFF_PROGRESS_BAR_COMPONENTS } from '@daffodil/design/progress-bar';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use progress bar in a module, import `DaffProgressBarModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffProgressBarModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffProgressBarModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A progress bar consists of the following components:
-
-### Container
-**`<daff-progress-bar>`**: The main progress bar component that displays the progress indicator.
+A progress bar is composed of a container and an optional label:
 
-### Label
-**`<daff-progress-bar-label>`**: Label that helps users understand what the progress represents. The label is automatically associated with the progress bar for accessibility.
-
-### Basic structure
 ```html
 <daff-progress-bar>
   <daff-progress-bar-label>File upload</daff-progress-bar-label>
 </daff-progress-bar>
 ```
 
-If a label is not provided, add an `aria-label` to `<daff-progress-bar>` to ensure an accessible experience.
+- **`<daff-progress-bar>`**: The wrapper component that displays the progress indicator.
+- **`<daff-progress-bar-label>`**: A label that describes what the progress represents. The label is automatically associated with the progress bar for accessibility.
 
-## Types
+If a label is not provided, add an `aria-label` to `<daff-progress-bar>` to ensure an accessible experience.
 
-### Determinate
-Use determinate progress bars when the percentage of completion is known. This is the default type.
+## Features
 
 ### Indeterminate
-Use indeterminate progress bars when when the percentage of completion is unknown or cannot be calculated. Set the `indeterminate` property to `true`:
+Use an indeterminate progress bar when the percentage of completion is unknown or cannot be calculated. Set the `indeterminate` property to `true`.
 
 <daff-docs-example-viewer example="progress-bar-indeterminate"></daff-docs-example-viewer>
 
-## Features
-
 ### Colors
 The default color is `primary`. Use the `color` property to change a progress bar's color.
 
@@ -95,7 +68,7 @@ The default color is `primary`. Use the `color` property to change a progress ba
 ## Accessibility
 Progress bar implements the ARIA `role="progressbar"` pattern.
 
-### Daffodil provides
+### Built-in behavior
 - `role="progressbar"` on the progress element
 - `aria-valuemin="0"` and `aria-valuemax="100"` set by default
 - `aria-valuenow` reflecting current progress (for determinate mode)

package/scss/global.scss

@@ -27,6 +27,23 @@ html {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+body {
+	::-webkit-scrollbar-track {
+		background: rgba(var(--daff-theme-rgb), 0);
+		// stylelint-disable-next-line daffodil/no-direct-cursor-pointer
+		cursor: pointer;
+	}
+	::-webkit-scrollbar {
+		width: 0.375rem;
+		height: 0.375rem;
+	}
+	::-webkit-scrollbar-thumb {
+		border-radius: 0.5rem;
+		transition: background-color 300ms ease;
+		background-color: rgba(var(--daff-theme-contrast-rgb), 0.1);
+	}
+}
+
 html {
 	scroll-behavior: smooth;
 }
@@ -34,8 +51,10 @@ html {
 a {
 	color: currentColor;
 
-	&:hover {
-		text-decoration: none;
+	@media (hover: hover) {
+		&:hover {
+			text-decoration: none;
+		}
 	}
 }
 

package/select/README.md

@@ -7,7 +7,7 @@ Use select when you need users to pick one option from a list. It works like a s
 <daff-docs-example-viewer example="basic-select"></daff-docs-example-viewer>
 
 ## Usage
-To use select, import the components directly into your custom component:
+Import `DAFF_SELECT_COMPONENTS` and `DAFF_FORM_FIELD_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select';
@@ -27,7 +27,6 @@ export class CustomComponent {}
 ## Anatomy
 Select must be used inside `<daff-form-field>` to enable proper state management and provide enhanced UI features such as hints, error messages, prefixes, and suffixes. The form field component also ensures accessibility compliance. For more details, see the [form field documentation](/libs/design/form-field/README.md).
 
-### Basic structure
 Use `daffSelectOption` to render a list of options in the select panel:
 
 ```html
@@ -43,7 +42,7 @@ Use `daffSelectOption` to render a list of options in the select panel:
 </daff-form-field>
 ```
 
-## States
+## Features
 
 ### Disabled
 Select can be disabled using Angular's reactive forms with `FormControl`.
@@ -57,15 +56,15 @@ Select supports validation and error messages through Angular's form validation
 
 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.
+### Hints
+Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
 <daff-docs-example-viewer example="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.
 
-### Daffodil provides
+### Built-in behavior
 - Automatic focus trapping when select panel is open
 - `aria-labelledby` associated with the `<daff-form-label>`
 - `aria-expanded` state management