@daffodil/design 0.81.1 → 0.82.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/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

@@ -46,6 +46,10 @@
 		code {
 			background: rgba(theming.daff-illuminate($base, $neutral, 2), 0.5);
 			color: $base-contrast;
+
+			@include stopsArticleCascade(a) {
+				color: theming.daff-color($primary, 70);
+			}
 		}
 
 		hr {
@@ -75,13 +79,32 @@
 		}
 
 		table {
+			border: 1px solid $table-border-color;
+
 			th {
 				background: theming.daff-illuminate($base, $neutral, 1);
-				border: 1px solid $table-border-color;
 			}
 
+			th,
 			td {
-				border: 1px solid $table-border-color;
+				&:not(:last-child) {
+					border-right: 1px solid $table-border-color;
+				}
+			}
+
+			thead {
+				th {
+					border-bottom: 1px solid $table-border-color;
+				}
+			}
+
+			tr {
+				&:not(:last-child) {
+					th,
+					td {
+						border-bottom: 1px solid $table-border-color;
+					}
+				}
 			}
 		}
 	}

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];

package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class IteratedBreadcrumbComponent {
+    breadcrumbs: any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<IteratedBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IteratedBreadcrumbComponent, "iterated-breadcrumb", never, {}, {}, never, never, true, never>;
+}

package/breadcrumb/public_api.d.ts

@@ -1,4 +1,4 @@
-export * from './breadcrumb/breadcrumb.component';
-export * from './breadcrumb-item/breadcrumb-item.directive';
+export { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+export { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
 export { DAFF_BREADCRUMB_COMPONENTS } from './breadcrumb';
 export { DaffBreadcrumbModule } from './breadcrumb.module';

package/button/README.md

@@ -1,46 +1,53 @@
 # Button
-The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
+Buttons are used to make actions apparent to the end user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
 
 ## Overview
 Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
+
 - `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
 - `<button>` should be used when a clickable action is performed within the same page.
 
 ## Types
+Button supports five types that change its visual style.
+
 - `daff-button` - Rectangular contained button with background color
+- `daff-flat-button` - Rectangular contained button with no outline or background color
 - `daff-icon-button` - Icon button used with icon fonts
-- `daff-raised-button` - Rectangular contained button with background color and elevation
 - `daff-stroked-button` - Rectangular outlined button with no background color
 
 ### Basic Button
 <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
 
-### Stroked Button
+### Flat Button
+<design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
+
+### Stroked button
 <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
 
 > `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
 
-### Raised Button
-<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
-
-### Icon Button
+### Icon button
 <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
 
 > `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
 
-### Underline Button
+### Underline button
 <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
 
+### Raised button (deprecated)
+<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
+
 ## Usage
 
 ### Within a standalone component
-To use button in a standalone component, import it directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
+To use button in a standalone component, import each button type directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
 
 ```ts
+import { DaffButtonComponent } from '@daffodil/design/button';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DaffButtonComponent,
   ],
@@ -53,8 +60,8 @@ To use button in a module, import `DaffButtonModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffButtonModule } from '@daffodil/design/button';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -73,27 +80,40 @@ export class CustomComponentModule { }
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
 ## Sizes
-The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
-
-Supported Sizes: `sm | md | lg`
+Use the `size` property to specify a button size. Setting this property will change the height and padding of a button. The size of all variants will default to `md` if none is defined.
 
 <design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
 
-## Theming
-The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
-
-Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+## Colors
+Use the `color` property to change the color of a button. The default color is light gray.
 
 > For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
 
-## Status Indicators
-Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
-
-Supported statuses: `warn | critical | success`
+## Status indicators
+Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context. Use the `status` property to change the status.
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 
+## Elevation
+Use the `elevated` property to add a shadow to buttons. Note that the `elevated` property is not supported for flat, icon, and underline buttons.
+
+<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
+
+## Icon support
+An icon can be rendered on either side of the button text content with the `daffPrefix` and `daffSuffix` selectors.
+
+```html
+<button daff-button>
+  <fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
+  Button Content
+  <fa-icon [faIcon]="faUser" daffSuffix></fa-icon>
+</button>
+```
+
 ## Accessbility
-Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default. The `<button>` element should be used when a clickable action is performed within the same page. The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
+Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default.
+
+- The `<button>` element should be used when a clickable action is performed within the same page.
+- The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
 
 Buttons and links containing only icons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.

package/button/button/basic/button.component.d.ts

@@ -23,6 +23,10 @@ export declare class DaffButtonComponent extends DaffButtonBaseDirective {
      * @docs-private
      */
     class: boolean;
+    /**
+     * Whether or not the button displays a shadow.
+     */
+    elevated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/button/button/button-base.directive.d.ts

@@ -30,21 +30,29 @@ export declare class DaffButtonBaseDirective extends _daffButtonBase implements
     get disabledClass(): any;
     loading: boolean;
     /**
-     * Set the `tabindex` to 0.
+     * Sets the tabindex. Defaults to 0.
      */
     tabindex: number;
-    _disabled: boolean;
+    private _disabled;
     /**
      * The disabled state of the button.
      */
     get disabled(): any;
     set disabled(value: any);
+    /**
+     * @docs-private
+     */
     get disabledAttribute(): boolean;
+    /**
+     * @docs-private
+     */
     get ariaDisabled(): boolean;
     /**
+     * @docs-private
+     *
      * Set the `tabindex` to -1 if the button is disabled.
      */
-    get disabledTabIndex(): number;
+    get tabIndexAttribute(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }