@daffodil/design 0.81.1 → 0.83.0

package/accordion/README.md

@@ -2,28 +2,26 @@
 An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
 
 ## Overview
-Accordions are made up of `<daff-accordion-item>`s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
+Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times. The accordion component consists of several pre-styled components and directives.
 
 <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
 
-## Supported Content Types
-An accordion item can include a `[daffAccordionItemTitle]`, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.
+## Formatting
+Accordions are built using `<daff-accordion>`, `<daff-accordion-item>`, and `[daffAccordionItemTitle]`.
 
-By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.
+- **`<daff-accordion>`**: A wrapper for grouping accordion items.
+- **`<daff-accordion-item>`**: The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked.
+- **`[daffAccordionItemTitle]`**: Used to provide a high level overview of the content.
 
-### Setting an item to be expanded by default 
-An item content can be visibile on render by setting the `initiallyExpanded` property to `true` on `daff-accordion-item`.
+Any additional content placed inside of an accordion item will be displayed as part of the collapsible content.
 
 ## Usage
-
-### Within a standalone component
-To use accordion in a standalone component, import it directly into your custom component:
-
 ```ts
+import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_ACCORDION_COMPONENTS,
   ],
@@ -31,26 +29,43 @@ To use accordion in a standalone component, import it directly into your custom
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use accordion in a module, import `DaffAccordionModule` into your custom module:
+```html
+<daff-accordion>
+  <daff-accordion-item>
+    <div daffAccordionItemTitle></div>
+    <p>Item Content</p>
+  </daff-accordion-item>
+  <daff-accordion-item>
+    <div daffAccordionItemTitle></div>
+    <p>Item Content</p>
+  </daff-accordion-item>
+</daff-accordion>
+```
 
-```ts
-import { NgModule } from '@angular/core';
+## Examples
 
-import { DaffAccordionModule } from '@daffodil/design/accordion';
+### Expand an item by default
+Use the `initiallyExpanded` property on the accordion item to have it opened by default.
 
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffAccordionModule,
-  ],
-})
-export class CustomComponentModule { }
+```html
+<daff-accordion-item [initiallyExpanded]="true"></daff-accordion-item>
 ```
 
-> This method is deprecated. It's recommended to update all custom components to standalone.
+### Disable an item
+Use the `disabled` property on the accordion item to prevent it from being expanded or collapsed.
+
+```html
+<daff-accordion-item [disabled]="true"></daff-accordion-item>
+```
+
+## Accessibility
+Accordion follows the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+- Titles have an `id`, the `button` role, the `aria-expanded` state, and the `aria-controls` property set to the ID specified by the `contentId` property. It uses an autogenerated value by default but can be customized.
+- Content blocks have an `id`, the `region` role, and the `aria-labelledby` property set to the ID specified by the `itemId` property. It uses an autogenerated value by default but can be customized.
+
+### Keyboard interactions
+| Key | Action |
+| --- | ------ |
+| `Tab` | Moves focus to the next focusable element. |
+| `Space` or `Enter` | When focus is on the accordion item, it collapses or expands the associated content panel. |

package/accordion/accordion/accordion/accordion.component.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
+/**
+ * A wrapper for grouping accordion items.
+ */
 export declare class DaffAccordionComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionComponent, "daff-accordion", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;

package/accordion/accordion/accordion-item/accordion-item.component.d.ts

@@ -2,24 +2,32 @@ import { OnInit } from '@angular/core';
 import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
+/**
+ * The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked.
+ * All `daff-accordion-item`s should be grouped inside the `daff-accordion` component.
+ */
 export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
     private openDirective;
     /**
      * @docs-private
      */
-    faChevronDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    class: boolean;
     /**
-     * @docs-private
+     * The unique id of an accordion item. Defaults to an autogenerated value.
      */
-    faChevronUp: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    itemId: string;
     /**
-     * @docs-private
+     * The unique id of an accordion item content. Defaults to an autogenerated value.
+     */
+    contentId: string;
+    /**
+     * Whether or not the item is initially opened by default.
      */
-    class: boolean;
-    _daffAccordionItemId: string;
-    id: string;
-    /** Whether or not the item is initiallyExpanded by default. */
     initiallyExpanded: boolean;
+    /**
+     * Disables an accordion item and prevents it from being expanded or collapsed.
+     */
+    disabled: boolean;
     /**
      * @docs-private
      */
@@ -29,19 +37,22 @@ export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable
      * @docs-private
      */
     ngOnInit(): void;
+    /**
+     * @docs-private
+     */
     get open(): boolean;
     /**
-     * Reveals the contents of the accordion item
+     * Reveals the contents of the accordion item.
      */
     reveal(): void;
     /**
-     * Hides the contents of the accordion item
+     * Hides the contents of the accordion item.
      */
     hide(): void;
     /**
-     * Toggles the visibility of the contents of the accordion item
+     * Toggles the visibility of the contents of the accordion item.
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "id": { "alias": "id"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: { "open": "open"; }; outputs: { "toggled": "toggled"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: { "open": "open"; }; outputs: { "toggled": "toggled"; }; }]>;
 }

package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts

@@ -1,4 +1,7 @@
 import * as i0 from "@angular/core";
+/**
+ * Used to provide a high level overview of the content. It should be wrapped by a `<daff-accordion-item>`.
+ */
 export declare class DaffAccordionItemTitleDirective {
     /**
      * @docs-private

package/accordion/accordion.d.ts

@@ -1,4 +1,9 @@
 import { DaffAccordionComponent } from './accordion/accordion/accordion.component';
 import { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
 import { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';
+/**
+ * @docs-private
+ *
+ * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.
+ */
 export declare const DAFF_ACCORDION_COMPONENTS: readonly [typeof DaffAccordionComponent, typeof DaffAccordionItemComponent, typeof DaffAccordionItemTitleDirective];

package/accordion/examples/disabled-accordion/disabled-accordion.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DisabledAccordionComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledAccordionComponent, "disabled-accordion", never, {}, {}, never, never, true, never>;
+}

package/accordion/examples/initially-expanded-accordion/initially-expanded-accordion.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class InitiallyExpandedAccordionComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<InitiallyExpandedAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InitiallyExpandedAccordionComponent, "initially-expanded-accordion", never, {}, {}, never, never, true, never>;
+}

package/accordion/examples/public_api.d.ts

@@ -1,2 +1,4 @@
 export { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
+export { InitiallyExpandedAccordionComponent } from './initially-expanded-accordion/initially-expanded-accordion.component';
+export { DisabledAccordionComponent } from './disabled-accordion/disabled-accordion.component';
 export { ACCORDION_EXAMPLES } from './examples';

package/accordion/src/accordion-theme.scss

@@ -5,17 +5,39 @@
 @mixin daff-accordion-theme($theme) {
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-accordion-item {
-		border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		@include theming.light($type) {
+			border-top: 1px solid theming.daff-color($neutral, 20);
 
-		&:last-child {
-			border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+			&:last-child {
+				border-bottom: 1px solid theming.daff-color($neutral, 20);
+			}
+
+			.daff-accordion-item__header {
+				color: $base-contrast;
+
+				&::after {
+					border-color: $base-contrast;
+				}
+			}
 		}
 
-		&__header {
-			&::after {
-				border-color: currentColor;
+		@include theming.dark($type) {
+			border-top: 1px solid theming.daff-color($neutral, 80);
+
+			&:last-child {
+				border-bottom: 1px solid theming.daff-color($neutral, 80);
+			}
+
+			.daff-accordion-item__header {
+				color: $base-contrast;
+
+				&::after {
+					border-color: $base-contrast;
+				}
 			}
 		}
 	}

package/article/README.md

@@ -51,13 +51,14 @@ Articles also support other custom "non-native" components like [accordions](/li
 ## Usage
 
 ### Within a standalone component
-To use article in a standalone component, import it directly into your custom component:
+To use article in a standalone component, import `DAFF_ARTICLE_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_ARTICLE_COMPONENTS,
   ],
@@ -70,8 +71,8 @@ To use article in a module, import `DaffArticleModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffArticleModule } from '@daffodil/design/article';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/article/article.d.ts

@@ -1,3 +1,6 @@
 import { DaffArticleComponent } from './article/article.component';
 import { DaffArticleMetaDirective } from './article-meta/article-meta.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_ARTICLE_COMPONENTS: readonly [typeof DaffArticleComponent, typeof DaffArticleMetaDirective];

package/article/src/article-theme.scss

@@ -5,83 +5,160 @@
 
 @mixin daff-article-theme($theme) {
 	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
-	$text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
-	$table-border-color: theming.daff-illuminate($base, $neutral, 2);
+	$link-color-light: theming.daff-color($primary);
+	$link-color-dark: theming.daff-color($primary, 40);
+	$text-color-light: theming.daff-color($neutral, 90);
+	$text-color-dark: theming.daff-color($neutral, 10);
+	$table-border-light: theming.daff-color($neutral, 20);
+	$table-border-dark: theming.daff-color($neutral, 80);
 
 	.daff-article {
-		color: $text-color;
+		@include theming.light($type) {
+			color: $text-color-light;
 
-		&__meta {
-			color: theming.daff-illuminate($base-contrast, $neutral, 3);
-		}
-
-		@include stopsArticleCascade(a) {
-			color: theming.daff-color($primary);
+			@include stopsArticleCascade(a) {
+				color: $link-color-light;
+				text-decoration-color: $link-color-light;
+			}
 
 			code {
-				background: theming.daff-illuminate($base, $primary, 1);
-				color: theming.daff-illuminate($base-contrast, $primary, 4);
+				background: rgba(theming.daff-color($neutral, 20), 0.5);
 			}
-		}
 
-		pre {
-			background: theming.daff-illuminate($base, $neutral, 1);
-			border: 1px solid theming.daff-illuminate($base, $neutral, 2);
-			color: $base-contrast;
+			pre {
+				background: rgba(theming.daff-color($neutral, 20), 0.3);
+				border: 1px solid theming.daff-color($neutral, 20);
 
-			code {
-				background: none;
-				border: none;
+				code {
+					background: none;
+					border: none;
+				}
 			}
-		}
 
-		code {
-			background: rgba(theming.daff-illuminate($base, $neutral, 2), 0.5);
-			color: $base-contrast;
-		}
+			hr {
+				background: theming.daff-color($neutral, 20);
+			}
 
-		hr {
-			background: theming.daff-illuminate($base, $neutral, 2);
-		}
+			blockquote {
+				background: rgba(theming.daff-color($primary), 0.1);
+				border-left: 4px solid theming.daff-color($primary, 50);
+				color: theming.daff-color($primary, 100);
 
-		blockquote {
-			background: rgba(theming.daff-color($primary), 0.1);
-			border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
-			color: theming.daff-illuminate($base-contrast, $primary, 1);
+				code {
+					background: rgba(theming.daff-color($primary), 0.12);
+					color: theming.daff-color($primary, 100);
 
-			code {
-				background: rgba(theming.daff-color($primary), 0.15);
-				color: $base-contrast;
+					@include stopsArticleCascade(a) {
+						color: theming.daff-color($primary, 70);
+						text-decoration-color: theming.daff-color($primary, 70);
+					}
+				}
 			}
 
-			@include stopsArticleCascade(a) {
-				color: theming.daff-illuminate($base, $primary, 7);
+			table {
+				border: 1px solid $table-border-light;
+
+				th {
+					background: theming.daff-color($neutral, 10);
+				}
+
+				th,
+				td {
+					&:not(:last-child) {
+						border-right: 1px solid $table-border-light;
+					}
+				}
+
+				thead {
+					th {
+						border-bottom: 1px solid $table-border-light;
+					}
+				}
+
+				tr {
+					&:not(:last-child) {
+						th,
+						td {
+							border-bottom: 1px solid $table-border-light;
+						}
+					}
+				}
 			}
+		}
+
+		@include theming.dark($type) {
+			color: $text-color-dark;
 
 			@include stopsArticleCascade(a) {
+				color: $link-color-dark;
+				text-decoration-color: $link-color-dark;
+			}
+
+			code {
+				background: rgba(theming.daff-color($neutral, 20), 0.15);
+			}
+
+			pre {
+				background: rgba(theming.daff-color($neutral, 20), 0.15);
+				border: 1px solid rgba(theming.daff-color($neutral, 20), 0.15);
+
 				code {
-					background: rgba(theming.daff-color($primary), 0.15);
-					color: theming.daff-illuminate($base-contrast, $primary, 4);
+					background: none;
+					border: none;
 				}
 			}
-		}
 
-		table {
-			th {
-				background: theming.daff-illuminate($base, $neutral, 1);
-				border: 1px solid $table-border-color;
+			hr {
+				background: theming.daff-color($neutral, 80);
 			}
 
-			td {
-				border: 1px solid $table-border-color;
+			blockquote {
+				background: rgba(theming.daff-color($primary), 0.12);
+				border-left: 4px solid theming.daff-color($primary, 40);
+				color: theming.daff-color($primary, 10);
+
+				code {
+					background: rgba(theming.daff-color($primary), 0.18);
+					color: theming.daff-color($primary, 10);
+
+					@include stopsArticleCascade(a) {
+						color: theming.daff-color($primary, 40);
+						text-decoration-color: theming.daff-color($primary, 40);
+					}
+				}
+			}
+
+			table {
+				border: 1px solid $table-border-dark;
+
+				th {
+					background: theming.daff-color($neutral, 90);
+				}
+
+				th,
+				td {
+					&:not(:last-child) {
+						border-right: 1px solid $table-border-dark;
+					}
+				}
+
+				thead {
+					th {
+						border-bottom: 1px solid $table-border-dark;
+					}
+				}
+
+				tr {
+					&:not(:last-child) {
+						th,
+						td {
+							border-bottom: 1px solid $table-border-dark;
+						}
+					}
+				}
 			}
 		}
 	}

package/breadcrumb/README.md

@@ -2,21 +2,27 @@
 Breadcrumbs are a secondary navigation that displays a user's location within a website or application.
 
 ## Overview
-Breadcrumbs are a visual representation of the site's navigational hierarchy. They indicate the current page's location and allows users to easily move up to a parent level. It's required for breadcrumbs to be used with the native HTML `<ol>` element, and for each item to be an `<li>`. This offers additional context for assistive technology.
+Breadcrumbs are a visual representation of the site's navigational hierarchy. They indicate the current page's location and allows users to easily move up to a parent level.
 
-## Basic Breadcrumb
-<design-land-example-viewer-container example="basic-breadcrumb"></design-land-example-viewer-container>
+## Requirements
+- `[daff-breadcrumb]` is required to be used with the native HTML `<ol>` element.
+- Each `[daffBreadcrumbItem]` needs to be a `<li>` element.
 
-## Usage
+## Structure
+Breadcrumbs are built using `[daff-breadcrumb]` and `[daffBreadCrumbItem]`.
 
-## Within a standalone component
-To use breadcrumb in a standalone component, import it directly into your custom component:
+- **`[daff-breadcrumb]`**: a wrapper for grouping breadcrumb items.
+- **`[daffBreacrumbItem]`**: used to display each breadcrumb item.
+
+<design-land-example-viewer-container example="basic-breadcrumb"></design-land-example-viewer-container>
 
+## Usage
 ```ts
+import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_BREADCRUMB_COMPONENTS,
   ],
@@ -24,29 +30,33 @@ To use breadcrumb in a standalone component, import it directly into your custom
 export class CustomComponent {}
 ```
 
-## Within a module (deprecated)
-To use breadcrumb in a module, import `DaffBreadcrumbModule` into your custom module:
+```html
+<ol daff-breadcrumb>
+  <li daffBreadcrumbItem>
+    <a routerLink="/link">Link</a>
+  </li>
+  <li daffBreadcrumbItem>
+    <a routerLink="/link">Link</a>
+  </li>
+  <li daffBreacrumbItem>
+    <span>Active Link</span>
+  </li>
+</ol>
+```
 
-```ts
-import { NgModule } from '@angular/core';
+## Accessibility
+Breadcrumb follows the [Breadcrumb WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
 
-import { DaffBreadcrumbModule } from '@daffodil/design/breadcrumb';
+- `aria-current="page"` is automatically applied to the last item to indicate that it represents the current page.
 
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffBreadcrumbModule,
-  ],
-})
-export class CustomComponentModule { }
-```
+In order to fully comply with the WAI-ARIA design pattern:
 
-> This method is deprecated. It's recommended to update all custom components to standalone.
+- Breadcrumbs should be wrapped in a native HTML `<nav>` element so that assistive technologies can present the breadcrumbs as a navigational element on the page.
+- Use `aria-label="Breadcrumb"` on the `nav` element to provide more context into what kind of navigation it is.
 
-## Accessibility
-Breadcrumbs should be wrapped in a native HTML `<nav>` element so that assistive technologies can present the breadcrumbs as a navigational element on the page. Use `aria-label="Breadcrumbs"` on the `nav` element to provide more context. `aria-current="page"` is added to a breadcrumb item when it's the current page, and `aria-current="false"` on all other items.
+```html
+<nav aria-label="breadcrumb">
+  <ol daff-breadcrumb>
+  </ol>
+</nav>
+```

package/breadcrumb/breadcrumb/breadcrumb.component.d.ts

@@ -1,7 +1,20 @@
+import { QueryList, AfterContentInit, DestroyRef } from '@angular/core';
+import { DaffBreadcrumbItemDirective } from '../breadcrumb-item/breadcrumb-item.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-export declare class DaffBreadcrumbComponent {
+export declare class DaffBreadcrumbComponent implements AfterContentInit {
+    private destroyRef;
+    constructor(destroyRef: DestroyRef);
+    /**
+     * @docs-private
+     */
     class: boolean;
+    /**
+     * @docs-private
+     */
+    breadcrumbItems: QueryList<DaffBreadcrumbItemDirective>;
+    ngAfterContentInit(): void;
+    private updateActiveState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBreadcrumbComponent, "ol[daff-breadcrumb]", never, {}, {}, never, ["[daffBreadcrumbItem]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBreadcrumbComponent, "ol[daff-breadcrumb]", never, {}, {}, ["breadcrumbItems"], ["[daffBreadcrumbItem]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts

@@ -1,9 +1,23 @@
+import { ChangeDetectorRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class DaffBreadcrumbItemDirective {
+    private cdRef;
+    /**
+     * @docs-private
+     */
     class: boolean;
-    get ariaCurrent(): "page" | "false";
-    /** Whether or not the breadcrumb item is active */
-    active: boolean;
+    /**
+     * @docs-private
+     */
+    get activeClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get ariaCurrent(): string;
+    private _active;
+    constructor(cdRef: ChangeDetectorRef);
+    /** Called by the DaffBreadcrumbComponent to set the active state */
+    setActive(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffBreadcrumbItemDirective, "li[daffBreadcrumbItem]", never, { "active": { "alias": "active"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffBreadcrumbItemDirective, "li[daffBreadcrumbItem]", never, {}, {}, never, never, true, never>;
 }

package/breadcrumb/breadcrumb.d.ts

@@ -1,3 +1,6 @@
 import { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_BREADCRUMB_COMPONENTS: readonly [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemDirective];