@daffodil/design 0.73.0 → 0.75.0

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

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

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

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

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

@@ -6,5 +6,5 @@ export declare class HeroThemingComponent {
     color: DaffPalette;
     colorControl: UntypedFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<HeroThemingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HeroThemingComponent, "hero-theming", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeroThemingComponent, "hero-theming", never, {}, {}, never, never, true, never>;
 }

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

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

package/hero/examples/public_api.d.ts

@@ -1,9 +1,5 @@
 export { HeroThemingComponent } from './hero-theming/hero-theming.component';
-export { HeroThemingModule } from './hero-theming/hero-theming.module';
 export { HeroTextAlignmentComponent } from './hero-text-alignment/hero-text-alignment.component';
-export { HeroTextAlignmentModule } from './hero-text-alignment/hero-text-alignment.module';
 export { HeroWithGridComponent } from './hero-with-grid/hero-with-grid.component';
-export { HeroWithGridModule } from './hero-with-grid/hero-with-grid.module';
 export { CompactHeroComponent } from './compact-hero/compact-hero.component';
-export { CompactHeroModule } from './compact-hero/compact-hero.module';
 export { HERO_EXAMPLES } from './examples';

package/hero/hero/hero.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 hero mixins
- */
-declare class DaffHeroBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffHeroBase: (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 DaffHeroBase;
+import * as i1 from "@daffodil/design";
 /**
  * @inheritdoc
  */
-export declare class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
-    private elementRef;
-    private renderer;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+export declare class DaffHeroComponent {
+    private textAlignable;
+    constructor(textAlignable: DaffTextAlignableDirective);
     /**
      * @docs-private
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHeroComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHeroComponent, "daff-hero", never, { "color": { "alias": "color"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "textAlignment": { "alias": "textAlignment"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHeroComponent, "daff-hero", 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/image/examples/basic-image/basic-image.component.d.ts

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

package/image/examples/load-image/load-image.component.d.ts

@@ -3,5 +3,5 @@ export declare class LoadImageComponent {
     loaded: boolean;
     load(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoadImageComponent, "load-image", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadImageComponent, "load-image", never, {}, {}, never, never, true, never>;
 }

package/image/examples/public_api.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExample } from '@daffodil/design';
-export declare const IMAGE_EXAMPLES: ComponentExample[];
+import { BasicImageComponent } from './basic-image/basic-image.component';
+export declare const IMAGE_EXAMPLES: (typeof BasicImageComponent)[];

package/image/examples/skeleton-image/skeleton-image.component.d.ts

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

package/image/image/image.component.d.ts

@@ -1,25 +1,9 @@
-import { EventEmitter, OnInit, ElementRef, Renderer2 } from '@angular/core';
+import { EventEmitter, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { DaffSkeletonable } from '@daffodil/design';
 import * as i0 from "@angular/core";
-/**
- * An _elementRef is needed for the GolfGhostable mixin
- */
-declare class DaffImageBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffImageBase: (new (...args: any[]) => {
-    _skeleton: boolean;
-    skeleton: boolean;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffImageBase;
-export declare class DaffImageComponent extends _daffImageBase implements OnInit, DaffSkeletonable {
+import * as i1 from "@daffodil/design";
+export declare class DaffImageComponent implements OnInit {
     private sanitizer;
-    private elementRef;
-    private renderer;
     private _src;
     get src(): string;
     set src(value: string);
@@ -37,7 +21,7 @@ export declare class DaffImageComponent extends _daffImageBase implements OnInit
      * @docs-private
      */
     ngOnInit(): void;
-    constructor(sanitizer: DomSanitizer, elementRef: ElementRef, renderer: Renderer2);
+    constructor(sanitizer: DomSanitizer);
     /**
      * @docs-private
      */
@@ -47,6 +31,5 @@ export declare class DaffImageComponent extends _daffImageBase implements OnInit
      */
     get maxWidth(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffImageComponent, "daff-image", never, { "skeleton": { "alias": "skeleton"; "required": false; }; "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "load": "load"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffImageComponent, "daff-image", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "load": "load"; }, never, never, false, [{ directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }
-export {};

package/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Generated bundle index. Do not edit.
+ * This is a filler file for making the
+ * demo work in dev mode.
  */
-/// <amd-module name="@daffodil/design" />
 export * from './public_api';

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

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

package/input/examples/examples.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExampleWithModule } from '@daffodil/design';
-export declare const INPUT_EXAMPLES: ComponentExampleWithModule[];
+import { BasicInputComponent } from './basic-input/basic-input.component';
+export declare const INPUT_EXAMPLES: (typeof BasicInputComponent)[];

package/input/examples/input-disabled/input-disabled.component.d.ts

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

package/input/examples/input-error/input-error.component.d.ts

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class InputErrorComponent {
     control: UntypedFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputErrorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputErrorComponent, "input-error", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputErrorComponent, "input-error", never, {}, {}, never, never, true, never>;
 }

package/input/examples/input-with-form-field/input-with-form-field.component.d.ts

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

package/link-set/link-set/link-set.component.d.ts

@@ -1,32 +1,13 @@
-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 DaffLinkSetBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffLinkSetBase: (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    /**
-     * DaffLinkSetComponent is a component for displaying a two or more links.
-     */
-    _renderer: Renderer2;
-}) & typeof DaffLinkSetBase;
+import * as i1 from "@daffodil/design";
 /**
  * DaffLinkSetComponent is a component for displaying a two or more links.
  */
-export declare class DaffLinkSetComponent extends _daffLinkSetBase {
-    private elementRef;
-    private renderer;
+export declare class DaffLinkSetComponent {
     /**
      * @docs-private
      */
     class: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetComponent, "daff-link-set", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLinkSetComponent, "daff-link-set", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }
-export {};

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

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

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

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

package/list/examples/multiline-list/multiline-list.component.d.ts

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

package/list/examples/nav-list/nav-list.component.d.ts

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

package/list/examples/public_api.d.ts

@@ -2,5 +2,4 @@ export { BasicListComponent } from './basic-list/basic-list.component';
 export { NavListComponent } from './nav-list/nav-list.component';
 export { IconListComponent } from './icon-list/icon-list.component';
 export { MultilineListComponent } from './multiline-list/multiline-list.component';
-export { ListExamplesModule } from './list-examples.module';
 export { LIST_EXAMPLES } from './examples';

package/list/list/list.component.d.ts

@@ -1,21 +1,9 @@
-import { ElementRef, Renderer2 } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
+import * as i1 from "@daffodil/design";
 export type DaffListType = 'daff-list' | 'daff-nav-list';
-/**
- * An _elementRef and an instance of renderer2 are needed for the list mixins
- */
-declare class DaffListBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffListBase: (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffListBase;
-export declare class DaffListComponent extends _daffListBase {
+export declare class DaffListComponent {
     private elementRef;
-    private renderer;
     /**
      * @docs-private
      */
@@ -24,7 +12,7 @@ export declare class DaffListComponent extends _daffListBase {
      * @docs-private
      */
     get listType(): DaffListType;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef);
     /**
      * @docs-private
      */
@@ -37,6 +25,5 @@ export declare class DaffListComponent extends _daffListBase {
     get role(): "list" | "navigation";
     private _getHostElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list,daff-nav-list", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffListComponent, "daff-list,daff-nav-list", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }
-export {};

package/loading-icon/README.md

@@ -2,7 +2,7 @@
 Loading icons are used as an indicator of an event in progress.
 
 ## Overview
-Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](../progress-bar/README.md) component instead.
+Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](/libs/design/progress-bar/README.md) component instead.
 
 ## Diameter
 The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.

package/loading-icon/examples/examples.d.ts

@@ -1,4 +1,2 @@
-export { LoadingIconColorModule } from './loading-icon-color/loading-icon-color.module';
 import { LoadingIconDiameterComponent } from './loading-icon-diameter/loading-icon-diameter.component';
-export { LoadingIconDiameterModule } from './loading-icon-diameter/loading-icon-diameter.module';
 export declare const LOADING_ICON_EXAMPLES: (typeof LoadingIconDiameterComponent)[];

package/loading-icon/examples/loading-icon-color/loading-icon-color.component.d.ts

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

package/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.d.ts

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

package/loading-icon/loading-icon/loading-icon.component.d.ts

@@ -1,26 +1,9 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { DaffColorable } from '@daffodil/design';
 import * as i0 from "@angular/core";
-/**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
- */
-declare class DaffLoadingIconBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffLoadingIconBase: (new (...args: any[]) => {
-    _color: import("@daffodil/design").DaffPalette;
-    color: import("@daffodil/design").DaffPalette;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffLoadingIconBase;
+import * as i1 from "@daffodil/design";
 /**
  * @inheritdoc
  */
-export declare class DaffLoadingIconComponent extends _daffLoadingIconBase implements DaffColorable {
-    private elementRef;
-    private renderer;
+export declare class DaffLoadingIconComponent {
     /**
      * The (pixel) diameter of the animation
      */
@@ -33,8 +16,6 @@ export declare class DaffLoadingIconComponent extends _daffLoadingIconBase imple
      * @docs-private
      */
     get maxWidth(): string;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "color": { "alias": "color"; "required": false; }; "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, { "diameter": { "alias": "diameter"; "required": false; }; }, {}, never, never, false, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }
-export {};

package/media-gallery/examples/basic-media-gallery/basic-media-gallery.component.d.ts

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

package/media-gallery/examples/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.d.ts

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

package/media-gallery/examples/public_api.d.ts

@@ -1,7 +1,4 @@
 export { MEDIA_GALLERY_EXAMPLES } from './examples';
-export { BasicMediaGalleryModule } from './basic-media-gallery/basic-media-gallery.module';
 export { BasicMediaGalleryComponent } from './basic-media-gallery/basic-media-gallery.component';
-export { MismatchedSizesMediaGalleryModule } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module';
 export { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component';
 export { SkeletonMediaGalleryComponent } from './skeleton-media-gallery/skeleton-media-gallery.component';
-export { SkeletonMediaGalleryModule } from './skeleton-media-gallery/skeleton-media-gallery.module';

package/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.component.d.ts

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

package/media-gallery/media-gallery/media-gallery.component.d.ts

@@ -1,28 +1,9 @@
-import { OnInit, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
-import { DaffSkeletonable } from '@daffodil/design';
+import { OnInit, OnDestroy } from '@angular/core';
 import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 import * as i0 from "@angular/core";
-/**
- * An _elementRef and an instance of renderer2 are needed for the link set mixins
- */
-declare class DaffMediaGalleryBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffMediaGalleryBase: (new (...args: any[]) => {
-    _skeleton: boolean;
-    skeleton: boolean;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & (new (...args: any[]) => {
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffMediaGalleryBase;
-export declare class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, DaffSkeletonable, OnInit, OnDestroy {
-    private elementRef;
-    private renderer;
+import * as i1 from "@daffodil/design";
+export declare class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
     private registry;
     /**
      * Adds a class for styling the media gallery
@@ -32,10 +13,9 @@ export declare class DaffMediaGalleryComponent extends _daffMediaGalleryBase imp
      * The name of the gallery
      */
     name: string;
-    constructor(elementRef: ElementRef, renderer: Renderer2, registry: DaffMediaGalleryRegistry);
+    constructor(registry: DaffMediaGalleryRegistry);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMediaGalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "skeleton": { "alias": "skeleton"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, ["[daffThumbnail]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMediaGalleryComponent, "daff-media-gallery", never, { "skeleton": { "alias": "skeleton"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, ["[daffThumbnail]"], false, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }
-export {};

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

@@ -3,5 +3,5 @@ import * as i0 from "@angular/core";
 export declare class BasicMenuComponent {
     menu: typeof MenuContentComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicMenuComponent, "basic-menu", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicMenuComponent, "basic-menu", never, {}, {}, never, never, true, never>;
 }

package/menu/examples/basic-menu/menu-content/menu-content.component.d.ts

@@ -4,5 +4,5 @@ export declare class MenuContentComponent {
     faInfo: import("@fortawesome/fontawesome-common-types").IconDefinition;
     faEnvelope: import("@fortawesome/fontawesome-common-types").IconDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuContentComponent, "menu-content", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuContentComponent, "menu-content", never, {}, {}, never, never, true, never>;
 }

package/menu/examples/public_api.d.ts

@@ -1,2 +1,2 @@
-import { ComponentExample } from '@daffodil/design';
-export declare const MENU_EXAMPLES: ComponentExample[];
+import { BasicMenuComponent } from './basic-menu/basic-menu.component';
+export declare const MENU_EXAMPLES: (typeof BasicMenuComponent)[];

package/modal/README.md

@@ -1,47 +1,32 @@
-# Modal Component
+# Modal
+Modal is a dynamically rendered element that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
 
-The `DaffModalComponent` is a dynamically rendered component that floats above the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+## Basic Modal
+<design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>
 
-## Usage
+## Supported Content Types
+A modal includes minimally pre-styled components and directives to help structure the content in your modal.
 
-`DaffModalComponent` relies on using the `entryComponents` of the particular Angular `@NgModule`. To use the features of the `DaffModalComponent`:
+### Header
+Header can be added to a modal by using `<daff-modal-header>`. The header includes a title and an optional close button.
 
-* Import the `DaffModalModule` as you would with any other `@daffodil/design` component
-* Add the component that you want rendered inside the modal to your `@NgModule`'s `entryComponents`
+#### Title
+Title can be added to the header by using the `[daffModalTitle]` directive.
 
-```ts
-my.module.ts
+#### Close Button
+The close button in the header is shown by default but can be hidden by setting the `dismissible` property to `false` on the header.
 
-@NgModule({
-  declarations: [
-    MyModalContentComponent,
-  ],
-  imports: [
-    DaffModalModule,
-  ],
-  entryComponents: [
-    MyModalContentComponent
-  ]
-})
-export class ModalModule { 
-}
-```
+### Content
+Content can be added to a modal by using `<daff-modal-content>`. It should only be used once. It's a wrapper container that can be used to place all additional components and text content within a modal. The content container allows for a ton of control and customization because it's minimally pre-styled and serves as a wrapping and spacing container that is scrollable.
 
-Once your `@NgModule` has been configured, you can take advantage of the `DaffModalService` that is provided by the `DaffModalModule` to `open` and `close` the instance of the `DaffModalComponent`. 
+### Actions
+Buttons can be added to a modal by using `<daff-modal-actions>`. This container will always be positioned at the bottom of a modal. The horizontal alignment of the actions is set to `end`.
 
-```ts
-my-other.component.ts
+## Dismissing a Modal
+A modal can be dismissed via the close button or the `ESC` key. The close button is shown by default but can be hidden by setting the `dismissible` property to `false` on `<daff-modal-header>`. Additionally, the `[daffModalClose]` directive can be added to a `<button>` HTML element.
 
-@Component({
-  template: '<button (click)="showModal()"></button>'
-})
-export class MyOtherComponent {
-  constructor(private modalService: DaffModalService) {}
+## Accessibility
+Modal works with the ARIA `role="dialog"` and `aria-modal="true"` attributes to provide an accessible experience. `aria-labelledby` is assigned the `[daffModalTitle]` string. When a modal is opened, the first tabbable element within it will receive focus.
 
-  showModal() {
-    this.modalService.open(MyModalContentComponent);
-  }
-}
-```
-
-> You will likely never render the `DaffModalComponent` directly like you would with other components due to its dynamic nature.
+### Keyboard Interactions
+A modal can be closed by choosing one of the actions buttons, the close button in the header, or it can be dismissed by pressing the `ESC` key.

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

@@ -6,5 +6,5 @@ export declare class BasicModalComponent {
     constructor(modalService: DaffModalService);
     showModal(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicModalComponent, "basic-modal", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicModalComponent, "basic-modal", never, {}, {}, never, never, true, never>;
 }

package/modal/examples/basic-modal/modal-content.component.d.ts

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