@daffodil/design 0.84.0 → 0.86.0

package/accordion/src/accordion-theme.scss

@@ -1,19 +1,17 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-accordion-theme($theme) {
-	$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');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-accordion-item {
-		@include theming.light($type) {
-			border-top: 1px solid theming.daff-color($neutral, 20);
+		@include light($mode) {
+			border-top: 1px solid daff-color($neutral, 20);
 
 			&:last-child {
-				border-bottom: 1px solid theming.daff-color($neutral, 20);
+				border-bottom: 1px solid daff-color($neutral, 20);
 			}
 
 			.daff-accordion-item__header {
@@ -25,11 +23,11 @@
 			}
 		}
 
-		@include theming.dark($type) {
-			border-top: 1px solid theming.daff-color($neutral, 80);
+		@include dark($mode) {
+			border-top: 1px solid daff-color($neutral, 80);
 
 			&:last-child {
-				border-bottom: 1px solid theming.daff-color($neutral, 80);
+				border-bottom: 1px solid daff-color($neutral, 80);
 			}
 
 			.daff-accordion-item__header {

package/article/src/article-theme.scss

@@ -1,22 +1,20 @@
-@use 'sass:map';
 @use './article/stops-article-cascade' as *;
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-article-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
-	$link-color-light: theming.daff-color($primary);
-	$link-color-dark: theming.daff-color($primary, 40);
-	$text-color-light: theming.daff-color($neutral, 90);
-	$text-color-dark: theming.daff-color($neutral, 10);
-	$table-border-light: theming.daff-color($neutral, 20);
-	$table-border-dark: theming.daff-color($neutral, 80);
+	$link-color-light: daff-color($primary);
+	$link-color-dark: daff-color($primary, 40);
+	$text-color-light: daff-color($neutral, 90);
+	$text-color-dark: daff-color($neutral, 10);
+	$table-border-light: daff-color($neutral, 20);
+	$table-border-dark: daff-color($neutral, 80);
 
 	.daff-article {
-		@include theming.light($type) {
+		@include light($mode) {
 			color: $text-color-light;
 
 			@include stopsArticleCascade(a) {
@@ -25,12 +23,12 @@
 			}
 
 			code {
-				background: rgba(theming.daff-color($neutral, 20), 0.5);
+				background: rgba(daff-color($neutral, 20), 0.5);
 			}
 
 			pre {
-				background: rgba(theming.daff-color($neutral, 20), 0.3);
-				border: 1px solid theming.daff-color($neutral, 20);
+				background: rgba(daff-color($neutral, 20), 0.3);
+				border: 1px solid daff-color($neutral, 20);
 
 				code {
 					background: none;
@@ -39,21 +37,21 @@
 			}
 
 			hr {
-				background: theming.daff-color($neutral, 20);
+				background: daff-color($neutral, 20);
 			}
 
 			blockquote {
-				background: rgba(theming.daff-color($primary), 0.1);
-				border-left: 4px solid theming.daff-color($primary, 50);
-				color: theming.daff-color($primary, 100);
+				background: rgba(daff-color($primary), 0.1);
+				border-left: 4px solid daff-color($primary, 50);
+				color: daff-color($primary, 100);
 
 				code {
-					background: rgba(theming.daff-color($primary), 0.12);
-					color: theming.daff-color($primary, 100);
+					background: rgba(daff-color($primary), 0.12);
+					color: daff-color($primary, 100);
 
 					@include stopsArticleCascade(a) {
-						color: theming.daff-color($primary, 70);
-						text-decoration-color: theming.daff-color($primary, 70);
+						color: daff-color($primary, 70);
+						text-decoration-color: daff-color($primary, 70);
 					}
 				}
 			}
@@ -62,7 +60,7 @@
 				border: 1px solid $table-border-light;
 
 				th {
-					background: theming.daff-color($neutral, 10);
+					background: daff-color($neutral, 10);
 				}
 
 				th,
@@ -89,7 +87,7 @@
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			color: $text-color-dark;
 
 			@include stopsArticleCascade(a) {
@@ -98,12 +96,12 @@
 			}
 
 			code {
-				background: rgba(theming.daff-color($neutral, 20), 0.15);
+				background: rgba(daff-color($neutral, 20), 0.15);
 			}
 
 			pre {
-				background: rgba(theming.daff-color($neutral, 20), 0.15);
-				border: 1px solid rgba(theming.daff-color($neutral, 20), 0.15);
+				background: rgba(daff-color($neutral, 20), 0.15);
+				border: 1px solid rgba(daff-color($neutral, 20), 0.15);
 
 				code {
 					background: none;
@@ -112,21 +110,21 @@
 			}
 
 			hr {
-				background: theming.daff-color($neutral, 80);
+				background: daff-color($neutral, 80);
 			}
 
 			blockquote {
-				background: rgba(theming.daff-color($primary), 0.12);
-				border-left: 4px solid theming.daff-color($primary, 40);
-				color: theming.daff-color($primary, 10);
+				background: rgba(daff-color($primary), 0.12);
+				border-left: 4px solid daff-color($primary, 40);
+				color: daff-color($primary, 10);
 
 				code {
-					background: rgba(theming.daff-color($primary), 0.18);
-					color: theming.daff-color($primary, 10);
+					background: rgba(daff-color($primary), 0.18);
+					color: daff-color($primary, 10);
 
 					@include stopsArticleCascade(a) {
-						color: theming.daff-color($primary, 40);
-						text-decoration-color: theming.daff-color($primary, 40);
+						color: daff-color($primary, 40);
+						text-decoration-color: daff-color($primary, 40);
 					}
 				}
 			}
@@ -135,7 +133,7 @@
 				border: 1px solid $table-border-dark;
 
 				th {
-					background: theming.daff-color($neutral, 90);
+					background: daff-color($neutral, 90);
 				}
 
 				th,

package/atoms/form/error-message/error-message.component.d.ts

@@ -4,6 +4,12 @@ export declare class DaffErrorMessageComponent {
      * @docs-private
      */
     class: boolean;
+    /**
+     * @docs-private
+     *
+     * Sets the aria-live of an error message to polite.
+     */
+    ariaLive: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffErrorMessageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffErrorMessageComponent, "daff-error-message", never, {}, {}, never, ["*"], true, never>;
 }

package/atoms/form/form-field/form-field/form-field.component.d.ts

@@ -1,65 +1,156 @@
-import { AfterContentInit, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
+import { AfterContentInit, AfterContentChecked, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 import { DaffPrefixDirective } from '../../../../core/prefix-suffix/prefix.directive';
 import { DaffSuffixDirective } from '../../../../core/prefix-suffix/suffix.directive';
+import { DaffFormLabelDirective } from '../../form-label/form-label.directive';
 import { DaffFormFieldControl } from '../form-field-control';
+import { DaffFormFieldLabelDirective } from '../label/label.directive';
 import * as i0 from "@angular/core";
-export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked {
+import * as i1 from "../../../../core/skeletonable/skeletonable.directive";
+export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked, AfterViewInit {
     private cd;
     /** @docs-private */
     class: boolean;
     /** @docs-private */
     get isSelectField(): boolean;
+    constructor(cd: ChangeDetectorRef);
     /** @docs-private */
     _prefix: DaffPrefixDirective;
     /** @docs-private */
     _suffix: DaffSuffixDirective;
     /**
-     * The child form control that the form field manages.
-     *
      * @docs-private
+     *
+     * The child form control that the form field manages.
      */
     _control: DaffFormFieldControl<unknown>;
     /**
+     * @docs-private
+     * @deprecated Should be removed in v1.0.0 Deprecated in version 0.86.0. Will be removed in version 0.89.0.
+     */
+    _formLabelDirective: DaffFormLabelDirective;
+    /**
+     * @docs-private
+     */
+    _formFieldLabelDirective: DaffFormFieldLabelDirective;
+    /**
+     * @docs-private
+     */
+    private _hint;
+    /**
+     * @docs-private
+     */
+    private _error;
+    /**
+     * @docs-private
+     *
      * Tracking property to keep a record of whether or not the
      * form field should be marked as error.
      */
     isError: boolean;
     /**
+     * @docs-private
+     */
+    get errorClass(): boolean;
+    /**
+     * @docs-private
+     *
      * Tracking property to keep a record of whether or not the
      * form field contains any user input.
      */
     isFilled: boolean;
+    /**
+     * @docs-private
+     *
+     * Tracking property to keep a record of whether or not the
+     * form field should be marked as disabled.
+     */
     isDisabled: boolean;
     /**
+     * @docs-private
+     */
+    get disabledClass(): boolean;
+    /**
+     * @docs-private
+     *
      * Tracking property to keep a record of whether or not the
      * form field should be marked as valid.
      */
     isValid: boolean;
-    constructor(cd: ChangeDetectorRef);
     /**
+     * @docs-private
+     */
+    get validClass(): boolean;
+    /**
+     * @docs-private
+     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused(): boolean;
     /**
-     * Validate whether or not the FormField is in a "usable" state.
+     * @docs-private
+     */
+    get focusedClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get raisedClass(): boolean;
+    /**
+     * The unique id of the form field. Defaults to an autogenerated value. When using this,
+     * it's your responsibility to ensure that the id for each form field is unique.
+     *
+     * It gets assigned to the `for` attribute on the `<label>` inside of the form field.
+     */
+    id: string;
+    /**
+     * @docs-private
+     */
+    hasHint(): boolean;
+    /**
+     * @docs-private
+     */
+    hintId: string;
+    /**
+     * @docs-private
+     */
+    hasErrorMessage(): boolean;
+    /**
+     * @docs-private
+     */
+    errorMessageId: string;
+    /**
+     * @docs-private
+     */
+    get autoLabelId(): string;
+    /**
+     * @docs-private
+     */
+    get customId(): string;
+    /**
+     * @docs-private
+     *
+     * Displays a console warning if the `DaffFormFieldLabelDirective` is not used on controls (native HTML control elements) that support auto-labelling.
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Validates whether or not the form field is in a "usable" state.
      */
     private _validateFormControl;
     /**
-     * Life cycle hook to verify that the form field has an acceptable
+     * @docs-private
+     *
+     * Lifecycle hook to verify that the form field has an acceptable
      * child control instance. Mostly useful for development-time
      * validation of usage.
-     *
-     * @docs-private
      */
     ngAfterContentInit(): void;
     /**
-     * Life cycle hook to verify that the form field has an acceptable
+     * @docs-private
+     *
+     * Lifecycle hook to verify that the form field has an acceptable
      * child control instance. Mostly useful for development-time
      * validation of usage.
-     *
-     * @docs-private
      */
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, {}, {}, ["_prefix", "_suffix", "_control"], ["[daffPrefix]", "label[daffFormLabel]", "*", "[daffSuffix]", "daff-error-message", "daff-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "id": { "alias": "id"; "required": false; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_hint", "_error"], ["[daffPrefix]", "label[daffFormLabel]", "daff-form-label", "label", "*", "[daffSuffix]", "daff-hint", "daff-error-message"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

package/atoms/form/form-field/form-field-control.d.ts

@@ -15,7 +15,10 @@ import { DaffFormFieldState } from './form-field-state';
 export declare abstract class DaffFormFieldControl<T> {
     ngControl: NgControl | null;
     abstract readonly controlType?: any;
+    readonly supportsAutoLabelling?: boolean;
     abstract readonly focused: boolean;
+    readonly id?: string;
+    get raised(): boolean;
     abstract focus(event?: Event): void;
     abstract readonly value: T;
     constructor(ngControl: NgControl | null);

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

@@ -4,7 +4,8 @@ import { DaffSuffixDirective } from '../../../core/prefix-suffix/suffix.directiv
 import { DaffErrorMessageComponent } from '../error-message/error-message.component';
 import { DaffFormLabelDirective } from '../form-label/form-label.directive';
 import { DaffHintComponent } from '../hint/hint.component';
+import { DaffFormFieldLabelDirective } from './label/label.directive';
 /**
  * @docs-private
  */
-export declare const DAFF_FORM_FIELD_COMPONENTS: readonly [typeof DaffFormFieldComponent, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective, typeof DaffHintComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+export declare const DAFF_FORM_FIELD_COMPONENTS: readonly [typeof DaffFormFieldComponent, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective, typeof DaffHintComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective, typeof DaffFormFieldLabelDirective];

package/atoms/form/form-field/label/label.directive.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class DaffFormFieldLabelDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldLabelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormFieldLabelDirective, "daff-form-label", never, {}, {}, never, never, true, never>;
+}

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

@@ -2,3 +2,4 @@ export { DaffFormFieldModule } from './form-field.module';
 export { DaffFormFieldComponent } from './form-field/form-field.component';
 export { DaffFormFieldControl } from './form-field-control';
 export { DAFF_FORM_FIELD_COMPONENTS } from './form-field';
+export { DaffFormFieldLabelDirective } from './label/label.directive';

package/atoms/form/form-label/form-label.directive.d.ts

@@ -1,4 +1,7 @@
 import * as i0 from "@angular/core";
+/**
+ * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. It will be removed in v1.0.0. Deprecated in version 0.86.0. Will be removed in version 0.89.0.
+ */
 export declare class DaffFormLabelDirective {
     /**
      * @docs-private

package/atoms/form/hint/hint.component.d.ts

@@ -4,6 +4,10 @@ export declare class DaffHintComponent {
      * @docs-private
      */
     class: boolean;
+    /**
+     * Displays a validated hint UI.
+     * */
+    validated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, { "validated": { "alias": "validated"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/breadcrumb/src/breadcrumb-theme.scss

@@ -1,21 +1,19 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-breadcrumb-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-breadcrumb__item {
 		a {
-			@include theming.light($type) {
-				color: theming.daff-color($neutral, 80);
-				text-decoration-color: theming.daff-color($neutral, 80);
+			@include light($mode) {
+				color: daff-color($neutral, 80);
+				text-decoration-color: daff-color($neutral, 80);
 			}
 
-			@include theming.dark($type) {
-				color: theming.daff-color($neutral, 30);
-				text-decoration-color: theming.daff-color($neutral, 30);
+			@include dark($mode) {
+				color: daff-color($neutral, 30);
+				text-decoration-color: daff-color($neutral, 30);
 			}
 		}
 	}

package/button/README.md

@@ -24,12 +24,12 @@ Button supports five types that change its visual style.
 ### Stroked button
 <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
 
-> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
+> `dark`, `light`, and `theme` should be used with caution to ensure that there is sufficient contrast.
 
 ### Icon button
 <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
 
-> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
+> `dark`, `light`, and `theme` should be used with caution to ensure that there is sufficient contrast.
 
 ### Underline button
 <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
@@ -87,7 +87,7 @@ Use the `size` property to specify a button size. Setting this property will cha
 ## Colors
 Use the `color` property to change the color of a button. The default color is light gray.
 
-> For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
+> For select button types, `dark` and `light` should be used on a darker background in order to have sufficient contrast.
 
 ## Status indicators
 Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context. Use the `status` property to change the status.

package/button/button/button-base.directive.d.ts

@@ -12,7 +12,6 @@ export declare class DaffButtonBaseDirective {
      * @docs-private
      */
     get disabledClass(): any;
-    loading: boolean;
     /**
      * Sets the tabindex. Defaults to 0.
      */
@@ -38,5 +37,5 @@ export declare class DaffButtonBaseDirective {
      */
     get tabIndexAttribute(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/button/button/raised/raised.component.d.ts

@@ -1,7 +1,7 @@
 import { DaffButtonBaseDirective } from '../button-base.directive';
 import * as i0 from "@angular/core";
 /**
- * @deprecated in favor of the `elevated` property. Deprecated in 0.82.0. Will be removed in version 1.0.0. Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+ * @deprecated in favor of the `elevated` property. Deprecated in version 0.82.0. Will be removed in version 1.0.0.
  *
  * DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
  *