@daffodil/design 0.74.0 → 0.76.0

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/article/src/article-theme.scss

@@ -17,20 +17,19 @@
 	$table-border-color: theming.daff-illuminate($base, $neutral, 2);
 
 	.daff-article {
+		color: $text-color;
+
 		&__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;
+			code {
+				background: theming.daff-illuminate($base, $primary, 1);
+				color: theming.daff-illuminate($base-contrast, $primary, 4);
+			}
 		}
 
 		pre {
@@ -56,12 +55,23 @@
 		blockquote {
 			background: rgba(theming.daff-color($primary), 0.1);
 			border-left: 4px solid theming.daff-illuminate($base, $primary, 5);
-			color: $base-contrast;
+			color: theming.daff-illuminate($base-contrast, $primary, 1);
 
 			code {
 				background: rgba(theming.daff-color($primary), 0.15);
 				color: $base-contrast;
 			}
+
+			@include stopsArticleCascade(a) {
+				color: theming.daff-illuminate($base, $primary, 7);
+			}
+
+			@include stopsArticleCascade(a) {
+				code {
+					background: rgba(theming.daff-color($primary), 0.15);
+					color: theming.daff-illuminate($base-contrast, $primary, 4);
+				}
+			}
 		}
 
 		table {

package/breadcrumb/README.md

@@ -0,0 +1,52 @@
+# Breadcrumb
+Breadcrumbs are a secondary navigation that displays a user's location within a website or application.
+
+## Overview
+Breadcrumbs are a visual representation of the site's navigational hierarchy. They indicate the current page's location and allows users to easily move up to a parent level. It's required for breadcrumbs to be used with the native HTML `<ol>` element, and for each item to be an `<li>`. This offers additional context for assistive technology.
+
+## Basic Breadcrumb
+<design-land-example-viewer-container example="basic-breadcrumb"></design-land-example-viewer-container>
+
+## Usage
+
+## Within a standalone component
+To use breadcrumb in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_BREADCRUMB_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+## Within a module (deprecated)
+To use breadcrumb in a module, import `DaffBreadcrumbModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffBreadcrumbModule } from '@daffodil/design/breadcrumb';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffBreadcrumbModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Accessibility
+Breadcrumbs should be wrapped in a native HTML `<nav>` element so that assistive technologies can present the breadcrumbs as a navigational element on the page. Use `aria-label="Breadcrumbs"` on the `nav` element to provide more context. `aria-current="page"` is added to a breadcrumb item when it's the current page, and `aria-current="false"` on all other items.

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
+export declare class DaffBreadcrumbComponent {
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBreadcrumbComponent, "ol[daff-breadcrumb]", never, {}, {}, never, ["[daffBreadcrumbItem]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+}

package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class DaffBreadcrumbItemDirective {
+    class: boolean;
+    get ariaCurrent(): "page" | "false";
+    /** Whether or not the breadcrumb item is active */
+    active: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffBreadcrumbItemDirective, "li[daffBreadcrumbItem]", never, { "active": { "alias": "active"; "required": false; }; }, {}, never, never, true, never>;
+}

package/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
+export declare const DAFF_BREADCRUMB_COMPONENTS: readonly [typeof DaffBreadcrumbComponent, typeof DaffBreadcrumbItemDirective];

package/breadcrumb/breadcrumb.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumb/breadcrumb.component";
+import * as i2 from "./breadcrumb-item/breadcrumb-item.directive";
+/** @deprecated in favor of {@link DAFF_BREADCRUMB_COMPONENTS} */
+export declare class DaffBreadcrumbModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBreadcrumbModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffBreadcrumbModule, never, [typeof i1.DaffBreadcrumbComponent, typeof i2.DaffBreadcrumbItemDirective], [typeof i1.DaffBreadcrumbComponent, typeof i2.DaffBreadcrumbItemDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffBreadcrumbModule>;
+}

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

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

package/breadcrumb/examples/index.d.ts

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

package/breadcrumb/examples/public_api.d.ts

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

package/breadcrumb/index.d.ts

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

package/breadcrumb/public_api.d.ts

@@ -0,0 +1,4 @@
+export * from './breadcrumb/breadcrumb.component';
+export * from './breadcrumb-item/breadcrumb-item.directive';
+export { DAFF_BREADCRUMB_COMPONENTS } from './breadcrumb';
+export { DaffBreadcrumbModule } from './breadcrumb.module';

package/breadcrumb/src/breadcrumb-theme.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-breadcrumb-theme($theme) {
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	.daff-breadcrumb__item {
+		color: theming.daff-illuminate($base-contrast, $neutral, 4);
+	}
+}

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>;
 }