@daffodil/design 0.83.0 → 0.85.0

package/switch/src/switch-theme.scss

@@ -1,26 +1,24 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-switch-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$white: daff-get-base-color($theme, 'white');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-switch {
 		&__toggle {
 			border: 2px solid transparent;
 
 			&.daff-checked {
-				background-color: theming.daff-color($primary);
+				background-color: daff-color($primary);
 			}
 
-			@include theming.light($type) {
-				background-color: theming.daff-color($neutral, 30);
+			@include light($mode) {
+				background-color: daff-color($neutral, 30);
 
 				&:focus-within {
-					border: 2px solid theming.daff-color($neutral, 20);
+					border: 2px solid daff-color($neutral, 20);
 				}
 
 				&::before {
@@ -28,15 +26,15 @@
 				}
 			}
 
-			@include theming.dark($type) {
-				background-color: theming.daff-color($neutral, 80);
+			@include dark($mode) {
+				background-color: daff-color($neutral, 80);
 
 				&:focus-within {
-					border: 2px solid theming.daff-color($neutral, 90);
+					border: 2px solid daff-color($neutral, 90);
 				}
 
 				&::before {
-					background-color: theming.daff-color($neutral, 40);
+					background-color: daff-color($neutral, 40);
 				}
 
 				&.daff-checked {

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

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

@@ -1,112 +1,110 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-toast-theme($theme) {
-	$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');
-	$black: core.daff-map-get($theme, 'core', 'black');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$info: daff-get-palette($theme, informational);
+	$warn: daff-get-palette($theme, warn);
+	$critical: daff-get-palette($theme, critical);
+	$success: daff-get-palette($theme, success);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$black: daff-get-base-color($theme, 'black');
+	$white: daff-get-base-color($theme, 'white');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-toast {
-		@include theming.light($type) {
-			background: theming.daff-color($neutral, 10);
+		@include light($mode) {
+			background: 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);
+			color: daff-text-contrast($base);
 
 			&::before {
-				background: theming.daff-color($neutral, 40);
+				background: daff-color($neutral, 40);
 			}
 
 			&.daff-success {
-				background: theming.daff-color($success, 10);
+				background: daff-color($success, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($success);
+					color: daff-color($success);
 				}
 
 				&::before {
-					background: theming.daff-color($success);
+					background: daff-color($success);
 				}
 			}
 
 			&.daff-warn {
-				background: theming.daff-color($warn, 10);
+				background: daff-color($warn, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($warn);
+					color: daff-color($warn);
 				}
 
 				&::before {
-					background: theming.daff-color($warn);
+					background: daff-color($warn);
 				}
 			}
 
 			&.daff-critical {
-				background: theming.daff-color($critical, 10);
+				background: daff-color($critical, 10);
 				color: $black;
 
 				.daff-prefix {
-					color: theming.daff-color($critical);
+					color: daff-color($critical);
 				}
 
 				&::before {
-					background: theming.daff-color($critical);
+					background: daff-color($critical);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
-			background: theming.daff-color($neutral, 90);
+		@include dark($mode) {
+			background: 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);
+			color: daff-text-contrast($base);
 
 			&::before {
-				background: theming.daff-color($neutral, 30);
+				background: daff-color($neutral, 30);
 			}
 
 			&.daff-success {
-				background: theming.daff-color($success, 90);
+				background: daff-color($success, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($success, 30);
+					color: daff-color($success, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($success, 30);
+					background: daff-color($success, 30);
 				}
 			}
 
 			&.daff-warn {
-				background: theming.daff-color($warn, 90);
+				background: daff-color($warn, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 30);
+					color: daff-color($warn, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($warn, 30);
+					background: daff-color($warn, 30);
 				}
 			}
 
 			&.daff-critical {
-				background: theming.daff-color($critical, 90);
+				background: daff-color($critical, 90);
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 30);
+					color: daff-color($critical, 30);
 				}
 
 				&::before {
-					background: theming.daff-color($critical, 30);
+					background: daff-color($critical, 30);
 				}
 			}
 		}

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

@@ -1,28 +1,26 @@
-@use 'sass:map';
-@use '../../scss/theming';
-@use '../../scss/core';
+@use '../../scss/theming' as *;
 
 @mixin daff-tree-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	// stylelint-disable selector-class-pattern
 	.daff-tree-item {
 		$root: &;
 
-		@include theming.light($type) {
+		@include light($mode) {
 			background-color: $base;
-			color: theming.daff-color($neutral, 90);
+			color: daff-color($neutral, 90);
 
 			&:hover {
-				background-color: theming.daff-color($neutral, 20);
+				background-color: daff-color($neutral, 20);
 			}
 
 			&::after {
@@ -30,21 +28,21 @@
 			}
 
 			&.selected {
-				background-color: theming.daff-color($neutral, 20);
+				background-color: daff-color($neutral, 20);
 				color: $base-contrast;
 
 				&::before {
-					background-color: theming.daff-color($primary);
+					background-color: daff-color($primary);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			background-color: $base;
-			color: theming.daff-color($neutral, 20);
+			color: daff-color($neutral, 20);
 
 			&:hover {
-				background-color: theming.daff-color($neutral, 90);
+				background-color: daff-color($neutral, 90);
 			}
 
 			&::after {
@@ -52,11 +50,11 @@
 			}
 
 			&.selected {
-				background-color: theming.daff-color($neutral, 90);
+				background-color: daff-color($neutral, 90);
 				color: $base-contrast;
 
 				&::before {
-					background-color: theming.daff-color($primary);
+					background-color: 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/atoms/form/input/input.module.d.ts

@@ -1,8 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./input.component";
-import * as i2 from "@angular/common";
-export declare class DaffInputModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffInputModule, [typeof i1.DaffInputComponent], [typeof i2.CommonModule], [typeof i1.DaffInputComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffInputModule>;
-}

package/atoms/form/quantity-field/public_api.d.ts

@@ -1,4 +0,0 @@
-export { DaffQuantityFieldModule } from './quantity-field.module';
-export { DaffQuantityFieldComponent } from './quantity-field.component';
-export { DaffQuantityInputComponent } from './quantity-input/quantity-input.component';
-export { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';

package/atoms/form/quantity-field/quantity-field.module.d.ts

@@ -1,13 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./quantity-field.component";
-import * as i2 from "./quantity-input/quantity-input.component";
-import * as i3 from "./quantity-select/quantity-select.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../native-select/native-select.module";
-import * as i6 from "../input/input.module";
-import * as i7 from "@angular/forms";
-export declare class DaffQuantityFieldModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffQuantityFieldModule, [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent], [typeof i4.CommonModule, typeof i5.DaffNativeSelectModule, typeof i6.DaffInputModule, typeof i7.ReactiveFormsModule], [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffQuantityFieldModule>;
-}

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;