@daffodil/design 0.87.1 → 0.88.1

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

@@ -15,10 +15,6 @@ import * as i1 from "@daffodil/design";
  */
 export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
     private openDirective;
-    /**
-     * @docs-private
-     */
-    class: boolean;
     /**
      * The unique id of an accordion item. Defaults to an autogenerated value.
      */
@@ -35,10 +31,6 @@ export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable
      * Disables an accordion item and prevents it from being expanded or collapsed.
      */
     disabled: boolean;
-    /**
-     * @docs-private
-     */
-    _animationState: string;
     constructor(openDirective: DaffOpenableDirective);
     /**
      * @docs-private
@@ -61,5 +53,5 @@ export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
-    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"; }; }]>;
+    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: {}; outputs: { "toggled": "toggled"; }; }]>;
 }

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

@@ -8,10 +8,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffAccordionItemTitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffAccordionItemTitleDirective, "[daffAccordionItemTitle]", never, {}, {}, never, never, true, never>;
 }

package/article/article/article.component.d.ts

@@ -3,14 +3,6 @@ import * as i0 from "@angular/core";
  * A component for creating articles within your page.
  */
 export declare class DaffArticleComponent {
-    /**
-     * @docs-private
-     */
-    class: boolean;
-    /**
-     * @docs-private
-     */
-    role: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], true, never>;
 }

package/article/article-meta/article-meta.directive.d.ts

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

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterContentChecked, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { AfterContentInit, AfterContentChecked, ChangeDetectorRef, AfterViewInit, ElementRef } from '@angular/core';
 import { DaffPrefixDirective } from '../../../../core/prefix-suffix/prefix.directive';
 import { DaffSuffixDirective } from '../../../../core/prefix-suffix/suffix.directive';
 import { DaffFormLabelDirective } from '../../form-label/form-label.directive';
@@ -10,11 +10,12 @@ import * as i1 from "../../../../core/skeletonable/skeletonable.directive";
 export type DaffFormFieldApperanace = 'fluid' | 'fixed';
 export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
     private cd;
+    elementRef: ElementRef;
     /** @docs-private */
     class: boolean;
     /** @docs-private */
     get isSelectField(): boolean;
-    constructor(cd: ChangeDetectorRef);
+    constructor(cd: ChangeDetectorRef, elementRef: ElementRef);
     /** @docs-private */
     _prefix: DaffPrefixDirective;
     /**

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

@@ -17,6 +17,8 @@ export declare abstract class DaffFormFieldControl<T> {
     abstract readonly controlType?: any;
     readonly supportsAutoLabelling?: boolean;
     abstract readonly focused: boolean;
+    abstract readonly required: boolean;
+    abstract readonly disabled: boolean;
     readonly id?: string;
     get raised(): boolean;
     abstract focus(event?: Event): void;
@@ -31,5 +33,5 @@ export declare abstract class DaffFormFieldControl<T> {
         valid: boolean;
     }>;
     stateChanges: Observable<DaffFormFieldState>;
-    emitState(): void;
+    emitState(deferred?: boolean): void;
 }

package/atoms/form/native-select/native-select.component.d.ts

@@ -21,6 +21,17 @@ export declare class DaffNativeSelectComponent extends DaffFormFieldControl<stri
      */
     formSubmitted: boolean;
     focused: boolean;
+    /**
+     * @docs-private
+     *
+     * TODO: Update functionality to match other control during refactor.
+     */
+    disabled: boolean;
+    /**
+     * @docs-private
+     * TODO: Update functionality to match other control during refactor.
+     */
+    required: boolean;
     /**
      * @docs-private
      */

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

@@ -20,10 +20,6 @@ import * as i1 from "@daffodil/design";
 export declare class DaffBreadcrumbComponent implements AfterContentInit {
     private destroyRef;
     constructor(destroyRef: DestroyRef);
-    /**
-     * @docs-private
-     */
-    class: boolean;
     /**
      * @docs-private
      */

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

@@ -12,18 +12,6 @@ import * as i0 from "@angular/core";
  */
 export declare class DaffBreadcrumbItemDirective {
     private cdRef;
-    /**
-     * @docs-private
-     */
-    class: 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 */

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

@@ -19,10 +19,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffButtonComponent extends DaffButtonBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     /**
      * Whether or not the button displays a shadow.
      */

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

@@ -19,29 +19,11 @@ export declare class DaffButtonBaseDirective {
      */
     tabindex: number;
     private _disabled;
-    /**
-     * @docs-private
-     */
-    get disabledClass(): any;
     /**
      * 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 tabIndexAttribute(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], 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: {}; }]>;
 }

package/button/button/flat/flat.component.d.ts

@@ -19,10 +19,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffFlatButtonComponent extends DaffButtonBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFlatButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffFlatButtonComponent, "button[daff-flat-button],a[daff-flat-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/button/button/icon/icon.component.d.ts

@@ -15,10 +15,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffIconButtonComponent extends DaffButtonBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffIconButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffIconButtonComponent, "button[daff-icon-button],a[daff-icon-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

package/button/button/stroked/stroked.component.d.ts

@@ -19,10 +19,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     /**
      * Whether or not the button displays a shadow.
      */

package/button/button/underline/underline.component.d.ts

@@ -19,10 +19,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffUnderlineButtonComponent extends DaffButtonBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffUnderlineButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffUnderlineButtonComponent, "button[daff-underline-button],a[daff-underline-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }

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

@@ -76,21 +76,21 @@
 
 @mixin daff-button-sizes {
 	&.daff-sm {
-		font-size: t.$small-font-size;
+		font-size: t.$font-size-sm;
 		line-height: 2rem;
 		height: 2rem;
 		padding: 0 1rem;
 	}
 
 	&.daff-md {
-		font-size: t.$normal-font-size;
+		font-size: t.$font-size-base;
 		line-height: 3rem;
 		height: 3rem;
 		padding: 0 1.5rem;
 	}
 
 	&.daff-lg {
-		font-size: t.$medium-font-size;
+		font-size: t.$font-size-md;
 		line-height: 3.5rem;
 		height: 3.5rem;
 		padding: 0 1.5rem;

package/callout/README.md

@@ -1,13 +1,19 @@
 # Callout
-Callout is a versatile component that can be used to easily highlight a piece of content.
+Callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.
 
 ## Overview
-Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
+Callouts can be used multiple times on a page and are flexible enough to support various content arrangements. They are ideal for:
+
+- Highlighting a set of products alongside a product list.
+- Displaying feature overviews or promotional content.
+- Structuring elements such as accordions or other grouped content.
+
+Callouts include built-in containers for icons, taglines, titles, subtitles, and custom body content, making it both powerful and easy to extend.
 
 ## Usage
 
 ### Within a standalone component
-To use callout in a standalone component, import `DAFF_CALLOUT_COMPONENTS` directly into your custom component:
+To use the callout components, import `DAFF_CALLOUT_COMPONENTS` into your custom component:
 
 ```ts
 import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
@@ -46,52 +52,44 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
+## Anatomy
+A callout is composed of the following containers, projected in the order listed:
+
+- **`<daff-callout>`**: Parent container that supports content projection and includes structural styling.
+- **`[daffCalloutIcon]`**: Displays a visual or branding element. Avoid using this for interactive or actionable icons.
+- **`[daffCalloutTagline]`**: Short, memorable phrase that complements the title and provides quick context.
+- **`[daffCalloutTitle]`**: Defines the primary title, applied to a heading tag (`<h*>`).
+- **`[daffCalloutSubtitle]`**: Secondary descriptive text displayed beneath the title.
+- **`[daffCalloutBody]`**: Flexible wrapper for custom or additional components. It's unstyled except for spacing and should only be used once per callout.
+
+```html
+<daff-callout>
+  <div daffCalloutIcon></div>
+  <div daffCalloutTagline></div>
+  <h2 daffCalloutTitle></h2>
+  <p daffCalloutSubtitle></p>
+  <div daffCalloutBody></div>
+</daff-callout>
+```
 
-## Supported Content Types
-A `<daff-callout>` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
-
-### Icon
-`[daffCalloutIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
-
-### Tagline
-Callout taglines are used by adding `[daffCalloutTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
-
-### Title
-Callout titles are used by adding `[daffCalloutTitle]` to a `<h*>` tag.
-
-### Subtitle
-Callout subtitles are used by adding `[daffCalloutSubtitle]` to a `<p>` tag.
-
-### Body
-`[daffCalloutBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-callout>` and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
-
-## Theming
-The default background color of a callout 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 background of a callout.
 
 <design-land-example-viewer-container example="callout-theming"></design-land-example-viewer-container>
 
-## Text Alignment
-Align callout-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffCalloutBody]` or any additional components or elements that is placed inside of a callout. `textAlignment` is set to `left` by default.
-
-Supported alignments: `left | center | right`
+## Text alignment
+Control callout-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect `[daffCalloutBody]` content or nested elements.
 
 <design-land-example-viewer-container example="callout-text-alignment"></design-land-example-viewer-container>
 
-## Compact Callouts
-Callouts are available in a `compact` mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-callout>`.
+## Compact
+Use the `compact` property on callout to reduce padding and suit UIs with tighter spacing requirements.
 
 <design-land-example-viewer-container example="compact-callout"></design-land-example-viewer-container>
 
-## Gridded Callouts
-Callouts are flexible enough to support grids within them.
-
-### Callout with Two Columns
-<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>
+## Examples
 
-## Layout
-The `layout` property is deprecated and replaced by the [`textAlignment`](#text-alignment) property.
+### Callout with two columns
+Callouts are flexible enough to support custom grid layouts for more complex arrangements:
 
-## Size
-The `size` property is deprecated and replaced by the [`compact`](#compact-callouts) property.
+<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>

package/callout/callout/callout.component.d.ts

@@ -2,15 +2,23 @@ import { DaffTextAlignableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 /**
- * @inheritdoc
+ * Callout is a versatile, pre-styled container used to highlight
+ * key pieces of content in a visually distinct way.
+ *
+ * @example
+ * ```html
+ * <daff-callout>
+ *   <div daffCalloutIcon></div>
+ *   <div daffCalloutTagline></div>
+ *   <h2 daffCalloutTitle></h2>
+ *   <p daffCalloutSubtitle></p>
+ *   <div daffCalloutBody></div>
+ * </daff-callout>
+ * ```
  */
 export declare class DaffCalloutComponent {
     private textAlignable;
     constructor(textAlignable: DaffTextAlignableDirective);
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffCalloutComponent, "daff-callout", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffTextAlignableDirective; inputs: { "textAlignment": "textAlignment"; }; outputs: {}; }, { directive: typeof i1.DaffCompactableDirective; inputs: { "compact": "compact"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/callout/callout-body/callout-body.directive.d.ts

@@ -1,9 +1,14 @@
 import * as i0 from "@angular/core";
+/**
+ * A flexible wrapper for custom or additional components within the callout.
+ * It should only be used once per callout.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutBody></div>
+ * ```
+ */
 export declare class DaffCalloutBodyDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutBodyDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutBodyDirective, "[daffCalloutBody]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-icon/callout-icon.directive.d.ts

@@ -1,9 +1,14 @@
 import * as i0 from "@angular/core";
+/**
+ * Used to display a visual or branding element.
+ * Avoid using this for interactive or actionable icons.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutIcon></div>
+ * ```
+ */
 export declare class DaffCalloutIconDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutIconDirective, "[daffCalloutIcon]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-subtitle/callout-subtitle.directive.d.ts

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Secondary text that provides additional descriptive information beneath the title.
+ *
+ * @example
+ * ```html
+ * <p daffCalloutSubtitle></p>
+ * ```
+ */
 export declare class DaffCalloutSubtitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutSubtitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutSubtitleDirective, "[daffCalloutSubtitle]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-tagline/callout-tagline.directive.d.ts

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * A short, memorable phrase that complements the title and provides quick context.
+ *
+ * @example
+ * ```html
+ * <div daffCalloutTagline></div>
+ * ```
+ */
 export declare class DaffCalloutTaglineDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutTaglineDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTaglineDirective, "[daffCalloutTagline]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-title/callout-title.directive.d.ts

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Applied to a heading tag (`<h*>`) to define the primary title of the callout.
+ *
+ * @example
+ * ```html
+ * <h2 daffCalloutTitle></h2>
+ * ```
+ */
 export declare class DaffCalloutTitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTitleDirective, "[daffCalloutTitle]", never, {}, {}, never, never, true, never>;
 }

package/card/README.md

@@ -1,20 +1,24 @@
 # Card
-Cards are versatile content containers that contain content and actions to convey information about a single subject.
+Cards are flexible content containers used to group related information and actions about a single subject.
 
 ## Overview
-There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
-
-## Basic Card
-The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS
+Daffodil provides two card styles: **default (filled)** and **stroked**. Cards can include images, text, lists, actions, or even other components.
 
+**Default (filled) card**
 <design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
 
+**Stroked card**
+<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
+
 ## Usage
 
 ### Within a standalone component
-To use card in a standalone component, import each card type directly into your custom component.
+Import the card style(s) you need into a standalone component:
 
-The following imports are available, depending on which card you choose to use: `DAFF_CARD_COMPONENTS`, `DAFF_RAISED_CARD_COMPONENTS`, `DAFF_STROKED_CARD_COMPONENTS`. If you need to use all the card types, you can use `DAFF_ALL_CARD_COMPONENTS`.
+Available imports:
+- Default (filled) cards: `DAFF_CARD_COMPONENTS`
+- Stroked cards: `DAFF_STROKED_CARD_COMPONENTS`
+- All card styles: `DAFF_ALL_CARD_COMPONENTS`
 
 ```ts
 import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
@@ -53,52 +57,56 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Supported Content Types
-A card supports a wide variety of content and includes minimally pre-styled `image`, `icon`, `tagline`, `title`, `content`, and `actions` content containers.
-
-### Image
-Image can be added to a card by using the `daffCardImage` attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
-
-### Icon
-Icon can be added to a card by using the `daffCardIcon` attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
+## Anatomy
+Cards include minimally styled content containers for common patterns. Each container is optional but is projected in the order listed below:
+
+- **`[daffCardImage]`**: Displays an image.
+- **`[daffCardIcon]`**: Displays a visual or branding element. Avoid using this for interactive or actionable icons.
+- **`[daffCardTagline]`**: Short, memorable phrase that complements the title and provides quick context.
+- **`[daffCardTitle]`**: The primary heading of the card.
+- **`[daffCardContent]`**: A flexible wrapper for text, components, or custom layouts. It's unstyled except for spacing and should only be used once per card.
+- **`[daffCardActions]`**: A container for buttons or calls-to-action, always positioned to the bottom of the card.
+
+```html
+<daff-card>
+	<img daffCardImage src="/" alt="image caption" >
+  <div daffCardIcon></div>
+  <div daffCardTagline>Card tagline</div>
+  <h4 daffCardTitle>Card title</h4>
+	<div daffCardContent>Detailed information about the subject of the card.</div>
+  <div daffCardActions>
+    <button>Card link</button>
+    <button>Another card link</button>
+  </div>
+</daff-card>
+```
 
-### Tagline
-Tagline can be added to a card by using the `daffCardTagline` attribute. It's intended to supplement the title by providing a short, memorable description.
+## Interactive card
+An interactive card turns the entire card into a clickable area that navigates to another page or view. This is useful for cards representing products, articles, or other resources where selecting the card should take the user to another page or section.
 
-### Title
-Title can be added to a card by using the `daffCardTitle` attribute.
+To create an interactive card, apply the component selector to an `<a>` element. All card styles support interactive behavior.
 
-### Content
-Content can be added to a card by using the `daffCardContent` attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
+<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
 
-### Actions
-Buttons can be added to a card by using the `daffCardActions` attribute. This container will always be positioned at the bottom of a card.
+## Elevation
+Use the `elevated` property to add shadows to cards.
 
-## Properties
+<design-land-example-viewer-container example="elevated-card"></design-land-example-viewer-container>
 
-### Orientation
-Orientation dictates how a card's content is stacked — `vertical` or `horizontal`. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the `orientation` property. Horizontal cards will stack vertically on smaller screens due to size constraints.
+## Orientation
+Use the `orientation` property to stack card content either `vertical` (default) or `horizontal`. Horizontal cards automatically switch to vertical on smaller screens.
 
 <design-land-example-viewer-container example="card-orientation"></design-land-example-viewer-container>
 
-## Linkable Card
-Cards can be linkable by adding the component selector to the `<a>` tag. All card types are linkable.
-
-<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
-
-## Raised Card
-A raised card adds elevation to the default card.
-
-<design-land-example-viewer-container example="raised-card"></design-land-example-viewer-container>
-
-## Stroked Card
-A stroked card adds a border to the default card.
+### Colors
+Cards default to a light gray background. Use the `color` property to change a card's color.
 
-<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
-
-### Theming
-Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the `color` property.
+<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>
 
-Supported colors: `primary | secondary | tertiary | white | black | theme | theme-contrast`
+## Deprecations
+The raised card style has been deprecated in favor of the `elevated` property. Replace `<daff-raised-card>` with `<daff-card [elevated]="true">`
 
-<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>
+```html
+<daff-card [elevated]="true">
+</daff-card>
+```