@daffodil/design 0.87.2 → 0.88.1

package/hero/README.md

@@ -1,13 +1,15 @@
 # Hero
-Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.
+Hero is a top level container designed to be large and captivating. It should be used only once per page, typically as the first component to introduce the page’s main purpose or message.
 
 ## Overview
-Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
+Heroes are the first visual element users see on a page and are intended to make a bold statement. They are flexible and extensible, and include pre-styled content containers for common layouts such as titles, subtitles, taglines, and body content.
+
+<design-land-example-viewer-container example="basic-hero"></design-land-example-viewer-container>
 
 ## Usage
 
 ### Within a standalone component
-To use hero in a standalone component, import `DAFF_HERO_COMPONENTS` directly into your custom component:
+To use the hero components, import `DAFF_HERO_COMPONENTS` directly into your custom component:
 
 ```ts
 import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
@@ -46,45 +48,57 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Supported Content Types
-A `daff-hero` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
+## Anatomy
+A `<daff-hero>` is composed of the following containers, rendered in the order listed:
 
-### Icon
-`[DaffHeroIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
+**Icon**\
+Used to display a visual or branding element. Use the `[daffHeroIcon]` selector. Avoid using this for interactive or actionable icons.
 
-### Tagline
-Hero taglines are used by adding `[daffHeroTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
+**Tagline**\
+A short, memorable phrase that complements the title and provides quick context. Use the `[daffHeroTagline]` selector.
 
 ### Title
-Hero titles are used by adding `[daffHeroTitle]` to a `<h1>` tag.
+The primary heading for the hero. Use the `[daffHeroTitle]` selector along with an `<h1>`.
 
 ### Subtitle
-Hero subtitles are used by adding `[daffHeroSubtitle]` to a `<h2>` tag.
+A secondary descriptive text displayed beneath the title. Use the `[daffHeroSubtitle]` selector.
 
 ### Body
-`[daffHeroBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-hero>` 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 hero's properties and only serves as a wrapping and spacing container.
-
-## Theming
-The default background color of a hero is light gray, but it can be updated to one of the supported colors by using the `color` property.
+A flexible wrapper for additional components or custom layouts. Use the `[daffHeroBody]` selector. It's unstyled except for spacing, allowing for a ton of control and customization. It should only be used once per hero.
+
+```html
+<daff-hero>
+  <div daffHeroIcon>
+    <img src="assets/summer-sale-icon.svg" alt="Summer sale icon" />
+  </div>
+  <div daffHeroTagline>Limited Time Offer</div>
+  <h1 daffHeroTitle>Summer Collection Sale</h1>
+  <p daffHeroSubtitle>Up to 50% off select items through July 31</p>
+  <div daffHeroBody>
+    <button daff-button color="secondary">Shop the sale</button>
+    <button daff-button color="theme">Learn more</button>
+  </div>
+</daff-hero>
+```
 
-Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+## Colors
+Use the `color` property to change the background of a hero.
 
 <design-land-example-viewer-container example="hero-theming"></design-land-example-viewer-container>
 
-## Text Alignment
-Align hero-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffHeroBody]` or any additional components or elements that are placed inside of a hero. `textAlignment` is set to `left` by default.
-
-Supported alignments: `left | center | right`
+## Text alignment
+Control hero-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect `[daffHeroBody]` content or nested elements.
 
 <design-land-example-viewer-container example="hero-text-alignment"></design-land-example-viewer-container>
 
-## Compact Heroes
-Heroes are available in a `compact` mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-hero>`.</p>
+## Compact
+Use the `compact` property on hero to reduce padding and suit UIs with tighter spacing requirements.
 
 <design-land-example-viewer-container example="compact-hero"></design-land-example-viewer-container>
 
-## Gridded Heroes
-Heros are flexible enough to support grids within them.
+## Examples
+
+### Hero with two columns
+Heroes are flexible enough to support custom grid layouts for more complex arrangements:
 
-### Hero with Two Columns
 <design-land-example-viewer-container example="hero-with-grid"></design-land-example-viewer-container>

package/hero/examples/basic-hero/basic-hero.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class BasicHeroComponent {
+    faMobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicHeroComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicHeroComponent, "basic-hero", never, {}, {}, never, never, true, never>;
+}

package/hero/examples/public_api.d.ts

@@ -2,4 +2,5 @@ export { HeroThemingComponent } from './hero-theming/hero-theming.component';
 export { HeroTextAlignmentComponent } from './hero-text-alignment/hero-text-alignment.component';
 export { HeroWithGridComponent } from './hero-with-grid/hero-with-grid.component';
 export { CompactHeroComponent } from './compact-hero/compact-hero.component';
+export { BasicHeroComponent } from './basic-hero/basic-hero.component';
 export { HERO_EXAMPLES } from './examples';

package/hero/hero/hero.component.d.ts

@@ -1,13 +1,30 @@
 import { DaffTextAlignableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
+/**
+ * Hero is a top level container designed to be large and captivating.
+ * It should be used only once per page, typically as the first component
+ * to introduce the page’s main purpose or message.
+ *
+ * @example
+ * ```html
+ * <daff-hero>
+ *  <div daffHeroIcon>
+ *    <img src="assets/summer-sale-icon.svg" alt="Summer sale icon" />
+ *  </div>
+ *  <div daffHeroTagline>Limited Time Offer</div>
+ *  <h1 daffHeroTitle>Summer Collection Sale</h1>
+ *  <p daffHeroSubtitle>Up to 50% off select items through July 31</p>
+ *  <div daffHeroBody>
+ *    <button daff-button color="secondary">Shop the sale</button>
+ *    <button daff-button color="theme">Learn more</button>
+ *  </div>
+ * </daff-hero>
+ * ```
+ */
 export declare class DaffHeroComponent {
     private textAlignable;
     constructor(textAlignable: DaffTextAlignableDirective);
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffHeroComponent, "daff-hero", 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/hero/hero-body/hero-body.directive.d.ts

@@ -1,9 +1,15 @@
 import * as i0 from "@angular/core";
+/**
+ * Body is a flexible wrapper for additional components or custom layouts.
+ * It's unstyled except for spacing, allowing for a ton of control and customization.
+ * It should only be used once per hero.
+ *
+ * @example
+ * ```html
+ * <div daffHeroBody>Custom content</div>
+ * ```
+ */
 export declare class DaffHeroBodyDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroBodyDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroBodyDirective, "[daffHeroBody]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,15 @@
 import * as i0 from "@angular/core";
+/**
+ * Icon is used to display a visual or branding element. Avoid using this for interactive or actionable icons.
+ *
+ * @example
+ * ```html
+ * <div daffHeroIcon>
+ *  <img src="assets/summer-sale-icon.svg" alt="Summer sale icon" />
+  </div>
+ * ```
+ */
 export declare class DaffHeroIconDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroIconDirective, "[daffHeroIcon]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Subtitle is a secondary descriptive text displayed beneath the title.
+ *
+ * @example
+ * ```html
+ * <p daffHeroSubtitle>Up to 50% off select items through July 31</p>
+ * ```
+ */
 export declare class DaffHeroSubtitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroSubtitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroSubtitleDirective, "[daffHeroSubtitle]", never, {}, {}, never, never, true, never>;
 }

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

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

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Title is the primary heading for the hero.
+ *
+ * @example
+ * ```html
+ * <h1 daffHeroTitle>Summer Collection Sale</h1>
+ * ```
+ */
 export declare class DaffHeroTitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffHeroTitleDirective, "[daffHeroTitle]", never, {}, {}, never, never, true, never>;
 }

package/image/image/image.component.d.ts

@@ -47,10 +47,6 @@ export declare class DaffImageComponent implements OnInit {
      * The aspect ratio of an image, based on the width and height set by the user.
      */
     get _aspectRatio(): SafeStyle;
-    /**
-     * @docs-private
-     */
-    get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffImageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffImageComponent, "daff-image", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "load": "load"; }, never, never, true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/input/input.component.d.ts

@@ -11,23 +11,43 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
     private _elementRef;
     private formField;
     /** @docs-private */
-    class: boolean;
-    /** @docs-private */
     controlType: string;
-    /** @docs-private */
+    /**
+     * @docs-private
+     *
+     * Implemented as part of DaffFormFieldControl.
+     */
     focused: boolean;
-    /** @docs-private */
-    focus(): void;
     private get _id();
+    /**
+     * @docs-private
+     *
+     * Implemented as part of DaffFormFieldControl.
+     */
+    disabled: boolean;
     /**
      * @docs-private
      */
-    get internalId(): string;
+    get disabledAttribute(): true;
+    private _required;
+    /**
+     * @docs-private
+     *
+     * Implemented as part of DaffFormFieldControl.
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    /**
+     * @docs-private
+     */
+    get requiredAttribute(): true;
     /**
      * @docs-private
      */
     get ariaDescribedBy(): string;
     /** @docs-private */
+    focus(): void;
+    /** @docs-private */
     blur(): void;
     constructor(
     /** @docs-private */
@@ -35,9 +55,9 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
-    onFocus(): void;
-    /** @docs-private */
     get value(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, { "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
 }

package/list/README.md

@@ -1,10 +1,22 @@
 # List
-List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
+List is a stylized container used to vertically group a series of related content.
+
+## Overview
+List supports two main variants:
+
+| Attribute | Description |
+| --------- | ----------- |
+| `daff-list` | A standard list used for grouping generic content. |
+| `daff-nav-list` | A navigation list intended for use with anchor elements (`<a>`). |
 
 ## Usage
 
 ### Within a standalone component
-To use list in a standalone component, import `DAFF_LIST_COMPONENTS` directly into your custom component:
+To use list in a standalone component, import each list type directly into your custom component.
+
+Available imports:
+- `DAFF_LIST_COMPONENTS`
+- `DAFF_NAV_LIST_COMPONENTS`
 
 ```ts
 import { DAFF_LIST_COMPONENTS } from '@daffodil/design/list';
@@ -43,22 +55,40 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Basic List
-A `<daff-list>` consists of multiple `<daff-list-item>`s.
+## Anatomy
+A list consists of multiple `daff-list-item` elements.
 
-<design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>
+```html
+<daff-list>
+  <daff-list-item></daff-list-item>
+  <daff-list-item></daff-list-item>
+  <daff-list-item></daff-list-item>
+</daff-list>
+```
 
-## Navigation List
-Use `<daff-nav-list>` for navigation lists. `<daff-list-item>` should be directly added to an anchor tag.
+```html
+<daff-nav-list>
+  <a href="/" daff-list-item></a>
+  <a href="/" daff-list-item></a>
+  <a href="/" daff-list-item></a>
+</daff-nav-list>
+```
 
-<design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>
+### Icon support
+Use the `[daffPrefix]` directive to display a leading visual icon to a list item.
 
-## Multi-line List
-For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.
+<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
+
+### Multi-line lists
+For list items that contain multiple lines of text, use the `[daffListItemTitle]` directive to identify the primary title. Additional supporting content can be added using `<div>` or `<p>` elements.
 
 <design-land-example-viewer-container example="multiline-list"></design-land-example-viewer-container>
 
-## List with Icons
-To add an icon to a list item, use the `daffPrefix` or `daffSuffix` attributes for the appropriate placements.
+## Accessibility
+By default, list includes appropriate ARIA roles by default to support screen readers and provide an accessible experience.
 
-<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
+- `<daff-list>` is assigned `role="list"` to identify a list of items.
+- `<daff-list-item>` within a `<daff-list>` is assigned `role="listitem"` to identify a list item contained inside the list.
+- `<daff-nav-list>`is assigned `role="navigation"` to indicate that the list is used for navigation.
+
+> Always provide an accessible label for `<daff-nav-list>` via `aria-label` or `aria-labelledby` to describe its purpose (e.g. `"Footer links"` or `"Sidebar links"`).

package/list/examples/multiline-list/multiline-list.component.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class MultilineListComponent {
+    faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultilineListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultilineListComponent, "multiline-list", never, {}, {}, never, never, true, never>;
 }

package/list/list/list.component.d.ts

@@ -1,29 +1,17 @@
-import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-export type DaffListType = 'daff-list' | 'daff-nav-list';
+/**
+ * A standard list used for grouping generic content.
+ *
+ * @example
+ * ```html
+ * <daff-list>
+ *  <daff-list-item>List item</daff-list-item>
+ *  <daff-list-item>List item</daff-list-item>
+ * </daff-list>
+ * ```
+ */
 export declare class DaffListComponent {
-    private elementRef;
-    /**
-     * @docs-private
-     */
-    get list(): boolean;
-    /**
-     * @docs-private
-     */
-    get listType(): DaffListType;
-    constructor(elementRef: ElementRef);
-    /**
-     * @docs-private
-     */
-    get nav(): boolean;
-    /**
-     * Sets the role for a `<daff-nav-list>` to navigation.
-     *
-     * @docs-private
-     */
-    get role(): "navigation" | "list";
-    private _getHostElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list,daff-nav-list", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -1,32 +1,25 @@
 import { ElementRef } from '@angular/core';
-import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
+import { DaffPrefixDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
+/**
+ * Individual items within a list.
+ *
+ * @example
+ * ```html
+ * <daff-list-item>Standard list item</daff-list-item>
+ * <a href="/" daff-list-item> Linked list item</a>
+ * ```
+ */
 export declare class DaffListItemComponent {
     private elementRef;
-    /**
-     * @docs-private
-     */
-    class: boolean;
-    /** Whether or not the header item is active */
+    /** Whether an item in a `<daff-nav-list>` is the currently active item. */
     active: boolean;
     /**
      * @docs-private
      */
     _prefix: DaffPrefixDirective;
-    /**
-     * @docs-private
-     */
-    _suffix: DaffSuffixDirective;
     constructor(elementRef: ElementRef);
-    /**
-     * Sets the role for a regular `<daff-list-item>` to listitem.
-     *
-     * @docs-private
-     */
-    get role(): string;
-    private _getHostElement;
-    /** Gets whether a list item has one of the given attributes. */
-    private _isAnchor;
+    private get _isAnchor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, { "active": { "alias": "active"; "required": false; }; }, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, { "active": { "alias": "active"; "required": false; }; }, {}, ["_prefix"], ["[daffPrefix]", "*"], true, never>;
 }

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

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+/**
+ * Used to identify the primary title of a list item within a multi-line list.
+ *
+ * @example
+ * ```html
+ * <div daffListItemTitle>Title</div>
+ * ```
+ */
+export declare class DaffListItemTitleDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffListItemTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffListItemTitleDirective, "[daffListItemTitle]", never, {}, {}, never, never, true, never>;
+}

package/list/list.d.ts

@@ -1,7 +1,13 @@
-import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffPrefixDirective } from '@daffodil/design';
 import { DaffListComponent } from './list/list.component';
 import { DaffListItemComponent } from './list-item/list-item.component';
+import { DaffListItemTitleDirective } from './list-item-title/list-item-title.directive';
+import { DaffNavListComponent } from './nav-list/nav-list.component';
 /**
  * @docs-private
  */
-export declare const DAFF_LIST_COMPONENTS: readonly [typeof DaffListComponent, typeof DaffListItemComponent, typeof DaffPrefixSuffixModule];
+export declare const DAFF_LIST_COMPONENTS: readonly [typeof DaffListComponent, typeof DaffListItemComponent, typeof DaffListItemTitleDirective, typeof DaffPrefixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_NAV_LIST_COMPONENTS: readonly [typeof DaffNavListComponent, typeof DaffListItemComponent, typeof DaffListItemTitleDirective, typeof DaffPrefixDirective];

package/list/list.module.d.ts

@@ -1,13 +1,14 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "./list/list.component";
-import * as i3 from "./list-item/list-item.component";
-import * as i4 from "@daffodil/design";
+import * as i3 from "./nav-list/nav-list.component";
+import * as i4 from "./list-item/list-item.component";
+import * as i5 from "@daffodil/design";
 /**
  * @deprecated in favor of {@link DAFF_LIST_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffListModule, never, [typeof i1.CommonModule, typeof i2.DaffListComponent, typeof i3.DaffListItemComponent], [typeof i2.DaffListComponent, typeof i3.DaffListItemComponent, typeof i4.DaffPrefixSuffixModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffListModule, never, [typeof i1.CommonModule, typeof i2.DaffListComponent, typeof i3.DaffNavListComponent, typeof i4.DaffListItemComponent], [typeof i2.DaffListComponent, typeof i3.DaffNavListComponent, typeof i4.DaffListItemComponent, typeof i5.DaffPrefixSuffixModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffListModule>;
 }

package/list/nav-list/nav-list.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+/**
+ * A navigation list intended for use with anchor elements (`<a>`).
+ *
+ * @example
+ * ```html
+ * <daff-nav-list aria-label="Sidebar links">
+ *  <a href="/" daff-list-item></a>
+ *  <a href="/" daff-list-item></a>
+ * </daff-nav-list>
+ * ```
+ */
+export declare class DaffNavListComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffNavListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNavListComponent, "daff-nav-list", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+}

package/list/public_api.d.ts

@@ -1,4 +1,7 @@
 export { DaffListModule } from './list.module';
 export { DAFF_LIST_COMPONENTS } from './list';
-export * from './list/list.component';
-export * from './list-item/list-item.component';
+export { DAFF_NAV_LIST_COMPONENTS } from './list';
+export { DaffListComponent } from './list/list.component';
+export { DaffNavListComponent } from './nav-list/nav-list.component';
+export { DaffListItemComponent } from './list-item/list-item.component';
+export { DaffListItemTitleDirective } from './list-item-title/list-item-title.directive';

package/list/src/list-base.scss

@@ -0,0 +1,40 @@
+@use '../../scss/typography' as t;
+
+@mixin daff-list-base() {
+	$root: &;
+	display: block;
+	margin: 0;
+	padding: 0;
+
+	.daff-list-item {
+		$root: &;
+		display: flex;
+		gap: 1rem;
+		padding: 0.75rem 1rem;
+
+		&__content {
+			font-size: t.$font-size-base;
+			flex-grow: 1;
+
+			> * {
+				margin: 0;
+				padding: 0;
+			}
+		}
+
+		&__title {
+			font-size: t.$font-size-base;
+			font-weight: 600;
+			line-height: 1.5rem;
+			margin: 0;
+			padding: 0;
+		}
+
+		.daff-prefix {
+			display: flex;
+			align-items: center;
+			height: 1.5rem;
+			width: auto;
+		}
+	}
+}

package/list/src/list-theme.scss

@@ -7,6 +7,11 @@
 	$base-contrast: daff-get-base-color($theme, base-contrast);
 	$mode: daff-get-theme-mode($theme);
 
+	.daff-list,
+	.daff-nav-list {
+		color: $base-contrast;
+	}
+
 	.daff-nav-list {
 		.daff-list-item {
 			&::after {

package/media-gallery/media-gallery/media-gallery.component.d.ts

@@ -26,12 +26,6 @@ export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegist
      */
     get id(): string | undefined | null;
     set id(val: string | undefined | null);
-    /**
-     * @docs-private
-     *
-     * Adds a class for styling the media gallery
-     */
-    private class;
     /**
      * An event indicating that the selected media gallery element has changed.
      */