@daffodil/design 0.77.0 → 0.78.0

package/accordion/README.md

@@ -4,6 +4,8 @@ An accordion is a group of vertically stacked headings used to toggle the visibi
 ## Overview
 Accordions are made up of `<daff-accordion-item>`s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
 
+<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
+
 ## Supported Content Types
 An accordion item can include a `[daffAccordionItemTitle]`, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.
 
@@ -14,5 +16,41 @@ An item content can be visibile on render by setting the `initiallyExpanded` pro
 
 ## Usage
 
-### Basic Accordion
-<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
+### Within a standalone component
+To use accordion 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_ACCORDION_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use accordion in a module, import `DaffAccordionModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffAccordionModule } from '@daffodil/design/accordion';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffAccordionModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 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, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionComponent, "daff-accordion", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -1,6 +1,9 @@
 import { OnInit } from '@angular/core';
+import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
-export declare class DaffAccordionItemComponent implements OnInit {
+import * as i1 from "@daffodil/design";
+export declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
+    private openDirective;
     /**
      * @docs-private
      */
@@ -13,24 +16,32 @@ export declare class DaffAccordionItemComponent implements OnInit {
      * @docs-private
      */
     class: boolean;
-    get openClass(): boolean;
     _daffAccordionItemId: string;
     id: string;
     /** Whether or not the item is initiallyExpanded by default. */
     initiallyExpanded: boolean;
-    /**
-     * @docs-private
-     */
-    _open: boolean;
     /**
      * @docs-private
      */
     _animationState: string;
+    constructor(openDirective: DaffOpenableDirective);
     /**
      * @docs-private
      */
     ngOnInit(): void;
-    toggleActive(): void;
+    get open(): boolean;
+    /**
+     * Reveals the contents of the accordion item
+     */
+    reveal(): void;
+    /**
+     * Hides the contents of the accordion item
+     */
+    hide(): void;
+    /**
+     * Toggles the visibility of the contents of the accordion item
+     */
+    toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "id": { "alias": "id"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "id": { "alias": "id"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: { "open": "open"; }; outputs: { "toggled": "toggled"; }; }]>;
 }

package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffAccordionItemTitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffAccordionItemTitleDirective, "[daffAccordionItemTitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffAccordionItemTitleDirective, "[daffAccordionItemTitle]", never, {}, {}, never, never, true, never>;
 }

package/accordion/accordion.d.ts

@@ -0,0 +1,4 @@
+import { DaffAccordionComponent } from './accordion/accordion/accordion.component';
+import { DaffAccordionItemComponent } from './accordion/accordion-item/accordion-item.component';
+import { DaffAccordionItemTitleDirective } from './accordion/accordion-item-title/accordion-item-title.directive';
+export declare const DAFF_ACCORDION_COMPONENTS: readonly [typeof DaffAccordionComponent, typeof DaffAccordionItemComponent, typeof DaffAccordionItemTitleDirective];

package/accordion/accordion.module.d.ts

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

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

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

package/accordion/examples/public_api.d.ts

@@ -1,3 +1,2 @@
 export { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';
-export { AccordionExamplesModule } from './accordion-examples.module';
 export { ACCORDION_EXAMPLES } from './examples';

package/accordion/public_api.d.ts

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

package/article/README.md

@@ -47,4 +47,45 @@ These are styles for inline and multiline blocks of code.
 
 ## 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.
+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.
+
+## Usage
+
+### Within a standalone component
+To use article 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_ARTICLE_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use article in a module, import `DaffArticleModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffArticleModule } from '@daffodil/design/article';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffArticleModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.

package/article/article/article.component.d.ts

@@ -12,5 +12,5 @@ export declare class DaffArticleComponent {
      */
     role: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], true, never>;
 }

package/article/article-meta/article-meta.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffArticleMetaDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleMetaDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleMetaDirective, "[daffArticleMeta]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleMetaDirective, "[daffArticleMeta]", never, {}, {}, never, never, true, never>;
 }

package/article/article.d.ts

@@ -0,0 +1,3 @@
+import { DaffArticleComponent } from './article/article.component';
+import { DaffArticleMetaDirective } from './article-meta/article-meta.directive';
+export declare const DAFF_ARTICLE_COMPONENTS: readonly [typeof DaffArticleComponent, typeof DaffArticleMetaDirective];

package/article/article.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./article/article.component";
-import * as i2 from "./article-meta/article-meta.directive";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./article/article.component";
+import * as i3 from "./article-meta/article-meta.directive";
+/** @deprecated in favor of {@link DAFF_ARTICLE_COMPONENTS} */
 export declare class DaffArticleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffArticleModule, [typeof i1.DaffArticleComponent, typeof i2.DaffArticleMetaDirective], [typeof i3.CommonModule], [typeof i1.DaffArticleComponent, typeof i2.DaffArticleMetaDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffArticleModule, never, [typeof i1.CommonModule, typeof i2.DaffArticleComponent, typeof i3.DaffArticleMetaDirective], [typeof i2.DaffArticleComponent, typeof i3.DaffArticleMetaDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffArticleModule>;
 }

package/article/public_api.d.ts

@@ -1,3 +1,4 @@
-export { DaffArticleComponent } from './article/article.component';
 export { DaffArticleModule } from './article.module';
+export { DAFF_ARTICLE_COMPONENTS } from './article';
+export { DaffArticleComponent } from './article/article.component';
 export { DaffArticleMetaDirective } from './article-meta/article-meta.directive';

package/button/README.md

@@ -31,6 +31,47 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
 ### Underline Button
 <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use button 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_BUTTON_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use button in a module, import `DaffButtonModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffButtonModule } from '@daffodil/design/button';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffButtonModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Sizes
 The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
 

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

@@ -75,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, { "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: {}; }]>;
+    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]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }
 export {};

package/button/button.d.ts

@@ -0,0 +1,3 @@
+import { DaffPrefixSuffixModule } from '@daffodil/design';
+import { DaffButtonComponent } from './button/button.component';
+export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule];

package/button/button.module.d.ts

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

package/button/public_api.d.ts

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

package/callout/README.md

@@ -4,6 +4,48 @@ Callout is a versatile component that can be used to easily highlight a piece of
 ## Overview
 Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
 
+## Usage
+
+### Within a standalone component
+To use callout 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_CALLOUT_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use callout in a module, import `DaffCalloutModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffCalloutModule } from '@daffodil/design/callout';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffCalloutModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+
 ## Supported Content Types
 A `<daff-callout>` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
 

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

@@ -12,5 +12,5 @@ export declare class DaffCalloutComponent {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutComponent, 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: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCalloutComponent, "daff-callout", never, {}, {}, never, ["*"], true, [{ 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: {}; }]>;
 }

package/callout/callout-body/callout-body.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCalloutBodyDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutBodyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutBodyDirective, "[daffCalloutBody]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutBodyDirective, "[daffCalloutBody]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-icon/callout-icon.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCalloutIconDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutIconDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutIconDirective, "[daffCalloutIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutIconDirective, "[daffCalloutIcon]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-subtitle/callout-subtitle.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCalloutSubtitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutSubtitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutSubtitleDirective, "[daffCalloutSubtitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutSubtitleDirective, "[daffCalloutSubtitle]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-tagline/callout-tagline.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCalloutTaglineDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutTaglineDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTaglineDirective, "[daffCalloutTagline]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTaglineDirective, "[daffCalloutTagline]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout-title/callout-title.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCalloutTitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTitleDirective, "[daffCalloutTitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCalloutTitleDirective, "[daffCalloutTitle]", never, {}, {}, never, never, true, never>;
 }

package/callout/callout.d.ts

@@ -0,0 +1,7 @@
+import { DaffCalloutComponent } from './callout/callout.component';
+import { DaffCalloutBodyDirective } from './callout-body/callout-body.directive';
+import { DaffCalloutIconDirective } from './callout-icon/callout-icon.directive';
+import { DaffCalloutSubtitleDirective } from './callout-subtitle/callout-subtitle.directive';
+import { DaffCalloutTaglineDirective } from './callout-tagline/callout-tagline.directive';
+import { DaffCalloutTitleDirective } from './callout-title/callout-title.directive';
+export declare const DAFF_CALLOUT_COMPONENTS: readonly [typeof DaffCalloutComponent, typeof DaffCalloutIconDirective, typeof DaffCalloutTitleDirective, typeof DaffCalloutSubtitleDirective, typeof DaffCalloutTaglineDirective, typeof DaffCalloutBodyDirective];

package/callout/callout.module.d.ts

@@ -1,13 +1,14 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./callout/callout.component";
-import * as i2 from "./callout-icon/callout-icon.directive";
-import * as i3 from "./callout-title/callout-title.directive";
-import * as i4 from "./callout-subtitle/callout-subtitle.directive";
-import * as i5 from "./callout-tagline/callout-tagline.directive";
-import * as i6 from "./callout-body/callout-body.directive";
-import * as i7 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./callout/callout.component";
+import * as i3 from "./callout-icon/callout-icon.directive";
+import * as i4 from "./callout-title/callout-title.directive";
+import * as i5 from "./callout-subtitle/callout-subtitle.directive";
+import * as i6 from "./callout-tagline/callout-tagline.directive";
+import * as i7 from "./callout-body/callout-body.directive";
+/** @deprecated in favor of {@link DAFF_CALLOUT_COMPONENTS} */
 export declare class DaffCalloutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCalloutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCalloutModule, [typeof i1.DaffCalloutComponent, typeof i2.DaffCalloutIconDirective, typeof i3.DaffCalloutTitleDirective, typeof i4.DaffCalloutSubtitleDirective, typeof i5.DaffCalloutTaglineDirective, typeof i6.DaffCalloutBodyDirective], [typeof i7.CommonModule], [typeof i1.DaffCalloutComponent, typeof i2.DaffCalloutIconDirective, typeof i4.DaffCalloutSubtitleDirective, typeof i3.DaffCalloutTitleDirective, typeof i5.DaffCalloutTaglineDirective, typeof i6.DaffCalloutBodyDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCalloutModule, never, [typeof i1.CommonModule, typeof i2.DaffCalloutComponent, typeof i3.DaffCalloutIconDirective, typeof i4.DaffCalloutTitleDirective, typeof i5.DaffCalloutSubtitleDirective, typeof i6.DaffCalloutTaglineDirective, typeof i7.DaffCalloutBodyDirective], [typeof i2.DaffCalloutComponent, typeof i3.DaffCalloutIconDirective, typeof i5.DaffCalloutSubtitleDirective, typeof i4.DaffCalloutTitleDirective, typeof i6.DaffCalloutTaglineDirective, typeof i7.DaffCalloutBodyDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffCalloutModule>;
 }

package/callout/public_api.d.ts

@@ -1,4 +1,5 @@
 export { DaffCalloutModule } from './callout.module';
+export { DAFF_CALLOUT_COMPONENTS } from './callout';
 export * from './callout/callout.component';
 export * from './callout-icon/callout-icon.directive';
 export * from './callout-tagline/callout-tagline.directive';

package/card/README.md

@@ -9,6 +9,47 @@ The example below is a default, filled card that includes all of a card's pre-st
 
 <design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
 
+## Usage
+
+### Within a standalone component
+To use card 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_CARD_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use card in a module, import `DaffCardModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffCardModule } from '@daffodil/design/card';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffCardModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Supported Content Types
 A card supports a wide variety of content and includes minimally pre-styled `image`, `icon`, `tagline`, `title`, `content`, and `actions` content containers.
 

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

@@ -44,5 +44,5 @@ export declare class DaffCardComponent 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, { "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: {}; }]>;
+    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]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
 }

package/card/card-actions/card-actions.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardActionsDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardActionsDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardActionsDirective, "[daffCardActions]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardActionsDirective, "[daffCardActions]", never, {}, {}, never, never, true, never>;
 }

package/card/card-content/card-content.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardContentDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardContentDirective, "[daffCardContent]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardContentDirective, "[daffCardContent]", never, {}, {}, never, never, true, never>;
 }

package/card/card-icon/card-icon.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardIconDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardIconDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardIconDirective, "[daffCardIcon]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardIconDirective, "[daffCardIcon]", never, {}, {}, never, never, true, never>;
 }

package/card/card-image/card-image.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardImageDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardImageDirective, "[daffCardImage]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardImageDirective, "[daffCardImage]", never, {}, {}, never, never, true, never>;
 }

package/card/card-tagline/card-tagline.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardTaglineDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardTaglineDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTaglineDirective, "[daffCardTagline]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTaglineDirective, "[daffCardTagline]", never, {}, {}, never, never, true, never>;
 }

package/card/card-title/card-title.directive.d.ts

@@ -5,5 +5,5 @@ export declare class DaffCardTitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTitleDirective, "[daffCardTitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTitleDirective, "[daffCardTitle]", never, {}, {}, never, never, true, never>;
 }

package/card/card.d.ts

@@ -0,0 +1,8 @@
+import { DaffCardComponent } from './card/card.component';
+import { DaffCardActionsDirective } from './card-actions/card-actions.directive';
+import { DaffCardContentDirective } from './card-content/card-content.directive';
+import { DaffCardIconDirective } from './card-icon/card-icon.directive';
+import { DaffCardImageDirective } from './card-image/card-image.directive';
+import { DaffCardTaglineDirective } from './card-tagline/card-tagline.directive';
+import { DaffCardTitleDirective } from './card-title/card-title.directive';
+export declare const DAFF_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];