@daffodil/design 0.90.0 → 0.92.3-rc.0

package/button/index.d.ts

@@ -1,19 +1,26 @@
 import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
+import * as _daffodil_design_button from '@daffodil/design/button';
 import * as i1 from '@daffodil/design';
-import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffSuffixDirective, DaffDisableableDirective, DaffLoadableDirective } from '@daffodil/design';
 
 /**
  * The size types that the DaffButtonComponent can implement.
  */
 type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
 declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {
+    /**
+     * @docs-private
+     */
+    defaultSize: DaffButtonSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonSizableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonSizableDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-declare class DaffButtonBaseDirective {
-    private size;
+declare class DaffButtonBaseDirective implements DaffDisableable {
+    private buttonSizable;
+    private disabledDirective;
+    private loadingDirective;
     /**
      * @docs-private
      */
@@ -22,19 +29,30 @@ declare class DaffButtonBaseDirective {
      * @docs-private
      */
     _suffix: DaffSuffixDirective;
-    constructor(size: DaffButtonSizableDirective);
+    constructor(buttonSizable: DaffButtonSizableDirective, disabledDirective: DaffDisableableDirective, loadingDirective: DaffLoadableDirective);
     /**
      * Sets the tabindex.
      */
     tabindex: number;
-    private _disabled;
     /**
      * The disabled state of the button.
      */
     get disabled(): any;
     set disabled(value: any);
+    /**
+     * @docs-private
+     *
+     * Internal function to access the loading property of the DaffLoadableDirective
+     */
+    get loading(): boolean;
+    /**
+     * @docs-private
+     *
+     * Internal function to access the size property of the DaffButtonSizableDirective
+     */
+    get buttonSize(): _daffodil_design_button.DaffButtonSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.DaffLoadableDirective; inputs: { "loading": "loading"; }; outputs: {}; }]>;
 }
 
 /**
@@ -163,6 +181,8 @@ declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
 }
 
 /**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
+ *
  * DaffUnderlineButtonComponent is a borderless button with a custom underline style.
  *
  * @example Underline button
@@ -216,6 +236,7 @@ declare const DAFF_ICON_BUTTON_COMPONENTS: readonly [typeof DaffIconButtonCompon
 declare const DAFF_STROKED_BUTTON_COMPONENTS: readonly [typeof DaffStrokedButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
 /**
  * @docs-private
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
  */
 declare const DAFF_UNDERLINE_BUTTON_COMPONENTS: readonly [typeof DaffUnderlineButtonComponent, typeof DaffPrefixDirective, typeof DaffSuffixDirective];
 

package/button/src/button/basic/button-theme.scss

@@ -12,8 +12,10 @@
 		background: $hover-color;
 	}
 
-	&:hover {
-		color: daff-text-contrast($hover-color);
+	@media (hover: hover) {
+		&:hover {
+			color: daff-text-contrast($hover-color);
+		}
 	}
 
 	&:active {

package/button/src/button/button-base.scss

@@ -7,12 +7,15 @@
 		box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
 			0 4px 8px 0 rgba(0, 0, 0, 0.05);
 
-		&:hover {
-			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
+		@media (hover: hover) {
+			&:hover {
+				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08),
+					0 4px 6px rgba(0, 0, 0, 0.04);
+			}
 		}
 
 		&[disabled],
-		&.disabled {
+		&.daff-disabled {
 			&:hover {
 				box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
 					0 4px 8px 0 rgba(0, 0, 0, 0.05);
@@ -35,7 +38,7 @@
 	text-decoration: none;
 
 	&[disabled],
-	&.disabled {
+	&.daff-disabled {
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
@@ -49,10 +52,23 @@
 	.daff-button__content {
 		@include t.text-truncate();
 	}
+
+	&.daff-loading {
+		.daff-button__content,
+		.daff-prefix,
+		.daff-suffix {
+			opacity: 0;
+		}
+
+		.daff-button__loading {
+			z-index: 5;
+			position: absolute;
+		}
+	}
 }
 
 @mixin daff-button-background($border-radius) {
-	&:not(&[disabled], &.disabled) {
+	&:not(&[disabled], &.daff-disabled) {
 		&::after {
 			content: '';
 			border-radius: $border-radius;
@@ -65,12 +81,19 @@
 			z-index: 0;
 		}
 
-		&:hover,
 		&:active {
 			&::after {
 				opacity: 1;
 			}
 		}
+
+		@media (hover: hover) {
+			&:hover {
+				&::after {
+					opacity: 1;
+				}
+			}
+		}
 	}
 }
 

package/button/src/button/icon/icon-theme.scss

@@ -7,12 +7,16 @@
 ) {
 	color: $base-color;
 
-	&:hover {
-		color: $hover-color;
-		@if $base-color == currentColor {
-			opacity: 0.8;
-		} @else {
-			opacity: 1;
+	&:not(&[disabled], &.daff-disabled) {
+		@media (hover: hover) {
+			&:hover {
+				color: $hover-color;
+				@if $base-color == currentColor {
+					opacity: 0.8;
+				} @else {
+					opacity: 1;
+				}
+			}
 		}
 	}
 

package/button/src/button/raised/raised-theme.scss

@@ -9,14 +9,16 @@
 		@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
 	}
 
-	$black: daff-color($daff-neutral, 110);
+	$black: daff-get-base-color($theme, 'black');
 	background-color: $base-color;
 	border: 1px solid $base-color;
 	box-shadow: 0 1px 5px -4px rgba($black, 0.5), 0 4px 8px 0 rgba($black, 0.05);
 	color: daff-text-contrast($base-color);
 
-	&:hover {
-		box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
+	@media (hover: hover) {
+		&:hover {
+			box-shadow: 0 6px 12px rgba($black, 0.08), 0 4px 6px rgba($black, 0.04);
+		}
 	}
 }
 
@@ -66,7 +68,7 @@
 		}
 
 		&[disabled],
-		&.disabled {
+		&.daff-disabled {
 			@include daff-raised-button-theme-variant(daff-color($neutral, 30));
 			color: daff-color($neutral, 50);
 

package/callout/README.md

@@ -4,7 +4,7 @@ A callout is a versatile, pre-styled container used to highlight key pieces of c
 ## Overview
 Callouts help draw attention to important information and can be used multiple times on a page. They're flexible enough to support various content arrangements and include built-in containers for icons, taglines, titles, subtitles, and custom body content.
 
-<design-land-example-viewer-container example="basic-callout"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-callout"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -17,7 +17,7 @@ Callouts help draw attention to important information and can be used multiple t
 ## Usage
 
 ### Within a standalone component
-To use the callout components, import `DAFF_CALLOUT_COMPONENTS` into your custom component:
+Import `DAFF_CALLOUT_COMPONENTS` into your component:
 
 ```ts
 import { DAFF_CALLOUT_COMPONENTS } from '@daffodil/design/callout';
@@ -57,27 +57,8 @@ export class CustomComponentModule { }
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
 ## Anatomy
-A callout consists of the following components, displayed in the order listed:
+A callout is composed of a wrapper, icon, tagline, title, subtitle, and body, displayed in the order listed:
 
-### Container
-**`<daff-callout>`**: The main wrapper that holds all callout content.
-
-### Icon
-**`[daffCalloutIcon]`**: Displays a visual or branding element. Avoid using for interactive or actionable icons.
-
-### Tagline
-**`[daffCalloutTagline]`**: Short, memorable phrase that provides quick context.
-
-### Title
-**`[daffCalloutTitle]`**: The primary heading text. Applied to heading elements (`<h1>`, `<h2>`, etc.).
-
-### Subtitle
-**`[daffCalloutSubtitle]`**: Secondary descriptive text displayed beneath the title.
-
-### Body
-**`[daffCalloutBody]`**: Flexible container for additional content. It's unstyled except for spaicng and should only be used once per callout.
-
-### Basic structure
 ```html
 <daff-callout>
   <div daffCalloutIcon>
@@ -92,26 +73,33 @@ A callout consists of the following components, displayed in the order listed:
 </daff-callout>
 ```
 
+- **`<daff-callout>`**: The wrapper component that holds all callout content.
+- **`[daffCalloutIcon]`**: Displays a visual or branding element. Avoid using for interactive or actionable icons.
+- **`[daffCalloutTagline]`**: Short, memorable phrase that provides quick context.
+- **`[daffCalloutTitle]`**: The primary heading text. Applied to heading elements (`<h1>`, `<h2>`, etc.).
+- **`[daffCalloutSubtitle]`**: Secondary descriptive text displayed beneath the title.
+- **`[daffCalloutBody]`**: Flexible container for additional content. It's unstyled except for spacing and **should only be used once per callout**.
+
 ## Features
 
 ### Colors
 Use the `color` property to change the background of a callout.
 
-<design-land-example-viewer-container example="callout-theming"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-theming"></daff-docs-example-viewer>
 
 ### Text alignment
-Control callout-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect `[daffCalloutBody]` content or nested elements.
+Control callout-specific text alignment with the `textAlignment` property. It defaults to `left` and **does not** affect content placed within `[daffCalloutBody]`.
 
-<design-land-example-viewer-container example="callout-text-alignment"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-text-alignment"></daff-docs-example-viewer>
 
 ### Compact
 Use the `compact` property on callout to reduce padding and suit UIs with tighter spacing requirements.
 
-<design-land-example-viewer-container example="compact-callout"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="compact-callout"></daff-docs-example-viewer>
 
 ## Examples
 
 ### Callout with two columns
 Callouts are flexible enough to support custom grid layouts for more complex arrangements:
 
-<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="callout-with-grid"></daff-docs-example-viewer>

package/card/README.md

@@ -4,11 +4,7 @@ A card is a flexible content container used to group related information and act
 ## Overview
 Cards help organize and present information in a clear and visually appealing way. There are two styles: **default (filled)** and **stroked**, and can include images, text, lists, actions, or even other components.
 
-**Default (filled) card**
-<design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
-
-**Stroked card**
-<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-cards"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -19,8 +15,7 @@ Cards help organize and present information in a clear and visually appealing wa
 
 ## Usage
 
-### Within a standalone component
-Import the card style(s) you need into a standalone component:
+Import the card style(s) you need into your component:
 
 Available imports:
 - Default (filled) cards: `DAFF_CARD_COMPONENTS`
@@ -40,55 +35,13 @@ import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
 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';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-	declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffCardModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffCalloutModule` is deprecated. Use the standalone component imports instead.
 
 ## Anatomy
-A card consists of the following components, displayed in the order listed:
-
-### Container
-**`<daff-card>`** or **`<daff-stroked-card>`**: The main wrapper that holds all card content.
-
-### Image
-**`[daffCardImage]`**: Image element at the top of the card.
-
-### Icon
-**`[daffCardIcon]`**: Displays a visual or branding element. Avoid using for interactive icons.
-
-### Tagline
-**`[daffCardTagline]`**: Short phrase that provides quick context.
+A card is composed of a container, image, icon, tagline, title, content, and actions, displayed in the order listed:
 
-### Title
-**`[daffCardTitle]`**: The primary heading of the card.
-
-### Content
-**`[daffCardContent]`**: Flexible container for body text or custom content. It's unstyled except for spacing and should only be used once per card.
-
-### Actions
-**`[daffCardActions]`**: Container for buttons or links, positioned at the bottom.
-
-### Basic structure
 ```html
 <daff-card>
   <img daffCardImage src="/product.jpg" alt="Product image">
@@ -107,6 +60,27 @@ A card consists of the following components, displayed in the order listed:
 </daff-card>
 ```
 
+**`<daff-card>`** or **`<daff-stroked-card>`**\
+The wrapper component that holds all card content.
+
+**`[daffCardImage]`**\
+Image element at the top of the card.
+
+**`[daffCardIcon]`**\
+Displays a visual or branding element. Avoid using for interactive icons.
+
+**`[daffCardTagline]`**\
+Short phrase that provides quick context.
+
+**`[daffCardTitle]`**\
+The primary heading of the card.
+
+**`[daffCardContent]`**\
+Flexible container for body text or custom content. It's unstyled except for spacing and **should only be used once per card**.
+
+**`[daffCardActions]`**\
+Container for buttons or links, positioned at the bottom.
+
 ## Features
 
 ### Interactive card
@@ -114,27 +88,20 @@ An interactive card turns the entire card into a clickable area that navigates t
 
 To create an interactive card, apply the component selector to an `<a>` element. All card styles support interactive behavior.
 
-<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="linkable-card"></daff-docs-example-viewer>
+
+### Colors
+Cards default to a light gray background. Use the `color` property to change a card's color.
+
+<daff-docs-example-viewer example="card-theming"></daff-docs-example-viewer>
+
 
 ### Elevation
 Use the `elevated` property to add shadows to cards.
 
-<design-land-example-viewer-container example="elevated-card"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="elevated-card"></daff-docs-example-viewer>
 
 ### Orientation
 Use the `orientation` property to stack card content either `vertical` (default) or `horizontal`. Horizontal cards automatically switch to vertical on smaller screens.
 
-<design-land-example-viewer-container example="card-orientation"></design-land-example-viewer-container>
-
-### Colors
-Cards default to a light gray background. Use the `color` property to change a card's color.
-
-<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>
-
-## Deprecations
-The raised card style has been deprecated in favor of the `elevated` property. Replace `<daff-raised-card>` with `<daff-card [elevated]="true">`
-
-```html
-<daff-card [elevated]="true">
-</daff-card>
-```
+<daff-docs-example-viewer example="card-orientation"></daff-docs-example-viewer>

package/card/index.d.ts

@@ -1,37 +1,17 @@
 import * as i0 from '@angular/core';
 import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
-
-/**
- * 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. |
- */
-type DaffCardOrientation = 'vertical' | 'horizontal';
-/**
- * Enum for representing the available card orientations.
- * See {@link DaffCardOrientation} for descriptions of each orientation.
- */
-declare enum DaffCardOrientationEnum {
-    Vertical = "vertical",
-    Horizontal = "horizontal"
-}
+import { DaffOrientableDirective } from '@daffodil/design';
 
 declare class DaffCardBaseDirective {
-    /**
-     * The orientation of a card.
-     */
-    orientation: DaffCardOrientation;
+    private orientation;
     /**
      * Whether or not a card displays a shadow.
      */
     elevated: boolean;
+    constructor(orientation: DaffOrientableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
-    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: DaffCardOrientation | null | undefined;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
 }
 
 /**
@@ -57,14 +37,6 @@ declare class DaffCardComponent extends DaffCardBaseDirective {
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,a[daff-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
 }
 
-/**
- * @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
- */
-declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
-    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>;
-}
-
 /**
  * A card variant with a stroked (outlined) border instead of a filled background.
  *
@@ -172,7 +144,7 @@ declare class DaffCardActionsDirective {
  */
 declare class DaffCardModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective], [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective], [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffCardModule>;
 }
 
@@ -180,11 +152,6 @@ declare class DaffCardModule {
  * @docs-private
  */
 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.
- */
-declare const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
 /**
  * @docs-private
  */
@@ -192,7 +159,6 @@ declare const DAFF_STROKED_CARD_COMPONENTS: readonly [typeof DaffStrokedCardComp
 /**
  * @docs-private
  */
-declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffRaisedCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
+declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
 
-export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS, DAFF_RAISED_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardOrientationEnum, DaffCardTaglineDirective, DaffCardTitleDirective, DaffRaisedCardComponent, DaffStrokedCardComponent };
-export type { DaffCardOrientation };
+export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardTaglineDirective, DaffCardTitleDirective, DaffStrokedCardComponent };

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

@@ -31,7 +31,6 @@
 	$tertiary: daff-get-palette($theme, tertiary);
 	$base: daff-get-base-color($theme, base);
 	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$black: daff-get-base-color($theme, 'black');
 	$neutral: daff-get-palette($theme, neutral);
 	$mode: daff-get-theme-mode($theme);
 
@@ -43,8 +42,7 @@
 		}
 	}
 
-	.daff-card,
-	.daff-raised-card {
+	.daff-card {
 		@include light($mode) {
 			@include daff-basic-card-theme-variant(daff-color($neutral, 10));
 
@@ -107,8 +105,7 @@
 			}
 		}
 
-		&.daff-card,
-		&.daff-raised-card {
+		&.daff-card {
 			@include light($mode) {
 				@include daff-linkable-card-theme-variant(daff-color($neutral, 20));
 

package/card/src/card-base.scss

@@ -32,7 +32,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
 		}
 	}
 
-	&.vertical {
+	&.daff-vertical {
 		flex-direction: column;
 
 		.daff-card__image {
@@ -44,7 +44,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
 		}
 	}
 
-	&.horizontal {
+	&.daff-horizontal {
 		flex-wrap: wrap;
 
 		@include layout.breakpoint(mobile) {