@daffodil/design 0.91.0 → 0.92.3-rc.1

package/accordion/README.md

@@ -4,7 +4,7 @@ An accordion is a group of vertically stacked, collapsible sections that allow u
 ## Overview
 Accordions help reduce scrolling by hiding non-essential information until it's needed. They organize content into collapsible sections, making it easier for users to find and focus on information relevant to them. 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>
+<daff-docs-example-viewer example="basic-accordion"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -17,7 +17,7 @@ Accordions help reduce scrolling by hiding non-essential information until it's
 - The content is very short and hiding it adds unnecessary complexity (use [list](/libs/design/list/README.md) instead)
 
 ## Usage
-To use accordion, import `DAFF_ACCORDION_COMPONENTS` directly into your custom component:
+Import `DAFF_ACCORDION_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
@@ -33,60 +33,48 @@ export class CustomComponent {}
 ```
 
 ## Anatomy
-An accordion consists of the following components:
+An accordion is composed of a container, items, titles, and content:
 
-### Container
-**`<daff-accordion>`**: The wrapper component that groups all accordion items together.
-
-### Item
-**`<daff-accordion-item>`**: Individual collapsible section containing a title and content. Handles expansion and collapse on user interaction.
-
-### Title
-**`[daffAccordionItemTitle]`**: The clickable header that toggles the accordion item's visibility.
-
-### Content
-Content placed inside `<daff-accordion-item>` (excluding the title) forms the collapsible panel content that is shown or hidden when toggled.
-
-### Basic structure
 ```html
 <daff-accordion>
- <daff-accordion-item>
-   <div daffAccordionItemTitle>Title</div>
-   <div>Expandable content</div>
- </daff-accordion-item>
+  <daff-accordion-item>
+    <h3 daffAccordionItemTitle>Title</h3>
+    <div>Expandable content</div>
+  </daff-accordion-item>
 </daff-accordion>
 ```
 
+- **`<daff-accordion>`**: The wrapper component that groups all accordion items together.
+- **`<daff-accordion-item>`**: Individual collapsible section containing a title and content. Handles expansion and collapse on user interaction.
+- **`[daffAccordionItemTitle]`**: The clickable header that toggles the accordion item's visibility.
+- **Content**: Content placed inside `<daff-accordion-item>` (excluding the title) forms the collapsible panel content that is shown or hidden when toggled.
+
 ## Features
 
-### Expand an item by default
+### Expanding by default
 Use the `initiallyExpanded` property on the accordion item to have an item open by default.
 
-<design-land-example-viewer-container example="initially-expanded-accordion"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="initially-expanded-accordion"></daff-docs-example-viewer>
 
-### Disable an accordion item
+### Disabling an item
 Use the `disabled` property on the accordion item to disable and prevent it from being expanded or collapsed.
 
-<design-land-example-viewer-container example="disabled-accordion"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="disabled-accordion"></daff-docs-example-viewer>
 
 ## Accessibility
 Accordion follows the [Accordion WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
 
-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.
+### Daffodil provides
+- `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>`)
 
-IDs are autogenerated by default but can be overridden via the `contentId` and `itemId` inputs on `<daff-accordion-item>`.
-
-### Keyboard interactions
+#### Keyboard interactions
 | Key | Action |
 | --- | ------ |
 | `Tab` | Moves focus to the next focusable element. |
-| `Space` / `Enter` | Expands or collapses the focused accordion item's panel content. |
+| `Enter` / `Space` | Expands or collapses the focused accordion item's panel content. |
+
+### Developer responsibilities
+- Wrap titles in an appropriate heading element (`<h2>`, `<h3>`, etc.) so the accordion contributes to the page's heading structure
+- Provide concise, descriptive title text

package/accordion/index.d.ts

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { OnInit } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-import { DaffOpenable, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
+import { DaffOpenable, DaffDisableable, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * Groups accordion items.
@@ -37,7 +37,7 @@ declare class DaffAccordionComponent {
  *  </daff-accordion-item>
  * ```
  */
-declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
+declare class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDisableable {
     private openDirective;
     private disabledDirective;
     /**

package/article/README.md

@@ -1,52 +1,8 @@
 # Article
-Article provides styles to common element selectors to create an article in a content page.
+Article provides styles for common HTML elements to create readable, well-formatted content pages.
 
 ## Overview
-Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
-
-## Supported elements
-
-### Headings
-<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
-
-### Article Meta
-Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add `daffArticleMeta` to a paragraph (`<p>`).
-
-<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>
-
-### Link
-The link style in an article uses the default browser link style.
-
-<design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>
-
-### Table
-<design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
-
-### Lists
-
-#### Unordered list
-<design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
-
-#### Ordered list
-<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
-
-### Code
-These are styles for inline and multiline blocks of code. By default, a copy button is added to all code blocks. Disable this by adding a `nocopy` attribute to the `pre` element.
-
-#### Inline code
-<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
-
-#### Code blocks
-<design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
-
-### Horizontal rules
-<design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
-
-### Blockquote
-<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
-
-## Encapsulation
-Articles also support other custom "non-native" components like [accordions](/libs/design/accordion/README.md), [media galleries](/libs/design/media-gallery/README.md), and [lists](/libs/design/list/README.md). Unlike typical HTML (`<p>`, `<ol>`, `<ul>`, etc) content, these components must be style encaspulated to prevent article styles bleeding down from the article into their content. Many Daffodil components support this out of the box. If you have a custom component that you would like to place inside an article, you can use the `DaffArticleEncapsulatedDirective` on your component to prevent article styles bleeding into your component.
+Article is designed for content pages that display large blocks of text-driven information.
 
 ## Usage
 
@@ -88,4 +44,68 @@ import { CustomComponent } from './custom.component';
 export class CustomComponentModule { }
 ```
 
+> **Warning**
+>
 > This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Custom elements
+
+### Meta
+Meta displays article metadata such as author name and date. It's a custom directive, not a native element selector. To use it, add `daffArticleMeta` to a paragraph (`<p>`).
+
+<daff-docs-example-viewer example="article-meta"></daff-docs-example-viewer>
+
+## Features
+
+### Heading anchor
+`<h2>`, `<h3>`, and `<h4>` headings include an anchor link that directs users to that section and a copy button that copies the heading URL to the clipboard. To disable this, add a `nolink` attribute to the heading element.
+
+<daff-docs-example-viewer example="article-headings"></daff-docs-example-viewer>
+
+### Code copy
+Code blocks include a copy button by default. To disable this, add a `nocopy` attribute to the `pre` element.
+
+#### Inline code
+<daff-docs-example-viewer example="article-code-inline"></daff-docs-example-viewer>
+
+#### Code blocks
+<daff-docs-example-viewer example="article-code-block"></daff-docs-example-viewer>
+
+### Encapsulation
+Articles support custom components like [accordion](/libs/design/accordion/README.md), [hero](/libs/design/hero/README.md), or [callout](/libs/design/callout/README.md). Unlike typical HTML elements (`<p>`, `<ol>`, `<ul>`, etc), these components must be style encapsulated to prevent article styles from bleeding into their content.
+
+The following Daffodil Design components are already encapsulated and can be used directiy:
+- Accordion
+- Breadcrumb
+- Button
+- Callout
+- Card
+- Hero
+- Link Set
+- List
+- Media Gallery
+- Notification
+- Tag
+- Toast
+- Tree
+
+For custom components, use the `DaffArticleEncapsulatedDirective` to prevent article styles from bleeding in.
+
+## Styled HTML elements
+
+### Table
+<daff-docs-example-viewer example="article-table"></daff-docs-example-viewer>
+
+### Lists
+
+#### Unordered list
+<daff-docs-example-viewer example="article-ul"></daff-docs-example-viewer>
+
+#### Ordered list
+<daff-docs-example-viewer example="article-ol"></daff-docs-example-viewer>
+
+### Horizontal rules
+<daff-docs-example-viewer example="article-hr"></daff-docs-example-viewer>
+
+### Blockquote
+<daff-docs-example-viewer example="article-blockquote"></daff-docs-example-viewer>

package/article/index.d.ts

@@ -19,12 +19,33 @@ declare class DaffArticleCopyButtonService {
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffArticleCopyButtonService>;
 }
 
+declare class DaffArticleHeadingLinkService {
+    private links;
+    /**
+     * Finds all h2, h3, and h4 elements and wraps their text content with heading link components.
+     * @param hostElement - The host element to search for heading elements.
+     * @param viewContainerRef - The view container to create the heading link components.
+     */
+    addLinksToHeadings(hostElement: HTMLElement, viewContainerRef: ViewContainerRef): void;
+    /**
+     * Cleanup heading link references
+     */
+    cleanup(): void;
+    /**
+     * Generates a URL-friendly fragment from heading text
+     */
+    private generateFragment;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleHeadingLinkService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DaffArticleHeadingLinkService>;
+}
+
 /**
  * A component for creating articles within your page.
  */
 declare class DaffArticleComponent {
     private copyButtonService;
-    constructor(copyButtonService: DaffArticleCopyButtonService);
+    private headingLinkService;
+    constructor(copyButtonService: DaffArticleCopyButtonService, headingLinkService: DaffArticleHeadingLinkService);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], true, never>;
 }

package/article/src/article-theme.scss

@@ -90,6 +90,12 @@
 					}
 				}
 			}
+
+			.daff-article-heading-link {
+				&__button {
+					color: daff-color($neutral, 70);
+				}
+			}
 		}
 
 		@include dark($mode) {
@@ -168,6 +174,12 @@
 					}
 				}
 			}
+
+			.daff-article-heading-link {
+				&__button {
+					color: daff-color($neutral, 30);
+				}
+			}
 		}
 	}
 }

package/breadcrumb/README.md

@@ -4,7 +4,7 @@ A breadcrumb is a secondary navigation pattern that shows users their current lo
 ## Overview
 Breadcrumbs visually represent the navigational structure of a site or app and help 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>
+<daff-docs-example-viewer example="basic-breadcrumb"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -79,6 +79,11 @@ A breadcrumb consists of the following components:
 </ol>
 ```
 
+## Features
+
+### Truncation
+Breadcrumbs are automatically truncated into an overflow menu on mobile viewports. On desktop, truncation occurs when more than five items are present.
+
 ## Accessibility
 Breadcrumb follows the [Breadcrumb WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
 

package/breadcrumb/index.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectorRef, AfterContentInit, DestroyRef, QueryList } from '@angular/core';
+import { TemplateRef, ChangeDetectorRef, AfterContentInit, DestroyRef, QueryList } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1 from '@daffodil/design';
 
 /**
@@ -12,15 +13,32 @@ import * as i1 from '@daffodil/design';
  * </li>
  * ```
  */
-declare class DaffBreadcrumbItemDirective {
+declare class DaffBreadcrumbItemComponent {
     private cdRef;
-    private _active;
+    /**
+     * @docs-private
+     */
+    itemRef: TemplateRef<any>;
+    /**
+     * @docs-private
+     */
+    _active: boolean;
     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, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBreadcrumbItemComponent, "li[daffBreadcrumbItem]", never, {}, {}, never, ["*"], true, never>;
+}
+
+interface DaffBreadcrumbRenderItem {
+    item: DaffBreadcrumbItemComponent;
+    type: 'breadcrumb';
+}
+interface DaffBreadcrumbRenderMenu {
+    type: 'menu';
+    target: 'mobileMenu' | 'desktopMenu';
 }
+type DaffBreadcrumbRender = DaffBreadcrumbRenderItem | DaffBreadcrumbRenderMenu;
 
 /**
  * Groups breadcrumb items. Must be applied to a native `<ol>` element.
@@ -39,32 +57,68 @@ declare class DaffBreadcrumbItemDirective {
  */
 declare class DaffBreadcrumbComponent implements AfterContentInit {
     private destroyRef;
-    constructor(destroyRef: DestroyRef);
+    private breakpointObserver;
+    constructor(destroyRef: DestroyRef, breakpointObserver: BreakpointObserver);
+    /**
+     * @docs-private
+     */
+    _isMobile: i0.WritableSignal<boolean>;
+    /**
+     * @docs-private
+     */
+    breadcrumbItems: QueryList<DaffBreadcrumbItemComponent>;
+    /**
+     * @docs-private
+     */
+    fullMenu: TemplateRef<unknown>;
+    /**
+     * @docs-private
+     */
+    partialMenu: TemplateRef<unknown>;
+    /**
+     * @docs-private
+     */
+    _breadcrumbItems: i0.Signal<readonly DaffBreadcrumbItemComponent[]>;
+    /**
+     * @docs-private
+     */
+    _partition: i0.Signal<{
+        visible: DaffBreadcrumbRender[];
+        menu: DaffBreadcrumbItemComponent[];
+    }>;
+    /**
+     * @docs-private
+     */
+    _computedBreadcrumbItems: i0.Signal<DaffBreadcrumbRender[]>;
+    /**
+     * @docs-private
+     */
+    _desktopMenuItems: i0.Signal<DaffBreadcrumbItemComponent[]>;
     /**
      * @docs-private
      */
-    breadcrumbItems: QueryList<DaffBreadcrumbItemDirective>;
+    _mobileMenuItems: i0.Signal<DaffBreadcrumbItemComponent[]>;
     /**
      * @docs-private
      */
     ngAfterContentInit(): void;
     private updateActiveState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbComponent, never>;
-    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: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBreadcrumbComponent, "ol[daff-breadcrumb]", never, {}, {}, ["_breadcrumbItems", "breadcrumbItems"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }
 
 /**
  * @docs-private
  */
-declare const DAFF_BREADCRUMB_COMPONENTS: readonly [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemDirective];
+declare const DAFF_BREADCRUMB_COMPONENTS: readonly [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemComponent];
 
 /**
  * @deprecated in favor of {@link DAFF_BREADCRUMB_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 declare class DaffBreadcrumbModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffBreadcrumbModule, never, [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemDirective], [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffBreadcrumbModule, never, [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemComponent], [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffBreadcrumbModule>;
 }
 
-export { DAFF_BREADCRUMB_COMPONENTS, DaffBreadcrumbComponent, DaffBreadcrumbItemDirective, DaffBreadcrumbModule };
+export { DAFF_BREADCRUMB_COMPONENTS, DaffBreadcrumbComponent, DaffBreadcrumbItemComponent, DaffBreadcrumbModule };

package/breadcrumb/src/breadcrumb-theme.scss

@@ -5,7 +5,7 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-breadcrumb__item {
-		a {
+		a, .daff-breadcrumb__menu-activator {
 			@include light($mode) {
 				color: daff-color($neutral, 80);
 				text-decoration-color: daff-color($neutral, 80);

package/button/README.md

@@ -2,7 +2,7 @@
 Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.
 
 ## Overview
-Button supports five variants that change its visual style, each applied as an attribute:
+Button supports four variants that change its visual style, each applied as an attribute:
 
 | Attribute | Description |
 | --------- | ----------- |
@@ -10,7 +10,6 @@ Button supports five variants that change its visual style, each applied as an a
 | `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 |
 
 Native `<button>` or `<a>` elements should always be used in order to provide an easy, accessible experience for users.
 
@@ -18,24 +17,21 @@ Native `<button>` or `<a>` elements should always be used in order to provide an
 - Use `<button>` for actions performed within the same page.
 
 **Basic button**
-<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-button"></daff-docs-example-viewer>
 
 **Flat button**
-<design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="flat-button"></daff-docs-example-viewer>
 
 **Stroked button**
-<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
+<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**
-<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
+<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.
 
-**Underline button**
-<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
-
 ## Usage
 
 ### Within a standalone component
@@ -46,7 +42,6 @@ Available imports:
 - `DAFF_FLAT_BUTTON_COMPONENTS`
 - `DAFF_ICON_BUTTON_COMPONENTS`
 - `DAFF_STROKED_BUTTON_COMPONENTS`
-- `DAFF_UNDERLINE_BUTTON_COMPONENTS`
 - `DAFF_BUTTON_COMPONENTS` (all types)
 
 ```ts
@@ -92,43 +87,51 @@ Buttons should always have a label, unless you are only using an icon that is un
 ### 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 control button dimensions. The default size is `md`.
+<daff-docs-example-viewer example="button-with-icon"></daff-docs-example-viewer>
 
-<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
+## Features
 
-## Colors
+### 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.
 
-## Status indicators
+### Elevation
+Add shadows to buttons with the `elevated` property.
+
+> Note: The `elevated` property is not supported for flat, icon, and underline buttons.
+
+<daff-docs-example-viewer example="elevated-button"></daff-docs-example-viewer>
+
+### Sizes
+Use the `size` property to control button dimensions. The default size is `md`.
+
+<daff-docs-example-viewer example="button-sizes"></daff-docs-example-viewer>
+
+### Status indicators
 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>
+<daff-docs-example-viewer example="statusable-button"></daff-docs-example-viewer>
 
-## Elevation
-Add shadows to buttons with the `elevated` property.
+## States
 
-> Note: The `elevated` property is not supported for flat, icon, and underline buttons.
+### 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.
+
+<daff-docs-example-viewer example="disabled-button"></daff-docs-example-viewer>
 
-<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
+### Loading
+Use the `loading` property to indicate that an action is being processed. When `loading` is set to `true`, the button displays a spinner.
+
+<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.
 
 - 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`.
+- Icon only buttons (`<daff-icon-button>`) need to be given meaningful labels 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.
+- `<daff-underline-button>` is deprecated and will be removed in v1.0.0.