@daffodil/design 0.66.1 → 0.68.0

package/accordion/README.md

@@ -0,0 +1,21 @@
+# Accordion Component
+
+The accordion component is a useful component when you're trying to display chunks of content in a compact fashion.
+
+The accordion consists of a global `<daff-accordion>` parent with children `<daff-accordion-item>`s.
+
+## Usage
+
+```
+<daff-accordion>
+    <daff-accordion-item initiallyActive="true">
+        <h3 daffAccordionItemTitle>Details</h3>
+        <div daffAccordionItemContent>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
+            lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
+            et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
+            <a>Learn More.</a>
+        </div>
+    </daff-accordion-item>
+</daff-accordion>
+```

package/accordion/accordion/accordion/accordion.component.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+declare class DaffAccordionBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffAccordionBase: (new (...args: any[]) => {
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & typeof DaffAccordionBase;
+export declare class DaffAccordionComponent extends _daffAccordionBase {
+    private elementRef;
+    private renderer;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionComponent, "daff-accordion", never, {}, {}, never, ["*"], false, never>;
+}
+export {};

package/accordion/accordion/accordion-item/accordion-item.component.d.ts

@@ -0,0 +1,32 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DaffAccordionItemComponent implements OnInit {
+    /**
+     * @docs-private
+     */
+    faChevronDown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * @docs-private
+     */
+    faChevronUp: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    initiallyActive: boolean;
+    /**
+     * @docs-private
+     */
+    _open: boolean;
+    /**
+     * @docs-private
+     */
+    _animationState: string;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    toggleActive(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "initiallyActive": { "alias": "initiallyActive"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], false, never>;
+}

package/accordion/accordion.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./accordion/accordion/accordion.component";
+import * as i2 from "./accordion/accordion-item/accordion-item.component";
+import * as i3 from "./accordion/accordion-item-title/accordion-item-title.directive";
+import * as i4 from "./accordion/accordion-item-content/accordion-item-content.directive";
+import * as i5 from "@angular/common";
+import * as i6 from "@fortawesome/angular-fontawesome";
+import * as i7 from "@daffodil/design";
+export declare class DaffAccordionModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffAccordionModule, [typeof i1.DaffAccordionComponent, typeof i2.DaffAccordionItemComponent, typeof i3.DaffAccordionItemTitleDirective, typeof i4.DaffAccordionItemContentDirective], [typeof i5.CommonModule, typeof i6.FontAwesomeModule, typeof i7.DaffPrefixSuffixModule], [typeof i1.DaffAccordionComponent, typeof i2.DaffAccordionItemComponent, typeof i3.DaffAccordionItemTitleDirective, typeof i4.DaffAccordionItemContentDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffAccordionModule>;
+}

package/accordion/examples/accordion-examples.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-accordion/basic-accordion.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@daffodil/design/accordion";
+export declare class AccordionExamplesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionExamplesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AccordionExamplesModule, [typeof i1.BasicAccordionComponent], [typeof i2.CommonModule, typeof i3.DaffAccordionModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AccordionExamplesModule>;
+}

package/accordion/examples/examples.d.ts

@@ -0,0 +1,2 @@
+import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
+export declare const ACCORDION_EXAMPLES: (typeof BasicAccordionComponent)[];

package/accordion/examples/public_api.d.ts

@@ -1,6 +1,3 @@
-import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
-import { NavAccordionComponent } from './nav-accordion/nav-accordion.component';
-export { BasicAccordionModule } from './basic-accordion/basic-accordion.module';
-export { NavAccordionModule } from './nav-accordion/nav-accordion.module';
-export declare const ACCORDION_EXAMPLES: (typeof BasicAccordionComponent)[];
-export { BasicAccordionComponent, NavAccordionComponent, };
+export { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
+export { AccordionExamplesModule } from './accordion-examples.module';
+export { ACCORDION_EXAMPLES } from './examples';

package/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/accordion/public_api.d.ts

@@ -0,0 +1,5 @@
+export { DaffAccordionModule } from './accordion.module';
+export * from './accordion/accordion/accordion.component';
+export * from './accordion/accordion-item/accordion-item.component';
+export * from './accordion/accordion-item-title/accordion-item-title.directive';
+export * from './accordion/accordion-item-content/accordion-item-content.directive';

package/accordion/src/accordion-theme.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-accordion-theme($theme) {
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+
+	.daff-accordion-item {
+		border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+	}
+}

package/article/README.md

@@ -0,0 +1,49 @@
+# Article
+Article provides styles to common element selectors to create an article in a content page.
+
+## Overview
+Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
+
+## Headings
+<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
+
+## Article Lead
+Lead is used as the opening paragraph to provide a summary or leading information for an article. Lead is a custom directive of article and is not a native element selector. To use it, add `daffArticleLead` to a paragraph (`<p>`).
+
+<design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container>
+
+## Article Meta
+Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add `daffArticleMeta` to a paragraph (`<p>`).
+
+<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>
+
+## Link
+The link style in an article uses the default browser link style.
+
+<design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>
+
+<h2>Table</h2>
+<design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
+
+## Lists
+
+### Unordered List
+<design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
+
+### Ordered List
+<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
+
+## Code
+These are styles for inline and multiline blocks of code.
+
+### Inline code
+<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
+
+### Code blocks
+<design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
+
+## Horizontal Rules
+<design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
+
+## Blockquote
+<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>

package/article/examples/article-examples.module.d.ts

@@ -11,7 +11,7 @@ import * as i9 from "./article-ol/article-ol.component";
 import * as i10 from "./article-ul/article-ul.component";
 import * as i11 from "./article-table/article-table.component";
 import * as i12 from "@angular/common";
-import * as i13 from "@daffodil/design";
+import * as i13 from "@daffodil/design/article";
 export declare class ArticleExamplesModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleExamplesModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<ArticleExamplesModule, [typeof i1.ArticleBlockquoteComponent, typeof i2.ArticleCodeBlockComponent, typeof i3.ArticleCodeInlineComponent, typeof i4.ArticleHeadingsComponent, typeof i5.ArticleHrComponent, typeof i6.ArticleLeadComponent, typeof i7.ArticleLinkComponent, typeof i8.ArticleMetaComponent, typeof i9.ArticleOlComponent, typeof i10.ArticleUlComponent, typeof i11.ArticleTableComponent], [typeof i12.CommonModule, typeof i13.DaffArticleModule], never>;

package/article/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/article/src/article-theme.scss

@@ -0,0 +1,78 @@
+@use 'sass:map';
+@use './article/stops-article-cascade' as *;
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-article-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	$text-color: theming.daff-illuminate($base-contrast, $neutral, 2);
+	$table-border-color: theming.daff-illuminate($base, $neutral, 2);
+
+	.daff-article {
+		&__meta {
+			color: theming.daff-illuminate($base-contrast, $neutral, 3);
+		}
+
+		@include stopsArticleCascade(a) {
+			color: theming.daff-color($primary);
+		}
+
+		@include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
+			color: $text-color;
+		}
+
+		@include stopsArticleCascade(p) {
+			color: $text-color;
+		}
+
+		pre {
+			background: theming.daff-illuminate($base, $neutral, 1);
+			border: 1px solid theming.daff-illuminate($base, $neutral, 2);
+			color: $base-contrast;
+
+			code {
+				background: none;
+				border: none;
+			}
+		}
+
+		code {
+			background: rgba(theming.daff-illuminate($base, $neutral, 2), 0.5);
+			color: $base-contrast;
+		}
+
+		hr {
+			background: theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		blockquote {
+			background: rgba(theming.daff-color($primary), 0.1);
+			border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
+			color: $base-contrast;
+
+			code {
+				background: rgba(theming.daff-color($primary), 0.15);
+				color: $base-contrast;
+			}
+		}
+
+		table {
+			th {
+				background: theming.daff-illuminate($base, $neutral, 1);
+				border: 1px solid $table-border-color;
+			}
+
+			td {
+				border: 1px solid $table-border-color;
+			}
+		}
+	}
+}

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

@@ -81,5 +81,5 @@ export declare class DaffCheckboxComponent {
      */
     deselect(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": "name"; "value": "value"; "checked": "checked"; "id": "id"; "label": "aria-label"; "labeledBy": "aria-labelledby"; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labeledBy": { "alias": "aria-labelledby"; "required": false; }; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], false, never>;
 }

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

@@ -48,5 +48,5 @@ export declare class DaffCheckboxControlValueAccessorDirective implements OnInit
      */
     fireDeselect(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxControlValueAccessorDirective, [{ optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": "value"; "name": "name"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
 }

package/atoms/form/checkbox-set/checkbox-set.component.d.ts

@@ -23,5 +23,5 @@ export declare class DaffCheckboxSetComponent {
     valueList: EventEmitter<any[]>;
     getValues(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": "formArray"; "name": "name"; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": { "alias": "formArray"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], false, never>;
 }

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

@@ -67,5 +67,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": "formSubmitted"; }, {}, ["_control"], ["*", "daff-error-message"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "formSubmitted": { "alias": "formSubmitted"; "required": false; }; }, {}, ["_control"], ["*", "daff-error-message"], false, never>;
 }

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

@@ -31,5 +31,5 @@ export declare class DaffInputComponent implements DaffFormFieldControl {
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>);
     onFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, { "formSubmitted": "formSubmitted"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, { "formSubmitted": { "alias": "formSubmitted"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -33,5 +33,5 @@ export declare class DaffNativeSelectComponent implements DaffFormFieldControl {
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>);
     onFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNativeSelectComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffNativeSelectComponent, "select[daff-native-select]", never, { "formSubmitted": "formSubmitted"; }, {}, never, ["*"], false, never>;
+    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

@@ -49,5 +49,5 @@ export declare class DaffQuantityFieldComponent implements ControlValueAccessor,
     setDisabledState(isDisabled: boolean): void;
     focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": "min"; "max": "max"; "selectMax": "selectMax"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -42,5 +42,5 @@ export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     onValueChange(e: any): void;
     private setInputDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": "min"; "max": "max"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -47,5 +47,5 @@ export declare class DaffQuantitySelectComponent {
      */
     get valueArray(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantitySelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": "min"; "max": "max"; "extendable": "extendable"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -48,5 +48,5 @@ export declare class DaffRadioControlValueAccessorDirective implements OnInit, C
      */
     fireDeselect(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioControlValueAccessorDirective, [{ optional: true; self: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRadioControlValueAccessorDirective, "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", never, { "value": "value"; "name": "name"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRadioControlValueAccessorDirective, "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -73,5 +73,5 @@ export declare class DaffRadioComponent implements OnInit {
     deselect(): void;
     onChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioComponent, "daff-radio", never, { "checked": "checked"; "value": "value"; "id": "id"; "name": "name"; "label": "aria-label"; "labelledby": "aria-labelledby"; }, { "selectionChange": "selectionChange"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioComponent, "daff-radio", never, { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], false, never>;
 }

package/atoms/form/radio-set/radio-set.component.d.ts

@@ -7,5 +7,5 @@ export declare class DaffRadioSetComponent {
      */
     role: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioSetComponent, "daff-radio-set", never, { "name": "name"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioSetComponent, "daff-radio-set", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/atoms/progress-indicator/progress-indicator.component.d.ts

@@ -51,6 +51,6 @@ export declare class DaffProgressIndicatorComponent extends _daffProgressIndicat
     get fillState(): any;
     constructor(elementRef: ElementRef, renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressIndicatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressIndicatorComponent, "daff-progress-indicator", never, { "color": "color"; "percentage": "percentage"; }, { "finished": "finished"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressIndicatorComponent, "daff-progress-indicator", never, { "color": { "alias": "color"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; }, { "finished": "finished"; }, never, never, false, never>;
 }
 export {};

package/button/README.md

@@ -0,0 +1,58 @@
+# Button
+The button is used for making 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.
+
+## Overview
+Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
+- `<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.
+
+## Types
+- `daff-button` - Rectangular contained button with background color
+- `daff-icon-button` - Icon button used with icon fonts
+- `daff-raised-button` - Rectangular contained button with background color and elevation
+- `daff-stroked-button` - Rectangular outlined button with no background color
+
+### Basic Button
+<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
+
+### 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.
+
+### Raised Button
+<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
+
+### 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.
+
+### Underline Button
+<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
+
+## Sizes
+The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
+
+Supported Sizes: `sm | md | lg`
+
+<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
+
+## Theming
+The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+> For select button types, `black` and `white` 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.
+
+Supported statuses: `warn | danger | success`
+
+<design-land-example-viewer-container example="statusable-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`.

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

@@ -0,0 +1,90 @@
+import { OnInit, ElementRef, Renderer2 } from '@angular/core';
+import { DaffColorable, DaffPrefixable, DaffSuffixable, DaffSizable, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffStatusable } from '@daffodil/design';
+import * as i0 from "@angular/core";
+declare const _daffButtonBase: (new (...args: any[]) => {
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & (new (...args: any[]) => {
+    [x: string]: any;
+    _prefix: import("@daffodil/design").DaffPrefixDirective;
+}) & (new (...args: any[]) => {
+    [x: string]: any;
+    _suffix: import("@daffodil/design").DaffSuffixDirective;
+}) & (new (...args: any[]) => {
+    _color: import("@daffodil/design").DaffPalette;
+    color: import("@daffodil/design").DaffPalette;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & (new (...args: any[]) => {
+    _status: import("@daffodil/design").DaffStatus;
+    status: import("@daffodil/design").DaffStatus;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & (new (...args: any[]) => {
+    _size: DaffButtonSize;
+    size: DaffButtonSize;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & import("@daffodil/design").Constructor<import("@daffodil/design/core/sizable/sizable-mixin").HasElementRef>;
+export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
+/**
+ * The DaffSizable types that the DaffButtonComponent can implement
+ */
+export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
+/**
+ * @inheritdoc
+ */
+export declare class DaffButtonComponent extends _daffButtonBase implements OnInit, DaffPrefixable, DaffSuffixable, DaffColorable, DaffSizable<DaffButtonSize>, DaffStatusable {
+    private elementRef;
+    private renderer;
+    private buttonType;
+    constructor(elementRef: ElementRef, renderer: Renderer2);
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * @docs-private
+     */
+    get button(): boolean;
+    /**
+     * @docs-private
+     */
+    get stroked(): boolean;
+    /**
+     * @docs-private
+     */
+    get raised(): boolean;
+    /**
+     * @docs-private
+     */
+    get flat(): boolean;
+    /**
+     * @docs-private
+     */
+    get icon(): boolean;
+    /**
+     * @docs-private
+     */
+    get underline(): boolean;
+    get disabledClass(): any;
+    loading: boolean;
+    tabindex: number;
+    _disabled: boolean;
+    /**
+     * The disabled state of the button.
+     */
+    get disabled(): any;
+    set disabled(value: any);
+    get disabledAttribute(): boolean;
+    get ariaDisabled(): boolean;
+    get disabledTabIndex(): number;
+    private _getHostElement;
+    /**
+     * Gets whether the button has one of the given attributes.
+     * */
+    private _hasHostAttributes;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-flat-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-flat-button],a[daff-icon-button],a[daff-underline-button]", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], false, never>;
+}
+export {};

package/button/button.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./button/button.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@daffodil/design";
+import * as i4 from "@daffodil/design/loading-icon";
+export declare class DaffButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, [typeof i1.DaffButtonComponent], [typeof i2.CommonModule, typeof i3.DaffPrefixSuffixModule, typeof i4.DaffLoadingIconModule], [typeof i1.DaffButtonComponent, typeof i3.DaffPrefixSuffixModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffButtonModule>;
+}

package/button/examples/basic-button/basic-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./basic-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class BasicButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicButtonModule, never>;

package/button/examples/flat-button/flat-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./flat-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class FlatButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatButtonModule, never>;

package/button/examples/icon-button/icon-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./icon-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class IconButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonModule, never>;

package/button/examples/raised-button/raised-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./raised-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class RaisedButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<RaisedButtonModule, never>;

package/button/examples/sizeable-button/sizeable-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./sizeable-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class SizeableButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SizeableButtonModule, never>;

package/button/examples/statusable-button/statusable-button.module.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./statusable-button.component";
-import * as i2 from "@daffodil/design";
+import * as i2 from "@daffodil/design/button";
 import * as i3 from "@fortawesome/angular-fontawesome";
 export declare class StatusableButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StatusableButtonModule, never>;