@daffodil/design 0.82.0 → 0.84.0

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

@@ -4,12 +4,9 @@ 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>
+ *  Label
  * </daff-switch>
  * ```
  */
@@ -19,8 +16,17 @@ export declare class DaffSwitchComponent {
      */
     get disabled(): any;
     set disabled(value: any);
+    /**
+     * @docs-private
+     */
     get disabledAttribute(): boolean;
+    /**
+     * @docs-private
+     */
     get ariaDisabled(): boolean;
+    /**
+     * @docs-private
+     */
     get classes(): string;
     /**
      * Whether the switch is loading.
@@ -31,13 +37,16 @@ export declare class DaffSwitchComponent {
      */
     checked: boolean;
     /**
-     * The position of the label relative to the switch. Defaults to 'daff-left'.
+     * The position of the label relative to the switch.
      */
     labelPosition: DaffLabelPosition;
     /**
      * Whether the switch shows an error.
      */
     error: boolean;
+    /**
+     * @docs-private
+     */
     _disabled: boolean;
     handleKeydown(event: KeyboardEvent): void;
     /**
@@ -48,8 +57,24 @@ export declare class DaffSwitchComponent {
      * aria-label for the switch.
      */
     ariaLabel: string;
+    /**
+     * A unique id for the switch.
+     *
+     * The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.
+     *
+     * @example Using the `id` property
+     * ```html
+     * <daff-switch [id]="'custom-id'"></daff-switch>
+     * ```
+     */
     id: string;
+    /**
+     * Output event triggered when the switch has been toggled.
+     */
     toggled: EventEmitter<boolean>;
+    /**
+     * @docs-private
+     */
     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

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

package/tabs/src/tabs-theme.scss

@@ -4,27 +4,45 @@
 
 @mixin daff-tabs-theme($theme) {
 	$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');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
-	.daff-tabs {
-		&__tab-list {
-			&::after {
-				background: theming.daff-illuminate($base, $neutral, 2);
+	@include theming.light($type) {
+		.daff-tabs {
+			&__tab-list {
+				&::after {
+					background: theming.daff-color($neutral, 20);
+				}
+			}
+		}
+
+		.daff-tab-activator {
+			border-bottom: 2px solid theming.daff-color($neutral, 20);
+			color: $base-contrast;
+
+			&.daff-selected {
+				border-bottom: 2px solid theming.daff-color($primary);
 			}
 		}
 	}
 
-	.daff-tab-activator {
-		border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
+	@include theming.dark($type) {
+		.daff-tabs {
+			&__tab-list {
+				&::after {
+					background: theming.daff-color($neutral, 80);
+				}
+			}
+		}
 
-		&.daff-selected {
-			border-bottom: 2px solid theming.daff-color($primary);
+		.daff-tab-activator {
+			border-bottom: 2px solid theming.daff-color($neutral, 80);
+			color: $base-contrast;
+
+			&.daff-selected {
+				border-bottom: 2px solid theming.daff-color($primary);
+			}
 		}
 	}
 }

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

@@ -12,15 +12,27 @@ export declare class DaffTabActivatorComponent implements OnInit {
     /**
      * Sets the `role` to tab.
      */
+    /**
+     * @docs-private
+     */
     role: string;
     /**
      * Sets `aria-selected` to true if the component is selected and false if it's not selected.
      */
+    /**
+     * @docs-private
+     */
     get ariaSelected(): boolean;
     /**
      * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
      */
+    /**
+     * @docs-private
+     */
     get tabIndex(): "0" | "-1";
+    /**
+     * @docs-private
+     */
     ariaControls: string;
     constructor(el: ElementRef, selectableDirective: DaffSelectableDirective);
     /**
@@ -28,6 +40,9 @@ export declare class DaffTabActivatorComponent implements OnInit {
      */
     tabActivatorId: string;
     panelId: string;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     /**
      * Sets focus to the native element of the component

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

@@ -1,4 +1,4 @@
-import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
 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.
@@ -12,10 +12,7 @@ import * as i0 from "@angular/core";
  * </daff-tab-Label>
  * ```
  */
-export declare class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {
-    /**
-     * @docs-private
-     */
+export declare class DaffTabLabelComponent {
     _prefix: DaffPrefixDirective;
     /**
      * @docs-private

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

@@ -52,6 +52,9 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
     /**
      * aria-label for the tab.
      */
+    /**
+     * @docs-private
+     */
     private externalAriaLabel;
     /**
      * @docs-private

package/toast/examples/default-toast/default-toast.component.d.ts

@@ -8,6 +8,9 @@ export declare class DefaultToastComponent implements OnInit {
     update: EventEmitter<DaffToastAction>;
     closeToast: EventEmitter<DaffToastAction>;
     open(): void;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     private count;
     static ɵfac: i0.ɵɵFactoryDeclaration<DefaultToastComponent, never>;

package/toast/examples/toast-positions/toast-positions.component.d.ts

@@ -11,6 +11,9 @@ export declare class ToastPositionsComponent implements OnInit {
     private count;
     horizontalControl: FormControl;
     verticalControl: FormControl;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastPositionsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToastPositionsComponent, "toast-positions", never, {}, {}, never, never, true, never>;

package/toast/src/toast-theme.scss

@@ -3,64 +3,111 @@
 @use '../../scss/theming';
 
 @mixin daff-toast-theme($theme) {
-	$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');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.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.1);
-		color: theming.daff-text-contrast($base);
+		@include theming.light($type) {
+			background: theming.daff-color($neutral, 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 {
-			background: theming.daff-illuminate($base, $neutral, 4);
-		}
+			&::before {
+				background: theming.daff-color($neutral, 40);
+			}
+
+			&.daff-success {
+				background: theming.daff-color($success, 10);
+				color: $black;
 
-		&.daff-success {
-			background: theming.daff-color($success, 10);
-			color: $black;
+				.daff-prefix {
+					color: theming.daff-color($success);
+				}
 
-			.daff-prefix {
-				color: theming.daff-color($success);
+				&::before {
+					background: theming.daff-color($success);
+				}
 			}
 
-			&::before {
-				background: theming.daff-color($success);
+			&.daff-warn {
+				background: theming.daff-color($warn, 10);
+				color: $black;
+
+				.daff-prefix {
+					color: theming.daff-color($warn);
+				}
+
+				&::before {
+					background: theming.daff-color($warn);
+				}
 			}
-		}
 
-		&.daff-warn {
-			background: theming.daff-color($warn, 10);
-			color: $black;
+			&.daff-critical {
+				background: theming.daff-color($critical, 10);
+				color: $black;
+
+				.daff-prefix {
+					color: theming.daff-color($critical);
+				}
 
-			.daff-prefix {
-				color: theming.daff-color($warn);
+				&::before {
+					background: theming.daff-color($critical);
+				}
 			}
+		}
+
+		@include theming.dark($type) {
+			background: theming.daff-color($neutral, 90);
+			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 {
-				background: theming.daff-color($warn);
+				background: theming.daff-color($neutral, 30);
 			}
-		}
 
-		&.daff-critical {
-			background: theming.daff-color($critical, 10);
-			color: $black;
+			&.daff-success {
+				background: theming.daff-color($success, 90);
 
-			.daff-prefix {
-				color: theming.daff-color($critical);
+				.daff-prefix {
+					color: theming.daff-color($success, 30);
+				}
+
+				&::before {
+					background: theming.daff-color($success, 30);
+				}
 			}
 
-			&::before {
-				background: theming.daff-color($critical);
+			&.daff-warn {
+				background: theming.daff-color($warn, 90);
+
+				.daff-prefix {
+					color: theming.daff-color($warn, 30);
+				}
+
+				&::before {
+					background: theming.daff-color($warn, 30);
+				}
+			}
+
+			&.daff-critical {
+				background: theming.daff-color($critical, 90);
+
+				.daff-prefix {
+					color: theming.daff-color($critical, 30);
+				}
+
+				&::before {
+					background: theming.daff-color($critical, 30);
+				}
 			}
 		}
 	}

package/toast/toast/toast-template.component.d.ts

@@ -1,13 +1,15 @@
 import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { DaffToast } from '../interfaces/toast';
+import { DaffToastOptions } from '../options/daff-toast-options';
 import { DaffToastPositionService } from '../service/position.service';
 import * as i0 from "@angular/core";
 export declare class DaffToastTemplateComponent {
     private cd;
+    private options;
     private toastPosition;
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
     private _items;
-    constructor(cd: ChangeDetectorRef, toastPosition: DaffToastPositionService);
+    constructor(cd: ChangeDetectorRef, options: DaffToastOptions, toastPosition: DaffToastPositionService);
     closeToast: EventEmitter<void>;
     onCloseToast(event: Event): void;
     get slideAnimation(): any;

package/toast/toast/toast.component.d.ts

@@ -1,6 +1,6 @@
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { ElementRef, AfterViewInit, AfterContentInit, OnDestroy } from '@angular/core';
-import { DaffFocusStackService, DaffPrefixable, DaffPrefixDirective } from '@daffodil/design';
+import { DaffFocusStackService, DaffPrefixDirective } from '@daffodil/design';
 import { DaffToast } from '../interfaces/toast';
 import { DaffToastActionsDirective } from '../toast-actions/toast-actions.directive';
 import * as i0 from "@angular/core";
@@ -11,13 +11,11 @@ import * as i1 from "@daffodil/design";
  * DaffToastComponent provides a way to display and
  * communicate information for user actions or system updates.
  */
-export declare class DaffToastComponent implements DaffPrefixable, AfterContentInit, AfterViewInit, OnDestroy {
+export declare class DaffToastComponent implements AfterContentInit, AfterViewInit, OnDestroy {
     private _elementRef;
     private _focusTrapFactory;
     private _focusStack;
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     class: boolean;
     /**
      * @docs-private

package/tree/interfaces/tree-data.d.ts

@@ -5,9 +5,24 @@
  * There may be other important data that needs to be available at render time.
  */
 export interface DaffTreeData<T> {
+    /**
+     * The label displayed for a tree node.
+     */
     title: string;
+    /**
+     * A URL associated with a tree node, which can be used for navigation or linking.
+     */
     url: string;
+    /**
+     * A unique ID for a tree node.
+     */
     id: string;
+    /**
+     * An array of child nodes, each of which is also a `DaffTreeData` item.
+     */
     items: DaffTreeData<T>[];
+    /**
+     * Additional data associated with a tree node.
+     */
     data: T;
 }

package/tree/interfaces/tree-render-mode.d.ts

@@ -1,6 +1,6 @@
 /**
  * Represents the mode of rendering for nodes in a tree UI.
- * - 'in-dom': Closed nodes are present in the Document Object Model (DOM).
- * - 'not-in-dom': Closed nodes are not present in the Document Object Model (DOM).
+ * - `in-dom`: Closed nodes are present in the Document Object Model (DOM).
+ * - `not-in-dom`: Closed nodes are not present in the Document Object Model (DOM).
  */
 export type DaffTreeRenderMode = 'in-dom' | 'not-in-dom';

package/tree/src/tree-theme.scss

@@ -11,27 +11,53 @@
 	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
+	// stylelint-disable selector-class-pattern
 	.daff-tree-item {
 		$root: &;
-		background-color: $base;
-		color: theming.daff-illuminate($base-contrast, $neutral, 2);
 
-		&:hover {
-			background-color: theming.daff-illuminate($base, $neutral, 2);
-		}
+		@include theming.light($type) {
+			background-color: $base;
+			color: theming.daff-color($neutral, 90);
+
+			&:hover {
+				background-color: theming.daff-color($neutral, 20);
+			}
+
+			&::after {
+				border-color: $base;
+			}
+
+			&.selected {
+				background-color: theming.daff-color($neutral, 20);
+				color: $base-contrast;
 
-		&::after {
-			border-color: currentColor;
+				&::before {
+					background-color: theming.daff-color($primary);
+				}
+			}
 		}
 
-		// stylelint-disable selector-class-pattern
-		&.selected {
-			background-color: theming.daff-illuminate($base, $neutral, 2);
-			color: $base-contrast;
+		@include theming.dark($type) {
+			background-color: $base;
+			color: theming.daff-color($neutral, 20);
+
+			&:hover {
+				background-color: theming.daff-color($neutral, 90);
+			}
+
+			&::after {
+				border-color: $base;
+			}
+
+			&.selected {
+				background-color: theming.daff-color($neutral, 90);
+				color: $base-contrast;
 
-			&::before {
-				background-color: theming.daff-color($primary);
+				&::before {
+					background-color: theming.daff-color($primary);
+				}
 			}
 		}
 	}

package/tree/tree/tree-notifier.service.d.ts

@@ -1,10 +1,10 @@
 import { OnDestroy } from '@angular/core';
 /**
- * This service is used by tree-items to notify their parent
- * that the tree has to be re-computed.
+ * This service is used by tree items to notify their parent
+ * that the tree has to be recomputed.
  *
  * This service is a multiton associated with each tree instance.
- * It follows the same lifecycle has the tree it is associated with.
+ * It follows the same lifecycle as the tree it is associated with.
  */
 export declare class DaffTreeNotifierService implements OnDestroy {
     /**

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

@@ -6,7 +6,7 @@ import { DaffTreeFlatNode } from '../utils/flatten-tree';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 /**
- * The `DaffTreeComponent` allows you to render tree structures as interactable ui.
+ * The `DaffTreeComponent` allows you to render tree structures as interactable UI.
  *
  * @example Basic use of the tree component
  * ```html
@@ -35,7 +35,7 @@ export declare class DaffTreeComponent implements OnInit, OnChanges {
     /**
      * The rendering mode for nodes in the tree.
      *
-     * Default value is 'in-dom', which means nodes are present in the DOM.
+     * Default value is `in-dom`, which means nodes are present in the DOM.
      *
      * Generally, `not-in-dom` is faster as there are less DOM elements to render,
      * but there may be use-cases (like SEO) where having the tree in the DOM
@@ -47,7 +47,9 @@ export declare class DaffTreeComponent implements OnInit, OnChanges {
      */
     private _tree;
     /**
-     * The flattened tree data. You can iterate through this if you want to inspect
+     * @docs-private
+     *
+     * The flattened tree data. For debugging purposes, you can iterate through this if you want to inspect
      * the resulting array structure we computed to render the tree.
      */
     flatTree: DaffTreeFlatNode[];
@@ -67,9 +69,17 @@ export declare class DaffTreeComponent implements OnInit, OnChanges {
      * @docs-private
      */
     treeItemTemplate: TemplateRef<any>;
+    /**
+     * @docs-private
+     */
     constructor(notifier: DaffTreeNotifierService);
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes: SimpleChanges): void;
     /**
+     * @docs-private
+     *
      * The track-by function used to reduce tree-item re-renders
      */
     trackByTreeElement(index: number, el: any): any;

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

@@ -50,16 +50,22 @@ export declare class DaffTreeItemDirective {
      */
     ariaExpanded: string;
     /**
+     * @docs-private
+     *
      * A css variable indicating the depth of the tree.
      * You can use this to style your templates if you want to
      * use different designs at different depths.
      */
     depth: number;
     /**
+     * @docs-private
+     *
      * The CSS class indicating whether or not the tree is `selected`.
      */
     get selectedClass(): boolean;
     /**
+     * @docs-private
+     *
      * The CSS class indicating whether or not the tree is `open`.
      */
     openClass: boolean;

package/youtube-player/youtube-player.component.d.ts

@@ -17,6 +17,9 @@ export declare class DaffYoutubePlayerComponent implements OnInit {
      */
     ngOnInit(): void;
     get _aspectRatio(): SafeStyle;
+    /**
+     * @docs-private
+     */
     get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffYoutubePlayerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffYoutubePlayerComponent, "daff-youtube-player", never, { "src": { "alias": "src"; "required": false; }; "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;

package/core/prefix-suffix/prefixable/prefixable-interface.d.ts

@@ -1,7 +0,0 @@
-import { DaffPrefixDirective } from '../prefix.directive';
-/**
- * An interface enforcing that a component has the ability to interact with a given DaffPrefixDirective.
- */
-export interface DaffPrefixable {
-    _prefix: DaffPrefixDirective;
-}

package/core/prefix-suffix/prefixable/prefixable.d.ts

@@ -1,11 +0,0 @@
-import { Constructor } from '../../../core/public_api';
-import { DaffPrefixDirective } from '../prefix.directive';
-/**
- * A mixin for giving a component the ability to place content before another piece of content.
- */
-export declare function daffPrefixableMixin<T extends Constructor>(Base: T): {
-    new (...args: any[]): {
-        [x: string]: any;
-        _prefix: DaffPrefixDirective;
-    };
-} & T;

package/core/prefix-suffix/suffixable/suffixable-interface.d.ts

@@ -1,7 +0,0 @@
-import { DaffSuffixDirective } from '../suffix.directive';
-/**
- * An interface enforcing that a component has the ability to interact with a given DaffSuffixDirective.
- */
-export interface DaffSuffixable {
-    _suffix: DaffSuffixDirective;
-}

package/core/prefix-suffix/suffixable/suffixable.d.ts

@@ -1,11 +0,0 @@
-import { Constructor } from '../../../core/public_api';
-import { DaffSuffixDirective } from '../suffix.directive';
-/**
- * A mixin for giving a component the ability to place content after another piece of content.
- */
-export declare function daffSuffixableMixin<T extends Constructor>(Base: T): {
-    new (...args: any[]): {
-        [x: string]: any;
-        _suffix: DaffSuffixDirective;
-    };
-} & T;

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

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class BasicInputComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<BasicInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicInputComponent, "basic-input", never, {}, {}, never, never, true, never>;
-}