@daffodil/design 0.75.0 → 0.76.0

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/core/article-encapsulated/article-encapsulated.directive.d.ts

@@ -1,16 +1,28 @@
 import * as i0 from "@angular/core";
 /**
- * The `DaffArticleEncapsulatedDirective` is used to encapsulate custom components
- * within an article, preventing article styles from bleeding into the component.
+ * `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
+ * preventing {@link DaffArticleComponent } styles from bleeding into the component.
  *
- * ## Example
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
  *
  * ```html
  * <my-custom-component daffArticleEncapsulated></my-custom-component>
  * ```
  *
- * This directive will apply the `daff-ae` class to your component, ensuring that it is encapsulated
- * from the article's styles.
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
+ * })
+ * export class CustomComponent { }
+ *
+ * This directive will apply the `daff-ae` class to your component, ensuring that it is encapsulated from the article's styles.
  */
 export declare class DaffArticleEncapsulatedDirective {
     class: boolean;

package/core/colorable/colorable.directive.d.ts

@@ -2,18 +2,45 @@ import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DaffColorable, DaffPalette } from './colorable';
 import * as i0 from "@angular/core";
 /**
- * The `DaffColorableDirective` allows a component to conditionally apply color-specific
+ * `DaffColorableDirective` allows a component to conditionally apply color-specific
  * styles by setting CSS classes based on the specified color. This directive is useful
  * for applying different color palettes to a component in an Angular application.
  *
  * ## Usage
  *
- * ## Example
+ * ### Implementing it as an attribute directive
  *
  * ```html
  * <div daffColorable [color]="componentColor">Colored content</div>
  * ```
  *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffColorableDirective,
+ *      inputs: ['color'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *
+ *  &.daff-primary {
+ *    background: daff-color($primary, 10);
+ *    color: daff-color($primary, 90);
+ *  }
+ * }
+ * ```
+ *
  * ## Styles
  *
  * The directive applies the following CSS classes based on the color:

package/core/compactable/compactable.directive.d.ts

@@ -1,10 +1,12 @@
 import * as i0 from "@angular/core";
 /**
- * The `DaffCompactableDirective` allows a component to conditionally apply a compact
+ * `DaffCompactableDirective` allows a component to conditionally apply a compact
  * style by toggling a CSS class. This is useful for creating components that can
  * switch between regular and compact styles based on the `compact` property.
  *
- * ## Example
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
  *
  * ```html
  * <div daffCompactable [compact]="isCompact">Content goes here</div>
@@ -13,6 +15,33 @@ import * as i0 from "@angular/core";
  * In this example, the `daff-compact` class is applied to the `div` element when
  * `isCompact` is `true`, making the `div` display its compact state.
  *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffCompactableDirective,
+ *      inputs: ['compact'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  padding: 8px 16px;
+ *
+ *  &.daff-compact {
+ *    padding: 4px 8px;
+ *  }
+ * }
+ * ```
+ *
  * ## Styles
  *
  * The `daff-compact` class should be defined in your styles to display the compact

package/core/manage-container-layout/manage-container-layout.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 /**
- * A directive that gives a component the ability to manage a DaffContainerComponent's layout.
+ * `DaffManageContainerLayoutDirective` gives a component the ability to manage a `DaffContainerComponent`'s layout.
  * By including this directive, predetermined layout styles are passed down to the container.
  *
  * To understand the motivation for this directive, consider:
@@ -21,6 +21,43 @@ import * as i0 from "@angular/core";
  * The former may inappropriately constrain the width of its child elements,
  * while the latter (without `DaffManageContainerLayoutDirective`) may unexpectedly
  * interfere in the layout features of its parent element (i.e. display: grid, display: flex).
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <my-custom-component daffManageContainerLayout>
+ *  <daff-container size="lg"></daff-container>
+ * </my-custom-component>
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  display: grid;
+ *  grid-template-columns: 1fr 1fr;
+ * }
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'my-custom-component',
+ *  template: 'my-custom-component.html',
+ *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
+ * })
+ * export class MyCustomComponent { }
+ *
+ * ```scss
+ * :host {
+ *  display: grid;
+ *  grid-template-columns: 1fr 1fr;
+ * }
+ * ```
+ *
+ * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
  */
 export declare class DaffManageContainerLayoutDirective {
     class: boolean;

package/core/sizable/sizable.directive.d.ts

@@ -2,14 +2,57 @@ import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { DaffSizable, DaffSizeAllType } from './sizable';
 import * as i0 from "@angular/core";
 /**
- * The `DaffSizableDirective` allows for dynamic sizing of a component by setting
+ * `DaffSizableDirective` allows for dynamic sizing of a component by setting
  * CSS classes based on the specified size.
  *
- * ## Example
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
  *
  * ```html
- * <div daffSizable [size]="componentSize">Sized content</div>
+ * <div daffSizable [size]="small">Sized content</div>
+ * ```
+ * In this example, the `daff-small` class is applied to the `div` element, allowing you to
+ * use the class to style the `div`.
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffSizableDirective,
+ *      inputs: ['size'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  &.daff-sm {
+ *    width: 24px;
+ *  }
+ *
+ *  &.daff-md {
+ *    width: 32px;
+ *  }
+ * }
  * ```
+ *
+ * ## Styles
+ *
+ * The directive applies the following CSS classes based on the size:
+ *
+ * - `daff-xs`: Applied when the size is `xs`.
+ * - `daff-sm`: Applied when the size is `sm`.
+ * - `daff-md`: Applied when the size is `md`.
+ * - `daff-lg`: Applied when the size is `lg`.
+ * - `daff-xl`: Applied when the size is `xl`.
  */
 export declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
     /**

package/core/skeletonable/skeletonable.directive.d.ts

@@ -1,14 +1,47 @@
 import * as i0 from "@angular/core";
 /**
- * The `DaffSkeletonableDirective` allows a component to display a skeleton loading
+ * `DaffSkeletonableDirective` allows a component to display a skeleton loading
  * state by conditionally applying a CSS class. This is useful for indicating to
  * users that content is loading or being processed. This directive can be used to
  * apply a skeleton loading state to any component by toggling the `skeleton`
  * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
  * is applied, which should style the component to look like a loading placeholder.
  *
- * The styles for the`daff-skeleton` class should be defined component's
- * stylesheets to display the loading state as desired.
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffSkeletonable [skeleton]="isLoading">Content</div>
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffSkeletonableDirective,
+ *      inputs: ['skeleton'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .daff-skeleton {
+ *  @include state.skeleton-screen(48px, 24px);
+ * }
+ * ```
+ *
+ * ## Styles
+ *
+ * The `daff-skeleton` class should be defined in your styles to display the loading
+ * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
  */
 export declare class DaffSkeletonableDirective {
     skeleton: boolean;

package/core/statusable/statusable.directive.d.ts

@@ -1,23 +1,50 @@
 import { DaffStatus, DaffStatusable } from './statusable';
 import * as i0 from "@angular/core";
 /**
- * The `DaffStatusableDirective` allows a component to conditionally apply status-specific
+ * `DaffStatusableDirective` allows a component to conditionally apply status-specific
  * styles by setting CSS classes based on the specified status. This directive is useful
- * for indicating different statuses such as warnings, errors, or success states.
+ * for indicating different statuses such as warning, danger, or success states.
  *
- * ## Example
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
  *
  * ```html
  * <div daffStatusable [status]="componentStatus">Status content</div>
  * ```
  *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffStatusableDirective,
+ *      inputs: ['status'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ *
+ * ```scss
+ * .custom-component {
+ *
+ *  &.daff-danger {
+ *    background: daff-color($red, 10);
+ *    color: daff-color($red, 90);
+ *  }
+ * }
+ * ```
  * ## Styles
  *
  * The directive applies the following CSS classes based on the status:
  *
- * - `daff-warn`: Applied when the status is `Warn`.
- * - `daff-danger`: Applied when the status is `Danger`.
- * - `daff-success`: Applied when the status is `Success`.
+ * - `daff-warn`: Applied when the status is `warn`.
+ * - `daff-danger`: Applied when the status is `danger`.
+ * - `daff-success`: Applied when the status is `success`.
  */
 export declare class DaffStatusableDirective implements DaffStatusable {
     /**

package/core/text-alignable/text-alignable.directive.d.ts

@@ -2,21 +2,52 @@ import { OnChanges, SimpleChanges } from '@angular/core';
 import { DaffTextAlignable, DaffTextAlignment } from './text-alignable';
 import * as i0 from "@angular/core";
 /**
- * The `DaffTextAlignableDirective` allows for dynamic text alignment of a component
- * by setting CSS classes based on the specified text alignment. This directive is
+ * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
+ * setting CSS classes based on the specified text alignment. This directive is
  * useful when text alignment needs to be managed dynamically in an Angular component.
  *
- * ## Example
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
  *
  * ```html
  * <div daffTextAlignable textAlignment="center">Aligned text</div>
+ *
+ * In this example, the `daff-center` class is added to the `div` element, allowing
+ * you to style the `div` as you wish using the class.
+ *
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffTextAlignableDirective,
+ *      inputs: ['textAlignment'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  &.daff-left {
+ *    text-align: left;
+ *  }
+ * }
  * ```
  *
  * ## Why not just use CSS?
  *
  * While the native CSS `text-align` property can be used for static text alignment,
  * the `DaffTextAlignableDirective` provides a structured and consistent way to handle
- * dynamic text alignment within Angular components in more complex use-cases
+ * dynamic text alignment within Angular components in more complex use-cases where the
  * application of `text-align:center` would cause unexpected side effects.
  */
 export declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges {

package/esm2022/article/article/article.component.mjs

@@ -15,11 +15,11 @@ export class DaffArticleComponent {
         this.role = 'article';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DaffArticleComponent, selector: "daff-article", host: { properties: { "class.daff-article": "this.class", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-article{display:block;overflow:hidden}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem;word-wrap:break-word}.daff-article h1:not(.daff-ae *,.daff-ae) code,.daff-article h2:not(.daff-ae *,.daff-ae) code,.daff-article h3:not(.daff-ae *,.daff-ae) code,.daff-article h4:not(.daff-ae *,.daff-ae) code,.daff-article h5:not(.daff-ae *,.daff-ae) code,.daff-article h6:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h1:not(.daff-ae *,.daff-ae)+p{font-size:1.25rem;line-height:1.75rem;font-weight:400}.daff-article h1:not(.daff-ae *,.daff-ae)+p code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:.25em;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre:last-child{margin-bottom:0}.daff-article pre code{display:block;padding:0}.daff-article code{border-radius:.25em;font-size:.875rem;line-height:1rem;padding:.25em}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:.25em;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DaffArticleComponent, selector: "daff-article", host: { properties: { "class.daff-article": "this.class", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-article{display:block;overflow:hidden}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article a:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem;word-wrap:break-word}.daff-article h1:not(.daff-ae *,.daff-ae) code,.daff-article h2:not(.daff-ae *,.daff-ae) code,.daff-article h3:not(.daff-ae *,.daff-ae) code,.daff-article h4:not(.daff-ae *,.daff-ae) code,.daff-article h5:not(.daff-ae *,.daff-ae) code,.daff-article h6:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h1:not(.daff-ae *,.daff-ae)+p{font-size:1.25rem;line-height:1.75rem;font-weight:400}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:.25em;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre:last-child{margin-bottom:0}.daff-article pre code{display:block;padding:0}.daff-article code{border-radius:.25em;font-size:.875rem;line-height:1rem;padding:.125em .25em}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:.25em;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffArticleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-article', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".daff-article{display:block;overflow:hidden}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem;word-wrap:break-word}.daff-article h1:not(.daff-ae *,.daff-ae) code,.daff-article h2:not(.daff-ae *,.daff-ae) code,.daff-article h3:not(.daff-ae *,.daff-ae) code,.daff-article h4:not(.daff-ae *,.daff-ae) code,.daff-article h5:not(.daff-ae *,.daff-ae) code,.daff-article h6:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h1:not(.daff-ae *,.daff-ae)+p{font-size:1.25rem;line-height:1.75rem;font-weight:400}.daff-article h1:not(.daff-ae *,.daff-ae)+p code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:.25em;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre:last-child{margin-bottom:0}.daff-article pre code{display:block;padding:0}.daff-article code{border-radius:.25em;font-size:.875rem;line-height:1rem;padding:.25em}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:.25em;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'daff-article', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".daff-article{display:block;overflow:hidden}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article a:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem;word-wrap:break-word}.daff-article h1:not(.daff-ae *,.daff-ae) code,.daff-article h2:not(.daff-ae *,.daff-ae) code,.daff-article h3:not(.daff-ae *,.daff-ae) code,.daff-article h4:not(.daff-ae *,.daff-ae) code,.daff-article h5:not(.daff-ae *,.daff-ae) code,.daff-article h6:not(.daff-ae *,.daff-ae) code{font-size:.875em;font-weight:600;line-height:.875em}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h1:not(.daff-ae *,.daff-ae)+p{font-size:1.25rem;line-height:1.75rem;font-weight:400}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:.25em;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre:last-child{margin-bottom:0}.daff-article pre code{display:block;padding:0}.daff-article code{border-radius:.25em;font-size:.875rem;line-height:1rem;padding:.125em .25em}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:.25em;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-article']