@daffodil/design 0.73.0 → 0.75.0

package/README.md

@@ -2,10 +2,10 @@
 `@daffodil/design` is an Angular component library built to support ecommerce use-cases. The library provides turn-key support for various features like:
 
 * [Pre-Built Components](#components)
-* [Theming](/libs/design/guides/theming.md)
-* [Typography](/libs/design/guides/typography.md)
+* [Theming](/libs/design/scss/theming/README.md)
+* [Typography](/libs/design/scss/typography/README.md)
 * [Accessibility](/libs/design/guides/accessibility.md)
-* [Color](/libs/design/guides/accessibility/color.md)
+* [Color](/libs/design/guides/color.md)
 
 ## Packages
 | Package | Version | Stability |
@@ -23,8 +23,8 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
 ## Components
 
 ### Atoms
-* [Button](/libs/design/src/atoms/button/README.md)
-* [Container](/libs/design/src/atoms/container/README.md)
+* [Button](/libs/design/button/README.md)
+* [Container](/libs/design/container/README.md)
 * [Form](/libs/design/src/atoms/form/README.md)
   * [Checkbox](/libs/design/src/atoms/form/checkbox/README.md)
   * [Checkbox Set](/libs/design/src/atoms/form/checkbox-set/README.md)
@@ -34,26 +34,24 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
   * [Input](/libs/design/src/atoms/form/input/README.md)
   * [Radio](/libs/design/src/atoms/form/radio/README.md)
   * [Radio Set](/libs/design/src/atoms/form/radio-set/README.md)
-  * [Select](/libs/design/src/atoms/form/select/README.md)
+  * [Native Select](/libs/design/src/atoms/form/native-select/README.md)
   * [Quantity Field](/libs/design/src/atoms/form/quantity-field/README.md)
-* [Image](/libs/design/src/atoms/image/README.md)
-* [Loading Icon](/libs/design/src/atoms/loading-icon/README.md)
+* [Image](/libs/design/image/README.md)
+* [Loading Icon](/libs/design/loading-icon/README.md)
 
 ### Molecules
-* [Accordion](/libs/design/src/molecules/accordion/README.md)
-* [Article](/libs/design/src/molecules/article/README.md)
-* [Backdrop](/libs/design/src/molecules/backdrop/README.md)
-* [Callout](/libs/design/src/molecules/callout/README.md)
-* [Card](/libs/design/src/molecules/card/README.md)
-* [Hero](/libs/design/src/molecules/hero/README.md)
-* [Image List](/libs/design/src/molecules/image-list/README.md)
-* [Link Set](/libs/design/src/molecules/link-set/README.md)
-* [List](/libs/design/src/molecules/list/README.md)
-* [Media Gallery](/libs/design/src/molecules/media-gallery/README.md)
-* [Modal](/libs/design/src/molecules/modal/README.md)
-* [Navbar](/libs/design/src/molecules/navbar/README.md)
-* [Paginator](/libs/design/src/molecules/paginator/README.md)
-* [Sidebar](/libs/design/src/molecules/sidebar/README.md)
+* [Accordion](/libs/design/accordion/README.md)
+* [Article](/libs/design/article/README.md)
+* [Callout](/libs/design/callout/README.md)
+* [Card](/libs/design/card/README.md)
+* [Hero](/libs/design/hero/README.md)
+* [Link Set](/libs/design/link-set/README.md)
+* [List](/libs/design/list/README.md)
+* [Media Gallery](/libs/design/media-gallery/README.md)
+* [Modal](/libs/design/modal/README.md)
+* [Navbar](/libs/design/navbar/README.md)
+* [Paginator](/libs/design/paginator/README.md)
+* [Sidebar](/libs/design/sidebar/README.md)
 
 ## Behind the Scenes
 * [The Team](https://github.com/graycoreio/daffodil/graphs/contributors)

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

@@ -1,22 +1,6 @@
-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);
+import * as i1 from "@daffodil/design";
+export declare class DaffAccordionComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionComponent, "daff-accordion", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionComponent, "daff-accordion", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }
-export {};

package/article/README.md

@@ -4,41 +4,47 @@ Article provides styles to common element selectors to create an article in a co
 ## 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
+## Supported Elements
+
+### Headings
 <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
 
-## Article Meta
+### 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
+### 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>
+### Table
 <design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
 
-## Lists
+### Lists
 
-### Unordered List
+#### Unordered List
 <design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
 
-### Ordered List
+#### Ordered List
 <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
 
-## Code
+### Code
 These are styles for inline and multiline blocks of code.
 
-### Inline code
+#### Inline code
 <design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
 
-### Code blocks
+#### Code blocks
 <design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
 
-## Horizontal Rules
+### 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>
+### Blockquote
+<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>
+
+## Encapsulation
+
+Articles also support other custom "non-native" components like [Accordions](../accordion/README.md), [Media Galleries](../media-gallery/README.md), and [Lists](../list/README.md). Unlike typical HTML (<p>, <ol>, <ul>, etc) content, these components must be style encaspulated to prevent article styles bleeding down from the article into their content. Many Daffodil components support this out of the box. If you have a custom component that you would like to place inside an article, you can use the `DaffArticleEncapsulatedDirective` on your component to prevent article styles bleeding into your component.

package/article/examples/article-blockquote/article-blockquote.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleBlockquoteComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleBlockquoteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleBlockquoteComponent, "article-blockquote", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleBlockquoteComponent, "article-blockquote", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-code-block/article-code-block.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleCodeBlockComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleCodeBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCodeBlockComponent, "article-code-block", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCodeBlockComponent, "article-code-block", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-code-inline/article-code-inline.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleCodeInlineComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleCodeInlineComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCodeInlineComponent, "article-code-inline", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleCodeInlineComponent, "article-code-inline", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-headings/article-headings.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleHeadingsComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleHeadingsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHeadingsComponent, "article-headings", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHeadingsComponent, "article-headings", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-hr/article-hr.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleHrComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleHrComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHrComponent, "article-hr", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleHrComponent, "article-hr", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-link/article-link.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleLinkComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleLinkComponent, "article-link", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleLinkComponent, "article-link", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-meta/article-meta.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleMetaComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleMetaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleMetaComponent, "article-meta", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleMetaComponent, "article-meta", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-ol/article-ol.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleOlComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleOlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleOlComponent, "article-ol", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleOlComponent, "article-ol", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-table/article-table.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleTableComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleTableComponent, "article-table", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleTableComponent, "article-table", never, {}, {}, never, never, true, never>;
 }

package/article/examples/article-ul/article-ul.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class ArticleUlComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArticleUlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleUlComponent, "article-ul", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArticleUlComponent, "article-ul", never, {}, {}, never, never, true, never>;
 }

package/article/examples/public_api.d.ts

@@ -7,5 +7,4 @@ export { ArticleMetaComponent } from './article-meta/article-meta.component';
 export { ArticleLinkComponent } from './article-link/article-link.component';
 export { ArticleBlockquoteComponent } from './article-blockquote/article-blockquote.component';
 export { ArticleTableComponent } from './article-table/article-table.component';
-export { ArticleExamplesModule } from './article-examples.module';
 export { ARTICLE_EXAMPLES } from './examples';

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

@@ -0,0 +1,10 @@
+import { DaffSizableDirective, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * The DaffSizable {@link DaffSizable } types that the DaffButtonComponent can implement.
+ */
+export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
+export declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonSizableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonSizableDirective, never, never, {}, {}, never, never, true, never>;
+}

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

@@ -1,44 +1,34 @@
 import { OnInit, ElementRef, Renderer2 } from '@angular/core';
-import { DaffColorable, DaffPrefixable, DaffSuffixable, DaffSizable, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffStatusable } from '@daffodil/design';
+import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import { DaffButtonSizableDirective } from './button-sizable.directive';
 import * as i0 from "@angular/core";
-declare const _daffButtonBase: (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
+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;
-}) & (new (...args: any[]) => {
+    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;
-}) & (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>;
+}) & typeof DaffButtonBase;
 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 {
+export declare class DaffButtonComponent extends _daffButtonBase implements OnInit, DaffPrefixable, DaffSuffixable {
     private elementRef;
     private renderer;
+    private size;
     private buttonType;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
     /**
      * @docs-private
      */
@@ -85,6 +75,6 @@ export declare class DaffButtonComponent extends _daffButtonBase implements OnIn
      * */
     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>;
+    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, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], false, [{ 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/examples/basic-button/basic-button.component.d.ts

@@ -3,5 +3,5 @@ export declare class BasicButtonComponent {
     faChevronLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faChevronRight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicButtonComponent, "basic-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicButtonComponent, "basic-button", never, {}, {}, never, never, true, never>;
 }

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

@@ -3,5 +3,5 @@ export declare class FlatButtonComponent {
     faChevronLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faChevronRight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<FlatButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FlatButtonComponent, "flat-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FlatButtonComponent, "flat-button", never, {}, {}, never, never, true, never>;
 }

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class IconButtonComponent {
     faPlus: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "icon-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "icon-button", never, {}, {}, never, never, true, never>;
 }

package/button/examples/public_api.d.ts

@@ -1,17 +1,9 @@
 export { BUTTON_EXAMPLES } from './examples';
 export { BasicButtonComponent } from './basic-button/basic-button.component';
-export { BasicButtonModule } from './basic-button/basic-button.module';
 export { FlatButtonComponent } from './flat-button/flat-button.component';
-export { FlatButtonModule } from './flat-button/flat-button.module';
 export { IconButtonComponent } from './icon-button/icon-button.component';
-export { IconButtonModule } from './icon-button/icon-button.module';
 export { RaisedButtonComponent } from './raised-button/raised-button.component';
-export { RaisedButtonModule } from './raised-button/raised-button.module';
 export { SizeableButtonComponent } from './sizeable-button/sizeable-button.component';
-export { SizeableButtonModule } from './sizeable-button/sizeable-button.module';
 export { StatusableButtonComponent } from './statusable-button/statusable-button.component';
-export { StatusableButtonModule } from './statusable-button/statusable-button.module';
 export { StrokedButtonComponent } from './stroked-button/stroked-button.component';
-export { StrokedButtonModule } from './stroked-button/stroked-button.module';
 export { UnderlineButtonComponent } from './underline-button/underline-button.component';
-export { UnderlineButtonModule } from './underline-button/underline-button.module';

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

@@ -3,5 +3,5 @@ export declare class RaisedButtonComponent {
     faChevronLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faChevronRight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<RaisedButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RaisedButtonComponent, "raised-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RaisedButtonComponent, "raised-button", never, {}, {}, never, never, true, never>;
 }

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class SizeableButtonComponent {
     faPlus: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<SizeableButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SizeableButtonComponent, "sizeable-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SizeableButtonComponent, "sizeable-button", never, {}, {}, never, never, true, never>;
 }

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

@@ -4,5 +4,5 @@ export declare class StatusableButtonComponent {
     faExclamationTriangle: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faCheckCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<StatusableButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StatusableButtonComponent, "statusable-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusableButtonComponent, "statusable-button", never, {}, {}, never, never, true, never>;
 }

package/button/examples/stroked-button/stroked-button.component.d.ts

@@ -3,5 +3,5 @@ export declare class StrokedButtonComponent {
     faChevronLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faChevronRight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<StrokedButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StrokedButtonComponent, "stroked-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StrokedButtonComponent, "stroked-button", never, {}, {}, never, never, true, never>;
 }

package/button/examples/underline-button/underline-button.component.d.ts

@@ -3,5 +3,5 @@ export declare class UnderlineButtonComponent {
     faChevronLeft: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faChevronRight: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<UnderlineButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UnderlineButtonComponent, "underline-button", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UnderlineButtonComponent, "underline-button", never, {}, {}, never, never, true, never>;
 }

package/button/public_api.d.ts

@@ -1,2 +1,3 @@
 export { DaffButtonComponent } from './button/button.component';
 export { DaffButtonModule } from './button.module';
+export { DaffButtonSizableDirective } from './button/button-sizable.directive';

package/callout/callout/callout.component.d.ts

@@ -1,48 +1,16 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { DaffColorable, DaffCompactable, DaffTextAlignable } from '@daffodil/design';
+import { DaffTextAlignableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-declare class DaffCalloutBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffCalloutBase: (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _color: import("@daffodil/design").DaffPalette;
-    color: import("@daffodil/design").DaffPalette;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _compact: boolean;
-    compact: boolean;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _textAlignment: import("@daffodil/design").DaffTextAlignment;
-    textAlignment: import("@daffodil/design").DaffTextAlignment;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffCalloutBase;
+import * as i1 from "@daffodil/design";
 /**
  * @inheritdoc
  */
-export declare class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
-    private elementRef;
-    private renderer;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+export declare class DaffCalloutComponent {
+    private textAlignable;
+    constructor(textAlignable: DaffTextAlignableDirective);
     /**
      * @docs-private
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCalloutComponent, "daff-callout", never, { "color": { "alias": "color"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "textAlignment": { "alias": "textAlignment"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCalloutComponent, "daff-callout", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffManageContainerLayoutDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffTextAlignableDirective; inputs: { "textAlignment": "textAlignment"; }; outputs: {}; }, { directive: typeof i1.DaffCompactableDirective; inputs: { "compact": "compact"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }
-export {};

package/callout/examples/callout-text-alignment/callout-text-alignment.component.d.ts

@@ -8,5 +8,5 @@ export declare class CalloutTextAlignmentComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<CalloutTextAlignmentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutTextAlignmentComponent, "callout-text-alignment", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutTextAlignmentComponent, "callout-text-alignment", never, {}, {}, never, never, true, never>;
 }

package/callout/examples/callout-theming/callout-theming.component.d.ts

@@ -8,5 +8,5 @@ export declare class CalloutThemingComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<CalloutThemingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutThemingComponent, "callout-theming", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutThemingComponent, "callout-theming", never, {}, {}, never, never, true, never>;
 }

package/callout/examples/callout-with-grid/callout-with-grid.component.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class CalloutWithGridComponent {
     faMobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<CalloutWithGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutWithGridComponent, "callout-with-grid", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalloutWithGridComponent, "callout-with-grid", never, {}, {}, never, never, true, never>;
 }

package/callout/examples/compact-callout/compact-callout.component.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class CompactCalloutComponent {
     faMobile: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<CompactCalloutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CompactCalloutComponent, "compact-callout", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CompactCalloutComponent, "compact-callout", never, {}, {}, never, never, true, never>;
 }

package/callout/examples/public_api.d.ts

@@ -1,9 +1,5 @@
 export { CalloutThemingComponent } from './callout-theming/callout-theming.component';
-export { CalloutThemingModule } from './callout-theming/callout-theming.module';
 export { CalloutTextAlignmentComponent } from './callout-text-alignment/callout-text-alignment.component';
-export { CalloutTextAlignmentModule } from './callout-text-alignment/callout-text-alignment.module';
 export { CalloutWithGridComponent } from './callout-with-grid/callout-with-grid.component';
-export { CalloutWithGridModule } from './callout-with-grid/callout-with-grid.module';
 export { CompactCalloutComponent } from './compact-callout/compact-callout.component';
-export { CompactCalloutModule } from './compact-callout/compact-callout.module';
 export { CALLOUT_EXAMPLES } from './examples';

package/card/card/card.component.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, Renderer2, OnInit } from '@angular/core';
-import { DaffColorable } from '@daffodil/design';
 import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
 export type DaffCardType = null | 'daff-raised-card' | 'daff-stroked-card';
 /**
  * This attribute determines what orientation the the card contents are stacked.
@@ -10,27 +10,10 @@ export declare enum DaffCardOrientationEnum {
     Vertical = "vertical",
     Horizontal = "horizontal"
 }
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-declare class DaffCardBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffCardBase: (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _color: import("@daffodil/design").DaffPalette;
-    color: import("@daffodil/design").DaffPalette;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffCardBase;
 /**
  * @inheritdoc
  */
-export declare class DaffCardComponent extends _daffCardBase implements OnInit, DaffColorable {
+export declare class DaffCardComponent implements OnInit {
     private elementRef;
     private renderer;
     private _orientation;
@@ -61,6 +44,5 @@ export declare class DaffCardComponent extends _daffCardBase implements OnInit,
      * */
     private _hasHostAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,daff-raised-card,daff-stroked-card,a[daff-card],a[daff-raised-card],a[daff-stroked-card]", never, { "color": { "alias": "color"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,daff-raised-card,daff-stroked-card,a[daff-card],a[daff-raised-card],a[daff-stroked-card]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }
-export {};

package/card/examples/basic-card/basic-card.component.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class BasicCardComponent {
     faMapMarked: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicCardComponent, "basic-card", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicCardComponent, "basic-card", never, {}, {}, never, never, true, never>;
 }

package/card/examples/card-orientation/card-orientation.component.d.ts

@@ -8,5 +8,5 @@ export declare class CardOrientationComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<CardOrientationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardOrientationComponent, "card-orientation", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardOrientationComponent, "card-orientation", never, {}, {}, never, never, true, never>;
 }

package/card/examples/card-theming/card-theming.component.d.ts

@@ -7,5 +7,5 @@ export declare class CardThemingComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<CardThemingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardThemingComponent, "card-theming", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardThemingComponent, "card-theming", never, {}, {}, never, never, true, never>;
 }

package/card/examples/linkable-card/linkable-card.component.d.ts

@@ -9,5 +9,5 @@ export declare class LinkableCardComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<LinkableCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LinkableCardComponent, "linkable-card", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkableCardComponent, "linkable-card", never, {}, {}, never, never, true, never>;
 }