@compsych-ui-components/angular 7.0.26 → 7.0.31

package/esm2022/index.js

@@ -7,6 +7,7 @@ import { SidebarComponent } from './lib/sidebar/sidebar';
 import { CardComponent } from './lib/card-base/card';
 import { TextInputComponent } from './lib/text-input/text-input';
 import { DialogComponent } from './lib/dialog/dialog';
+import { DropdownComponent } from './lib/dropdown/dropdown';
 import * as i0 from "@angular/core";
 export { ButtonComponent } from './lib/button/button';
 export { AccordionComponent } from './lib/accordion/accordion';
@@ -21,6 +22,7 @@ export { DialogService } from './lib/dialog/dialog.service';
 export { CompsychDialogRef } from './lib/dialog/dialog-ref';
 // Re-exported from CDK so opened content components can inject the data token.
 export { DIALOG_DATA } from '@angular/cdk/dialog';
+export { DropdownComponent } from './lib/dropdown/dropdown';
 export class CompsychAngularModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, imports: [ButtonComponent,
@@ -30,14 +32,16 @@ export class CompsychAngularModule {
             SidebarComponent,
             CardComponent,
             TextInputComponent,
-            DialogComponent], exports: [ButtonComponent,
+            DialogComponent,
+            DropdownComponent], exports: [ButtonComponent,
             AccordionComponent,
             FooterComponent,
             HeaderNavComponent,
             SidebarComponent,
             CardComponent,
             TextInputComponent,
-            DialogComponent] });
+            DialogComponent,
+            DropdownComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, decorators: [{
@@ -52,6 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CardComponent,
                         TextInputComponent,
                         DialogComponent,
+                        DropdownComponent,
                     ],
                     exports: [
                         ButtonComponent,
@@ -62,6 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CardComponent,
                         TextInputComponent,
                         DialogComponent,
+                        DropdownComponent,
                     ],
                 }]
         }] });

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAwBlD,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YApB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe,aAGf,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;yGAGN,qBAAqB;;4FAArB,qBAAqB;kBAtBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\nimport { DialogComponent } from './lib/dialog/dialog';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\nexport { DialogComponent } from './lib/dialog/dialog';\r\nexport type { DialogCloseReason } from './lib/dialog/dialog';\r\nexport type { DialogVariant } from './lib/dialog/dialog-types';\r\nexport { DialogService } from './lib/dialog/dialog.service';\r\nexport type { CompsychDialogConfig } from './lib/dialog/dialog.service';\r\nexport { CompsychDialogRef } from './lib/dialog/dialog-ref';\r\n// Re-exported from CDK so opened content components can inject the data token.\r\nexport { DIALOG_DATA } from '@angular/cdk/dialog';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AA2B5D,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YAtB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;YACf,iBAAiB,aAGjB,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;YACf,iBAAiB;yGAGR,qBAAqB;;4FAArB,qBAAqB;kBAxBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;wBACf,iBAAiB;qBAClB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;wBACf,iBAAiB;qBAClB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\nimport { DialogComponent } from './lib/dialog/dialog';\r\nimport { DropdownComponent } from './lib/dropdown/dropdown';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\nexport { DialogComponent } from './lib/dialog/dialog';\r\nexport type { DialogCloseReason } from './lib/dialog/dialog';\r\nexport type { DialogVariant } from './lib/dialog/dialog-types';\r\nexport { DialogService } from './lib/dialog/dialog.service';\r\nexport type { CompsychDialogConfig } from './lib/dialog/dialog.service';\r\nexport { CompsychDialogRef } from './lib/dialog/dialog-ref';\r\n// Re-exported from CDK so opened content components can inject the data token.\r\nexport { DIALOG_DATA } from '@angular/cdk/dialog';\r\nexport { DropdownComponent } from './lib/dropdown/dropdown';\r\nexport type { DropdownSize, DropdownOption } from './lib/dropdown/dropdown-types';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n    DropdownComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n    DropdownComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}

package/esm2022/lib/card-base/card.js

@@ -175,7 +175,7 @@ export class CardComponent {
         return this.sanitizer.bypassSecurityTrustHtml(svg);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CardComponent, isStandalone: true, selector: "compsych-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, categoryStyle: { classPropertyName: "categoryStyle", publicName: "categoryStyle", isSignal: true, isRequired: false, transformFunction: null }, iconStyle: { classPropertyName: "iconStyle", publicName: "iconStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "onActivate()", "keydown": "onKeyDown($event)" }, properties: { "class.cmp-card--outlined": "appearance() === 'outlined'", "class.cmp-card--filled": "appearance() === 'filled'", "class.cmp-card--gradient": "appearance() === 'gradient'", "class.cmp-card--image": "appearance() === 'image'", "class.cmp-card--content": "variant() === 'content'", "class.cmp-card--basic": "variant() === 'basic'", "attr.data-card-size": "variant() === 'basic' ? size() : null", "class.cmp-card--hero": "variant() === 'content' && !!headline()", "class.cmp-card--metric": "variant() === 'metric'", "class.cmp-card--current": "variant() === 'metric' && current()", "class.cmp-card--radius-md": "radius() === 'md'", "class.cmp-card--radius-lg": "radius() === 'lg'", "class.cmp-card--radius-xl": "radius() === 'xl'", "class.cmp-card--pad-none": "effectivePadding() === 'none'", "class.cmp-card--pad-sm": "effectivePadding() === 'sm'", "class.cmp-card--pad-md": "effectivePadding() === 'md'", "class.cmp-card--pad-lg": "effectivePadding() === 'lg'", "class.cmp-card--pad-xl": "effectivePadding() === 'xl'", "style.width": "fullWidth() ? '100%' : null", "class.cmp-card--interactive": "interactive()", "class.cmp-card--disabled": "disabled()", "class.cmp-card--selected": "selected()", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-disabled": "disabled() || null", "attr.aria-pressed": "interactive() && variant() === 'metric' ? current() : null", "style.border-color": "variant() === 'metric' && current() ? 'var(--accent-primary-sys-primary)' : null", "style.border-width": "variant() === 'metric' && current() ? 'var(--border-width-sys-stroke-thick)' : null" }, classAttribute: "cmp-card" }, hostDirectives: [{ directive: i1.RippleDirective }], ngImport: i0, template: "@if (isImage() && mediaUrl()) {\r\n  <div class=\"cmp-card__media\" [style.background-image]=\"mediaUrl()\" [style.background-position]=\"imagePosition()\"></div>\r\n  <div class=\"cmp-card__scrim\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"cmp-card__body\">\r\n  @switch (variant()) {\r\n    @case ('content') {\r\n      @if (headline()) {\r\n        <!-- Hero (image/filled): icon top-left, eyebrow + display headline + action bottom. -->\r\n        <div class=\"cc cc--hero\" [class.cc--image]=\"isImage()\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          @if (icon()) {\r\n            @if (isImage()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            } @else {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n          }\r\n          <div class=\"cc__img-foot\">\r\n            <div class=\"cc__hero-text\">\r\n              @if (title()) { <p class=\"cc__eyebrow\">{{ title() }}</p> }\r\n              <ng-container [ngTemplateOutlet]=\"headlineTpl\" />\r\n              @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <div class=\"cc cc--image\">\r\n          <div class=\"cc__img-top\">\r\n            @if (icon()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (category()) { <span class=\"cc__chip cc__chip--glass\">{{ category() }}</span> }\r\n          </div>\r\n          <div class=\"cc__img-foot\">\r\n            @if (title() || subtitle() || description()) {\r\n              <div class=\"cc__hero-text\">\r\n                @if (title() || subtitle()) {\r\n                  <div class=\"cc__heading\">\r\n                    @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                    @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n                  </div>\r\n                }\r\n                @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n              </div>\r\n            }\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (appearance() === 'gradient') {\r\n        <div class=\"cc\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__top\" [class.cc__top--label]=\"categoryStyle() === 'label'\">\r\n            @if (icon()) {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (categoryStyle() === 'label' && category()) {\r\n              <span class=\"cc__category-label\">{{ category() }}</span>\r\n            }\r\n            <div class=\"cc__top-end\">\r\n              @if (categoryStyle() === 'chip' && category()) { <span class=\"cc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"cc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"cc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"cc__button\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else {\r\n        <!-- With-icon content card (Figma 59444:2263): a full-width light-blue\r\n             icon banner over a gray category eyebrow + title + body, with the\r\n             text distributed top/bottom. Default for outlined/filled content. -->\r\n        <div class=\"cc cc--with-icon\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__banner\">\r\n            @if (icon()) {\r\n              <span class=\"cc__banner-icon\" [innerHTML]=\"iconSvg(icon(), 48, 1.5)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n          <div class=\"cc__container\">\r\n            <div class=\"cc__title-group\">\r\n              @if (category()) { <p class=\"cc__category-eyebrow\">{{ category() }}</p> }\r\n              @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n            </div>\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('action') {\r\n      @if (orientation() === 'vertical') {\r\n        <div class=\"ac ac--vertical\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__badge\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"ac\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__icon\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('metric') {\r\n      <div class=\"mc\" [class.mc--current]=\"current()\">\r\n        <span class=\"mc__value\">{{ value() }}</span>\r\n        @if (label()) { <span class=\"mc__label\">{{ label() }}</span> }\r\n      </div>\r\n    }\r\n\r\n    @case ('basic') {\r\n      @if (size() === 'xs') {\r\n        <!-- xs base card (Figma 243:3264): compact horizontal row \u2014 icon \u00B7 title \u00B7 arrow. -->\r\n        <div class=\"bc bc--row\">\r\n          @if (icon()) {\r\n            <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"bc__row-text\">\r\n            @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 20)\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else if (size() === 'lg') {\r\n        <!-- lg base card (Figma 243:3205): text + optional chip, button bottom-right. -->\r\n        <div class=\"bc bc--promo\" [class.bc--image]=\"isImage()\">\r\n          <div class=\"bc__text\">\r\n            @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"bc__button bc__button--end\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <!-- md image base card (Figma 59442:12042): text over the image, arrow bottom-right. -->\r\n        <div class=\"bc bc--image\">\r\n          <div class=\"bc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <!-- md / sm base card (Figma 243:3174, 243:3179, 947:8067):\r\n             icon + arrow row, then eyebrow / title / subtitle / description / button. -->\r\n        <div class=\"bc\">\r\n          <div class=\"bc__top\">\r\n            @if (icon()) {\r\n              @if (appearance() === 'gradient') {\r\n                <div class=\"bc__icon bc__icon--badge\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n              } @else {\r\n                <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), basicIconSize(), 1.5)\" aria-hidden=\"true\"></div>\r\n              }\r\n            }\r\n            <div class=\"bc__top-end\">\r\n              @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"bc__body\">\r\n            <div class=\"bc__text\">\r\n              @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n              @if (title() || subtitle()) {\r\n                <div class=\"bc__heading\">\r\n                  @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                  @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n                </div>\r\n              }\r\n              @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) { <span class=\"bc__button\">{{ actionLabel() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @default {\r\n      <ng-content />\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Heading fragments: render a real <h2>\u2013<h6> when `headingLevel` is set, else the\r\n     original <p>/<span>. Shared across layouts so semantics stay consistent and the\r\n     cc__title / cc__headline / ac__label styling is unchanged. -->\r\n<ng-template #titleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"cc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #headlineTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__headline\">{{ headline() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__headline\">{{ headline() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__headline\">{{ headline() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__headline\">{{ headline() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__headline\">{{ headline() }}</h6> }\r\n    @default { <p class=\"cc__headline\">{{ headline() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"ac__label\">{{ label() }}</h2> }\r\n    @case (3) { <h3 class=\"ac__label\">{{ label() }}</h3> }\r\n    @case (4) { <h4 class=\"ac__label\">{{ label() }}</h4> }\r\n    @case (5) { <h5 class=\"ac__label\">{{ label() }}</h5> }\r\n    @case (6) { <h6 class=\"ac__label\">{{ label() }}</h6> }\r\n    @default { <span class=\"ac__label\">{{ label() }}</span> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #bcTitleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"bc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"bc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"bc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"bc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"bc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"bc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;border-radius:var(--border-radius-sys-radius-lg);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);isolation:isolate;container-type:inline-size}:host.cmp-card--radius-md{border-radius:var(--border-radius-sys-radius-md)}:host.cmp-card--radius-lg{border-radius:var(--border-radius-sys-radius-lg)}:host.cmp-card--radius-xl{border-radius:var(--border-radius-sys-radius-xl)}.cmp-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.cmp-card--pad-none .cmp-card__body{padding:0}:host.cmp-card--pad-sm .cmp-card__body{padding:var(--spacing-padding-sys-padding-16)}:host.cmp-card--pad-md .cmp-card__body{padding:var(--spacing-padding-sys-padding-20)}:host.cmp-card--pad-lg .cmp-card__body{padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--pad-xl .cmp-card__body{padding:var(--spacing-padding-sys-padding-32)}:host.cmp-card--outlined{background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}:host.cmp-card--filled{background-color:var(--accent-primary-sys-primary-container);color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--gradient{background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%);background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}:host.cmp-card--gradient.cmp-card--content{background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--content .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--content .cc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-16);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}:host.cmp-card--gradient.cmp-card--content .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--gradient.cmp-card--content .cc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);font-weight:var(--body-small-sys-font-weight)}:host.cmp-card--image{color:var(--accent-primary-sys-on-primary-container);background-color:var(--surface-surface-container-sys-surface-container-high)}.cmp-card__media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}.cmp-card__scrim{position:absolute;inset:0;z-index:0;background-image:linear-gradient(180deg,var(--transparent-neutral-sys-black-40) 0%,var(--transparent-neutral-sys-black-10) 32%,var(--transparent-neutral-sys-black-10) 64%,var(--transparent-neutral-sys-black-50) 100%);mix-blend-mode:multiply}:host.cmp-card--interactive{cursor:pointer;transition:box-shadow .14s ease-out,border-color .14s ease-out,border-width .14s ease-out}:host.cmp-card--interactive:after{content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background-color:var(--surface-surface-sys-on-surface);opacity:0;transition:opacity .14s ease-out}:host.cmp-card--interactive.cmp-card--filled:after,:host.cmp-card--interactive.cmp-card--image:after{background-color:var(--accent-primary-sys-on-primary)}:host.cmp-card--interactive:hover{border-color:var(--outline-sys-outline-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 4px 16px #0000001a,0 2px 4px #00000014}:host.cmp-card--interactive:hover:after{opacity:.08}:host.cmp-card--interactive:active:after{opacity:.1}:host.cmp-card--selected,:host.cmp-card--interactive:focus-visible{outline:none;border-color:var(--add-on-primary-fixed-sys-on-primary-fixed-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}:host.cmp-card--disabled{pointer-events:none;opacity:.38}@media(prefers-reduced-motion:reduce){:host.cmp-card--interactive{transition:none}}@media(forced-colors:active){:host{border:1px solid CanvasText;forced-color-adjust:none}:host.cmp-card--interactive:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.cc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-12);font-family:var(--body-medium-sys-font-family)}.cc:not(.cc--hero):not(.cc--image){min-height:18.125rem}.cc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.cc__top--label{justify-content:flex-start;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.cc__category-label{background:transparent;padding:0;color:var(--accent-primary-sys-primary);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}.cc__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);line-height:0}.cc__icon--neutral{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cc__banner{display:flex;align-items:center;justify-content:center;width:100%;height:120px;flex-shrink:0;overflow:hidden;border-radius:var(--border-radius-sys-radius-sm);background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cc__banner-icon{display:inline-flex;line-height:0}.cc__container{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8)}.cc__title-group{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.cc__category-eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc--with-icon .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized);color:var(--surface-surface-sys-on-surface)}.cc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.cc__arrow{display:inline-flex;color:var(--surface-surface-sys-on-surface-variant);flex-shrink:0;line-height:0}.cc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.cc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.cc__title{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.cc__subtitle{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.cc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-2) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc__chip--glass{background-color:var(--transparent-neutral-sys-white-20);color:var(--accent-primary-sys-on-primary);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}.cc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc--filled .cc__icon{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--accent-primary-sys-primary)}.cc--filled .cc__title{color:var(--accent-primary-sys-on-primary-container)}.cc--filled .cc__subtitle,.cc--filled .cc__desc,.cc--filled .cc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}.cc--filled .cc__button{border-color:transparent}.cc--image{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:12.5rem;justify-content:space-between;gap:var(--spacing-padding-sys-padding-24);padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--hero{border-radius:var(--border-radius-sys-radius-xl)}.cc--hero{position:relative;display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-end;gap:var(--spacing-padding-sys-padding-24);min-height:22.5rem;padding:var(--spacing-padding-sys-padding-48)}.cc__media-icon{display:inline-flex;flex-shrink:0;color:var(--accent-primary-sys-on-primary);line-height:0}.cc--hero>.cc__media-icon{margin-bottom:auto}.cc__img-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-sys-padding-12)}.cc__img-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-padding-sys-padding-16)}.cc__img-foot--end{justify-content:flex-end}.cc__hero-text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8);min-width:0}.cc__eyebrow{margin:0;font-family:var(--title-large-sys-font-family);font-size:var(--title-large-sys-font-size);line-height:var(--title-large-sys-line-height);letter-spacing:var(--title-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__headline{margin:0;font-family:var(--display-large-sys-font-family);font-size:var(--display-large-sys-font-size);line-height:var(--display-large-sys-line-height);font-weight:var(--display-large-sys-font-weight);letter-spacing:var(--display-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__button--solid{align-self:flex-end;flex-shrink:0;border-color:transparent;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);box-shadow:0 .125rem .25rem #0000000f,0 .125rem .5rem #0000000a}@container (max-width: 36rem){.cc__img-foot{flex-direction:column;align-items:flex-start}.cc__button--solid{align-self:flex-start}}.cc--image .cc__title,.cc--image .cc__arrow{color:var(--accent-primary-sys-on-primary)}.cc--image .cc__subtitle,.cc--image .cc__desc{color:var(--transparent-neutral-sys-white-80)}.ac{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-padding-sys-padding-16);font-family:var(--body-medium-sys-font-family)}.ac__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.ac__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4);flex:1 1 auto;min-width:0}.ac__label{margin:0;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.ac__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.ac__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.ac--no-desc .ac__label{line-height:1}.ac--vertical{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--spacing-padding-sys-padding-16)}.ac__badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--surface-surface-container-sys-surface-container);color:var(--surface-surface-sys-on-surface);transition:background-color .14s ease-out;line-height:0}:host(:hover) .ac__badge{background-color:var(--surface-surface-container-sys-surface-container-lowest)}.ac--vertical .ac__label{white-space:pre-line;overflow:visible;font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight)}@media(prefers-reduced-motion:reduce){.ac__badge{transition:none}}.mc{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-padding-sys-padding-8);text-align:center;font-family:var(--body-medium-sys-font-family)}.mc__value{font-family:var(--headline-medium-sys-font-family);font-size:var(--headline-medium-sys-font-size);line-height:var(--headline-medium-sys-line-height);font-weight:var(--headline-medium-sys-font-weight);letter-spacing:var(--headline-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc__label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc--current .mc__value,.mc--current .mc__label{color:var(--accent-primary-sys-primary)}.mc--current .mc__value{font-weight:var(--headline-medium-sys-font-weight-emphasized)}.mc--current .mc__label{font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--metric{box-shadow:0 2px 2px #0000000f,0 2px 4px #0000000a}:host.cmp-card--metric.cmp-card--current{box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}.bc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-48);padding:var(--spacing-padding-sys-padding-32);font-family:var(--body-medium-sys-font-family)}.bc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.bc__icon{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.bc__icon--badge{align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.bc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.bc__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.bc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.bc__body{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-24)}.bc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.bc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.bc__eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__title{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface)}.bc__subtitle{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface-variant)}.bc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);white-space:nowrap}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]){background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .bc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-24);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}.bc--image{justify-content:space-between;gap:var(--spacing-padding-sys-padding-12);min-height:15.25rem}.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}.bc--image .bc__arrow{align-self:flex-end;color:var(--accent-primary-sys-on-primary)}:host.cmp-card--image .bc--row .bc__title,:host.cmp-card--image .bc--row .bc__icon,:host.cmp-card--image .bc--row .bc__arrow{color:var(--accent-primary-sys-on-primary)}:host[data-card-size=sm] .bc{gap:var(--spacing-padding-sys-padding-40);padding:var(--spacing-padding-sys-padding-24)}:host[data-card-size=sm] .bc__title,:host[data-card-size=sm] .bc__subtitle{font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);letter-spacing:var(--title-small-sys-tracking);font-weight:var(--title-small-sys-font-weight)}:host[data-card-size=sm] .bc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking)}:host[data-card-size=xs]{border-radius:var(--border-radius-sys-radius-md)}.bc--row{flex-direction:row;align-items:center;gap:var(--spacing-padding-sys-padding-12);padding:var(--spacing-padding-sys-padding-16)}.bc--row .bc__icon{color:var(--surface-surface-sys-on-surface)}.bc--row .bc__row-text{flex:1 1 auto;min-width:0}.bc--row .bc__title{font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);font-weight:var(--body-medium-sys-font-weight)}.bc--promo{justify-content:space-between;gap:var(--spacing-padding-sys-padding-24)}.bc--promo .bc__chip{align-self:flex-start}.bc__button--end{align-self:flex-end}.bc--promo.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--promo.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--promo.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}:host.cmp-card--filled .bc__title,:host.cmp-card--filled .bc__icon{color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--filled .bc__eyebrow,:host.cmp-card--filled .bc__subtitle,:host.cmp-card--filled .bc__desc,:host.cmp-card--filled .bc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}:host.cmp-card--filled .bc__button{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CardComponent, isStandalone: true, selector: "compsych-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imagePosition: { classPropertyName: "imagePosition", publicName: "imagePosition", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, categoryStyle: { classPropertyName: "categoryStyle", publicName: "categoryStyle", isSignal: true, isRequired: false, transformFunction: null }, iconStyle: { classPropertyName: "iconStyle", publicName: "iconStyle", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "onActivate()", "keydown": "onKeyDown($event)" }, properties: { "class.cmp-card--outlined": "appearance() === 'outlined'", "class.cmp-card--filled": "appearance() === 'filled'", "class.cmp-card--gradient": "appearance() === 'gradient'", "class.cmp-card--image": "appearance() === 'image'", "class.cmp-card--content": "variant() === 'content'", "class.cmp-card--basic": "variant() === 'basic'", "attr.data-card-size": "variant() === 'basic' ? size() : null", "class.cmp-card--hero": "variant() === 'content' && !!headline()", "class.cmp-card--metric": "variant() === 'metric'", "class.cmp-card--current": "variant() === 'metric' && current()", "class.cmp-card--radius-md": "radius() === 'md'", "class.cmp-card--radius-lg": "radius() === 'lg'", "class.cmp-card--radius-xl": "radius() === 'xl'", "class.cmp-card--pad-none": "effectivePadding() === 'none'", "class.cmp-card--pad-sm": "effectivePadding() === 'sm'", "class.cmp-card--pad-md": "effectivePadding() === 'md'", "class.cmp-card--pad-lg": "effectivePadding() === 'lg'", "class.cmp-card--pad-xl": "effectivePadding() === 'xl'", "style.width": "fullWidth() ? '100%' : null", "class.cmp-card--interactive": "interactive()", "class.cmp-card--disabled": "disabled()", "class.cmp-card--selected": "selected()", "attr.role": "interactive() ? 'button' : null", "attr.tabindex": "interactive() && !disabled() ? 0 : null", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-disabled": "disabled() || null", "attr.aria-pressed": "interactive() && variant() === 'metric' ? current() : null", "style.border-color": "variant() === 'metric' && current() ? 'var(--accent-primary-sys-primary)' : null", "style.border-width": "variant() === 'metric' && current() ? 'var(--border-width-sys-stroke-thick)' : null" }, classAttribute: "cmp-card" }, hostDirectives: [{ directive: i1.RippleDirective }], ngImport: i0, template: "@if (isImage() && mediaUrl()) {\r\n  <div class=\"cmp-card__media\" [style.background-image]=\"mediaUrl()\" [style.background-position]=\"imagePosition()\"></div>\r\n  <div class=\"cmp-card__scrim\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"cmp-card__body\">\r\n  @switch (variant()) {\r\n    @case ('content') {\r\n      @if (headline()) {\r\n        <!-- Hero (image/filled): icon top-left, eyebrow + display headline + action bottom. -->\r\n        <div class=\"cc cc--hero\" [class.cc--image]=\"isImage()\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          @if (icon()) {\r\n            @if (isImage()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            } @else {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n          }\r\n          <div class=\"cc__img-foot\">\r\n            <div class=\"cc__hero-text\">\r\n              @if (title()) { <p class=\"cc__eyebrow\">{{ title() }}</p> }\r\n              <ng-container [ngTemplateOutlet]=\"headlineTpl\" />\r\n              @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <div class=\"cc cc--image\">\r\n          <div class=\"cc__img-top\">\r\n            @if (icon()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (category()) { <span class=\"cc__chip cc__chip--glass\">{{ category() }}</span> }\r\n          </div>\r\n          <div class=\"cc__img-foot\">\r\n            @if (title() || subtitle() || description()) {\r\n              <div class=\"cc__hero-text\">\r\n                @if (title() || subtitle()) {\r\n                  <div class=\"cc__heading\">\r\n                    @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                    @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n                  </div>\r\n                }\r\n                @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n              </div>\r\n            }\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (appearance() === 'gradient') {\r\n        <div class=\"cc\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__top\" [class.cc__top--label]=\"categoryStyle() === 'label'\">\r\n            @if (icon()) {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (categoryStyle() === 'label' && category()) {\r\n              <span class=\"cc__category-label\">{{ category() }}</span>\r\n            }\r\n            <div class=\"cc__top-end\">\r\n              @if (categoryStyle() === 'chip' && category()) { <span class=\"cc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"cc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"cc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"cc__button\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else {\r\n        <!-- With-icon content card (Figma 59444:2263): a full-width light-blue\r\n             icon banner over a gray category eyebrow + title + body, with the\r\n             text distributed top/bottom. Default for outlined/filled content. -->\r\n        <div class=\"cc cc--with-icon\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__banner\">\r\n            @if (icon()) {\r\n              <span class=\"cc__banner-icon\" [innerHTML]=\"iconSvg(icon(), 48, 1.5)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n          <div class=\"cc__container\">\r\n            <div class=\"cc__title-group\">\r\n              @if (category()) { <p class=\"cc__category-eyebrow\">{{ category() }}</p> }\r\n              @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n            </div>\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('action') {\r\n      @if (orientation() === 'vertical') {\r\n        <div class=\"ac ac--vertical\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__badge\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"ac\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__icon\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('metric') {\r\n      <div class=\"mc\" [class.mc--current]=\"current()\">\r\n        <span class=\"mc__value\">{{ value() }}</span>\r\n        @if (label()) { <span class=\"mc__label\">{{ label() }}</span> }\r\n      </div>\r\n    }\r\n\r\n    @case ('basic') {\r\n      @if (size() === 'xs') {\r\n        <!-- xs base card (Figma 243:3264): compact horizontal row \u2014 icon \u00B7 title \u00B7 arrow. -->\r\n        <div class=\"bc bc--row\">\r\n          @if (icon()) {\r\n            <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"bc__row-text\">\r\n            @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 20)\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else if (size() === 'lg') {\r\n        <!-- lg base card (Figma 243:3205): text + optional chip, button bottom-right. -->\r\n        <div class=\"bc bc--promo\" [class.bc--image]=\"isImage()\">\r\n          <div class=\"bc__text\">\r\n            @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"bc__button bc__button--end\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <!-- md image base card (Figma 59442:12042): text over the image, arrow bottom-right. -->\r\n        <div class=\"bc bc--image\">\r\n          <div class=\"bc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <!-- md / sm base card (Figma 243:3174, 243:3179, 947:8067):\r\n             icon + arrow row, then eyebrow / title / subtitle / description / button. -->\r\n        <div class=\"bc\">\r\n          <div class=\"bc__top\">\r\n            @if (icon()) {\r\n              @if (appearance() === 'gradient') {\r\n                <div class=\"bc__icon bc__icon--badge\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n              } @else {\r\n                <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), basicIconSize(), 1.5)\" aria-hidden=\"true\"></div>\r\n              }\r\n            }\r\n            <div class=\"bc__top-end\">\r\n              @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"bc__body\">\r\n            <div class=\"bc__text\">\r\n              @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n              @if (title() || subtitle()) {\r\n                <div class=\"bc__heading\">\r\n                  @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                  @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n                </div>\r\n              }\r\n              @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) { <span class=\"bc__button\">{{ actionLabel() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @default {\r\n      <ng-content />\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Heading fragments: render a real <h2>\u2013<h6> when `headingLevel` is set, else the\r\n     original <p>/<span>. Shared across layouts so semantics stay consistent and the\r\n     cc__title / cc__headline / ac__label styling is unchanged. -->\r\n<ng-template #titleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"cc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #headlineTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__headline\">{{ headline() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__headline\">{{ headline() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__headline\">{{ headline() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__headline\">{{ headline() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__headline\">{{ headline() }}</h6> }\r\n    @default { <p class=\"cc__headline\">{{ headline() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"ac__label\">{{ label() }}</h2> }\r\n    @case (3) { <h3 class=\"ac__label\">{{ label() }}</h3> }\r\n    @case (4) { <h4 class=\"ac__label\">{{ label() }}</h4> }\r\n    @case (5) { <h5 class=\"ac__label\">{{ label() }}</h5> }\r\n    @case (6) { <h6 class=\"ac__label\">{{ label() }}</h6> }\r\n    @default { <span class=\"ac__label\">{{ label() }}</span> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #bcTitleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"bc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"bc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"bc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"bc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"bc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"bc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;border-radius:var(--border-radius-sys-radius-lg);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);isolation:isolate;container-type:inline-size}:host.cmp-card--radius-md{border-radius:var(--border-radius-sys-radius-md)}:host.cmp-card--radius-lg{border-radius:var(--border-radius-sys-radius-lg)}:host.cmp-card--radius-xl{border-radius:var(--border-radius-sys-radius-xl)}.cmp-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.cmp-card--pad-none .cmp-card__body{padding:0}:host.cmp-card--pad-sm .cmp-card__body{padding:var(--spacing-padding-sys-padding-16)}:host.cmp-card--pad-md .cmp-card__body{padding:var(--spacing-padding-sys-padding-20)}:host.cmp-card--pad-lg .cmp-card__body{padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--pad-xl .cmp-card__body{padding:var(--spacing-padding-sys-padding-32)}:host.cmp-card--outlined{background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant)}:host.cmp-card--filled{background-color:var(--accent-primary-sys-primary-container);color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--gradient{background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%);background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant)}:host.cmp-card--gradient.cmp-card--content{background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--content .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--content .cc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-16);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}:host.cmp-card--gradient.cmp-card--content .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--gradient.cmp-card--content .cc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);font-weight:var(--body-small-sys-font-weight)}:host.cmp-card--image{color:var(--accent-primary-sys-on-primary-container);background-color:var(--surface-surface-container-sys-surface-container-high)}.cmp-card__media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}.cmp-card__scrim{position:absolute;inset:0;z-index:0;background-image:linear-gradient(180deg,var(--transparent-neutral-sys-black-40) 0%,var(--transparent-neutral-sys-black-10) 32%,var(--transparent-neutral-sys-black-10) 64%,var(--transparent-neutral-sys-black-50) 100%);mix-blend-mode:multiply}:host.cmp-card--interactive{cursor:pointer;transition:box-shadow .14s ease-out,border-color .14s ease-out,border-width .14s ease-out}:host.cmp-card--interactive:after{content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background-color:var(--surface-surface-sys-on-surface);opacity:0;transition:opacity .14s ease-out}:host.cmp-card--interactive.cmp-card--filled:after,:host.cmp-card--interactive.cmp-card--image:after{background-color:var(--accent-primary-sys-on-primary)}:host.cmp-card--interactive:hover{border-color:var(--outline-sys-outline-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 4px 16px #0000001a,0 2px 4px #00000014}:host.cmp-card--interactive:hover:after{opacity:.08}:host.cmp-card--interactive:active:after{opacity:.1}:host.cmp-card--selected,:host.cmp-card--interactive:focus-visible{outline:none;border-color:var(--add-on-primary-fixed-sys-on-primary-fixed-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}:host.cmp-card--disabled{pointer-events:none;opacity:.38}@media(prefers-reduced-motion:reduce){:host.cmp-card--interactive{transition:none}}@media(forced-colors:active){:host{border:1px solid CanvasText;forced-color-adjust:none}:host.cmp-card--interactive:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.cc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-12);font-family:var(--body-medium-sys-font-family)}.cc:not(.cc--hero):not(.cc--image){min-height:18.125rem}.cc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.cc__top--label{justify-content:flex-start;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.cc__category-label{background:transparent;padding:0;color:var(--accent-primary-sys-primary);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}.cc__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);line-height:0}.cc__icon--neutral{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cc__banner{display:flex;align-items:center;justify-content:center;width:100%;height:120px;flex-shrink:0;overflow:hidden;border-radius:var(--border-radius-sys-radius-sm);background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cc__banner-icon{display:inline-flex;line-height:0}.cc__container{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8)}.cc__title-group{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.cc__category-eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc--with-icon .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized);color:var(--surface-surface-sys-on-surface)}.cc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.cc__arrow{display:inline-flex;color:var(--surface-surface-sys-on-surface-variant);flex-shrink:0;line-height:0}.cc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.cc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.cc__title{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.cc__subtitle{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.cc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-2) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc__chip--glass{background-color:var(--transparent-neutral-sys-white-20);color:var(--accent-primary-sys-on-primary);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}.cc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc--filled .cc__icon{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--accent-primary-sys-primary)}.cc--filled .cc__title{color:var(--accent-primary-sys-on-primary-container)}.cc--filled .cc__subtitle,.cc--filled .cc__desc,.cc--filled .cc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}.cc--filled .cc__button{border-color:transparent}.cc--image{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:12.5rem;justify-content:space-between;gap:var(--spacing-padding-sys-padding-24);padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--hero{border-radius:var(--border-radius-sys-radius-xl)}.cc--hero{position:relative;display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-end;gap:var(--spacing-padding-sys-padding-24);min-height:22.5rem;padding:var(--spacing-padding-sys-padding-48)}.cc__media-icon{display:inline-flex;flex-shrink:0;color:var(--accent-primary-sys-on-primary);line-height:0}.cc--hero>.cc__media-icon{margin-bottom:auto}.cc__img-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-sys-padding-12)}.cc__img-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-padding-sys-padding-16)}.cc__img-foot--end{justify-content:flex-end}.cc__hero-text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8);min-width:0}.cc__eyebrow{margin:0;font-family:var(--title-large-sys-font-family);font-size:var(--title-large-sys-font-size);line-height:var(--title-large-sys-line-height);letter-spacing:var(--title-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__headline{margin:0;font-family:var(--display-large-sys-font-family);font-size:var(--display-large-sys-font-size);line-height:var(--display-large-sys-line-height);font-weight:var(--display-large-sys-font-weight);letter-spacing:var(--display-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__button--solid{align-self:flex-end;flex-shrink:0;border-color:transparent;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);box-shadow:0 .125rem .25rem #0000000f,0 .125rem .5rem #0000000a}@container (max-width: 36rem){.cc__img-foot{flex-direction:column;align-items:flex-start}.cc__button--solid{align-self:flex-start}}.cc--image .cc__title,.cc--image .cc__arrow{color:var(--accent-primary-sys-on-primary)}.cc--image .cc__subtitle,.cc--image .cc__desc{color:var(--transparent-neutral-sys-white-80)}.ac{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-padding-sys-padding-16);font-family:var(--body-medium-sys-font-family)}.ac__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.ac__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4);flex:1 1 auto;min-width:0}.ac__label{margin:0;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.ac__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.ac__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.ac--no-desc .ac__label{line-height:1}.ac--vertical{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--spacing-padding-sys-padding-16)}.ac__badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--surface-surface-container-sys-surface-container);color:var(--surface-surface-sys-on-surface);transition:background-color .14s ease-out;line-height:0}:host(:hover) .ac__badge{background-color:var(--surface-surface-container-sys-surface-container-lowest)}.ac--vertical .ac__label{white-space:pre-line;overflow:visible;font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight)}@media(prefers-reduced-motion:reduce){.ac__badge{transition:none}}.mc{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-padding-sys-padding-8);text-align:center;font-family:var(--body-medium-sys-font-family)}.mc__value{font-family:var(--headline-medium-sys-font-family);font-size:var(--headline-medium-sys-font-size);line-height:var(--headline-medium-sys-line-height);font-weight:var(--headline-medium-sys-font-weight);letter-spacing:var(--headline-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc__label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc--current .mc__value,.mc--current .mc__label{color:var(--accent-primary-sys-primary)}.mc--current .mc__value{font-weight:var(--headline-medium-sys-font-weight-emphasized)}.mc--current .mc__label{font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--metric{box-shadow:0 2px 2px #0000000f,0 2px 4px #0000000a}:host.cmp-card--metric.cmp-card--current{box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}.bc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-48);padding:var(--spacing-padding-sys-padding-32);font-family:var(--body-medium-sys-font-family)}.bc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.bc__icon{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.bc__icon--badge{align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.bc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.bc__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.bc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.bc__body{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-24)}.bc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.bc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.bc__eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__title{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface)}.bc__subtitle{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface-variant)}.bc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);white-space:nowrap}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]){background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .bc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-24);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}.bc--image{justify-content:space-between;gap:var(--spacing-padding-sys-padding-12);min-height:15.25rem}.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}.bc--image .bc__arrow{align-self:flex-end;color:var(--accent-primary-sys-on-primary)}:host.cmp-card--image .bc--row .bc__title,:host.cmp-card--image .bc--row .bc__icon,:host.cmp-card--image .bc--row .bc__arrow{color:var(--accent-primary-sys-on-primary)}:host[data-card-size=sm] .bc{gap:var(--spacing-padding-sys-padding-40);padding:var(--spacing-padding-sys-padding-24)}:host[data-card-size=sm] .bc__title,:host[data-card-size=sm] .bc__subtitle{font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);letter-spacing:var(--title-small-sys-tracking);font-weight:var(--title-small-sys-font-weight)}:host[data-card-size=sm] .bc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking)}:host[data-card-size=xs]{border-radius:var(--border-radius-sys-radius-md)}.bc--row{flex-direction:row;align-items:center;gap:var(--spacing-padding-sys-padding-12);padding:var(--spacing-padding-sys-padding-16)}.bc--row .bc__icon{color:var(--surface-surface-sys-on-surface)}.bc--row .bc__row-text{flex:1 1 auto;min-width:0}.bc--row .bc__title{font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);font-weight:var(--body-medium-sys-font-weight)}.bc--promo{justify-content:space-between;gap:var(--spacing-padding-sys-padding-24)}.bc--promo .bc__chip{align-self:flex-start}.bc__button--end{align-self:flex-end}.bc--promo.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--promo.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--promo.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}:host.cmp-card--filled .bc__title,:host.cmp-card--filled .bc__icon{color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--filled .bc__eyebrow,:host.cmp-card--filled .bc__subtitle,:host.cmp-card--filled .bc__desc,:host.cmp-card--filled .bc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}:host.cmp-card--filled .bc__button{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -212,6 +212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[style.border-width]': "variant() === 'metric' && current() ? 'var(--border-width-sys-stroke-thick)' : null",
                         '(click)': 'onActivate()',
                         '(keydown)': 'onKeyDown($event)',
-                    }, template: "@if (isImage() && mediaUrl()) {\r\n  <div class=\"cmp-card__media\" [style.background-image]=\"mediaUrl()\" [style.background-position]=\"imagePosition()\"></div>\r\n  <div class=\"cmp-card__scrim\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"cmp-card__body\">\r\n  @switch (variant()) {\r\n    @case ('content') {\r\n      @if (headline()) {\r\n        <!-- Hero (image/filled): icon top-left, eyebrow + display headline + action bottom. -->\r\n        <div class=\"cc cc--hero\" [class.cc--image]=\"isImage()\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          @if (icon()) {\r\n            @if (isImage()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            } @else {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n          }\r\n          <div class=\"cc__img-foot\">\r\n            <div class=\"cc__hero-text\">\r\n              @if (title()) { <p class=\"cc__eyebrow\">{{ title() }}</p> }\r\n              <ng-container [ngTemplateOutlet]=\"headlineTpl\" />\r\n              @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <div class=\"cc cc--image\">\r\n          <div class=\"cc__img-top\">\r\n            @if (icon()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (category()) { <span class=\"cc__chip cc__chip--glass\">{{ category() }}</span> }\r\n          </div>\r\n          <div class=\"cc__img-foot\">\r\n            @if (title() || subtitle() || description()) {\r\n              <div class=\"cc__hero-text\">\r\n                @if (title() || subtitle()) {\r\n                  <div class=\"cc__heading\">\r\n                    @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                    @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n                  </div>\r\n                }\r\n                @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n              </div>\r\n            }\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (appearance() === 'gradient') {\r\n        <div class=\"cc\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__top\" [class.cc__top--label]=\"categoryStyle() === 'label'\">\r\n            @if (icon()) {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (categoryStyle() === 'label' && category()) {\r\n              <span class=\"cc__category-label\">{{ category() }}</span>\r\n            }\r\n            <div class=\"cc__top-end\">\r\n              @if (categoryStyle() === 'chip' && category()) { <span class=\"cc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"cc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"cc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"cc__button\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else {\r\n        <!-- With-icon content card (Figma 59444:2263): a full-width light-blue\r\n             icon banner over a gray category eyebrow + title + body, with the\r\n             text distributed top/bottom. Default for outlined/filled content. -->\r\n        <div class=\"cc cc--with-icon\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__banner\">\r\n            @if (icon()) {\r\n              <span class=\"cc__banner-icon\" [innerHTML]=\"iconSvg(icon(), 48, 1.5)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n          <div class=\"cc__container\">\r\n            <div class=\"cc__title-group\">\r\n              @if (category()) { <p class=\"cc__category-eyebrow\">{{ category() }}</p> }\r\n              @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n            </div>\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('action') {\r\n      @if (orientation() === 'vertical') {\r\n        <div class=\"ac ac--vertical\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__badge\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"ac\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__icon\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('metric') {\r\n      <div class=\"mc\" [class.mc--current]=\"current()\">\r\n        <span class=\"mc__value\">{{ value() }}</span>\r\n        @if (label()) { <span class=\"mc__label\">{{ label() }}</span> }\r\n      </div>\r\n    }\r\n\r\n    @case ('basic') {\r\n      @if (size() === 'xs') {\r\n        <!-- xs base card (Figma 243:3264): compact horizontal row \u2014 icon \u00B7 title \u00B7 arrow. -->\r\n        <div class=\"bc bc--row\">\r\n          @if (icon()) {\r\n            <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"bc__row-text\">\r\n            @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 20)\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else if (size() === 'lg') {\r\n        <!-- lg base card (Figma 243:3205): text + optional chip, button bottom-right. -->\r\n        <div class=\"bc bc--promo\" [class.bc--image]=\"isImage()\">\r\n          <div class=\"bc__text\">\r\n            @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"bc__button bc__button--end\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <!-- md image base card (Figma 59442:12042): text over the image, arrow bottom-right. -->\r\n        <div class=\"bc bc--image\">\r\n          <div class=\"bc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <!-- md / sm base card (Figma 243:3174, 243:3179, 947:8067):\r\n             icon + arrow row, then eyebrow / title / subtitle / description / button. -->\r\n        <div class=\"bc\">\r\n          <div class=\"bc__top\">\r\n            @if (icon()) {\r\n              @if (appearance() === 'gradient') {\r\n                <div class=\"bc__icon bc__icon--badge\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n              } @else {\r\n                <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), basicIconSize(), 1.5)\" aria-hidden=\"true\"></div>\r\n              }\r\n            }\r\n            <div class=\"bc__top-end\">\r\n              @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"bc__body\">\r\n            <div class=\"bc__text\">\r\n              @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n              @if (title() || subtitle()) {\r\n                <div class=\"bc__heading\">\r\n                  @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                  @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n                </div>\r\n              }\r\n              @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) { <span class=\"bc__button\">{{ actionLabel() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @default {\r\n      <ng-content />\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Heading fragments: render a real <h2>\u2013<h6> when `headingLevel` is set, else the\r\n     original <p>/<span>. Shared across layouts so semantics stay consistent and the\r\n     cc__title / cc__headline / ac__label styling is unchanged. -->\r\n<ng-template #titleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"cc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #headlineTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__headline\">{{ headline() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__headline\">{{ headline() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__headline\">{{ headline() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__headline\">{{ headline() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__headline\">{{ headline() }}</h6> }\r\n    @default { <p class=\"cc__headline\">{{ headline() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"ac__label\">{{ label() }}</h2> }\r\n    @case (3) { <h3 class=\"ac__label\">{{ label() }}</h3> }\r\n    @case (4) { <h4 class=\"ac__label\">{{ label() }}</h4> }\r\n    @case (5) { <h5 class=\"ac__label\">{{ label() }}</h5> }\r\n    @case (6) { <h6 class=\"ac__label\">{{ label() }}</h6> }\r\n    @default { <span class=\"ac__label\">{{ label() }}</span> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #bcTitleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"bc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"bc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"bc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"bc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"bc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"bc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;border-radius:var(--border-radius-sys-radius-lg);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);isolation:isolate;container-type:inline-size}:host.cmp-card--radius-md{border-radius:var(--border-radius-sys-radius-md)}:host.cmp-card--radius-lg{border-radius:var(--border-radius-sys-radius-lg)}:host.cmp-card--radius-xl{border-radius:var(--border-radius-sys-radius-xl)}.cmp-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.cmp-card--pad-none .cmp-card__body{padding:0}:host.cmp-card--pad-sm .cmp-card__body{padding:var(--spacing-padding-sys-padding-16)}:host.cmp-card--pad-md .cmp-card__body{padding:var(--spacing-padding-sys-padding-20)}:host.cmp-card--pad-lg .cmp-card__body{padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--pad-xl .cmp-card__body{padding:var(--spacing-padding-sys-padding-32)}:host.cmp-card--outlined{background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}:host.cmp-card--filled{background-color:var(--accent-primary-sys-primary-container);color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--gradient{background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%);background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}:host.cmp-card--gradient.cmp-card--content{background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--content .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--content .cc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-16);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}:host.cmp-card--gradient.cmp-card--content .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--gradient.cmp-card--content .cc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);font-weight:var(--body-small-sys-font-weight)}:host.cmp-card--image{color:var(--accent-primary-sys-on-primary-container);background-color:var(--surface-surface-container-sys-surface-container-high)}.cmp-card__media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}.cmp-card__scrim{position:absolute;inset:0;z-index:0;background-image:linear-gradient(180deg,var(--transparent-neutral-sys-black-40) 0%,var(--transparent-neutral-sys-black-10) 32%,var(--transparent-neutral-sys-black-10) 64%,var(--transparent-neutral-sys-black-50) 100%);mix-blend-mode:multiply}:host.cmp-card--interactive{cursor:pointer;transition:box-shadow .14s ease-out,border-color .14s ease-out,border-width .14s ease-out}:host.cmp-card--interactive:after{content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background-color:var(--surface-surface-sys-on-surface);opacity:0;transition:opacity .14s ease-out}:host.cmp-card--interactive.cmp-card--filled:after,:host.cmp-card--interactive.cmp-card--image:after{background-color:var(--accent-primary-sys-on-primary)}:host.cmp-card--interactive:hover{border-color:var(--outline-sys-outline-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 4px 16px #0000001a,0 2px 4px #00000014}:host.cmp-card--interactive:hover:after{opacity:.08}:host.cmp-card--interactive:active:after{opacity:.1}:host.cmp-card--selected,:host.cmp-card--interactive:focus-visible{outline:none;border-color:var(--add-on-primary-fixed-sys-on-primary-fixed-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}:host.cmp-card--disabled{pointer-events:none;opacity:.38}@media(prefers-reduced-motion:reduce){:host.cmp-card--interactive{transition:none}}@media(forced-colors:active){:host{border:1px solid CanvasText;forced-color-adjust:none}:host.cmp-card--interactive:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.cc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-12);font-family:var(--body-medium-sys-font-family)}.cc:not(.cc--hero):not(.cc--image){min-height:18.125rem}.cc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.cc__top--label{justify-content:flex-start;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.cc__category-label{background:transparent;padding:0;color:var(--accent-primary-sys-primary);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}.cc__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);line-height:0}.cc__icon--neutral{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cc__banner{display:flex;align-items:center;justify-content:center;width:100%;height:120px;flex-shrink:0;overflow:hidden;border-radius:var(--border-radius-sys-radius-sm);background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cc__banner-icon{display:inline-flex;line-height:0}.cc__container{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8)}.cc__title-group{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.cc__category-eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc--with-icon .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized);color:var(--surface-surface-sys-on-surface)}.cc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.cc__arrow{display:inline-flex;color:var(--surface-surface-sys-on-surface-variant);flex-shrink:0;line-height:0}.cc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.cc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.cc__title{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.cc__subtitle{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.cc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-2) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc__chip--glass{background-color:var(--transparent-neutral-sys-white-20);color:var(--accent-primary-sys-on-primary);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}.cc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc--filled .cc__icon{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--accent-primary-sys-primary)}.cc--filled .cc__title{color:var(--accent-primary-sys-on-primary-container)}.cc--filled .cc__subtitle,.cc--filled .cc__desc,.cc--filled .cc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}.cc--filled .cc__button{border-color:transparent}.cc--image{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:12.5rem;justify-content:space-between;gap:var(--spacing-padding-sys-padding-24);padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--hero{border-radius:var(--border-radius-sys-radius-xl)}.cc--hero{position:relative;display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-end;gap:var(--spacing-padding-sys-padding-24);min-height:22.5rem;padding:var(--spacing-padding-sys-padding-48)}.cc__media-icon{display:inline-flex;flex-shrink:0;color:var(--accent-primary-sys-on-primary);line-height:0}.cc--hero>.cc__media-icon{margin-bottom:auto}.cc__img-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-sys-padding-12)}.cc__img-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-padding-sys-padding-16)}.cc__img-foot--end{justify-content:flex-end}.cc__hero-text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8);min-width:0}.cc__eyebrow{margin:0;font-family:var(--title-large-sys-font-family);font-size:var(--title-large-sys-font-size);line-height:var(--title-large-sys-line-height);letter-spacing:var(--title-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__headline{margin:0;font-family:var(--display-large-sys-font-family);font-size:var(--display-large-sys-font-size);line-height:var(--display-large-sys-line-height);font-weight:var(--display-large-sys-font-weight);letter-spacing:var(--display-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__button--solid{align-self:flex-end;flex-shrink:0;border-color:transparent;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);box-shadow:0 .125rem .25rem #0000000f,0 .125rem .5rem #0000000a}@container (max-width: 36rem){.cc__img-foot{flex-direction:column;align-items:flex-start}.cc__button--solid{align-self:flex-start}}.cc--image .cc__title,.cc--image .cc__arrow{color:var(--accent-primary-sys-on-primary)}.cc--image .cc__subtitle,.cc--image .cc__desc{color:var(--transparent-neutral-sys-white-80)}.ac{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-padding-sys-padding-16);font-family:var(--body-medium-sys-font-family)}.ac__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.ac__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4);flex:1 1 auto;min-width:0}.ac__label{margin:0;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.ac__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.ac__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.ac--no-desc .ac__label{line-height:1}.ac--vertical{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--spacing-padding-sys-padding-16)}.ac__badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--surface-surface-container-sys-surface-container);color:var(--surface-surface-sys-on-surface);transition:background-color .14s ease-out;line-height:0}:host(:hover) .ac__badge{background-color:var(--surface-surface-container-sys-surface-container-lowest)}.ac--vertical .ac__label{white-space:pre-line;overflow:visible;font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight)}@media(prefers-reduced-motion:reduce){.ac__badge{transition:none}}.mc{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-padding-sys-padding-8);text-align:center;font-family:var(--body-medium-sys-font-family)}.mc__value{font-family:var(--headline-medium-sys-font-family);font-size:var(--headline-medium-sys-font-size);line-height:var(--headline-medium-sys-line-height);font-weight:var(--headline-medium-sys-font-weight);letter-spacing:var(--headline-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc__label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc--current .mc__value,.mc--current .mc__label{color:var(--accent-primary-sys-primary)}.mc--current .mc__value{font-weight:var(--headline-medium-sys-font-weight-emphasized)}.mc--current .mc__label{font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--metric{box-shadow:0 2px 2px #0000000f,0 2px 4px #0000000a}:host.cmp-card--metric.cmp-card--current{box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}.bc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-48);padding:var(--spacing-padding-sys-padding-32);font-family:var(--body-medium-sys-font-family)}.bc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.bc__icon{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.bc__icon--badge{align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.bc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.bc__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.bc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.bc__body{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-24)}.bc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.bc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.bc__eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__title{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface)}.bc__subtitle{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface-variant)}.bc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);white-space:nowrap}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]){background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .bc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-24);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}.bc--image{justify-content:space-between;gap:var(--spacing-padding-sys-padding-12);min-height:15.25rem}.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}.bc--image .bc__arrow{align-self:flex-end;color:var(--accent-primary-sys-on-primary)}:host.cmp-card--image .bc--row .bc__title,:host.cmp-card--image .bc--row .bc__icon,:host.cmp-card--image .bc--row .bc__arrow{color:var(--accent-primary-sys-on-primary)}:host[data-card-size=sm] .bc{gap:var(--spacing-padding-sys-padding-40);padding:var(--spacing-padding-sys-padding-24)}:host[data-card-size=sm] .bc__title,:host[data-card-size=sm] .bc__subtitle{font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);letter-spacing:var(--title-small-sys-tracking);font-weight:var(--title-small-sys-font-weight)}:host[data-card-size=sm] .bc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking)}:host[data-card-size=xs]{border-radius:var(--border-radius-sys-radius-md)}.bc--row{flex-direction:row;align-items:center;gap:var(--spacing-padding-sys-padding-12);padding:var(--spacing-padding-sys-padding-16)}.bc--row .bc__icon{color:var(--surface-surface-sys-on-surface)}.bc--row .bc__row-text{flex:1 1 auto;min-width:0}.bc--row .bc__title{font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);font-weight:var(--body-medium-sys-font-weight)}.bc--promo{justify-content:space-between;gap:var(--spacing-padding-sys-padding-24)}.bc--promo .bc__chip{align-self:flex-start}.bc__button--end{align-self:flex-end}.bc--promo.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--promo.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--promo.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}:host.cmp-card--filled .bc__title,:host.cmp-card--filled .bc__icon{color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--filled .bc__eyebrow,:host.cmp-card--filled .bc__subtitle,:host.cmp-card--filled .bc__desc,:host.cmp-card--filled .bc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}:host.cmp-card--filled .bc__button{border-color:transparent}\n"] }]
+                    }, template: "@if (isImage() && mediaUrl()) {\r\n  <div class=\"cmp-card__media\" [style.background-image]=\"mediaUrl()\" [style.background-position]=\"imagePosition()\"></div>\r\n  <div class=\"cmp-card__scrim\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"cmp-card__body\">\r\n  @switch (variant()) {\r\n    @case ('content') {\r\n      @if (headline()) {\r\n        <!-- Hero (image/filled): icon top-left, eyebrow + display headline + action bottom. -->\r\n        <div class=\"cc cc--hero\" [class.cc--image]=\"isImage()\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          @if (icon()) {\r\n            @if (isImage()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            } @else {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n          }\r\n          <div class=\"cc__img-foot\">\r\n            <div class=\"cc__hero-text\">\r\n              @if (title()) { <p class=\"cc__eyebrow\">{{ title() }}</p> }\r\n              <ng-container [ngTemplateOutlet]=\"headlineTpl\" />\r\n              @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <div class=\"cc cc--image\">\r\n          <div class=\"cc__img-top\">\r\n            @if (icon()) {\r\n              <div class=\"cc__media-icon\" [innerHTML]=\"iconSvg(icon(), 48)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (category()) { <span class=\"cc__chip cc__chip--glass\">{{ category() }}</span> }\r\n          </div>\r\n          <div class=\"cc__img-foot\">\r\n            @if (title() || subtitle() || description()) {\r\n              <div class=\"cc__hero-text\">\r\n                @if (title() || subtitle()) {\r\n                  <div class=\"cc__heading\">\r\n                    @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                    @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n                  </div>\r\n                }\r\n                @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n              </div>\r\n            }\r\n            @if (actionLabel()) {\r\n              <span class=\"cc__button cc__button--solid\">{{ actionLabel() }}</span>\r\n            } @else if (showArrow()) {\r\n              <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @else if (appearance() === 'gradient') {\r\n        <div class=\"cc\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__top\" [class.cc__top--label]=\"categoryStyle() === 'label'\">\r\n            @if (icon()) {\r\n              <div class=\"cc__icon\" [class.cc__icon--neutral]=\"iconStyle() === 'neutral'\" [innerHTML]=\"iconSvg(icon(), 24)\" aria-hidden=\"true\"></div>\r\n            }\r\n            @if (categoryStyle() === 'label' && category()) {\r\n              <span class=\"cc__category-label\">{{ category() }}</span>\r\n            }\r\n            <div class=\"cc__top-end\">\r\n              @if (categoryStyle() === 'chip' && category()) { <span class=\"cc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"cc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 24)\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"cc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"cc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"cc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"cc__button\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else {\r\n        <!-- With-icon content card (Figma 59444:2263): a full-width light-blue\r\n             icon banner over a gray category eyebrow + title + body, with the\r\n             text distributed top/bottom. Default for outlined/filled content. -->\r\n        <div class=\"cc cc--with-icon\" [class.cc--filled]=\"appearance() === 'filled'\">\r\n          <div class=\"cc__banner\">\r\n            @if (icon()) {\r\n              <span class=\"cc__banner-icon\" [innerHTML]=\"iconSvg(icon(), 48, 1.5)\" aria-hidden=\"true\"></span>\r\n            }\r\n          </div>\r\n          <div class=\"cc__container\">\r\n            <div class=\"cc__title-group\">\r\n              @if (category()) { <p class=\"cc__category-eyebrow\">{{ category() }}</p> }\r\n              @if (title()) { <ng-container [ngTemplateOutlet]=\"titleTpl\" /> }\r\n            </div>\r\n            @if (description()) { <p class=\"cc__desc\">{{ description() }}</p> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('action') {\r\n      @if (orientation() === 'vertical') {\r\n        <div class=\"ac ac--vertical\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__badge\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <div class=\"ac\" [class.ac--no-desc]=\"!description()\">\r\n          @if (icon()) {\r\n            <div class=\"ac__icon\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"ac__text\">\r\n            <ng-container [ngTemplateOutlet]=\"labelTpl\" />\r\n            @if (description()) { <span class=\"ac__desc\">{{ description() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @case ('metric') {\r\n      <div class=\"mc\" [class.mc--current]=\"current()\">\r\n        <span class=\"mc__value\">{{ value() }}</span>\r\n        @if (label()) { <span class=\"mc__label\">{{ label() }}</span> }\r\n      </div>\r\n    }\r\n\r\n    @case ('basic') {\r\n      @if (size() === 'xs') {\r\n        <!-- xs base card (Figma 243:3264): compact horizontal row \u2014 icon \u00B7 title \u00B7 arrow. -->\r\n        <div class=\"bc bc--row\">\r\n          @if (icon()) {\r\n            <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), 24, 1.5)\" aria-hidden=\"true\"></div>\r\n          }\r\n          <div class=\"bc__row-text\">\r\n            @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', 20)\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else if (size() === 'lg') {\r\n        <!-- lg base card (Figma 243:3205): text + optional chip, button bottom-right. -->\r\n        <div class=\"bc bc--promo\" [class.bc--image]=\"isImage()\">\r\n          <div class=\"bc__text\">\r\n            @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n          </div>\r\n          @if (actionLabel()) { <span class=\"bc__button bc__button--end\">{{ actionLabel() }}</span> }\r\n        </div>\r\n      } @else if (isImage()) {\r\n        <!-- md image base card (Figma 59442:12042): text over the image, arrow bottom-right. -->\r\n        <div class=\"bc bc--image\">\r\n          <div class=\"bc__text\">\r\n            @if (title() || subtitle()) {\r\n              <div class=\"bc__heading\">\r\n                @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n              </div>\r\n            }\r\n            @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n          </div>\r\n          @if (showArrow()) {\r\n            <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <!-- md / sm base card (Figma 243:3174, 243:3179, 947:8067):\r\n             icon + arrow row, then eyebrow / title / subtitle / description / button. -->\r\n        <div class=\"bc\">\r\n          <div class=\"bc__top\">\r\n            @if (icon()) {\r\n              @if (appearance() === 'gradient') {\r\n                <div class=\"bc__icon bc__icon--badge\" [innerHTML]=\"iconSvg(icon(), 32)\" aria-hidden=\"true\"></div>\r\n              } @else {\r\n                <div class=\"bc__icon\" [innerHTML]=\"iconSvg(icon(), basicIconSize(), 1.5)\" aria-hidden=\"true\"></div>\r\n              }\r\n            }\r\n            <div class=\"bc__top-end\">\r\n              @if (category()) { <span class=\"bc__chip\">{{ category() }}</span> }\r\n              @if (showArrow()) {\r\n                <span class=\"bc__arrow\" [innerHTML]=\"iconSvg('arrow-up-right', basicArrowSize())\" aria-hidden=\"true\"></span>\r\n              }\r\n            </div>\r\n          </div>\r\n          <div class=\"bc__body\">\r\n            <div class=\"bc__text\">\r\n              @if (label()) { <p class=\"bc__eyebrow\">{{ label() }}</p> }\r\n              @if (title() || subtitle()) {\r\n                <div class=\"bc__heading\">\r\n                  @if (title()) { <ng-container [ngTemplateOutlet]=\"bcTitleTpl\" /> }\r\n                  @if (subtitle()) { <p class=\"bc__subtitle\">{{ subtitle() }}</p> }\r\n                </div>\r\n              }\r\n              @if (description()) { <p class=\"bc__desc\">{{ description() }}</p> }\r\n            </div>\r\n            @if (actionLabel()) { <span class=\"bc__button\">{{ actionLabel() }}</span> }\r\n          </div>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @default {\r\n      <ng-content />\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Heading fragments: render a real <h2>\u2013<h6> when `headingLevel` is set, else the\r\n     original <p>/<span>. Shared across layouts so semantics stay consistent and the\r\n     cc__title / cc__headline / ac__label styling is unchanged. -->\r\n<ng-template #titleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"cc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #headlineTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"cc__headline\">{{ headline() }}</h2> }\r\n    @case (3) { <h3 class=\"cc__headline\">{{ headline() }}</h3> }\r\n    @case (4) { <h4 class=\"cc__headline\">{{ headline() }}</h4> }\r\n    @case (5) { <h5 class=\"cc__headline\">{{ headline() }}</h5> }\r\n    @case (6) { <h6 class=\"cc__headline\">{{ headline() }}</h6> }\r\n    @default { <p class=\"cc__headline\">{{ headline() }}</p> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #labelTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"ac__label\">{{ label() }}</h2> }\r\n    @case (3) { <h3 class=\"ac__label\">{{ label() }}</h3> }\r\n    @case (4) { <h4 class=\"ac__label\">{{ label() }}</h4> }\r\n    @case (5) { <h5 class=\"ac__label\">{{ label() }}</h5> }\r\n    @case (6) { <h6 class=\"ac__label\">{{ label() }}</h6> }\r\n    @default { <span class=\"ac__label\">{{ label() }}</span> }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #bcTitleTpl>\r\n  @switch (effectiveHeadingLevel()) {\r\n    @case (2) { <h2 class=\"bc__title\">{{ title() }}</h2> }\r\n    @case (3) { <h3 class=\"bc__title\">{{ title() }}</h3> }\r\n    @case (4) { <h4 class=\"bc__title\">{{ title() }}</h4> }\r\n    @case (5) { <h5 class=\"bc__title\">{{ title() }}</h5> }\r\n    @case (6) { <h6 class=\"bc__title\">{{ title() }}</h6> }\r\n    @default { <p class=\"bc__title\">{{ title() }}</p> }\r\n  }\r\n</ng-template>\r\n", styles: [":host{position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;border-radius:var(--border-radius-sys-radius-lg);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);isolation:isolate;container-type:inline-size}:host.cmp-card--radius-md{border-radius:var(--border-radius-sys-radius-md)}:host.cmp-card--radius-lg{border-radius:var(--border-radius-sys-radius-lg)}:host.cmp-card--radius-xl{border-radius:var(--border-radius-sys-radius-xl)}.cmp-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.cmp-card--pad-none .cmp-card__body{padding:0}:host.cmp-card--pad-sm .cmp-card__body{padding:var(--spacing-padding-sys-padding-16)}:host.cmp-card--pad-md .cmp-card__body{padding:var(--spacing-padding-sys-padding-20)}:host.cmp-card--pad-lg .cmp-card__body{padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--pad-xl .cmp-card__body{padding:var(--spacing-padding-sys-padding-32)}:host.cmp-card--outlined{background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant)}:host.cmp-card--filled{background-color:var(--accent-primary-sys-primary-container);color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--gradient{background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%);background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant)}:host.cmp-card--gradient.cmp-card--content{background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--content .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--content .cc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-16);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}:host.cmp-card--gradient.cmp-card--content .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--gradient.cmp-card--content .cc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);font-weight:var(--body-small-sys-font-weight)}:host.cmp-card--image{color:var(--accent-primary-sys-on-primary-container);background-color:var(--surface-surface-container-sys-surface-container-high)}.cmp-card__media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}.cmp-card__scrim{position:absolute;inset:0;z-index:0;background-image:linear-gradient(180deg,var(--transparent-neutral-sys-black-40) 0%,var(--transparent-neutral-sys-black-10) 32%,var(--transparent-neutral-sys-black-10) 64%,var(--transparent-neutral-sys-black-50) 100%);mix-blend-mode:multiply}:host.cmp-card--interactive{cursor:pointer;transition:box-shadow .14s ease-out,border-color .14s ease-out,border-width .14s ease-out}:host.cmp-card--interactive:after{content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background-color:var(--surface-surface-sys-on-surface);opacity:0;transition:opacity .14s ease-out}:host.cmp-card--interactive.cmp-card--filled:after,:host.cmp-card--interactive.cmp-card--image:after{background-color:var(--accent-primary-sys-on-primary)}:host.cmp-card--interactive:hover{border-color:var(--outline-sys-outline-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 4px 16px #0000001a,0 2px 4px #00000014}:host.cmp-card--interactive:hover:after{opacity:.08}:host.cmp-card--interactive:active:after{opacity:.1}:host.cmp-card--selected,:host.cmp-card--interactive:focus-visible{outline:none;border-color:var(--add-on-primary-fixed-sys-on-primary-fixed-variant);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}:host.cmp-card--disabled{pointer-events:none;opacity:.38}@media(prefers-reduced-motion:reduce){:host.cmp-card--interactive{transition:none}}@media(forced-colors:active){:host{border:1px solid CanvasText;forced-color-adjust:none}:host.cmp-card--interactive:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.cc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-12);font-family:var(--body-medium-sys-font-family)}.cc:not(.cc--hero):not(.cc--image){min-height:18.125rem}.cc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.cc__top--label{justify-content:flex-start;align-items:center;gap:var(--spacing-padding-sys-padding-16)}.cc__category-label{background:transparent;padding:0;color:var(--accent-primary-sys-primary);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized)}.cc__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary);line-height:0}.cc__icon--neutral{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline)}.cc__banner{display:flex;align-items:center;justify-content:center;width:100%;height:120px;flex-shrink:0;overflow:hidden;border-radius:var(--border-radius-sys-radius-sm);background-color:var(--add-on-primary-fixed-sys-primary-fixed-dim);color:var(--add-on-primary-fixed-sys-on-primary-fixed)}.cc__banner-icon{display:inline-flex;line-height:0}.cc__container{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8)}.cc__title-group{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.cc__category-eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc--with-icon .cc__title{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking);font-weight:var(--label-large-sys-font-weight-emphasized);color:var(--surface-surface-sys-on-surface)}.cc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.cc__arrow{display:inline-flex;color:var(--surface-surface-sys-on-surface-variant);flex-shrink:0;line-height:0}.cc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.cc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.cc__title{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.cc__subtitle{margin:0;font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight-emphasized);letter-spacing:var(--title-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.cc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.cc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-2) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc__chip--glass{background-color:var(--transparent-neutral-sys-white-20);color:var(--accent-primary-sys-on-primary);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}.cc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.cc--filled .cc__icon{background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--accent-primary-sys-primary)}.cc--filled .cc__title{color:var(--accent-primary-sys-on-primary-container)}.cc--filled .cc__subtitle,.cc--filled .cc__desc,.cc--filled .cc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}.cc--filled .cc__button{border-color:transparent}.cc--image{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:12.5rem;justify-content:space-between;gap:var(--spacing-padding-sys-padding-24);padding:var(--spacing-padding-sys-padding-24)}:host.cmp-card--hero{border-radius:var(--border-radius-sys-radius-xl)}.cc--hero{position:relative;display:flex;flex-direction:column;flex:1 1 auto;justify-content:flex-end;gap:var(--spacing-padding-sys-padding-24);min-height:22.5rem;padding:var(--spacing-padding-sys-padding-48)}.cc__media-icon{display:inline-flex;flex-shrink:0;color:var(--accent-primary-sys-on-primary);line-height:0}.cc--hero>.cc__media-icon{margin-bottom:auto}.cc__img-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-padding-sys-padding-12)}.cc__img-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-padding-sys-padding-16)}.cc__img-foot--end{justify-content:flex-end}.cc__hero-text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8);min-width:0}.cc__eyebrow{margin:0;font-family:var(--title-large-sys-font-family);font-size:var(--title-large-sys-font-size);line-height:var(--title-large-sys-line-height);letter-spacing:var(--title-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__headline{margin:0;font-family:var(--display-large-sys-font-family);font-size:var(--display-large-sys-font-size);line-height:var(--display-large-sys-line-height);font-weight:var(--display-large-sys-font-weight);letter-spacing:var(--display-large-sys-tracking);color:var(--accent-primary-sys-on-primary)}.cc__button--solid{align-self:flex-end;flex-shrink:0;border-color:transparent;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);box-shadow:0 .125rem .25rem #0000000f,0 .125rem .5rem #0000000a}@container (max-width: 36rem){.cc__img-foot{flex-direction:column;align-items:flex-start}.cc__button--solid{align-self:flex-start}}.cc--image .cc__title,.cc--image .cc__arrow{color:var(--accent-primary-sys-on-primary)}.cc--image .cc__subtitle,.cc--image .cc__desc{color:var(--transparent-neutral-sys-white-80)}.ac{display:flex;flex:1 1 auto;align-items:center;gap:var(--spacing-padding-sys-padding-16);font-family:var(--body-medium-sys-font-family)}.ac__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.ac__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4);flex:1 1 auto;min-width:0}.ac__label{margin:0;font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.ac__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.ac__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.ac--no-desc .ac__label{line-height:1}.ac--vertical{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--spacing-padding-sys-padding-16)}.ac__badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sys-size-xl);height:var(--sys-size-xl);flex-shrink:0;border-radius:var(--border-radius-sys-radius-full);background-color:var(--surface-surface-container-sys-surface-container);color:var(--surface-surface-sys-on-surface);transition:background-color .14s ease-out;line-height:0}:host(:hover) .ac__badge{background-color:var(--surface-surface-container-sys-surface-container-lowest)}.ac--vertical .ac__label{white-space:pre-line;overflow:visible;font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);font-weight:var(--title-small-sys-font-weight)}@media(prefers-reduced-motion:reduce){.ac__badge{transition:none}}.mc{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-padding-sys-padding-8);text-align:center;font-family:var(--body-medium-sys-font-family)}.mc__value{font-family:var(--headline-medium-sys-font-family);font-size:var(--headline-medium-sys-font-size);line-height:var(--headline-medium-sys-line-height);font-weight:var(--headline-medium-sys-font-weight);letter-spacing:var(--headline-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc__label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight);letter-spacing:var(--label-large-sys-tracking);color:var(--surface-surface-sys-on-surface)}.mc--current .mc__value,.mc--current .mc__label{color:var(--accent-primary-sys-primary)}.mc--current .mc__value{font-weight:var(--headline-medium-sys-font-weight-emphasized)}.mc--current .mc__label{font-weight:var(--label-large-sys-font-weight-emphasized)}:host.cmp-card--metric{box-shadow:0 2px 2px #0000000f,0 2px 4px #0000000a}:host.cmp-card--metric.cmp-card--current{box-shadow:0 0 0 var(--spacing-padding-sys-padding-4) var(--transparent-primary-sys-primary-08)}.bc{display:flex;flex-direction:column;flex:1 1 auto;gap:var(--spacing-padding-sys-padding-48);padding:var(--spacing-padding-sys-padding-32);font-family:var(--body-medium-sys-font-family)}.bc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-padding-sys-padding-8)}.bc__icon{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface);line-height:0}.bc__icon--badge{align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--border-radius-sys-radius-full);background-color:var(--accent-primary-sys-primary);color:var(--accent-primary-sys-on-primary)}.bc__top-end{display:inline-flex;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.bc__arrow{display:inline-flex;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);line-height:0}.bc__chip{display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-4) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-full);background-color:var(--custom-info-sys-info-container);color:var(--custom-info-sys-on-info-container);font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);white-space:nowrap}.bc__body{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-24)}.bc__text{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-12)}.bc__heading{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.bc__eyebrow{margin:0;font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__title{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface)}.bc__subtitle{margin:0;font-family:var(--title-medium-sys-font-family);font-size:var(--title-medium-sys-font-size);line-height:var(--title-medium-sys-line-height);letter-spacing:var(--title-medium-sys-tracking);font-weight:var(--title-medium-sys-font-weight);color:var(--surface-surface-sys-on-surface-variant)}.bc__desc{margin:0;font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);color:var(--surface-surface-sys-on-surface-variant)}.bc__button{align-self:flex-start;display:inline-flex;align-items:center;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-32);border-radius:var(--border-radius-sys-radius-full);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);line-height:var(--label-large-sys-line-height);font-weight:var(--label-large-sys-font-weight-emphasized);white-space:nowrap}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]){background-image:none;border-radius:var(--border-radius-sys-radius-xl)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .cmp-card__body{padding:var(--spacing-padding-sys-padding-8)}:host.cmp-card--gradient.cmp-card--basic:not([data-card-size=xs]):not([data-card-size=lg]) .bc{gap:var(--spacing-padding-sys-padding-32);padding:var(--spacing-padding-sys-padding-24);border-radius:var(--border-radius-sys-radius-lg);background-image:linear-gradient(180deg,var(--transparent-primary-sys-primary-08) 0%,var(--transparent-neutral-sys-white-10) 100%)}.bc--image{justify-content:space-between;gap:var(--spacing-padding-sys-padding-12);min-height:15.25rem}.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}.bc--image .bc__arrow{align-self:flex-end;color:var(--accent-primary-sys-on-primary)}:host.cmp-card--image .bc--row .bc__title,:host.cmp-card--image .bc--row .bc__icon,:host.cmp-card--image .bc--row .bc__arrow{color:var(--accent-primary-sys-on-primary)}:host[data-card-size=sm] .bc{gap:var(--spacing-padding-sys-padding-40);padding:var(--spacing-padding-sys-padding-24)}:host[data-card-size=sm] .bc__title,:host[data-card-size=sm] .bc__subtitle{font-family:var(--title-small-sys-font-family);font-size:var(--title-small-sys-font-size);line-height:var(--title-small-sys-line-height);letter-spacing:var(--title-small-sys-tracking);font-weight:var(--title-small-sys-font-weight)}:host[data-card-size=sm] .bc__desc{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height);letter-spacing:var(--body-small-sys-tracking)}:host[data-card-size=xs]{border-radius:var(--border-radius-sys-radius-md)}.bc--row{flex-direction:row;align-items:center;gap:var(--spacing-padding-sys-padding-12);padding:var(--spacing-padding-sys-padding-16)}.bc--row .bc__icon{color:var(--surface-surface-sys-on-surface)}.bc--row .bc__row-text{flex:1 1 auto;min-width:0}.bc--row .bc__title{font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);letter-spacing:var(--body-medium-sys-tracking);font-weight:var(--body-medium-sys-font-weight)}.bc--promo{justify-content:space-between;gap:var(--spacing-padding-sys-padding-24)}.bc--promo .bc__chip{align-self:flex-start}.bc__button--end{align-self:flex-end}.bc--promo.bc--image .bc__title{color:var(--accent-primary-sys-on-primary)}.bc--promo.bc--image .bc__subtitle{color:var(--transparent-neutral-sys-white-80)}.bc--promo.bc--image .bc__desc{color:var(--transparent-neutral-sys-white-50)}:host.cmp-card--filled .bc__title,:host.cmp-card--filled .bc__icon{color:var(--accent-primary-sys-on-primary-container)}:host.cmp-card--filled .bc__eyebrow,:host.cmp-card--filled .bc__subtitle,:host.cmp-card--filled .bc__desc,:host.cmp-card--filled .bc__arrow{color:var(--accent-primary-sys-on-primary-container-variant)}:host.cmp-card--filled .bc__button{border-color:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], imagePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "imagePosition", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], categoryStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryStyle", required: false }] }], iconStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconStyle", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
 //# sourceMappingURL=card.js.map