@daffodil/design 0.83.0 → 0.84.0

package/progress-bar/progress-bar.component.d.ts

@@ -15,10 +15,25 @@ export declare class DaffProgressBarComponent {
      * @docs-private
      */
     get indeterminateClass(): boolean;
+    /**
+     * @docs-private
+     */
     get role(): string;
+    /**
+     * @docs-private
+     */
     get ariaLabel(): string;
+    /**
+     * @docs-private
+     */
     ariaValueMin: string;
+    /**
+     * @docs-private
+     */
     ariaValueMax: string;
+    /**
+     * @docs-private
+     */
     get ariaValueNow(): number;
     constructor(_changeDetectorRef: ChangeDetectorRef, colorable: DaffColorableDirective);
     private _percentage;

package/public_api.d.ts

@@ -1,6 +1,7 @@
 export * from './atoms/form/core/public_api';
 export * from './atoms/form/form-field/public_api';
 export * from './atoms/form/error-message/public_api';
+export * from './atoms/form/hint/public_api';
 export * from './atoms/form/input/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';

package/scss/state/skeleton/_mixins.scss

@@ -4,19 +4,20 @@
 @mixin daff-skeleton-theme($theme) {
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 	$base: core.daff-map-get($theme, 'core', 'base');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-skeleton {
-		&::before,
-		::before {
-			background: theming.daff-illuminate($base, $neutral, 2);
+		@include theming.light($type) {
+			&::before,
+			::before {
+				background: theming.daff-color($neutral, 20);
+			}
 		}
 
-		@keyframes loading {
-			from {
-				opacity: 0.5;
-			}
-			to {
-				opacity: 1;
+		@include theming.dark($type) {
+			&::before,
+			::before {
+				background: theming.daff-color($neutral, 90);
 			}
 		}
 	}
@@ -39,4 +40,13 @@
 		top: 0;
 		left: 0;
 	}
+
+	@keyframes loading {
+		from {
+			opacity: 0.5;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 }

package/scss/theme.scss

@@ -27,6 +27,7 @@
 @use '../button/src/button/underline/underline-theme' as underline-button;
 @use '../article/src/article-theme' as article;
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
+@use '../src/atoms/form/hint/hint-theme' as hint;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
 @use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
@@ -86,6 +87,7 @@
 
 	@include form-field.daff-form-field-theme($theme);
 	@include error-message.daff-error-message-theme($theme);
+	@include hint.daff-hint-theme($theme);
 	@include input.daff-input-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
 

package/src/atoms/form/error-message/error-message-theme.scss

@@ -1,7 +1,10 @@
 @use '../../../../scss/theming';
+@use '../../../../scss/core';
 
 @mixin daff-error-message-theme($theme) {
+	$critical: core.daff-map-get($theme, critical);
+
 	.daff-error-message {
-		color: theming.daff-color(theming.$daff-red, 60);
+		color: theming.daff-color($critical);
 	}
 }

package/src/atoms/form/form-field/form-field/form-field-theme.scss

@@ -6,32 +6,44 @@
 	$primary: core.daff-map-get($theme, primary);
 	$secondary: core.daff-map-get($theme, secondary);
 	$tertiary: core.daff-map-get($theme, tertiary);
+	$critical: core.daff-map-get($theme, critical);
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-form-field {
 		&__control {
 			background: $base;
-			border: 1px solid theming.daff-illuminate($base, $neutral, 3);
-			color: theming.daff-illuminate($base-contrast, $neutral, 4);
 
-			&:focus {
-				border: 1px solid $base-contrast;
+			@include theming.light($type) {
+				border: 1px solid theming.daff-color($neutral);
+				color: theming.daff-color($neutral);
+			}
+
+			@include theming.dark($type) {
+				border: 1px solid theming.daff-color($neutral, 40);
+				color: theming.daff-color($neutral, 40);
+			}
+
+			&.daff-focused {
+				border: 1px solid theming.daff-color($primary);
+
+				.daff-form-label {
+					color: theming.daff-color($primary);
+				}
 			}
 
 			&.daff-error {
-				border: 1px solid theming.daff-color(theming.$daff-red, 60);
+				border: 1px solid theming.daff-color($critical);
 
-				&:focus {
-					border: 1px solid theming.daff-color(theming.$daff-red, 60);
+				.daff-form-label {
+					color: theming.daff-color($critical);
 				}
 			}
 
 			&.daff-valid {
-				> * {
-					color: $base-contrast;
-				}
+				color: $base-contrast;
 			}
 		}
 	}

package/src/atoms/form/hint/hint-theme.scss

@@ -0,0 +1,17 @@
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+
+@mixin daff-hint-theme($theme) {
+	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
+
+	.daff-hint {
+		@include theming.light($type) {
+			color: theming.daff-color($neutral, 80);
+		}
+
+		@include theming.dark($type) {
+			color: theming.daff-color($neutral, 30);
+		}
+	}
+}

package/src/atoms/form/input/input-theme.scss

@@ -5,12 +5,8 @@
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
 
-	:host {
+	.daff-input {
 		background: $base;
 		color: $base-contrast;
-
-		&::placeholder {
-			color: transparent;
-		}
 	}
 }

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/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/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/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>;
-}