@daffodil/design 0.83.0 → 0.84.0

package/atoms/form/checkbox/cva/checkbox-cva.directive.d.ts

@@ -22,6 +22,9 @@ export declare class DaffCheckboxControlValueAccessorDirective implements OnInit
     /**
      * A lifecycle method called when the directive is initialized.
      */
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     /**
      * writes a new value down into the component.

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

@@ -1,6 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class DaffErrorMessageComponent {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffErrorMessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffErrorMessageComponent, "daff-error-message", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffErrorMessageComponent, "daff-error-message", never, {}, {}, never, ["*"], true, never>;
 }

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

@@ -1,7 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./error-message.component";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffErrorMessageModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffErrorMessageModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffErrorMessageModule, [typeof i1.DaffErrorMessageComponent], never, [typeof i1.DaffErrorMessageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffErrorMessageModule, never, [typeof i1.DaffErrorMessageComponent], [typeof i1.DaffErrorMessageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffErrorMessageModule>;
 }

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

@@ -1,53 +1,47 @@
-import { DoCheck, AfterContentInit, AfterContentChecked } from '@angular/core';
+import { AfterContentInit, AfterContentChecked, ChangeDetectorRef } from '@angular/core';
+import { DaffPrefixDirective } from '../../../../core/prefix-suffix/prefix.directive';
+import { DaffSuffixDirective } from '../../../../core/prefix-suffix/suffix.directive';
 import { DaffFormFieldControl } from '../form-field-control';
 import * as i0 from "@angular/core";
-export declare class DaffFormFieldComponent implements DoCheck, AfterContentInit, AfterContentChecked {
-    /**
-     * @docs-private
-     */
-    faChevronDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked {
+    private cd;
+    /** @docs-private */
     class: boolean;
+    /** @docs-private */
+    get isSelectField(): boolean;
+    /** @docs-private */
+    _prefix: DaffPrefixDirective;
+    /** @docs-private */
+    _suffix: DaffSuffixDirective;
     /**
-     * The tracking property used to determine if the parent form has been submitted,
-     * and thus show an error message (even if the field hasn't been touched).
-     *
-     * @deprecated Deprecated in version 0.78.0. Will be removed in version 1.0.0.
-     */
-    formSubmitted: boolean;
-    /**
-     * The child form control that the form-field manages
+     * The child form control that the form field manages.
      *
      * @docs-private
      */
-    _control: DaffFormFieldControl;
+    _control: DaffFormFieldControl<unknown>;
     /**
      * Tracking property to keep a record of whether or not the
      * form field should be marked as error.
      */
     isError: boolean;
+    /**
+     * Tracking property to keep a record of whether or not the
+     * form field contains any user input.
+     */
+    isFilled: boolean;
+    isDisabled: boolean;
     /**
      * Tracking property to keep a record of whether or not the
      * form field should be marked as valid.
      */
     isValid: boolean;
+    constructor(cd: ChangeDetectorRef);
     /**
-     * @docs
-     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused(): boolean;
     /**
-     * Keeps the state of the form field consistent with its child DaffFormControl
-     *
-     * TODO: consider whether or not this can be refactored to some kind of
-     * observable to remove unnecessary change detection.
-     *
-     * @docs-private
-     */
-    ngDoCheck(): void;
-    /**
-     * Validate whether or not the FormField is in
-     * a "usable" state.
+     * Validate whether or not the FormField is in a "usable" state.
      */
     private _validateFormControl;
     /**
@@ -67,5 +61,5 @@ export declare class DaffFormFieldComponent implements DoCheck, AfterContentInit
      */
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "formSubmitted": { "alias": "formSubmitted"; "required": false; }; }, {}, ["_control"], ["*", "daff-error-message"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, {}, {}, ["_prefix", "_suffix", "_control"], ["[daffPrefix]", "label[daffFormLabel]", "*", "[daffSuffix]", "daff-error-message", "daff-hint"], true, never>;
 }

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

@@ -1,4 +1,6 @@
 import { NgControl } from '@angular/forms';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { DaffFormFieldState } from './form-field-state';
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -10,9 +12,21 @@ import { NgControl } from '@angular/forms';
  * in javascript, they get thrown out by the typescript compiler and cannot
  * be used for the necessary dependency injection.
  */
-export declare abstract class DaffFormFieldControl {
-    readonly ngControl: NgControl | null;
-    readonly controlType?: any;
-    readonly focused: boolean;
+export declare abstract class DaffFormFieldControl<T> {
+    ngControl: NgControl | null;
+    abstract readonly controlType?: any;
+    abstract readonly focused: boolean;
     abstract focus(event?: Event): void;
+    abstract readonly value: T;
+    constructor(ngControl: NgControl | null);
+    get state(): DaffFormFieldState;
+    _stateChanges: BehaviorSubject<{
+        focused: boolean;
+        filled: boolean;
+        disabled: boolean;
+        error: boolean;
+        valid: boolean;
+    }>;
+    stateChanges: Observable<DaffFormFieldState>;
+    emitState(): void;
 }

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

@@ -0,0 +1,7 @@
+export interface DaffFormFieldState {
+    focused: boolean;
+    filled: boolean;
+    disabled: boolean;
+    error: boolean;
+    valid: boolean;
+}

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

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

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

@@ -1,10 +1,12 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./form-field/form-field.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@fortawesome/angular-fontawesome";
-import * as i4 from "../error-message/error-message.module";
+import * as i2 from "../error-message/error-message.module";
+import * as i3 from "../form-label/form-label.module";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffFormFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormFieldModule, [typeof i1.DaffFormFieldComponent], [typeof i2.CommonModule, typeof i3.FontAwesomeModule, typeof i4.DaffErrorMessageModule], [typeof i1.DaffFormFieldComponent, typeof i4.DaffErrorMessageModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormFieldModule, never, [typeof i1.DaffFormFieldComponent, typeof i2.DaffErrorMessageModule, typeof i3.DaffFormLabelModule], [typeof i1.DaffFormFieldComponent, typeof i2.DaffErrorMessageModule, typeof i3.DaffFormLabelModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffFormFieldModule>;
 }

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

@@ -1,3 +1,4 @@
 export { DaffFormFieldModule } from './form-field.module';
-export * from './form-field/form-field.component';
+export { DaffFormFieldComponent } from './form-field/form-field.component';
 export { DaffFormFieldControl } from './form-field-control';
+export { DAFF_FORM_FIELD_COMPONENTS } from './form-field';

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

@@ -1,6 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class DaffFormLabelDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormLabelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormLabelDirective, "[daffFormLabel]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormLabelDirective, "[daffFormLabel]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,7 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./form-label.directive";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 export declare class DaffFormLabelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormLabelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormLabelModule, [typeof i1.DaffFormLabelDirective], never, [typeof i1.DaffFormLabelDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormLabelModule, never, [typeof i1.DaffFormLabelDirective], [typeof i1.DaffFormLabelDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffFormLabelModule>;
 }

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class DaffHintComponent {
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffHintComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, {}, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1 @@
+export { DaffHintComponent } from './hint.component';

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

@@ -1,35 +1,31 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnInit } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { DaffFormFieldControl } from '../form-field/form-field-control';
 import * as i0 from "@angular/core";
 /**
  * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
  */
-export declare class DaffInputComponent implements DaffFormFieldControl {
-    /**
-     * @docs-private
-     */
+export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
+    /** @docs-private */
     ngControl: NgControl;
     private _elementRef;
-    /**
-     * Has the form been submitted.
-     */
-    formSubmitted: boolean;
+    /** @docs-private */
+    class: boolean;
+    /** @docs-private */
+    controlType: string;
     focused: boolean;
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     focus(): void;
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     blur(): void;
     constructor(
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>);
+    /** @docs-private */
+    ngOnInit(): void;
+    /** @docs-private */
     onFocus(): void;
+    get value(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, { "formSubmitted": { "alias": "formSubmitted"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, {}, {}, never, ["*"], true, never>;
 }

package/atoms/form/input/input.module.d.ts

@@ -1,8 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./input.component";
-import * as i2 from "@angular/common";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 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 ɵmod: i0.ɵɵNgModuleDeclaration<DaffInputModule, never, [typeof i1.DaffInputComponent], [typeof i1.DaffInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffInputModule>;
 }

package/atoms/form/native-select/native-select.component.d.ts

@@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { DaffFormFieldControl } from '../form-field/form-field-control';
 import * as i0 from "@angular/core";
-export declare class DaffNativeSelectComponent implements DaffFormFieldControl {
+export declare class DaffNativeSelectComponent extends DaffFormFieldControl<string | number> implements DaffFormFieldControl<string | number> {
     /**
      * @docs-private
      */
@@ -12,6 +12,9 @@ export declare class DaffNativeSelectComponent implements DaffFormFieldControl {
      * @docs-private
      */
     controlType: string;
+    /**
+     * @docs-private
+     */
     class: boolean;
     /**
      * Has the form been submitted.
@@ -32,6 +35,7 @@ export declare class DaffNativeSelectComponent implements DaffFormFieldControl {
      */
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>);
     onFocus(): void;
+    get value(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNativeSelectComponent, [{ optional: true; self: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffNativeSelectComponent, "select[daff-native-select]", never, { "formSubmitted": { "alias": "formSubmitted"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -4,7 +4,7 @@ import { DaffQuantityInputComponent } from './quantity-input/quantity-input.comp
 import { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';
 import { DaffFormFieldControl } from '../form-field/form-field-control';
 import * as i0 from "@angular/core";
-export declare class DaffQuantityFieldComponent implements ControlValueAccessor, DaffFormFieldControl {
+export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number> {
     ngControl: NgControl;
     private cd;
     input: DaffQuantityInputComponent;
@@ -49,6 +49,7 @@ export declare class DaffQuantityFieldComponent implements ControlValueAccessor,
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     focus(): void;
+    get value(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldComponent, [{ optional: true; self: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -4,10 +4,10 @@ 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";
+import * as i6 from "@angular/forms";
+import * as i7 from "../input/input.module";
 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 ɵmod: i0.ɵɵNgModuleDeclaration<DaffQuantityFieldModule, [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent], [typeof i4.CommonModule, typeof i5.DaffNativeSelectModule, typeof i6.ReactiveFormsModule, typeof i7.DaffInputModule], [typeof i1.DaffQuantityFieldComponent, typeof i2.DaffQuantityInputComponent, typeof i3.DaffQuantitySelectComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffQuantityFieldModule>;
 }

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

@@ -30,6 +30,9 @@ export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     set value(value: any);
     get disabled(): boolean;
     constructor(ngControl: NgControl, changeDetectorRef: ChangeDetectorRef);
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     ngOnDestroy(): void;
     focus(): void;

package/atoms/form/radio/cva/radio-cva.directive.d.ts

@@ -21,6 +21,9 @@ export declare class DaffRadioControlValueAccessorDirective implements OnInit, C
      */
     name: string;
     constructor(_control: NgControl, _registry: DaffRadioRegistry, _radio: DaffRadioComponent);
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     /**
      *

package/breadcrumb/breadcrumb/breadcrumb.component.d.ts

@@ -13,6 +13,9 @@ export declare class DaffBreadcrumbComponent implements AfterContentInit {
      * @docs-private
      */
     breadcrumbItems: QueryList<DaffBreadcrumbItemDirective>;
+    /**
+     * @docs-private
+     */
     ngAfterContentInit(): void;
     private updateActiveState;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbComponent, never>;

package/breadcrumb/src/breadcrumb-theme.scss

@@ -3,11 +3,20 @@
 @use '../../scss/theming';
 
 @mixin daff-breadcrumb-theme($theme) {
-	$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-breadcrumb__item {
-		color: theming.daff-illuminate($base-contrast, $neutral, 4);
+		a {
+			@include theming.light($type) {
+				color: theming.daff-color($neutral, 80);
+				text-decoration-color: theming.daff-color($neutral, 80);
+			}
+
+			@include theming.dark($type) {
+				color: theming.daff-color($neutral, 30);
+				text-decoration-color: theming.daff-color($neutral, 30);
+			}
+		}
 	}
 }

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

@@ -1,29 +1,13 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
 import { DaffButtonSizableDirective } from './button-sizable.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 import * as i2 from "./button-sizable.directive";
-/**
- * An _elementRef and an instance of renderer2 are needed for the button mixins
- */
-declare class DaffButtonBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffButtonBase: (new (...args: any[]) => {
-    [x: string]: any;
-    _prefix: import("@daffodil/design").DaffPrefixDirective;
-}) & (new (...args: any[]) => {
-    [x: string]: any;
-    _suffix: import("@daffodil/design").DaffSuffixDirective;
-}) & typeof DaffButtonBase;
-export declare class DaffButtonBaseDirective extends _daffButtonBase implements DaffPrefixable, DaffSuffixable {
-    private elementRef;
-    private renderer;
+export declare class DaffButtonBaseDirective {
     private size;
-    constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
+    _prefix: DaffPrefixDirective;
+    _suffix: DaffSuffixDirective;
+    constructor(size: DaffButtonSizableDirective);
     /**
      * @docs-private
      */
@@ -54,6 +38,5 @@ export declare class DaffButtonBaseDirective extends _daffButtonBase implements
      */
     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; }; }, {}, never, 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, { "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: {}; }]>;
 }
-export {};

package/button/src/button/basic/button-theme.scss

@@ -45,9 +45,9 @@
 	.daff-button {
 		@include theming.light($type) {
 			@include daff-button-theme-variant(
+				theming.daff-color($neutral, 10),
 				theming.daff-color($neutral, 20),
-				theming.daff-color($neutral, 30),
-				theming.daff-color($neutral, 40)
+				theming.daff-color($neutral, 30)
 			);
 
 			&.daff-primary {
@@ -74,17 +74,17 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-button-theme-variant(
-					$black,
+					theming.daff-color($neutral, 100),
 					theming.daff-color($neutral, 90),
 					theming.daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-button-theme-variant(
-					$white,
+					theming.daff-color($neutral, 10),
 					theming.daff-color($neutral, 20),
 					theming.daff-color($neutral, 30)
 				);
@@ -94,7 +94,7 @@
 				@include daff-button-theme-variant(
 					$base,
 					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30),
+					theming.daff-color($neutral, 30)
 				);
 			}
 
@@ -102,22 +102,8 @@
 				@include daff-button-theme-variant(
 					$base-contrast,
 					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80),
-				);
-			}
-
-			&[disabled],
-			&.disabled {
-				@include daff-button-theme-variant(
-					theming.daff-color($neutral, 30),
-					theming.daff-color($neutral, 30),
-					theming.daff-color($neutral, 30),
+					theming.daff-color($neutral, 80)
 				);
-				color: theming.daff-color($neutral, 50);
-
-				&:hover {
-					color: theming.daff-color($neutral, 50);
-				}
 			}
 
 			&.daff-warn {
@@ -176,15 +162,15 @@
 				);
 			}
 
-			&.daff-black {
+			&.daff-dark {
 				@include daff-button-theme-variant(
-					$black,
+					theming.daff-color($neutral, 100),
 					theming.daff-color($neutral, 90),
 					theming.daff-color($neutral, 80)
 				);
 			}
 
-			&.daff-white {
+			&.daff-light {
 				@include daff-button-theme-variant(
 					$white,
 					theming.daff-color($neutral, 20),
@@ -196,7 +182,7 @@
 				@include daff-button-theme-variant(
 					$base,
 					theming.daff-color($neutral, 90),
-					theming.daff-color($neutral, 80),
+					theming.daff-color($neutral, 80)
 				);
 			}
 
@@ -204,22 +190,8 @@
 				@include daff-button-theme-variant(
 					$base-contrast,
 					theming.daff-color($neutral, 20),
-					theming.daff-color($neutral, 30),
-				);
-			}
-
-			&[disabled],
-			&.disabled {
-				@include daff-button-theme-variant(
-					theming.daff-color($neutral, 70),
-					theming.daff-color($neutral, 70),
-					theming.daff-color($neutral, 70),
+					theming.daff-color($neutral, 30)
 				);
-				color: theming.daff-color($neutral, 50);
-
-				&:hover {
-					color: theming.daff-color($neutral, 50);
-				}
 			}
 
 			&.daff-warn {

package/button/src/button/button-base.scss

@@ -1,13 +1,23 @@
 @use '../../../scss/interactions';
 @use '../../../scss/typography' as t;
 
+// stylelint-disable selector-class-pattern
 @mixin daff-button-elevated {
-	&.elevated { /* stylelint-disable-line selector-class-pattern */
-		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+	&.elevated {
+		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
+			0 4px 8px 0 rgba(0, 0, 0, 0.05);
 
-		&:hover { /* stylelint-disable-line selector-class-pattern */
+		&:hover {
 			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
 		}
+
+		&[disabled],
+		&.disabled {
+			&:hover {
+				box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
+					0 4px 8px 0 rgba(0, 0, 0, 0.05);
+			}
+		}
 	}
 }
 
@@ -28,12 +38,13 @@
 	&[disabled],
 	&.disabled {
 		cursor: not-allowed;
+		opacity: 0.5;
 	}
 
 	.daff-button__content,
 	.daff-prefix,
 	.daff-suffix {
-		z-index: 2;
+		z-index: 1;
 	}
 
 	.daff-button__loading {
@@ -56,7 +67,9 @@
 			width: 100%;
 			height: 100%;
 			opacity: 0;
+			pointer-events: none;
 			transition: opacity 300ms;
+			z-index: 0;
 		}
 
 		&:hover,