@daffodil/design 0.92.3 → 0.93.1

package/accordion/README.md

@@ -14,7 +14,7 @@ Accordions help reduce scrolling by hiding non-essential information until it's
 
 **When not to use**
 - When most users will need to see all content anyway
-- The content is very short and hiding it adds unnecessary complexity (use [list](/libs/design/list/README.md) instead)
+- The content is very short and hiding it adds unnecessary complexity (use [List](/libs/design/list/README.md) instead)
 
 ## Usage
 Import `DAFF_ACCORDION_COMPONENTS` into your component:
@@ -51,12 +51,12 @@ An accordion is composed of a container, items, titles, and content:
 
 ## Features
 
-### Expanding by default
+### Default expansion
 Use the `initiallyExpanded` property on the accordion item to have an item open by default.
 
 <daff-docs-example-viewer example="initially-expanded-accordion"></daff-docs-example-viewer>
 
-### Disabling an item
+### Disabled item
 Use the `disabled` property on the accordion item to disable and prevent it from being expanded or collapsed.
 
 <daff-docs-example-viewer example="disabled-accordion"></daff-docs-example-viewer>
@@ -64,7 +64,7 @@ Use the `disabled` property on the accordion item to disable and prevent it from
 ## Accessibility
 Accordion follows the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
 
-### Daffodil provides
+### Built-in behavior
 - `role="button"` on titles with `aria-expanded` to indicate current state and `aria-controls` linking to the associated panel
 - `role="region"` on content panels with `aria-labelledby` linking back to the corresponding title
 - Unique IDs autogenerated for titles and panels (overridable via the `contentId` and `itemId` inputs on `<daff-accordion-item>`)

package/beacon/README.md

@@ -0,0 +1,61 @@
+# Beacon
+A beacon is a small indicator that draws visual attention to a specific location or element.
+
+## Overview
+Use a beacon to signal a "live" status or highlight a point of interest, such as a new feature or an active notification. It renders as a pulsing dot that draws the eye without interrupting the surrounding content.
+
+<daff-docs-example-viewer example="basic-beacon"></daff-docs-example-viewer>
+
+## Usage
+
+Import `DaffBeaconComponent` into your component:
+
+```ts
+import { DaffBeaconComponent } from '@daffodil/design/beacon';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffBeaconComponent,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Anatomy
+A beacon is a single dot with a ring that pulses outward from it. With no properties set, it renders at the default size and inherits the ambient text color:
+
+```html
+<daff-beacon></daff-beacon>
+```
+
+## Features
+
+### Colors
+Use the `color` property to change the color of a beacon. Left unset, the beacon matches the surrounding text color, so setting `color` on a parent element carries down to the beacon.
+
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for sufficient contrast.
+
+<daff-docs-example-viewer example="beacon-colors"></daff-docs-example-viewer>
+
+### Status
+Use the `status` property to color the beacon by meaning: `info`, `warn`, `critical`, or `success`. Use `status` instead of `color` when the dot represents a state.
+
+<daff-docs-example-viewer example="beacon-statuses"></daff-docs-example-viewer>
+
+### Sizes
+Use the `size` property to change the diameter of the dot. The default size is `sm`.
+
+<daff-docs-example-viewer example="beacon-sizes"></daff-docs-example-viewer>
+
+### Speed
+Use the `speed` property to set how fast the ring pulses. `slow` is a relaxed 3.6s cycle, `normal` (the default) a 2.4s cycle, and `fast` an urgent 1.2s cycle.
+
+<daff-docs-example-viewer example="beacon-speeds"></daff-docs-example-viewer>
+
+## Accessibility
+
+For users who have reduced motion enabled, the beacon shows as a still dot instead of pulsing.
+
+Beacon is purely decorative and should never be the only thing that conveys status. Always pair it with visible text or another cue that communicates the same meaning.

package/beacon/src/beacon-theme.scss

@@ -0,0 +1,61 @@
+@use '../../scss/theming' as *;
+
+@mixin daff-beacon-theme($theme) {
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$info: daff-get-palette($theme, informational);
+	$warn: daff-get-palette($theme, warn);
+	$critical: daff-get-palette($theme, critical);
+	$success: daff-get-palette($theme, success);
+	$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');
+
+	.daff-beacon {
+		&.daff-primary {
+			color: daff-color($primary);
+		}
+
+		&.daff-secondary {
+			color: daff-color($secondary);
+		}
+
+		&.daff-tertiary {
+			color: daff-color($tertiary);
+		}
+
+		&.daff-theme {
+			color: $base;
+		}
+
+		&.daff-theme-contrast {
+			color: $base-contrast;
+		}
+
+		&.daff-dark {
+			color: $black;
+		}
+
+		&.daff-light {
+			color: $white;
+		}
+
+		&.daff-info {
+			color: daff-color($info);
+		}
+
+		&.daff-warn {
+			color: daff-color($warn);
+		}
+
+		&.daff-critical {
+			color: daff-color($critical);
+		}
+
+		&.daff-success {
+			color: daff-color($success);
+		}
+	}
+}

package/breadcrumb/README.md

@@ -15,8 +15,7 @@ Breadcrumbs visually represent the navigational structure of a site or app and h
 
 ## Usage
 
-### Within a standalone component
-To use breadcrumb in a standalone component, import `DAFF_BREADCRUMB_COMPONENTS` directly into your custom component:
+Import `DAFF_BREADCRUMB_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
@@ -31,40 +30,13 @@ import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use breadcrumb in a module, import `DaffBreadcrumbModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffBreadcrumbModule } from '@daffodil/design/breadcrumb';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-  declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffBreadcrumbModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffBreadcrumbModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A breadcrumb consists of the following components:
-
-### Container
-**`[daff-breadcrumb]`**: The wrapper that groups all breadcrumb items together. Applied to an `<ol>` element.
+A breadcrumb is composed of a container and one or more items:
 
-### Item
-**`[daffBreadcrumbItem]`**: Individual breadcrumb element within the navigation path. Applied to a `<li>` element.
-
-### Basic structure
 ```html
 <ol daff-breadcrumb>
   <li daffBreadcrumbItem>
@@ -74,20 +46,26 @@ A breadcrumb consists of the following components:
     <a routerLink="/category">Category</a>
   </li>
   <li daffBreadcrumbItem>
-    <span>Current Page</span>
+    <span>Shoes</span>
   </li>
 </ol>
 ```
 
+- **`[daff-breadcrumb]`**: The wrapper that groups all breadcrumb items together. Applied to an `<ol>` element.
+- **`[daffBreadcrumbItem]`**: An individual breadcrumb in the navigation path. Applied to a `<li>` element.
+- Use a link for every item except the last, which represents the current page and is rendered as plain text.
+
 ## Features
 
 ### Truncation
 Breadcrumbs are automatically truncated into an overflow menu on mobile viewports. On desktop, truncation occurs when more than five items are present.
 
+<daff-docs-example-viewer example="truncated-breadcrumb"></daff-docs-example-viewer>
+
 ## Accessibility
 Breadcrumb follows the [Breadcrumb WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
 
-### Daffodil provides
+### Built-in behavior
 - `aria-current="page"` automatically applied to the last breadcrumb item
 - Enforces semantic HTML structure (requires `<ol>` and `<li>` elements)
 

package/button/README.md

@@ -9,33 +9,18 @@ Button supports four variants that change its visual style, each applied as an a
 | `daff-button` | Rectangular button with background color |
 | `daff-flat-button`| Rectangular button with no outline or background color |
 | `daff-icon-button` | Icon only button used with icon fonts |
-| `daff-stroked-button` | Rectangular button with oultline, no background color |
+| `daff-stroked-button` | Rectangular button with outline, no background color |
 
 Native `<button>` or `<a>` elements should always be used in order to provide an easy, accessible experience for users.
 
 - Use `<a>` for navigation to new pages or different sections.
 - Use `<button>` for actions performed within the same page.
 
-**Basic button**
-<daff-docs-example-viewer example="basic-button"></daff-docs-example-viewer>
-
-**Flat button**
-<daff-docs-example-viewer example="flat-button"></daff-docs-example-viewer>
-
-**Stroked button**
-<daff-docs-example-viewer example="stroked-button"></daff-docs-example-viewer>
-
-> `dark`, `light`, and `theme` should be used with caution to ensure that there is sufficient contrast.
-
-**Icon button**
-<daff-docs-example-viewer example="icon-button"></daff-docs-example-viewer>
-
-> `dark`, `light`, and `theme` should be used with caution to ensure that there is sufficient contrast.
+<daff-docs-example-viewer example="button-types"></daff-docs-example-viewer>
 
 ## Usage
 
-### Within a standalone component
-To use button in a standalone component, import each button type directly into your custom component.
+Import the button type you need into your component:
 
 Available imports:
 - `DAFF_BASIC_BUTTON_COMPONENTS`
@@ -57,45 +42,37 @@ import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use button in a module, import `DaffButtonModule` into your custom module:
+> **Deprecation notice:**
+> 
+> `DaffButtonModule` is deprecated. Use the standalone component imports instead.
 
-```ts
-import { NgModule } from '@angular/core';
-import { DaffButtonModule } from '@daffodil/design/button';
-import { CustomComponent } from './custom.component';
+## Anatomy
+A button is composed of a label with optional icons:
 
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffButtonModule,
-  ],
-})
-export class CustomComponentModule { }
+```html
+<button daff-button>
+  <fa-icon daffPrefix></fa-icon>
+  Add to cart
+</button>
 ```
 
-> This method is deprecated. It's recommended to update all custom components to standalone.
+- The label describing the action. Always provide one unless the button uses an icon that is universally understood and accessible.
+- Add the `daffPrefix` or `daffSuffix` directive to an icon to place it before or after the label text. Avoid using both at once.
 
-## Anatomy
-Buttons should always have a label, unless you are only using an icon that is universally understood and accessible.
+## Features
 
-### Icon support
-An icon can be rendered on either side of the button text content with the `daffPrefix` and `daffSuffix` selectors. Avoid using both simultaneously.
+### Icons
+Render an icon on either side of the button label with the `daffPrefix` and `daffSuffix` directives.
 
 <daff-docs-example-viewer example="button-with-icon"></daff-docs-example-viewer>
 
-## Features
-
 ### Colors
 Use the `color` property to change the color of a button.
 
 > Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for sufficient contrast.
 
+<daff-docs-example-viewer example="button-colors"></daff-docs-example-viewer>
+
 ### Elevation
 Add shadows to buttons with the `elevated` property.
 
@@ -113,8 +90,6 @@ Status indicators help users understand the type of action a button performs and
 
 <daff-docs-example-viewer example="statusable-button"></daff-docs-example-viewer>
 
-## States
-
 ### Disabled
 Use the `disabled` property to disable a button that shouldn't be actionable. The button will appear faded and won't respond to user interaction.
 
@@ -125,12 +100,15 @@ Use the `loading` property to indicate that an action is being processed. When `
 
 <daff-docs-example-viewer example="loading-button"></daff-docs-example-viewer>
 
-## Accessbility
-Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default.
+## Accessibility
 
-- Use `<a>` for navigation to new pages or different sections.
-- Use `<button>` for actions performed within the same page.
-- Icon only buttons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.
+### Built-in behavior
+- Enforces the use of native `<a>` and `<button>` HTML elements for keyboard and screen reader support by default
+
+### Developer responsibilities
+- Use `<a>` for navigation to new pages or different sections
+- Use `<button>` for actions performed within the same page
+- Give icon only buttons (`<daff-icon-button>`) a meaningful label using `aria-label` or `aria-labelledby`
 
 ## Deprecations
 - `<daff-raised-button>` is deprecated and will be removed in v1.0.0. Use the `elevated` property instead.

package/card/README.md

@@ -37,7 +37,7 @@ export class CustomComponent {}
 
 > **Deprecation notice:**
 > 
-> `DaffCalloutModule` is deprecated. Use the standalone component imports instead.
+> `DaffCardModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
 A card is composed of a container, image, icon, tagline, title, content, and actions, displayed in the order listed:
@@ -60,26 +60,13 @@ A card is composed of a container, image, icon, tagline, title, content, and act
 </daff-card>
 ```
 
-**`<daff-card>`** or **`<daff-stroked-card>`**\
-The wrapper component that holds all card content.
-
-**`[daffCardImage]`**\
-Image element at the top of the card.
-
-**`[daffCardIcon]`**\
-Displays a visual or branding element. Avoid using for interactive icons.
-
-**`[daffCardTagline]`**\
-Short phrase that provides quick context.
-
-**`[daffCardTitle]`**\
-The primary heading of the card.
-
-**`[daffCardContent]`**\
-Flexible container for body text or custom content. It's unstyled except for spacing and **should only be used once per card**.
-
-**`[daffCardActions]`**\
-Container for buttons or links, positioned at the bottom.
+- **`<daff-card>`** or **`<daff-stroked-card>`**: The wrapper component that holds all card content.
+- **`[daffCardImage]`**: Image element at the top of the card.
+- **`[daffCardIcon]`**: Displays a visual or branding element. Avoid using for interactive icons.
+- **`[daffCardTagline]`**: Short phrase that provides quick context.
+- **`[daffCardTitle]`**: The primary heading of the card.
+- **`[daffCardContent]`**: Flexible container for body text or custom content. It's unstyled except for spacing and **should only be used once per card**.
+- **`[daffCardActions]`**: Container for buttons or links, positioned at the bottom.
 
 ## Features
 
@@ -95,7 +82,6 @@ Cards default to a light gray background. Use the `color` property to change a c
 
 <daff-docs-example-viewer example="card-theming"></daff-docs-example-viewer>
 
-
 ### Elevation
 Use the `elevated` property to add shadows to cards.
 

package/card/src/card/stroked/stroked-theme.scss

@@ -12,7 +12,14 @@
 		}
 	}
 
-	&:hover,
+	@media (hover: hover) {
+		.daff-card__wrapper {
+			&::after {
+				opacity: 1;
+			}
+		}
+	}
+
 	&:focus {
 		.daff-card__wrapper {
 			&::after {

package/card/src/card-base-theme.scss

@@ -13,7 +13,18 @@
 		}
 	}
 
-	&:hover,
+	@media (hover: hover) {
+		&:hover {
+			color: daff-text-contrast($hover-color);
+
+			.daff-card__wrapper {
+				&::after {
+					opacity: 1;
+				}
+			}
+		}
+	}
+
 	&:focus {
 		color: daff-text-contrast($hover-color);
 

package/container/README.md

@@ -5,8 +5,8 @@ Container is a structural element that restricts content to a maximum width.
 Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.
 
 ## Usage
-### Within a standalone component
-To use container in a standalone component, import `DAFF_CONTAINER_COMPONENTS` directly into your custom component:
+
+Import `DAFF_CONTAINER_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
@@ -21,31 +21,9 @@ import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use container in a module, import `DaffContainerModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffContainerModule } from '@daffodil/design/container';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffContainerModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
+> **Deprecation notice:**
 >
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> `DaffContainerModule` is deprecated. Use the standalone component imports instead.
 
 ## Sizes
 Set a size on container using the `size` property. There is no default size.

package/fesm2022/daffodil-design-accordion.mjs

@@ -22,10 +22,10 @@ import { DaffArticleEncapsulatedDirective, DaffOpenableDirective, DaffDisableabl
  * ```
  */
 class DaffAccordionComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-accordion', template: '<ng-content></ng-content>', hostDirectives: [{
                             directive: DaffArticleEncapsulatedDirective,
@@ -76,7 +76,7 @@ class DaffAccordionItemComponent {
      * @docs-private
      */
     ngOnInit() {
-        this.openDirective.open = this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open;
+        this.openDirective.open.update(() => this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open());
     }
     /**
      * @docs-private
@@ -102,10 +102,10 @@ class DaffAccordionItemComponent {
     toggle() {
         this.openDirective.toggle();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }, { token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }, { token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-accordion-item', hostDirectives: [
                         {
@@ -118,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                     ], host: {
                         'class': 'daff-accordion-item',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n  (click)=\"toggle()\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"contentId\"\n  [id]=\"itemId\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled\">\n  <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n    <ng-content></ng-content>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.DaffOpenableDirective }, { type: i1.DaffDisableableDirective }], propDecorators: { itemId: [{
                 type: Input
             }], contentId: [{
@@ -137,10 +137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * ```
  */
 class DaffAccordionItemTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { classAttribute: "daff-accordion-item__title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { classAttribute: "daff-accordion-item__title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffAccordionItemTitle]',
@@ -154,16 +154,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 class DaffAccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
             DaffAccordionComponent,
             DaffAccordionItemComponent,
             DaffAccordionItemTitleDirective], exports: [DaffAccordionComponent,
             DaffAccordionItemComponent,
             DaffAccordionItemTitleDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [