@daffodil/design 0.85.0 → 0.87.0

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/action/action.directive.d.ts

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

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

@@ -1,26 +1,62 @@
-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 { DaffFormFieldActionDirective } from '../action/action.directive';
 import { DaffFormFieldControl } from '../form-field-control';
+import { DaffFormFieldLabelDirective } from '../label/label.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../../core/skeletonable/skeletonable.directive";
-export declare class DaffFormFieldComponent implements AfterContentInit, AfterContentChecked {
+export type DaffFormFieldApperanace = 'fluid' | 'fixed';
+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
+     */
+    get hasPrefixClass(): DaffPrefixDirective;
     /** @docs-private */
     _suffix: DaffSuffixDirective;
     /**
-     * The child form control that the form field manages.
-     *
      * @docs-private
      */
+    get hasSuffixClass(): DaffSuffixDirective | DaffFormFieldActionDirective;
+    /**
+     * @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
+     */
+    _action: DaffFormFieldActionDirective;
+    /**
+     * @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.
      */
@@ -30,16 +66,26 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      */
     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.
      */
@@ -48,8 +94,9 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      * @docs-private
      */
     get validClass(): boolean;
-    constructor(cd: ChangeDetectorRef);
     /**
+     * @docs-private
+     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused(): boolean;
@@ -61,26 +108,81 @@ export declare class DaffFormFieldComponent implements AfterContentInit, AfterCo
      * @docs-private
      */
     get raisedClass(): boolean;
+    private _appearance;
+    /**
+     * The appearance style of a form field, whether the label is fluid or fixed.
+     */
+    get appearance(): DaffFormFieldApperanace;
+    set appearance(value: DaffFormFieldApperanace);
     /**
-     * Validate whether or not the FormField is in a "usable" state.
+     * @docs-private
+     */
+    get fluidClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get fixedClass(): boolean;
+    /**
+     * @docs-private
+     */
+    get isFixed(): 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-hint", "daff-error-message"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_action", "_hint", "_error"], ["*", "[daffPrefix]", "*", "[daffSuffix]", "daff-hint", "daff-error-message", "[daffFormFieldAction]", "label[daffFormLabel]", "daff-form-label", "label"], true, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }

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

@@ -15,7 +15,9 @@ 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;

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

@@ -4,7 +4,9 @@ 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 { DaffFormFieldActionDirective } from './action/action.directive';
+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, typeof DaffFormFieldActionDirective];

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,5 @@ 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';
+export { DaffFormFieldActionDirective } from './action/action.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

@@ -5,7 +5,7 @@ export declare class DaffHintComponent {
      */
     class: boolean;
     /**
-     * Whether or not the hint has been validated
+     * Displays a validated hint UI.
      * */
     validated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHintComponent, never>;

package/button/README.md

@@ -1,55 +1,63 @@
 # Button
-Buttons are used to make actions apparent to the end user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
+Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.
 
 ## Overview
-Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
+Button supports five variants that change its visual style, each applied as an attribute:
 
-- `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
-- `<button>` should be used when a clickable action is performed within the same page.
+| Attribute | Description |
+| --------- | ----------- |
+| `daff-button` | Rectangular button with background color |
+| `daff-flat-button`| Rectangular button with no outline or background color |
+| `daff-icon-button` | Icon only button used with icon fonts |
+| `daff-stroked-button` | Rectangular button with oultline, no background color |
+| `daff-underline-button` | Text button with underline styling |
 
-## Types
-Button supports five types that change its visual style.
-
-- `daff-button` - Rectangular contained button with background color
-- `daff-flat-button` - Rectangular contained button with no outline or background color
-- `daff-icon-button` - Icon button used with icon fonts
-- `daff-stroked-button` - Rectangular outlined button with no background color
-
-### Basic Button
+**Basic button**
 <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
 
-### Flat Button
+**Flat button**
 <design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
 
-### Stroked button
+**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
+**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
+**Underline button**
 <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
 
-### Raised button (deprecated)
-<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
+## When to use
+Native `<button>` or `<a>` elements should always be used in order to provide an easy, accessible experience for users.
+
+- Use `<a>` for navigation to new pages or different sections.
+- Use `<button>` for actions performed within the same page.
 
 ## Usage
 
 ### Within a standalone component
-To use button in a standalone component, import each button type directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
+To use button in a standalone component, import each button type directly into your custom component.
+
+Available imports:
+- `DAFF_BASIC_BUTTON_COMPONENTS`
+- `DAFF_FLAT_BUTTON_COMPONENTS`
+- `DAFF_ICON_BUTTON_COMPONENTS`
+- `DAFF_STROKED_BUTTON_COMPONENTS`
+- `DAFF_UNDERLINE_BUTTON_COMPONENTS`
+- `DAFF_BUTTON_COMPONENTS` (all types)
 
 ```ts
-import { DaffButtonComponent } from '@daffodil/design/button';
+import { DAFF_BASIC_BUTTON_COMPONENTS } from '@daffodil/design/button';
 
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
   imports: [
-    DaffButtonComponent,
+    DAFF_BASIC_BUTTON_COMPONENTS,
   ],
 })
 export class CustomComponent {}
@@ -79,41 +87,49 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
+## Anatomy
+Buttons should always have a label, unless you are only using an icon that is universally understood and accessible.
+
+### Icon support
+An icon can be rendered on either side of the button text content with the `daffPrefix` and `daffSuffix` selectors. Avoid using both simultaneously.
+
+```html
+<button daff-button>
+  <fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
+  Button label
+</button>
+
+<button daff-button>
+  Button label
+  <fa-icon [faIcon]="faArrowRight" daffPrefix></fa-icon>
+</button>
+```
+
 ## Sizes
-Use the `size` property to specify a button size. Setting this property will change the height and padding of a button. The size of all variants will default to `md` if none is defined.
+Use the `size` property to control button dimensions. The default size is `md`.
 
 <design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
 
 ## Colors
-Use the `color` property to change the color of a button. The default color is light gray.
+Use the `color` property to change the color of a button.
 
-> For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
+> Note: `dark`, `light`, and `theme` should be used on appropriate backgrounds for 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.
+Status indicators help users understand the type of action a button performs and its importance relative to other buttons in the same context. Use the `status` property to convey different semantic meanings.
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 
 ## Elevation
-Use the `elevated` property to add a shadow to buttons. Note that the `elevated` property is not supported for flat, icon, and underline buttons.
+Add shadows to buttons with the `elevated` property.
 
-<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
-
-## Icon support
-An icon can be rendered on either side of the button text content with the `daffPrefix` and `daffSuffix` selectors.
+> Note: The `elevated` property is not supported for flat, icon, and underline buttons.
 
-```html
-<button daff-button>
-  <fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
-  Button Content
-  <fa-icon [faIcon]="faUser" daffSuffix></fa-icon>
-</button>
-```
+<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
 
 ## Accessbility
 Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default.
 
-- The `<button>` element should be used when a clickable action is performed within the same page.
-- The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
-
-Buttons and links containing only icons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.
+- Use `<a>` for navigation to new pages or different sections.
+- Use `<button>` for actions performed within the same page.
+- Icon only buttons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.

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

@@ -5,19 +5,24 @@ import * as i1 from "@daffodil/design";
 import * as i2 from "./button-sizable.directive";
 export declare class DaffButtonBaseDirective {
     private size;
+    /**
+     * @docs-private
+     */
     _prefix: DaffPrefixDirective;
-    _suffix: DaffSuffixDirective;
-    constructor(size: DaffButtonSizableDirective);
     /**
      * @docs-private
      */
-    get disabledClass(): any;
-    loading: boolean;
+    _suffix: DaffSuffixDirective;
+    constructor(size: DaffButtonSizableDirective);
     /**
-     * Sets the tabindex. Defaults to 0.
+     * Sets the tabindex.
      */
     tabindex: number;
     private _disabled;
+    /**
+     * @docs-private
+     */
+    get disabledClass(): any;
     /**
      * The disabled state of the button.
      */
@@ -38,5 +43,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.d.ts

@@ -1,3 +1,4 @@
+import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
 import { DaffButtonComponent } from './button/basic/button.component';
 import { DaffFlatButtonComponent } from './button/flat/flat.component';
 import { DaffIconButtonComponent } from './button/icon/icon.component';
@@ -7,4 +8,24 @@ import { DaffUnderlineButtonComponent } from './button/underline/underline.compo
 /**
  * @docs-private
  */
-export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_BASIC_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_FLAT_BUTTON_COMPONENTS: readonly [typeof DaffFlatButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_ICON_BUTTON_COMPONENTS: readonly [typeof DaffIconButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_STROKED_BUTTON_COMPONENTS: readonly [typeof DaffStrokedButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+/**
+ * @docs-private
+ */
+export declare const DAFF_UNDERLINE_BUTTON_COMPONENTS: readonly [typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];

package/button/public_api.d.ts

@@ -1,5 +1,5 @@
 export { DaffButtonModule } from './button.module';
-export { DAFF_BUTTON_COMPONENTS } from './button';
+export { DAFF_BUTTON_COMPONENTS, DAFF_BASIC_BUTTON_COMPONENTS, DAFF_FLAT_BUTTON_COMPONENTS, DAFF_ICON_BUTTON_COMPONENTS, DAFF_STROKED_BUTTON_COMPONENTS, DAFF_UNDERLINE_BUTTON_COMPONENTS, } from './button';
 export { DaffButtonComponent } from './button/basic/button.component';
 export { DaffFlatButtonComponent } from './button/flat/flat.component';
 export { DaffRaisedButtonComponent } from './button/raised/raised.component';

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

@@ -23,7 +23,6 @@
 
 @mixin daff-button-base {
 	@include interactions.clickable();
-	@include t.text-truncate();
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -47,12 +46,6 @@
 		z-index: 1;
 	}
 
-	.daff-button__loading {
-		> * {
-			width: 100%;
-		}
-	}
-
 	.daff-button__content {
 		@include t.text-truncate();
 	}
@@ -87,10 +80,6 @@
 		line-height: 2rem;
 		height: 2rem;
 		padding: 0 1rem;
-
-		.daff-button__loading {
-			width: 1rem;
-		}
 	}
 
 	&.daff-md {
@@ -98,10 +87,6 @@
 		line-height: 3rem;
 		height: 3rem;
 		padding: 0 1.5rem;
-
-		.daff-button__loading {
-			width: 1.5rem;
-		}
 	}
 
 	&.daff-lg {
@@ -109,9 +94,5 @@
 		line-height: 3.5rem;
 		height: 3.5rem;
 		padding: 0 1.5rem;
-
-		.daff-button__loading {
-			width: 2rem;
-		}
 	}
 }

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

@@ -42,7 +42,7 @@
 
 	.daff-raised-button {
 		@include daff-raised-button-theme-variant(
-			daff-illuminate($base, $neutral, 2)
+			daff-color($neutral, 20)
 		);
 
 		&.daff-primary {
@@ -76,9 +76,9 @@
 		&[disabled],
 		&.disabled {
 			@include daff-raised-button-theme-variant(
-				daff-illuminate($base, $neutral, 3)
+				daff-color($neutral, 30)
 			);
-			color: daff-illuminate($base, $neutral, 5);
+			color: daff-color($neutral, 50);
 
 			&::after {
 				box-shadow: none;

package/core/compactable/compactable.directive.d.ts

@@ -44,6 +44,9 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffCompactableDirective {
+    /**
+     * Controls whether the component is compact.
+     */
     compact: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCompactableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCompactableDirective, "[daffCompactable]", never, { "compact": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;

package/core/openable/openable.directive.d.ts

@@ -47,7 +47,7 @@ import * as i0 from "@angular/core";
  * ```
  */
 export declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
-    /** Whether or not a component implementing the directive is open */
+    /** Controls whether the component is open. */
     open: boolean;
     private _setOpen;
     /** Whether or not a component should handle state

package/core/selectable/selectable.directive.d.ts

@@ -3,7 +3,9 @@ import { DaffSelectable } from '../selectable/selectable';
 import * as i0 from "@angular/core";
 export declare class DaffSelectableDirective implements DaffSelectable {
     private cd;
-    /** Whether or not a component implementing the directive is selected */
+    /**
+     * Controls whether the component is selected.
+     */
     selected: boolean;
     /**
      * An event that fires after the media element becomes selected.

package/core/sizable/sizable.directive.d.ts

@@ -63,9 +63,9 @@ export declare class DaffSizableDirective<T extends DaffSizeAllType> implements
         'daff-xl': boolean;
     };
     /**
-     * The size of a component.
+     * The size of the component.
      *
-     * Default options are: `xs`, `sm`, `md`, `lg`, and `xl`.
+     * Options are: `xs`, `sm`, `md`, `lg`, and `xl`.
      */
     size: T;
     /**

package/core/skeletonable/public_api.d.ts

@@ -1,2 +1 @@
-export { DaffSkeletonable } from './skeletonable';
 export { DaffSkeletonableDirective } from './skeletonable.directive';

package/core/skeletonable/skeletonable.directive.d.ts

@@ -42,6 +42,9 @@ import * as i0 from "@angular/core";
  * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
  */
 export declare class DaffSkeletonableDirective {
+    /**
+     * Controls whether the component displays a skeleton loading state.
+     */
     skeleton: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSkeletonableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSkeletonableDirective, "[daffSkeletonable]", never, { "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;