@daffodil/design 0.86.0 → 0.87.1

package/accordion/README.md

@@ -1,21 +1,14 @@
 # Accordion
-An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
+An accordion is a group of vertically stacked headings that allow users to toggle the visibility of related content.
 
 ## Overview
-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.
+Accordions helps reduce scrolling by hiding non-essential information until it’s needed. Use it to organize content into collapsible sections. This is especially useful for long pages where not all information needs to be visible at once.
 
 <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
 
-## Formatting
-Accordions are built using `<daff-accordion>`, `<daff-accordion-item>`, and `[daffAccordionItemTitle]`.
-
-- **`<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.
-
-Any additional content placed inside of an accordion item will be displayed as part of the collapsible content.
-
 ## Usage
+To use the accordion components, import `DAFF_ACCORDION_COMPONENTS` into your custom component:
+
 ```ts
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 
@@ -29,43 +22,52 @@ import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
 export class CustomComponent {}
 ```
 
+## Anatomy
+An accordion is composed of the following:
+
+- **`<daff-accordion>`**: Groups accordion items.
+- **`<daff-accordion-item>`**: Contains the title and collapsible content. Handles expansion and collapse on user interaction.
+- **`[daffAccordionItemTitle]`**: Used to provide a high level overview of the panel content.
+
+Content inside `<daff-accordion-item>` (excluding the title) is part of the panel content that is shown or hidden when the item is toggled.
+
 ```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-item>
+   <div daffAccordionItemTitle>Title</div>
+   <div>Expandable content</div>
+ </daff-accordion-item>
 </daff-accordion>
 ```
 
-## Examples
+## Expand an item by default
+Use the `initiallyExpanded` property on the accordion item to have an item open by default.
 
-### Expand an item by default
-Use the `initiallyExpanded` property on the accordion item to have it opened by default.
+<design-land-example-viewer-container example="initially-expanded-accordion"></design-land-example-viewer-container>
 
-```html
-<daff-accordion-item [initiallyExpanded]="true"></daff-accordion-item>
-```
+## Disable an accordion item
+Use the `disabled` property on the accordion item to disable and prevent it from being expanded or collapsed.
 
-### 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>
-```
+<design-land-example-viewer-container example="disabled-accordion"></design-land-example-viewer-container>
 
 ## 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.
+Titles act as buttons with:
+- `role="button"`
+- A unique `id`, defined by the `contentId` property.
+- `aria-expanded` to indicate current state.
+- `aria-controls` property linked to the associated panel content.
+
+Content blocks include:
+- `role="region"`
+- A unique `id`, defined by the `itemId` property.
+- `aria-labelledby` property linked to the corresponding title.
+
+IDs are autogenerated by default but can be overridden via the `contentId` and `itemId` inputs on `<daff-accordion-item>`.
 
 ### 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. |
+| `Space` / `Enter` | Expands or collapses the focused accordion item's panel content. |

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

@@ -1,7 +1,21 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 /**
- * A wrapper for grouping accordion items.
+ * Groups accordion items.
+ *
+ * @example
+ * ```html
+ * <daff-accordion>
+ *  <daff-accordion-item>
+ *    <div daffAccordionItemTitle>Title</div>
+ *    <div>Expandable content</div>
+ *  </daff-accordion-item>
+ *  <daff-accordion-item>
+ *    <div daffAccordionItemTitle>Title</div>
+ *    <div>Expandable content</div>
+ *  </daff-accordion-item>
+ * </daff-accordion>
+ * ```
  */
 export declare class DaffAccordionComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionComponent, never>;

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

@@ -3,8 +3,15 @@ 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.
+ * 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>`.
+ *
+ * @example
+ * ```html
+ *  <daff-accordion-item>
+ *    <div daffAccordionItemTitle>Title</div>
+ *    <div>Accordion content</div>
+ *  </daff-accordion-item>
+ * ```
  */
 export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
     private openDirective;
@@ -21,7 +28,7 @@ export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable
      */
     contentId: string;
     /**
-     * Whether or not the item is initially opened by default.
+     * Whether or not an accordion item is initially expanded by default.
      */
     initiallyExpanded: boolean;
     /**

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

@@ -1,6 +1,11 @@
 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>`.
+ * Used to provide a high level overview of the panel content. It should be wrapped by a `<daff-accordion-item>`.
+ *
+ * @example
+ * ```html
+ * <div daffAccordionItemTitle>Title</div>
+ * ```
  */
 export declare class DaffAccordionItemTitleDirective {
     /**

package/atoms/form/form-field/action/action.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class DaffFormFieldActionDirective {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldActionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormFieldActionDirective, "[daffFormFieldAction]", never, {}, {}, never, never, true, never>;
+}

package/atoms/form/form-field/form-field/form-field.component.d.ts

@@ -2,10 +2,12 @@ import { AfterContentInit, AfterContentChecked, ChangeDetectorRef, AfterViewInit
 import { DaffPrefixDirective } from '../../../../core/prefix-suffix/prefix.directive';
 import { DaffSuffixDirective } from '../../../../core/prefix-suffix/suffix.directive';
 import { DaffFormLabelDirective } from '../../form-label/form-label.directive';
+import { DaffFormFieldActionDirective } from '../action/action.directive';
 import { DaffFormFieldControl } from '../form-field-control';
 import { DaffFormFieldLabelDirective } from '../label/label.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../core/skeletonable/skeletonable.directive";
+export type DaffFormFieldApperanace = 'fluid' | 'fixed';
 export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
     private cd;
     /** @docs-private */
@@ -15,8 +17,16 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
     constructor(cd: ChangeDetectorRef);
     /** @docs-private */
     _prefix: DaffPrefixDirective;
+    /**
+     * @docs-private
+     */
+    get hasPrefixClass(): DaffPrefixDirective;
     /** @docs-private */
     _suffix: DaffSuffixDirective;
+    /**
+     * @docs-private
+     */
+    get hasSuffixClass(): DaffSuffixDirective | DaffFormFieldActionDirective;
     /**
      * @docs-private
      *
@@ -32,6 +42,10 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      * @docs-private
      */
     _formFieldLabelDirective: DaffFormFieldLabelDirective;
+    /**
+     * @docs-private
+     */
+    _action: DaffFormFieldActionDirective;
     /**
      * @docs-private
      */
@@ -94,6 +108,24 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      * @docs-private
      */
     get raisedClass(): boolean;
+    private _appearance;
+    /**
+     * The appearance style of a form field, whether the label is fluid or fixed.
+     */
+    get appearance(): DaffFormFieldApperanace;
+    set appearance(value: DaffFormFieldApperanace);
+    /**
+     * @docs-private
+     */
+    get fluidClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get fixedClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get isFixed(): boolean;
     /**
      * The unique id of the form field. Defaults to an autogenerated value. When using this,
      * it's your responsibility to ensure that the id for each form field is unique.
@@ -152,5 +184,5 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      */
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "id": { "alias": "id"; "required": false; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_hint", "_error"], ["[daffPrefix]", "label[daffFormLabel]", "daff-form-label", "label", "*", "[daffSuffix]", "daff-hint", "daff-error-message"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_action", "_hint", "_error"], ["*", "[daffPrefix]", "*", "[daffSuffix]", "daff-hint", "daff-error-message", "[daffFormFieldAction]", "label[daffFormLabel]", "daff-form-label", "label"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/atoms/form/form-field/form-field.d.ts

@@ -4,8 +4,9 @@ import { DaffSuffixDirective } from '../../../core/prefix-suffix/suffix.directiv
 import { DaffErrorMessageComponent } from '../error-message/error-message.component';
 import { DaffFormLabelDirective } from '../form-label/form-label.directive';
 import { DaffHintComponent } from '../hint/hint.component';
+import { DaffFormFieldActionDirective } from './action/action.directive';
 import { DaffFormFieldLabelDirective } from './label/label.directive';
 /**
  * @docs-private
  */
-export declare const DAFF_FORM_FIELD_COMPONENTS: readonly [typeof DaffFormFieldComponent, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective, typeof DaffHintComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective, typeof DaffFormFieldLabelDirective];
+export declare const DAFF_FORM_FIELD_COMPONENTS: readonly [typeof DaffFormFieldComponent, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective, typeof DaffHintComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective, typeof DaffFormFieldLabelDirective, typeof DaffFormFieldActionDirective];

package/atoms/form/form-field/public_api.d.ts

@@ -3,3 +3,4 @@ export { DaffFormFieldComponent } from './form-field/form-field.component';
 export { DaffFormFieldControl } from './form-field-control';
 export { DAFF_FORM_FIELD_COMPONENTS } from './form-field';
 export { DaffFormFieldLabelDirective } from './label/label.directive';
+export { DaffFormFieldActionDirective } from './action/action.directive';

package/breadcrumb/README.md

@@ -1,22 +1,14 @@
 # Breadcrumb
-Breadcrumbs are a secondary navigation that displays a user's location within a website or application.
+Breadcrumb is a secondary navigation pattern that shows users their current location within a website or application’s hierarchy.
 
 ## 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.
-
-## Requirements
-- `[daff-breadcrumb]` is required to be used with the native HTML `<ol>` element.
-- Each `[daffBreadcrumbItem]` needs to be a `<li>` element.
-
-## Structure
-Breadcrumbs are built using `[daff-breadcrumb]` and `[daffBreadCrumbItem]`.
-
-- **`[daff-breadcrumb]`**: a wrapper for grouping breadcrumb items.
-- **`[daffBreacrumbItem]`**: used to display each breadcrumb item.
+Breadcrumbs visually represent the navigational structure of a site or app and helps users navigate to parent levels with ease. Each breadcrumb item corresponds to a level in the hierarchy, with the last item indicating the current page or context.
 
 <design-land-example-viewer-container example="basic-breadcrumb"></design-land-example-viewer-container>
 
 ## Usage
+To use the breadcrumb components, import `DAFF_BREADCRUMB_COMPONENTS` into your custom component:
+
 ```ts
 import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
 
@@ -30,16 +22,19 @@ import { DAFF_BREADCRUMB_COMPONENTS } from '@daffodil/design/breadcrumb';
 export class CustomComponent {}
 ```
 
+## Anatomy
+A breadcrumb is composed of the following:
+
+- **`[daff-breadcrumb]`**: Groups breadcrumb items. Must be applied to a native `<ol>` element.
+- **`[daffBreacrumbItem]`**: Represents each individual breadcrumb item. Must be used on a `<li>` element.
+
 ```html
 <ol daff-breadcrumb>
   <li daffBreadcrumbItem>
-    <a routerLink="/link">Link</a>
-  </li>
-  <li daffBreadcrumbItem>
-    <a routerLink="/link">Link</a>
+    <a routerLink="/">Home</a>
   </li>
   <li daffBreacrumbItem>
-    <span>Active Link</span>
+    <span>Current page</span>
   </li>
 </ol>
 ```
@@ -47,16 +42,23 @@ export class CustomComponent {}
 ## Accessibility
 Breadcrumb follows the [Breadcrumb WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
 
-- `aria-current="page"` is automatically applied to the last item to indicate that it represents the current page.
+- The last breadcrumb item is automatically assigned `aria-current="page"` to indicate the current page.
 
-In order to fully comply with the WAI-ARIA design pattern:
+### Best practices
+To ensure full accessibility compliance  with the WAI-ARIA design pattern:
 
-- 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.
+- Wrap the breadcrumb in a `<nav>` element so assistive technologies can present the breadcrumb as a navigational element on the page.
+- Provide a descriptive `aria-label` on the `<nav>` element to identify the type of navigation.
 
 ```html
-<nav aria-label="breadcrumb">
+<nav aria-label="Category breadcrumb">
   <ol daff-breadcrumb>
+    <li daffBreadcrumbItem>
+      <a routerLink="/">Home</a>
+    </li>
+    <li daffBreadcrumbItem>
+      <span>Current Page</span>
+    </li>
   </ol>
 </nav>
 ```

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

@@ -2,6 +2,21 @@ 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";
+/**
+ * Groups breadcrumb items. Must be applied to a native `<ol>` element.
+ *
+ * @example
+ * ```html
+ * <ol daff-breadcrumb>
+ *  <li daffBreadcrumbItem>
+ *    <a routerLink="/">Home</a>
+ *  </li>
+ *  <li daffBreacrumbItem>
+ *    <span>Current page</span>
+ *  </li>
+ * </ol>
+ * ```
+ */
 export declare class DaffBreadcrumbComponent implements AfterContentInit {
     private destroyRef;
     constructor(destroyRef: DestroyRef);

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

@@ -1,5 +1,15 @@
 import { ChangeDetectorRef } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Represents each individual breadcrumb item. Must be used on a `<li>` element.
+ *
+ * @example
+ * ```html
+ * <li daffBreadcrumbItem>
+ *  <a routerLink="/">Link</a>
+ * </li>
+ * ```
+ */
 export declare class DaffBreadcrumbItemDirective {
     private cdRef;
     /**

package/button/README.md

@@ -1,55 +1,63 @@
 # Button
-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.
+Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.
 
 ## Overview
-Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
+Button supports five variants that change its visual style, each applied as an attribute:
 
-- `<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.
+| Attribute | Description |
+| --------- | ----------- |
+| `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-underline-button` | Text button with underline styling |
 
-## 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-stroked-button` - Rectangular outlined button with no background color
-
-### Basic Button
+**Basic button**
 <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
 
-### Flat Button
+**Flat button**
 <design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
 
-### Stroked button
+**Stroked button**
 <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
 
 > `dark`, `light`, and `theme` should be used with caution to ensure that there is sufficient contrast.
 
-### Icon button
+**Icon button**
 <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
 
 > `dark`, `light`, 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>
+## When to use
+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.
 
 ## Usage
 
 ### Within a standalone component
-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`:
+To use button in a standalone component, import each button type directly into your custom component.
+
+Available imports:
+- `DAFF_BASIC_BUTTON_COMPONENTS`
+- `DAFF_FLAT_BUTTON_COMPONENTS`
+- `DAFF_ICON_BUTTON_COMPONENTS`
+- `DAFF_STROKED_BUTTON_COMPONENTS`
+- `DAFF_UNDERLINE_BUTTON_COMPONENTS`
+- `DAFF_BUTTON_COMPONENTS` (all types)
 
 ```ts
-import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button';
 
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
   imports: [
-    DaffButtonComponent,
+    DAFF_BASIC_BUTTON_COMPONENTS,
   ],
 })
 export class CustomComponent {}
@@ -79,41 +87,49 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
+## Anatomy
+Buttons should always have a label, unless you are only using an icon that is universally understood and accessible.
+
+### 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.
+
+```html
+<button daff-button>
+  <fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
+  Button label
+</button>
+
+<button daff-button>
+  Button label
+  <fa-icon [faIcon]="faArrowRight" daffPrefix></fa-icon>
+</button>
+```
+
 ## Sizes
-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.
+Use the `size` property to control button dimensions. The default size is `md`.
 
 <design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
 
 ## Colors
-Use the `color` property to change the color of a button. The default color is light gray.
+Use the `color` property to change the color of a button.
 
-> For select button types, `dark` and `light` should be used on a darker background in order to have sufficient contrast.
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for 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. Use the `status` property to change the status.
+Status indicators help users understand the type of action a button performs and its importance relative to other buttons in the same context. Use the `status` property to convey different semantic meanings.
 
 <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.
+Add shadows to buttons with the `elevated` property.
 
-<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.
+> Note: The `elevated` property is not supported for flat, icon, and underline buttons.
 
-```html
-<button daff-button>
-  <fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
-  Button Content
-  <fa-icon [faIcon]="faUser" daffSuffix></fa-icon>
-</button>
-```
+<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
 
 ## 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.
-
-Buttons and links containing only icons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.
+- 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`.

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

@@ -5,18 +5,24 @@ import * as i1 from "@daffodil/design";
 import * as i2 from "./button-sizable.directive";
 export declare class DaffButtonBaseDirective {
     private size;
+    /**
+     * @docs-private
+     */
     _prefix: DaffPrefixDirective;
-    _suffix: DaffSuffixDirective;
-    constructor(size: DaffButtonSizableDirective);
     /**
      * @docs-private
      */
-    get disabledClass(): any;
+    _suffix: DaffSuffixDirective;
+    constructor(size: DaffButtonSizableDirective);
     /**
-     * Sets the tabindex. Defaults to 0.
+     * Sets the tabindex.
      */
     tabindex: number;
     private _disabled;
+    /**
+     * @docs-private
+     */
+    get disabledClass(): any;
     /**
      * The disabled state of the button.
      */

package/button/button.d.ts

@@ -1,3 +1,4 @@
+import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
 import { DaffButtonComponent } from './button/basic/button.component';
 import { DaffFlatButtonComponent } from './button/flat/flat.component';
 import { DaffIconButtonComponent } from './button/icon/icon.component';
@@ -7,4 +8,24 @@ import { DaffUnderlineButtonComponent } from './button/underline/underline.compo
 /**
  * @docs-private
  */
-export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_BASIC_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_FLAT_BUTTON_COMPONENTS: readonly [typeof DaffFlatButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_ICON_BUTTON_COMPONENTS: readonly [typeof DaffIconButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_STROKED_BUTTON_COMPONENTS: readonly [typeof DaffStrokedButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_UNDERLINE_BUTTON_COMPONENTS: readonly [typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];

package/button/public_api.d.ts

@@ -1,5 +1,5 @@
 export { DaffButtonModule } from './button.module';
-export { DAFF_BUTTON_COMPONENTS } from './button';
+export { DAFF_BUTTON_COMPONENTS, DAFF_BASIC_BUTTON_COMPONENTS, DAFF_FLAT_BUTTON_COMPONENTS, DAFF_ICON_BUTTON_COMPONENTS, DAFF_STROKED_BUTTON_COMPONENTS, DAFF_UNDERLINE_BUTTON_COMPONENTS, } from './button';
 export { DaffButtonComponent } from './button/basic/button.component';
 export { DaffFlatButtonComponent } from './button/flat/flat.component';
 export { DaffRaisedButtonComponent } from './button/raised/raised.component';

package/button/src/button/button-base.scss

@@ -23,7 +23,6 @@
 
 @mixin daff-button-base {
 	@include interactions.clickable();
-	@include t.text-truncate();
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;

package/button/src/button/raised/raised-theme.scss

@@ -42,7 +42,7 @@
 
 	.daff-raised-button {
 		@include daff-raised-button-theme-variant(
-			daff-illuminate($base, $neutral, 2)
+			daff-color($neutral, 20)
 		);
 
 		&.daff-primary {
@@ -76,9 +76,9 @@
 		&[disabled],
 		&.disabled {
 			@include daff-raised-button-theme-variant(
-				daff-illuminate($base, $neutral, 3)
+				daff-color($neutral, 30)
 			);
-			color: daff-illuminate($base, $neutral, 5);
+			color: daff-color($neutral, 50);
 
 			&::after {
 				box-shadow: none;