@daffodil/design 0.87.2 → 0.88.1

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

@@ -1,10 +1,24 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
+/**
+ * A basic card variant with a filled background.
+ *
+ * @example
+ * ```html
+ * <daff-card>
+ * 	<img daffCardImage src="/" alt="image caption" >
+ *   <div daffCardIcon></div>
+ *   <div daffCardTagline>Card tagline</div>
+ *   <h4 daffCardTitle>Card title</h4>
+ * 	<div daffCardContent>Detailed information about the subject of the card.</div>
+ *   <div daffCardActions>
+ *     <button>Card link</button>
+ *     <button>Another card link</button>
+ *   </div>
+ * </daff-card>
+ * ```
+ */
 export declare class DaffCardComponent extends DaffCardBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,a[daff-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
 }

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

@@ -1,10 +1,9 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
+ */
 export declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedCardComponent, "daff-raised-card,a[daff-raised-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
 }

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

@@ -1,10 +1,24 @@
 import { DaffCardBaseDirective } from '../../card-base.directive';
 import * as i0 from "@angular/core";
+/**
+ * A card variant with a stroked (outlined) border instead of a filled background.
+ *
+ * @example
+ * ```html
+ * <daff-card>
+ * 	<img daffCardImage src="/" alt="image caption" >
+ *   <div daffCardIcon></div>
+ *   <div daffCardTagline>Card tagline</div>
+ *   <h4 daffCardTitle>Card title</h4>
+ * 	<div daffCardContent>Detailed information about the subject of the card.</div>
+ *   <div daffCardActions>
+ *     <button>Card link</button>
+ *     <button>Another card link</button>
+ *   </div>
+ * </daff-card>
+ * ```
+ */
 export declare class DaffStrokedCardComponent extends DaffCardBaseDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedCardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedCardComponent, "daff-stroked-card,a[daff-stroked-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * A container for buttons or calls-to-action, always positioned to the bottom of the card.
+ *
+ * @example
+ * ```html
+ * <div daffCardActions></div>
+ * ```
+ */
 export declare class DaffCardActionsDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardActionsDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardActionsDirective, "[daffCardActions]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,25 +1,17 @@
+import { DaffCardOrientation } from './helpers/card-orientation';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-/**
- * This attribute determines what orientation the the card contents are stacked.
- */
-export type DaffCardOrientation = 'vertical' | 'horizontal';
-export declare enum DaffCardOrientationEnum {
-    Vertical = "vertical",
-    Horizontal = "horizontal"
-}
+import * as i2 from "./helpers/card-orientation";
 export declare class DaffCardBaseDirective {
-    private _orientation;
-    get orientation(): DaffCardOrientation;
-    set orientation(value: DaffCardOrientation);
     /**
-     * @docs-private
+     * The orientation of a card.
      */
-    get verticalClass(): boolean;
+    orientation: DaffCardOrientation;
     /**
-     * @docs-private
+     * Whether or not a card displays a shadow.
      */
-    get horizontalClass(): boolean;
+    elevated: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "orientation": { "alias": "orientation"; "required": false; }; "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ngAcceptInputType_orientation: i2.DaffCardOrientation | null | undefined;
 }

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

@@ -1,9 +1,14 @@
 import * as i0 from "@angular/core";
+/**
+ * A flexible wrapper for text, components, or custom layouts.
+ * It's unstyled except for spacing and should only be used once per card.
+ *
+ * @example
+ * ```html
+ * <div daffCardContent></div>
+ * ```
+ */
 export declare class DaffCardContentDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardContentDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardContentDirective, "[daffCardContent]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Displays a visual or branding element. Avoid using this for interactive or actionable icons.
+ *
+ * @example
+ * ```html
+ * <div daffCardIcon></div>
+ * ```
+ */
 export declare class DaffCardIconDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardIconDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardIconDirective, "[daffCardIcon]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Displays an image.
+ *
+ * @example
+ * ```html
+ * <div daffCardImage></div>
+ * ```
+ */
 export declare class DaffCardImageDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardImageDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardImageDirective, "[daffCardImage]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Short, memorable phrase that complements the title and provides quick context.
+ *
+ * @example
+ * ```html
+ * <div daffCardTagline></div>
+ * ```
+ */
 export declare class DaffCardTaglineDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardTaglineDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTaglineDirective, "[daffCardTagline]", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * The primary heading of the card.
+ *
+ * @example
+ * ```html
+ * <div daffCardTitle></div>
+ * ```
+ */
 export declare class DaffCardTitleDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardTitleDirective, "[daffCardTitle]", never, {}, {}, never, never, true, never>;
 }

package/card/card.d.ts

@@ -13,6 +13,7 @@ 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];
 /**
  * @docs-private
+ * @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
  */
 export declare const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
 /**

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

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

package/card/examples/public_api.d.ts

@@ -1,8 +1,8 @@
 import { BasicCardComponent } from './basic-card/basic-card.component';
 import { CardOrientationComponent } from './card-orientation/card-orientation.component';
 import { CardThemingComponent } from './card-theming/card-theming.component';
+import { ElevatedCardComponent } from './elevated-card/elevated-card.component';
 import { LinkableCardComponent } from './linkable-card/linkable-card.component';
-import { RaisedCardComponent } from './raised-card/raised-card.component';
 import { StrokedCardComponent } from './stroked-card/stroked-card.component';
-export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent | typeof RaisedCardComponent)[];
-export { BasicCardComponent, CardThemingComponent, LinkableCardComponent, RaisedCardComponent, StrokedCardComponent, CardOrientationComponent, };
+export declare const CARD_EXAMPLES: (typeof ElevatedCardComponent)[];
+export { BasicCardComponent, CardThemingComponent, LinkableCardComponent, ElevatedCardComponent, StrokedCardComponent, CardOrientationComponent, };

package/card/helpers/card-orientation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The available orientations for a card.
+ *
+ * | Orientation | Description |
+ * | -- | -- |
+ * | `vertical` | Stacks card content from top to bottom. This is the default orientation. |
+ * | `horizontal` | Places card content side-by-side. On smaller screens, horizontal cards automatically switch to vertical for responsiveness. |
+ */
+export type DaffCardOrientation = 'vertical' | 'horizontal';
+/**
+ * Enum for representing the available card orientations.
+ * See {@link DaffCardOrientation} for descriptions of each orientation.
+ */
+export declare enum DaffCardOrientationEnum {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}

package/card/public_api.d.ts

@@ -3,12 +3,13 @@ export { DAFF_CARD_COMPONENTS } from './card';
 export { DAFF_RAISED_CARD_COMPONENTS } from './card';
 export { DAFF_STROKED_CARD_COMPONENTS } from './card';
 export { DAFF_ALL_CARD_COMPONENTS } from './card';
-export * from './card/basic/basic.component';
+export { DaffCardOrientation, DaffCardOrientationEnum, } from './helpers/card-orientation';
+export { DaffCardComponent } from './card/basic/basic.component';
+export { DaffStrokedCardComponent } from './card/stroked/stroked.component';
+export { DaffCardIconDirective } from './card-icon/card-icon.directive';
+export { DaffCardImageDirective } from './card-image/card-image.directive';
+export { DaffCardTaglineDirective } from './card-tagline/card-tagline.directive';
+export { DaffCardTitleDirective } from './card-title/card-title.directive';
+export { DaffCardContentDirective } from './card-content/card-content.directive';
+export { DaffCardActionsDirective } from './card-actions/card-actions.directive';
 export * from './card/raised/raised.component';
-export * from './card/stroked/stroked.component';
-export * from './card-icon/card-icon.directive';
-export * from './card-image/card-image.directive';
-export * from './card-tagline/card-tagline.directive';
-export * from './card-title/card-title.directive';
-export * from './card-content/card-content.directive';
-export * from './card-actions/card-actions.directive';

package/card/src/card-base-theme.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-class-pattern
 @use '../../scss/theming' as *;
 
 @mixin daff-basic-card-theme-variant($color) {
@@ -30,11 +31,18 @@
 	$tertiary: daff-get-palette($theme, tertiary);
 	$base: daff-get-base-color($theme, base);
 	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$white: daff-get-base-color($theme, 'white');
 	$black: daff-get-base-color($theme, 'black');
 	$neutral: daff-get-palette($theme, neutral);
 	$mode: daff-get-theme-mode($theme);
 
+	.daff-card,
+	.daff-stroked-card {
+		&.elevated {
+			box-shadow: 0 1px 5px -4px rgba($black, 0.5),
+				0 4px 8px 0 rgba($black, 0.05);
+		}
+	}
+
 	.daff-card,
 	.daff-raised-card {
 		@include light($mode) {
@@ -57,21 +65,15 @@
 			@include daff-basic-card-theme-variant(daff-color($neutral, 90));
 
 			&.daff-primary {
-				@include daff-basic-card-theme-variant(
-					daff-color($primary, 60)
-				);
+				@include daff-basic-card-theme-variant(daff-color($primary, 60));
 			}
 
 			&.daff-secondary {
-				@include daff-basic-card-theme-variant(
-					daff-color($secondary, 60)
-				);
+				@include daff-basic-card-theme-variant(daff-color($secondary, 60));
 			}
 
 			&.daff-tertiary {
-				@include daff-basic-card-theme-variant(
-					daff-color($tertiary, 60)
-				);
+				@include daff-basic-card-theme-variant(daff-color($tertiary, 60));
 			}
 		}
 
@@ -93,101 +95,81 @@
 	}
 
 	a {
+		&.daff-card,
+		&.daff-stroked-card {
+			&.elevated {
+				.daff-card__wrapper {
+					&::after {
+						box-shadow: 0 6px 12px rgba($black, 0.08),
+							0 4px 6px rgba($black, 0.04);
+					}
+				}
+			}
+		}
+
 		&.daff-card,
 		&.daff-raised-card {
 			@include light($mode) {
-				@include daff-linkable-card-theme-variant(
-					daff-color($neutral, 20)
-				);
+				@include daff-linkable-card-theme-variant(daff-color($neutral, 20));
 
 				&.daff-primary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($primary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($primary, 70));
 				}
 
 				&.daff-secondary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($secondary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($secondary, 70));
 				}
 
 				&.daff-tertiary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($tertiary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($tertiary, 70));
 				}
 
 				&.daff-theme {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 10)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 10));
 				}
 
 				&.daff-theme-contrast {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 100)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 100));
 				}
 
 				&.daff-dark {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 90)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 90));
 				}
 
 				&.daff-light {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 10)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 10));
 				}
 			}
 
 			@include dark($mode) {
-				@include daff-linkable-card-theme-variant(
-					daff-color($neutral, 80)
-				);
+				@include daff-linkable-card-theme-variant(daff-color($neutral, 80));
 
 				&.daff-primary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($primary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($primary, 70));
 				}
 
 				&.daff-secondary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($secondary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($secondary, 70));
 				}
 
 				&.daff-tertiary {
-					@include daff-linkable-card-theme-variant(
-						daff-color($tertiary, 70)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($tertiary, 70));
 				}
 
 				&.daff-theme {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 90)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 90));
 				}
 
 				&.daff-theme-contrast {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 10)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 10));
 				}
 
 				&.daff-dark {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 100)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 100));
 				}
 
 				&.daff-light {
-					@include daff-linkable-card-theme-variant(
-						daff-color($neutral, 10)
-					);
+					@include daff-linkable-card-theme-variant(daff-color($neutral, 10));
 				}
 			}
 		}

package/container/container/container.component.d.ts

@@ -4,10 +4,6 @@ import * as i1 from "@daffodil/design";
  * @inheritdoc
  */
 export declare class DaffContainerComponent {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffContainerComponent, "daff-container", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
 }

package/core/public_api.d.ts

@@ -16,3 +16,4 @@ export * from './focus/public_api';
 export * from './sizable/public_api';
 export * from './openable/public_api';
 export * from './selectable/public_api';
+export * from './sticky/public_api';

package/core/sticky/public_api.d.ts

@@ -0,0 +1 @@
+export { DaffStickyTrackerDirective } from './sticky-tracker.directive';

package/core/sticky/sticky-tracker.directive.d.ts

@@ -0,0 +1,23 @@
+import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DaffStickyTrackerDirective implements OnDestroy {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly document;
+    sticky: 'top' | 'bottom' | undefined;
+    private sentinelObserver?;
+    private readonly className;
+    private lastPinnedState;
+    private debounceTimeout?;
+    private sentinelElement?;
+    private idleCallbackId?;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, document: Document);
+    private get isBottomSticky();
+    private scheduleObserverCreation;
+    private findScrollableParent;
+    private createSentinel;
+    private createSentinelObserver;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStickyTrackerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStickyTrackerDirective, "[daffStickyTracker]", never, { "sticky": { "alias": "sticky"; "required": false; }; }, {}, never, never, true, never>;
+}