@daffodil/design 0.79.0 → 0.81.0

package/switch/README.md

@@ -0,0 +1,61 @@
+# Switch 
+A switch allows users to toggle the state of a single setting.
+
+## Overview
+Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch. The switch can be set to a disabled state, display a loading indicator, or show a custom error message.
+
+## Usage
+
+### Within a standalone component
+To use a switch in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_SWITCH_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Examples
+
+### Basic Switch
+A basic switch can be toggled by setting the `checked` property to `true` or `false`. By default, this is set to `false`.
+
+<design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
+
+### Disabled Switch
+A switch with the `disabled` property will be non-interactive.
+
+<design-land-example-viewer-container example="disabled-switch"></design-land-example-viewer-container>
+
+### Loading Switch
+A switch can display a loading state by setting `loading` to `true`. This will also disable the switch.
+
+<design-land-example-viewer-container example="loading-switch"></design-land-example-viewer-container>
+
+### Switch with Error
+An error message can be displayed by setting `error` to `true` and including a `daff-error-message` to show the message text.
+
+<design-land-example-viewer-container example="switch-error"></design-land-example-viewer-container>
+
+### Changing Label Position
+The label position can be changed by setting the `labelPosition` property. The default position is `left`.
+
+Supported positions: `left | right | top | bottom`
+
+<design-land-example-viewer-container example="switch-label-positions"></design-land-example-viewer-container>
+
+
+## Accessibility
+Switches follow the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+
+### Keyboard Interactions
+| Key | Action |
+| --- | ------ |
+| Space |  Toggles the switch to the opposite state. |
+| Tab |  Moves to next component on the page. |

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class BasicSwitchComponent {
+    checked: boolean;
+    disabled: boolean;
+    loading: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicSwitchComponent, "basic-switch", never, {}, {}, never, never, true, never>;
+}

package/switch/examples/disabled-switch/disabled-switch.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class DisabledSwitchComponent {
+    checked: boolean;
+    disabled: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledSwitchComponent, "disabled-switch", never, {}, {}, never, never, true, never>;
+}

package/switch/examples/examples.d.ts

@@ -0,0 +1,5 @@
+import { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
+import { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
+import { SwitchErrorComponent } from './switch-error/switch-error.component';
+import { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';
+export declare const SWITCH_EXAMPLES: (typeof DisabledSwitchComponent | typeof LoadingSwitchComponent | typeof SwitchErrorComponent | typeof SwitchLabelPositionsComponent)[];

package/switch/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/switch/examples/loading-switch/loading-switch.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class LoadingSwitchComponent {
+    checked: boolean;
+    loading: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSwitchComponent, "loading-switch", never, {}, {}, never, never, true, never>;
+}

package/switch/examples/public_api.d.ts

@@ -0,0 +1,6 @@
+export { SWITCH_EXAMPLES } from './examples';
+export { BasicSwitchComponent } from './basic-switch/basic-switch.component';
+export { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
+export { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
+export { SwitchErrorComponent } from './switch-error/switch-error.component';
+export { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';

package/switch/examples/switch-error/switch-error.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class SwitchErrorComponent {
+    checked: boolean;
+    error: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitchErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchErrorComponent, "switch-error", never, {}, {}, never, never, true, never>;
+}

package/switch/examples/switch-label-positions/switch-label-positions.component.d.ts

@@ -0,0 +1,12 @@
+import { UntypedFormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SwitchLabelPositionsComponent {
+    labelSwitchExample: UntypedFormControl;
+    labelPositionControl: UntypedFormControl;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwitchLabelPositionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchLabelPositionsComponent, "switch-label-positions", never, {}, {}, never, never, true, never>;
+}

package/switch/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/switch/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DAFF_SWITCH_COMPONENTS } from './switch';
+export { DaffSwitchComponent } from './switch/switch.component';

package/switch/src/switch-theme.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-switch-theme($theme) {
+	$primary: core.daff-map-get($theme, primary);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+
+	.daff-switch {
+		&__toggle {
+			background-color: theming.daff-illuminate($base, $neutral, 3);
+			border: 2px solid transparent;
+
+			&:focus-within {
+				border: 2px solid theming.daff-illuminate($base, $neutral, 2);
+			}
+
+			&.daff-checked {
+				background-color: theming.daff-color($primary);
+			}
+
+			&::before {
+				background-color: $base;
+			}
+		}
+	}
+}

package/switch/switch/label-position.d.ts

@@ -0,0 +1,10 @@
+export type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';
+/**
+ * The position of the label relative to the switch.
+ */
+export declare enum DaffLabelPositionEnum {
+    LEFT = "daff-left",
+    RIGHT = "daff-right",
+    TOP = "daff-top",
+    BOTTOM = "daff-bottom"
+}

package/switch/switch/switch.component.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '@angular/core';
+import { DaffLabelPosition } from './label-position';
+import * as i0 from "@angular/core";
+/**
+ * The switch component provides a way to toggle between two settings.
+ *
+ * @example
+ *
+ * ```html
+ * <daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="top">
+ *    Label
+ *    <daff-error-message>Error message</daff-error-message>
+ * </daff-switch>
+ * ```
+ */
+export declare class DaffSwitchComponent {
+    /**
+     * Whether the switch is disabled and/or loading.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    get disabledAttribute(): boolean;
+    get ariaDisabled(): boolean;
+    get classes(): string;
+    /**
+     * Whether the switch is loading.
+     */
+    loading: boolean;
+    /**
+     * Current state of switch (on/off).
+     */
+    checked: boolean;
+    /**
+     * The position of the label relative to the switch. Defaults to 'daff-left'.
+     */
+    labelPosition: DaffLabelPosition;
+    /**
+     * Whether the switch shows an error.
+     */
+    error: boolean;
+    _disabled: boolean;
+    handleKeydown(event: KeyboardEvent): void;
+    /**
+     * @docs-private
+     */
+    private externalAriaLabel;
+    /**
+     * aria-label for the switch.
+     */
+    ariaLabel: string;
+    id: string;
+    toggled: EventEmitter<boolean>;
+    onToggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
+}

package/switch/switch.d.ts

@@ -0,0 +1,3 @@
+import { DaffErrorMessageModule } from '@daffodil/design';
+import { DaffSwitchComponent } from './switch/switch.component';
+export declare const DAFF_SWITCH_COMPONENTS: readonly [typeof DaffSwitchComponent, typeof DaffErrorMessageModule];

package/tabs/README.md

@@ -17,3 +17,6 @@ A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-labe
 | Right Arrow |  Moves focus and activates next tab. If focus is on the last tab, moves focus to the first tab. |
 | Home |  Moves focus and activates first tab. |
 | End |  Moves focus and activates last tab. |
+
+### Link Mode
+Tabs can operate in "link mode" which replaces the tab buttons with anchors. This allows the selected tab to be connected to the URL. To use this mode, set `linkMode` to `true` on the tabs component. By default, the current URL and `tab` query param will be used. These can be overriden with the `url` and `queryParam` inputs respectively.

package/tabs/examples/link-tabs/link-tabs.component.d.ts

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

package/tabs/src/tabs-theme.scss

@@ -3,19 +3,27 @@
 @use '../../scss/theming';
 
 @mixin daff-tabs-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+
+	.daff-tabs {
+		&__tab-list {
+			&::after {
+				background: theming.daff-illuminate($base, $neutral, 2);
+			}
+		}
+	}
 
 	.daff-tab-activator {
 		border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
 
-		&.selected {
+		&.daff-selected {
 			border-bottom: 2px solid theming.daff-color($primary);
 		}
 	}

package/tabs/tabs/tab/tab.component.d.ts

@@ -3,10 +3,9 @@ import * as i0 from "@angular/core";
 /**
  * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
  *
- * ## Template Structure
  * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
  *
- * ## Usage
+ * @example Basic structure of tab
  * ```html
  * <daff-tab>
  * 	<daff-tab-label>
@@ -23,6 +22,7 @@ export declare class DaffTabComponent {
     /**
      * Whether the tab is disabled.
      *
+     * @example Using the `disabled` property
      * ```html
      * <daff-tab [disabled]="true">
      * </daff-tab>
@@ -42,6 +42,7 @@ export declare class DaffTabComponent {
      *
      * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
      *
+     * @example Using the `id` property
      * ```html
      * <daff-tab [id]="'custom-id'"></daff-tab>
      * ```

package/tabs/tabs/tab-activator/tab-activator.component.d.ts

@@ -1,7 +1,10 @@
 import { OnInit, ElementRef } from '@angular/core';
+import { DaffSelectableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
 export declare class DaffTabActivatorComponent implements OnInit {
     private el;
+    private selectableDirective;
     /**
      * @docs-private
      */
@@ -10,8 +13,6 @@ export declare class DaffTabActivatorComponent implements OnInit {
      * Sets the `role` to tab.
      */
     role: string;
-    /** Whether or not a tab is selected */
-    selected: boolean;
     /**
      * Sets `aria-selected` to true if the component is selected and false if it's not selected.
      */
@@ -21,17 +22,17 @@ export declare class DaffTabActivatorComponent implements OnInit {
      */
     get tabIndex(): "0" | "-1";
     ariaControls: string;
+    constructor(el: ElementRef, selectableDirective: DaffSelectableDirective);
     /**
      * The html id of the tab activator component
      */
     tabActivatorId: string;
     panelId: string;
     ngOnInit(): void;
-    constructor(el: ElementRef);
     /**
      * Sets focus to the native element of the component
      */
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabActivatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "selected": { "alias": "selected"; "required": false; }; "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffSelectableDirective; inputs: { "selected": "selected"; }; outputs: {}; }]>;
 }

package/tabs/tabs/tab-label/tab-label.component.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.
  *
+ * @example Basic structure of tab label
  * ```html
  * <daff-tab-label>
  *  <div daffPrefix></div>

package/tabs/tabs/tab-panel/tab-panel.component.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 /**
  * DaffTabPanelComponent is used to display the content panel of a tab.
  *
+ * @example Basic structure of tab panel
  * ```html
  * <daff-tab-panel>
  *  <!-- Tab panel content goes here -->

package/tabs/tabs/tabs.component.d.ts

@@ -1,13 +1,14 @@
-import { QueryList, AfterContentInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Location } from '@angular/common';
+import { QueryList, AfterContentInit, EventEmitter, ChangeDetectorRef, OnInit } from '@angular/core';
+import { Params } from '@angular/router';
 import { DaffTabComponent } from './tab/tab.component';
 import { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';
 import { DaffTabLabelComponent } from './tab-label/tab-label.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@daffodil/design";
 /**
  * Tabs provide a way to navigate between panels that display related content.
  *
- * ## Usage
+ * @example Basic use of the tabs component
  * ```html
  * <daff-tabs aria-label="List of tabs">
  * 	<daff-tab>
@@ -31,14 +32,15 @@ import * as i1 from "@daffodil/design";
  * </daff-tabs>
  * ```
  */
-export declare class DaffTabsComponent implements AfterContentInit {
+export declare class DaffTabsComponent implements AfterContentInit, OnInit {
     private cdRef;
+    private location;
     /**
      * @docs-private
      */
     private class;
     /**
-     * The currently selected tab. This property is dynamically updated when a user selects a tab
+     * The currently selected tab. This property is dynamically updated when a user selects a tab.
      */
     selectedTab: string;
     /**
@@ -53,6 +55,19 @@ export declare class DaffTabsComponent implements AfterContentInit {
      * aria-label for the tab.
      */
     ariaLabel: string;
+    /**
+     * Replace the tab buttons with links.
+     */
+    linkMode: boolean;
+    /**
+     * The URL to navigate to when the component is in link mode.
+     * This component will set the specified query param.
+     */
+    url?: string;
+    /**
+     * The query parameter that the tabs component will use to set the tab value in link mode.
+     */
+    queryParam: string;
     /**
      * Event emitted when tab selection changes.
      */
@@ -69,7 +84,12 @@ export declare class DaffTabsComponent implements AfterContentInit {
      * @docs-private
      */
     _tabActivators: QueryList<DaffTabActivatorComponent>;
-    constructor(cdRef: ChangeDetectorRef);
+    get currentPath(): string;
+    constructor(cdRef: ChangeDetectorRef, location: Location);
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
     /**
      * @docs-private
      */
@@ -83,6 +103,10 @@ export declare class DaffTabsComponent implements AfterContentInit {
      * Moves forward or backward in the tab array, wrapping around when necessary.
      */
     private navigateTabs;
+    /**
+     * @docs-private
+     */
+    _buildQueryParams(tab: string): Params;
     /**
      * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
      */
@@ -100,5 +124,5 @@ export declare class DaffTabsComponent implements AfterContentInit {
      */
     selectLast(event: KeyboardEvent | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabsComponent, "daff-tabs", never, { "initiallySelected": { "alias": "initiallySelected"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "tabChange": "tabChange"; }, ["_labels", "_tabs"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabsComponent, "daff-tabs", never, { "initiallySelected": { "alias": "initiallySelected"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "linkMode": { "alias": "linkMode"; "required": false; }; "url": { "alias": "url"; "required": false; }; "queryParam": { "alias": "queryParam"; "required": false; }; }, { "tabChange": "tabChange"; }, ["_labels", "_tabs"], never, true, never>;
 }

package/toast/src/toast-theme.scss

@@ -3,25 +3,25 @@
 @use '../../scss/theming';
 
 @mixin daff-toast-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$info: map.get($theme, info);
-	$warn: map.get($theme, warn);
-	$critical: map.get($theme, critical);
-	$success: map.get($theme, success);
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$info: core.daff-map-get($theme, informational);
+	$warn: core.daff-map-get($theme, warn);
+	$critical: core.daff-map-get($theme, critical);
+	$success: core.daff-map-get($theme, success);
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
 
 	.daff-toast {
 		background: theming.daff-illuminate($base, $neutral, 1);
-		box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.10);
+		box-shadow: 0 -16px 24px -4px rgba($black, 0.04), 0 8px 24px -4px rgba($black, 0.1);
 		color: theming.daff-text-contrast($base);
 
-		&:before {
+		&::before {
 			background: theming.daff-illuminate($base, $neutral, 4);
 		}
 
@@ -32,8 +32,8 @@
 			.daff-prefix {
 				color: theming.daff-color($success);
 			}
-			
-			&:before {
+
+			&::before {
 				background: theming.daff-color($success);
 			}
 		}
@@ -46,7 +46,7 @@
 				color: theming.daff-color($warn);
 			}
 
-			&:before {
+			&::before {
 				background: theming.daff-color($warn);
 			}
 		}
@@ -59,7 +59,7 @@
 				color: theming.daff-color($critical);
 			}
 
-			&:before {
+			&::before {
 				background: theming.daff-color($critical);
 			}
 		}

package/toast/toast.module.d.ts

@@ -10,7 +10,7 @@ import * as i8 from "./toast-actions/toast-actions.directive";
 import * as i9 from "./toast-title/toast-title.directive";
 import * as i10 from "./toast-message/toast-message.directive";
 /**
- * @deprecated in favor of {@link provideDaffToast} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
+ * @deprecated in favor of {@link provideDaffToast}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastModule, never>;

package/tree/src/tree-theme.scss

@@ -3,18 +3,17 @@
 @use '../../scss/core';
 
 @mixin daff-tree-theme($theme) {
-	$primary: map.get($theme, primary);
-	$secondary: map.get($theme, secondary);
-	$tertiary: map.get($theme, tertiary);
-	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
-	$white: core.daff-map-deep-get($theme, 'core.white');
-	$black: core.daff-map-deep-get($theme, 'core.black');
-	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$primary: core.daff-map-get($theme, primary);
+	$secondary: core.daff-map-get($theme, secondary);
+	$tertiary: core.daff-map-get($theme, tertiary);
+	$base: core.daff-map-get($theme, 'core', 'base');
+	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$black: core.daff-map-get($theme, 'core', 'black');
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 
 	.daff-tree-item {
 		$root: &;
-
 		background-color: $base;
 		color: theming.daff-illuminate($base-contrast, $neutral, 2);
 
@@ -22,15 +21,16 @@
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 		}
 
-		&:after {
+		&::after {
 			border-color: currentColor;
 		}
 
+		// stylelint-disable selector-class-pattern
 		&.selected {
 			background-color: theming.daff-illuminate($base, $neutral, 2);
 			color: $base-contrast;
 
-			&:before {
+			&::before {
 				background-color: theming.daff-color($primary);
 			}
 		}

package/tree/tree/tree.component.d.ts

@@ -8,8 +8,7 @@ import * as i1 from "@daffodil/design";
 /**
  * The `DaffTreeComponent` allows you to render tree structures as interactable ui.
  *
- * They can be used like:
- *
+ * @example Basic use of the tree component
  * ```html
  * <ul daff-tree [tree]="tree">
  *   <ng-template #daffTreeItemWithChildrenTpl let-node>

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

@@ -2,10 +2,11 @@ import { DaffTreeNotifierService } from '../tree/tree-notifier.service';
 import { DaffTreeFlatNode } from '../utils/flatten-tree';
 import * as i0 from "@angular/core";
 /**
- * The `DaffTreeItemDirective` allows you to demarcate the elements which are
- * tree-children that interact with the parent tree.
+ * The `DaffTreeItemDirective` marks elements as tree child nodes that interact with the parent tree structure.
  *
- * They can be used like:
+ * @example Using a `[daffTreeItem]`
+ *
+ * `[tree]` is a {@link DaffTreeData} and `[daff-tree]` is a {@link DaffTreeComponent}.
  *
  * ```html
  * <ul daff-tree [tree]="tree">
@@ -19,14 +20,12 @@ import * as i0 from "@angular/core";
  * </ul>
  * ```
  *
- * where `tree` is a {@link DaffTreeData} and `daff-tree` is a {@link DaffTreeComponent}.
- *
  */
 export declare class DaffTreeItemDirective {
     private document;
     private treeNotifier;
     /**
-     * The css class of the daff-tree.
+     * The css class of the tree item.
      *
      * @docs-private
      */

package/tree/tree.module.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "@angular/common";
 import * as i2 from "./tree/tree.component";
 import * as i3 from "./tree-item/tree-item.directive";
 /**
- * @deprecated in favor of {@link DAFF_TREE_COMPONENTS} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
+ * @deprecated in favor of {@link DAFF_TREE_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
  */
 export declare class DaffTreeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeModule, never>;