@daffodil/design 0.92.3-rc.2 → 0.93.0

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/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: [

package/fesm2022/daffodil-design-accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"daffodil-design-accordion.mjs","sources":["../../../libs/design/accordion/src/accordion/accordion/accordion.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html","../../../libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts","../../../libs/design/accordion/src/accordion.module.ts","../../../libs/design/accordion/src/accordion.ts","../../../libs/design/accordion/src/daffodil-design-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DaffArticleEncapsulatedDirective } from '@daffodil/design';\n\n/**\n * Groups accordion items.\n *\n * @example\n * ```html\n * <daff-accordion>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n * </daff-accordion>\n * ```\n */\n@Component({\n  selector: 'daff-accordion',\n  template: '<ng-content></ng-content>',\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  hostDirectives: [{\n    directive: DaffArticleEncapsulatedDirective,\n  }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class DaffAccordionComponent {}\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  OnInit,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffOpenable,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\nlet daffAccordionItemId = 0;\nlet daffAccordionItemContentId = 0;\n\n/**\n * Contains the title and collapsible content. Handles expansion and collapse on user interaction. All `<daff-accordion-item>`s should be grouped inside a `<daff-accordion>`.\n *\n * @example\n * ```html\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Accordion content</div>\n *  </daff-accordion-item>\n * ```\n */\n@Component({\n  selector: 'daff-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n      outputs: ['toggled'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  host: {\n    'class': 'daff-accordion-item',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDisableable {\n  /**\n   * The unique id of an accordion item. Defaults to an autogenerated value.\n   */\n  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId;\n\n  /**\n   * The unique id of an accordion item content. Defaults to an autogenerated value.\n   */\n  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId;\n\n  /**\n   * Whether or not an accordion item is initially expanded by default.\n   */\n  @Input() initiallyExpanded = false;\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective\n   */\n  get disabled() {\n    return this.disabledDirective.disabled;\n  }\n\n  constructor(\n    private openDirective: DaffOpenableDirective,\n    private disabledDirective: DaffDisableableDirective,\n  ) {\n    this.openDirective.stateless = false;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.openDirective.open = this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open;\n  }\n\n  /**\n   * @docs-private\n   */\n  get open() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * Reveals the contents of the accordion item.\n   */\n  reveal() {\n    this.openDirective.reveal();\n  }\n\n  /**\n   * Hides the contents of the accordion item.\n   */\n  hide() {\n    this.openDirective.hide();\n  }\n\n  /**\n   * Toggles the visibility of the contents of the accordion item.\n   */\n  toggle() {\n    this.openDirective.toggle();\n  }\n}\n","<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>","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Used to provide a high level overview of the panel content. It should be wrapped by a `<daff-accordion-item>`.\n *\n * @example\n * ```html\n * <div daffAccordionItemTitle>Title</div>\n * ```\n */\n@Directive({\n  selector: '[daffAccordionItemTitle]',\n  host: {\n    'class': 'daff-accordion-item__title',\n  },\n})\nexport class DaffAccordionItemTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n  exports: [\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n})\nexport class DaffAccordionModule { }\n","import { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @docs-private\n *\n * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.\n */\nexport const DAFF_ACCORDION_COMPONENTS = <const> [\n  DaffAccordionComponent,\n  DaffAccordionItemComponent,\n  DaffAccordionItemTitleDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"daffodil-design-accordion.mjs","sources":["../../../libs/design/accordion/src/accordion/accordion/accordion.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts","../../../libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html","../../../libs/design/accordion/src/accordion/accordion-item-title/accordion-item-title.directive.ts","../../../libs/design/accordion/src/accordion.module.ts","../../../libs/design/accordion/src/accordion.ts","../../../libs/design/accordion/src/daffodil-design-accordion.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n} from '@angular/core';\n\nimport { DaffArticleEncapsulatedDirective } from '@daffodil/design';\n\n/**\n * Groups accordion items.\n *\n * @example\n * ```html\n * <daff-accordion>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Expandable content</div>\n *  </daff-accordion-item>\n * </daff-accordion>\n * ```\n */\n@Component({\n  selector: 'daff-accordion',\n  template: '<ng-content></ng-content>',\n  styles: [`\n    :host {\n      display: block;\n    }\n  `],\n  hostDirectives: [{\n    directive: DaffArticleEncapsulatedDirective,\n  }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n\nexport class DaffAccordionComponent {}\n","/* eslint-disable quote-props */\nimport {\n  Component,\n  Input,\n  OnInit,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  DaffDisableable,\n  DaffDisableableDirective,\n  DaffOpenable,\n  DaffOpenableDirective,\n} from '@daffodil/design';\n\nlet daffAccordionItemId = 0;\nlet daffAccordionItemContentId = 0;\n\n/**\n * Contains the title and collapsible content. Handles expansion and collapse on user interaction. All `<daff-accordion-item>`s should be grouped inside a `<daff-accordion>`.\n *\n * @example\n * ```html\n *  <daff-accordion-item>\n *    <div daffAccordionItemTitle>Title</div>\n *    <div>Accordion content</div>\n *  </daff-accordion-item>\n * ```\n */\n@Component({\n  selector: 'daff-accordion-item',\n  templateUrl: './accordion-item.component.html',\n  styleUrls: ['./accordion-item.component.scss'],\n  hostDirectives: [\n    {\n      directive: DaffOpenableDirective,\n      outputs: ['toggled'],\n    },\n    {\n      directive: DaffDisableableDirective,\n      inputs: ['disabled'],\n    },\n  ],\n  host: {\n    'class': 'daff-accordion-item',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDisableable {\n  /**\n   * The unique id of an accordion item. Defaults to an autogenerated value.\n   */\n  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId;\n\n  /**\n   * The unique id of an accordion item content. Defaults to an autogenerated value.\n   */\n  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId;\n\n  /**\n   * Whether or not an accordion item is initially expanded by default.\n   */\n  @Input() initiallyExpanded = false;\n\n  /**\n   * @docs-private\n   *\n   * Internal function to access the disabled property of the DaffDisableableDirective\n   */\n  get disabled() {\n    return this.disabledDirective.disabled;\n  }\n\n  constructor(\n    private openDirective: DaffOpenableDirective,\n    private disabledDirective: DaffDisableableDirective,\n  ) {\n    this.openDirective.stateless = false;\n  }\n\n  /**\n   * @docs-private\n   */\n  ngOnInit() {\n    this.openDirective.open.update(() => this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open()) ;\n  }\n\n  /**\n   * @docs-private\n   */\n  get open() {\n    return this.openDirective.open;\n  }\n\n  /**\n   * Reveals the contents of the accordion item.\n   */\n  reveal() {\n    this.openDirective.reveal();\n  }\n\n  /**\n   * Hides the contents of the accordion item.\n   */\n  hide() {\n    this.openDirective.hide();\n  }\n\n  /**\n   * Toggles the visibility of the contents of the accordion item.\n   */\n  toggle() {\n    this.openDirective.toggle();\n  }\n}\n","<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>","/* eslint-disable quote-props */\nimport { Directive } from '@angular/core';\n\n/**\n * Used to provide a high level overview of the panel content. It should be wrapped by a `<daff-accordion-item>`.\n *\n * @example\n * ```html\n * <div daffAccordionItemTitle>Title</div>\n * ```\n */\n@Directive({\n  selector: '[daffAccordionItemTitle]',\n  host: {\n    'class': 'daff-accordion-item__title',\n  },\n})\nexport class DaffAccordionItemTitleDirective {}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n  imports: [\n    CommonModule,\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n  exports: [\n    DaffAccordionComponent,\n    DaffAccordionItemComponent,\n    DaffAccordionItemTitleDirective,\n  ],\n})\nexport class DaffAccordionModule { }\n","import { DaffAccordionComponent } from './accordion/accordion/accordion.component';\nimport { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';\nimport { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';\n\n/**\n * @docs-private\n *\n * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.\n */\nexport const DAFF_ACCORDION_COMPONENTS = <const> [\n  DaffAccordionComponent,\n  DaffAccordionItemComponent,\n  DaffAccordionItemTitleDirective,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}