@tedi-design-system/angular 6.5.0-rc.11 → 6.5.0-rc.12

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -219,6 +219,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, styles: [".tedi-button{display:inline-flex;gap:var(--_btn-inner-spacing);align-items:center;justify-content:center;padding:var(--_btn-padding);font-family:var(--family-default);font-weight:var(--body-regular-weight);line-height:var(--body-bold-line-height);color:var(--_btn-text);text-decoration:none;cursor:pointer;background:var(--_btn-bg);border:var(--tedi-borders-01) solid var(--_btn-border);border-radius:var(--button-radius-default);transition:.15s ease;transition-property:background-color,border-color}.tedi-button--icon-only{width:var(--button-md-icon-size);height:var(--button-md-icon-size);padding:var(--button-md-icon-padding)}.tedi-button--pl:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-left:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button--pr:not(.tedi-button--neutral,.tedi-button--danger-neutral,.tedi-button--neutral-inverted){padding-right:calc(var(--_btn-padding-x) + var(--_btn-inner-spacing) - 1px)}.tedi-button:hover{color:var(--_btn-hover-text);background:var(--_btn-hover-bg);border-color:var(--_btn-hover-border)}.tedi-button:active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-button:focus-visible{color:var(--_btn-focus-text);outline:2px solid var(--_btn-outline);outline-offset:1px;background:var(--_btn-focus-bg);border-color:var(--_btn-focus-border)}.tedi-button:disabled{color:var(--_btn-disabled-text);cursor:not-allowed;background:var(--_btn-disabled-bg);border-color:var(--_btn-disabled-border)}.tedi-button tedi-icon{font-size:inherit;color:inherit}.tedi-button--small{font-size:var(--button-text-size-sm);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-sm-inner-spacing);--_btn-padding-y: var(--button-sm-padding-y);--_btn-padding-x: var(--button-sm-padding-x)}.tedi-button--default{font-size:var(--button-text-size-default);--_btn-padding: calc(var(--_btn-padding-y) - 1px) calc(var(--_btn-padding-x) - 1px);--_btn-inner-spacing: var(--button-md-inner-spacing);--_btn-padding-y: var(--button-md-padding-y);--_btn-padding-x: var(--button-md-padding-x)}.tedi-button--primary{--_btn-bg: var(--button-main-primary-background-default);--_btn-border: var(--button-main-primary-border-default);--_btn-text: var(--button-main-primary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary{--_btn-hover-bg: var( --button-main-primary-background-hover, var(--button-main-primary-background-default) );--_btn-hover-border: var( --button-main-primary-border-hover, var(--button-main-primary-border-default) );--_btn-hover-text: var( --button-main-primary-text-hover, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-focus-bg: var( --button-main-primary-background-focus, var(--button-main-primary-background-default) );--_btn-focus-border: var( --button-main-primary-border-focus, var(--button-main-primary-border-default) );--_btn-focus-text: var( --button-main-primary-text-focus, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-active-bg: var( --button-main-primary-background-active, var(--button-main-primary-background-default) );--_btn-active-border: var( --button-main-primary-border-active, var(--button-main-primary-border-default) );--_btn-active-text: var( --button-main-primary-text-active, var(--button-main-primary-text-default) )}.tedi-button--primary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary{--_btn-bg: var(--button-main-secondary-background-default);--_btn-border: var(--button-main-secondary-border-default);--_btn-text: var(--button-main-secondary-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary{--_btn-hover-bg: var( --button-main-secondary-background-hover, var(--button-main-secondary-background-default) );--_btn-hover-border: var( --button-main-secondary-border-hover, var(--button-main-secondary-border-default) );--_btn-hover-text: var( --button-main-secondary-text-hover, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-focus-bg: var( --button-main-secondary-background-focus, var(--button-main-secondary-background-default) );--_btn-focus-border: var( --button-main-secondary-border-focus, var(--button-main-secondary-border-default) );--_btn-focus-text: var( --button-main-secondary-text-focus, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-active-bg: var( --button-main-secondary-background-active, var(--button-main-secondary-background-default) );--_btn-active-border: var( --button-main-secondary-border-active, var(--button-main-secondary-border-default) );--_btn-active-text: var( --button-main-secondary-text-active, var(--button-main-secondary-text-default) )}.tedi-button--secondary{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral{--_btn-bg: var(--button-main-neutral-background-default);--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-background-hover, var(--button-main-neutral-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-background-focus, var(--button-main-neutral-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-background-active, var(--button-main-neutral-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--success{--_btn-bg: var(--button-main-success-background-default);--_btn-border: var(--button-main-success-border-default);--_btn-text: var(--button-main-success-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--success{--_btn-hover-bg: var( --button-main-success-background-hover, var(--button-main-success-background-default) );--_btn-hover-border: var( --button-main-success-border-hover, var(--button-main-success-border-default) );--_btn-hover-text: var( --button-main-success-text-hover, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-focus-bg: var( --button-main-success-background-focus, var(--button-main-success-background-default) );--_btn-focus-border: var( --button-main-success-border-focus, var(--button-main-success-border-default) );--_btn-focus-text: var( --button-main-success-text-focus, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-active-bg: var( --button-main-success-background-active, var(--button-main-success-background-default) );--_btn-active-border: var( --button-main-success-border-active, var(--button-main-success-border-default) );--_btn-active-text: var( --button-main-success-text-active, var(--button-main-success-text-default) )}.tedi-button--success{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger{--_btn-bg: var(--button-main-danger-background-default);--_btn-border: var(--button-main-danger-border-default);--_btn-text: var(--button-main-danger-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger{--_btn-hover-bg: var( --button-main-danger-background-hover, var(--button-main-danger-background-default) );--_btn-hover-border: var( --button-main-danger-border-hover, var(--button-main-danger-border-default) );--_btn-hover-text: var( --button-main-danger-text-hover, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-focus-bg: var( --button-main-danger-background-focus, var(--button-main-danger-background-default) );--_btn-focus-border: var( --button-main-danger-border-focus, var(--button-main-danger-border-default) );--_btn-focus-text: var( --button-main-danger-text-focus, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-active-bg: var( --button-main-danger-background-active, var(--button-main-danger-background-default) );--_btn-active-border: var( --button-main-danger-border-active, var(--button-main-danger-border-default) );--_btn-active-text: var( --button-main-danger-text-active, var(--button-main-danger-text-default) )}.tedi-button--danger{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--danger-neutral:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--danger-neutral{--_btn-bg: var(--button-main-danger-neutral-background-default);--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-background-hover, var(--button-main-danger-neutral-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-background-focus, var(--button-main-danger-neutral-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-background-active, var(--button-main-danger-neutral-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--primary-inverted{--_btn-bg: var(--button-main-primary-inverted-background-default);--_btn-border: var(--button-main-primary-inverted-border-default);--_btn-text: var(--button-main-primary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--primary-inverted{--_btn-hover-bg: var( --button-main-primary-inverted-background-hover, var(--button-main-primary-inverted-background-default) );--_btn-hover-border: var( --button-main-primary-inverted-border-hover, var(--button-main-primary-inverted-border-default) );--_btn-hover-text: var( --button-main-primary-inverted-text-hover, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-focus-bg: var( --button-main-primary-inverted-background-focus, var(--button-main-primary-inverted-background-default) );--_btn-focus-border: var( --button-main-primary-inverted-border-focus, var(--button-main-primary-inverted-border-default) );--_btn-focus-text: var( --button-main-primary-inverted-text-focus, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-active-bg: var( --button-main-primary-inverted-background-active, var(--button-main-primary-inverted-background-default) );--_btn-active-border: var( --button-main-primary-inverted-border-active, var(--button-main-primary-inverted-border-default) );--_btn-active-text: var( --button-main-primary-inverted-text-active, var(--button-main-primary-inverted-text-default) )}.tedi-button--primary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--secondary-inverted{--_btn-bg: var(--button-main-secondary-inverted-background-default);--_btn-border: var(--button-main-secondary-inverted-border-default);--_btn-text: var(--button-main-secondary-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--secondary-inverted{--_btn-hover-bg: var( --button-main-secondary-inverted-background-hover, var(--button-main-secondary-inverted-background-default) );--_btn-hover-border: var( --button-main-secondary-inverted-border-hover, var(--button-main-secondary-inverted-border-default) );--_btn-hover-text: var( --button-main-secondary-inverted-text-hover, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-focus-bg: var( --button-main-secondary-inverted-background-focus, var(--button-main-secondary-inverted-background-default) );--_btn-focus-border: var( --button-main-secondary-inverted-border-focus, var(--button-main-secondary-inverted-border-default) );--_btn-focus-text: var( --button-main-secondary-inverted-text-focus, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-active-bg: var( --button-main-secondary-inverted-background-active, var(--button-main-secondary-inverted-background-default) );--_btn-active-border: var( --button-main-secondary-inverted-border-active, var(--button-main-secondary-inverted-border-default) );--_btn-active-text: var( --button-main-secondary-inverted-text-active, var(--button-main-secondary-inverted-text-default) )}.tedi-button--secondary-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-general-background);--_btn-disabled-border: var(--button-main-disabled-general-border)}.tedi-button--neutral-inverted{--_btn-bg: var(--button-main-neutral-inverted-background-default);--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-background-hover, var(--button-main-neutral-inverted-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-background-focus, var(--button-main-neutral-inverted-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-background-active, var(--button-main-neutral-inverted-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--neutral-inverted:where(.tedi-button--small){--_btn-padding-y: var(--button-sm-neutral-padding-y);--_btn-padding-x: var(--button-sm-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button--neutral-inverted:where(.tedi-button--default){--_btn-padding-y: var(--button-md-neutral-padding-y);--_btn-padding-x: var(--button-md-neutral-padding-x);--_btn-padding: calc(var(--_btn-padding-y) - 1px) var(--_btn-padding-x)}.tedi-button[class*=-inverted]:focus-visible{outline:none;box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--_btn-outline)}.tedi-button--icon-only.tedi-button--neutral{--_btn-bg: var( --button-main-neutral-icon-only-background-default );--_btn-border: var(--button-main-neutral-border-default);--_btn-text: var(--button-main-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral{--_btn-hover-bg: var( --button-main-neutral-icon-only-background-hover, var(--button-main-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-border-hover, var(--button-main-neutral-border-default) );--_btn-hover-text: var( --button-main-neutral-text-hover, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-focus-bg: var( --button-main-neutral-icon-only-background-focus, var(--button-main-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-border-focus, var(--button-main-neutral-border-default) );--_btn-focus-text: var( --button-main-neutral-text-focus, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-active-bg: var( --button-main-neutral-icon-only-background-active, var(--button-main-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-border-active, var(--button-main-neutral-border-default) );--_btn-active-text: var( --button-main-neutral-text-active, var(--button-main-neutral-text-default) )}.tedi-button--icon-only.tedi-button--neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-bg: var( --button-main-neutral-inverted-icon-only-background-default );--_btn-border: var(--button-main-neutral-inverted-border-default);--_btn-text: var(--button-main-neutral-inverted-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-hover-bg: var( --button-main-neutral-inverted-icon-only-background-hover, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-hover-border: var( --button-main-neutral-inverted-border-hover, var(--button-main-neutral-inverted-border-default) );--_btn-hover-text: var( --button-main-neutral-inverted-text-hover, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-focus-bg: var( --button-main-neutral-inverted-icon-only-background-focus, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-focus-border: var( --button-main-neutral-inverted-border-focus, var(--button-main-neutral-inverted-border-default) );--_btn-focus-text: var( --button-main-neutral-inverted-text-focus, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-active-bg: var( --button-main-neutral-inverted-icon-only-background-active, var(--button-main-neutral-inverted-icon-only-background-default) );--_btn-active-border: var( --button-main-neutral-inverted-border-active, var(--button-main-neutral-inverted-border-default) );--_btn-active-text: var( --button-main-neutral-inverted-text-active, var(--button-main-neutral-inverted-text-default) )}.tedi-button--icon-only.tedi-button--neutral-inverted{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-bg: var( --button-main-danger-neutral-icon-only-background-default );--_btn-border: var(--button-main-danger-neutral-border-default);--_btn-text: var(--button-main-danger-neutral-text-default);--_btn-outline: var(--tedi-primary-500)}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-hover-bg: var( --button-main-danger-neutral-icon-only-background-hover, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-hover-border: var( --button-main-danger-neutral-border-hover, var(--button-main-danger-neutral-border-default) );--_btn-hover-text: var( --button-main-danger-neutral-text-hover, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-focus-bg: var( --button-main-danger-neutral-icon-only-background-focus, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-focus-border: var( --button-main-danger-neutral-border-focus, var(--button-main-danger-neutral-border-default) );--_btn-focus-text: var( --button-main-danger-neutral-text-focus, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-active-bg: var( --button-main-danger-neutral-icon-only-background-active, var(--button-main-danger-neutral-icon-only-background-default) );--_btn-active-border: var( --button-main-danger-neutral-border-active, var(--button-main-danger-neutral-border-default) );--_btn-active-text: var( --button-main-danger-neutral-text-active, var(--button-main-danger-neutral-text-default) )}.tedi-button--icon-only.tedi-button--danger-neutral{--_btn-disabled-text: var(--button-main-disabled-general-text);--_btn-disabled-bg: var(--button-main-disabled-neutral-background);--_btn-disabled-border: var(--button-main-disabled-neutral-border)}.tedi-button--icon-only.tedi-button--small{width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);padding:var(--button-sm-icon-padding)}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+/**
+ * Interactive wrapper around a `tedi-card`. Apply to an anchor (with `href`
+ * or `routerLink`) for navigation or to a button for actions — the host
+ * element provides the interaction semantics and applies the hover, active,
+ * focus and disabled states to the card and its blocks inside.
+ *
+ * Only a projected `tedi-card` is rendered — other content is ignored. The
+ * card may use any card sub-components (content, rows, icon cells). Do not
+ * place other interactive elements inside.
+ */
+class CardButtonComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardButtonComponent, isStandalone: true, selector: "a[tedi-card-button], button[tedi-card-button]", host: { classAttribute: "tedi-card-button" }, ngImport: i0, template: "<ng-content select=\"tedi-card\"></ng-content>\n", styles: [".tedi-card-button{display:block;width:100%;height:100%;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;background:none;border:none}.tedi-card-button>.tedi-card{height:100%}.tedi-card-button>.tedi-card>.tedi-card-row{flex:1 0 auto}.tedi-card-button:hover>.tedi-card{border-color:var(--button-card-hover-border)}.tedi-card-button:hover>.tedi-card .tedi-card-content,.tedi-card-button:hover>.tedi-card .tedi-card-icon{background-color:var(--button-card-hover-background)}.tedi-card-button:hover>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:hover>.tedi-card .tedi-separator{border-color:var(--button-card-hover-border)}.tedi-card-button:active>.tedi-card{border-color:var(--button-card-active-border)}.tedi-card-button:active>.tedi-card .tedi-card-content,.tedi-card-button:active>.tedi-card .tedi-card-icon{background-color:var(--button-card-active-background)}.tedi-card-button:active>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:active>.tedi-card .tedi-separator{border-color:var(--button-card-active-border)}.tedi-card-button:focus-visible{outline:none;border-radius:var(--card-radius-rounded);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-card-button:disabled{cursor:default}.tedi-card-button:disabled>.tedi-card{color:var(--general-text-disabled);border-color:var(--button-card-disabled-border)}.tedi-card-button:disabled>.tedi-card .tedi-card-content,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{background-color:var(--button-card-disabled-background)}.tedi-card-button:disabled>.tedi-card [class*=tedi-text--],.tedi-card-button:disabled>.tedi-card .tedi-icon,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{color:var(--general-text-disabled)}.tedi-card-button:disabled>.tedi-card .tedi-separator{border-color:var(--button-card-disabled-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "a[tedi-card-button], button[tedi-card-button]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-card-button",
+                    }, template: "<ng-content select=\"tedi-card\"></ng-content>\n", styles: [".tedi-card-button{display:block;width:100%;height:100%;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;background:none;border:none}.tedi-card-button>.tedi-card{height:100%}.tedi-card-button>.tedi-card>.tedi-card-row{flex:1 0 auto}.tedi-card-button:hover>.tedi-card{border-color:var(--button-card-hover-border)}.tedi-card-button:hover>.tedi-card .tedi-card-content,.tedi-card-button:hover>.tedi-card .tedi-card-icon{background-color:var(--button-card-hover-background)}.tedi-card-button:hover>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:hover>.tedi-card .tedi-separator{border-color:var(--button-card-hover-border)}.tedi-card-button:active>.tedi-card{border-color:var(--button-card-active-border)}.tedi-card-button:active>.tedi-card .tedi-card-content,.tedi-card-button:active>.tedi-card .tedi-card-icon{background-color:var(--button-card-active-background)}.tedi-card-button:active>.tedi-card .tedi-icon{color:var(--button-card-icon-hover)}.tedi-card-button:active>.tedi-card .tedi-separator{border-color:var(--button-card-active-border)}.tedi-card-button:focus-visible{outline:none;border-radius:var(--card-radius-rounded);box-shadow:0 0 0 1px var(--tedi-neutral-100),0 0 0 3px var(--tedi-primary-500)}.tedi-card-button:disabled{cursor:default}.tedi-card-button:disabled>.tedi-card{color:var(--general-text-disabled);border-color:var(--button-card-disabled-border)}.tedi-card-button:disabled>.tedi-card .tedi-card-content,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{background-color:var(--button-card-disabled-background)}.tedi-card-button:disabled>.tedi-card [class*=tedi-text--],.tedi-card-button:disabled>.tedi-card .tedi-icon,.tedi-card-button:disabled>.tedi-card .tedi-card-icon{color:var(--general-text-disabled)}.tedi-card-button:disabled>.tedi-card .tedi-separator{border-color:var(--button-card-disabled-border)}\n"] }]
+        }] });
+
 /**
  * Grid breakpoints in `rem`, mirroring `$grid-breakpoints` in
  * `@tedi-design-system/core`. `rem` is used (instead of `px`) so breakpoints
@@ -2519,6 +2540,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{ standalone: true, selector: "tedi-collapse", imports: [CollapseButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"tedi-collapse\"\n  [class.tedi-collapse--open]=\"isOpen() === true\"\n  [class.tedi-collapse--inverted]=\"isInvertedActive()\"\n>\n  <button\n    tedi-collapse-button\n    [open]=\"isOpen()\"\n    [openText]=\"openText()\"\n    [closeText]=\"closeText()\"\n    [hideText]=\"hideCollapseText()\"\n    [arrowType]=\"arrowType()\"\n    [size]=\"size()\"\n    [inverted]=\"inverted()\"\n    [ariaControls]=\"collapseContentId\"\n    (openChange)=\"isOpen.set($event)\"\n  ></button>\n  <div class=\"tedi-collapse__content\" [id]=\"collapseContentId\">\n    <div class=\"tedi-collapse__extender\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.tedi-collapse--inverted{color:var(--general-text-white)}.tedi-collapse__extender{visibility:hidden;min-height:0;padding-top:var(--tedi-dimensions-05);transition:visibility .3s}.tedi-collapse__content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s}.tedi-collapse--open>.tedi-collapse__content{grid-template-rows:1fr}.tedi-collapse--open>.tedi-collapse__content .tedi-collapse__extender{visibility:visible}\n"] }]
         }], propDecorators: { openText: [{ type: i0.Input, args: [{ isSignal: true, alias: "openText", required: false }] }], closeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeText", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], hideCollapseText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCollapseText", required: false }] }], arrowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inverted: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverted", required: false }] }] } });
 
+function getCardBorderPlacementColor(border) {
+    if (!border) {
+        return [undefined, undefined];
+    }
+    if (border.startsWith("top-")) {
+        return ["top", border.slice("top-".length)];
+    }
+    if (border.startsWith("left-")) {
+        return ["left", border.slice("left-".length)];
+    }
+    return [undefined, border];
+}
+function getPaddingCssVariables(padding) {
+    if (typeof padding === "number") {
+        return {
+            "--card-content-padding-top": `${padding}rem`,
+            "--card-content-padding-right": `${padding}rem`,
+            "--card-content-padding-bottom": `${padding}rem`,
+            "--card-content-padding-left": `${padding}rem`,
+        };
+    }
+    if ("vertical" in padding && "horizontal" in padding) {
+        return {
+            "--card-content-padding-top": `${padding.vertical}rem`,
+            "--card-content-padding-right": `${padding.horizontal}rem`,
+            "--card-content-padding-bottom": `${padding.vertical}rem`,
+            "--card-content-padding-left": `${padding.horizontal}rem`,
+        };
+    }
+    const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
+    return {
+        "--card-content-padding-top": `${top}rem`,
+        "--card-content-padding-right": `${right}rem`,
+        "--card-content-padding-bottom": `${bottom}rem`,
+        "--card-content-padding-left": `${left}rem`,
+    };
+}
+function resolveCardBorderRadius(config) {
+    if (config === false) {
+        return {
+            topLeft: false,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+        };
+    }
+    const { top, right, bottom, left, topLeft, topRight, bottomRight, bottomLeft } = config ?? {};
+    const sideTop = top !== false;
+    const sideRight = right !== false;
+    const sideBottom = bottom !== false;
+    const sideLeft = left !== false;
+    // corner overrides take precedence over side values
+    return {
+        topLeft: topLeft ?? (sideTop && sideLeft),
+        topRight: topRight ?? (sideTop && sideRight),
+        bottomRight: bottomRight ?? (sideBottom && sideRight),
+        bottomLeft: bottomLeft ?? (sideBottom && sideLeft),
+    };
+}
+
+/**
+ * Card is a container for grouping related content. Compose it from
+ * `tedi-card-header`, `tedi-card-content` and `tedi-card-notification` blocks.
+ * `background` and `padding` set here act as defaults for all child blocks.
+ */
+class CardComponent {
+    /**
+     * Default background color for child content blocks.
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    /**
+     * Default padding for child content blocks.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     */
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : []));
+    /**
+     * Controls card border radius.
+     * Accepts `false` to remove all radius or an object to control
+     * sides or individual corners. Corner values take precedence over sides.
+     */
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : []));
+    /**
+     * Removes border from card.
+     * @default false
+     */
+    borderless = input(false, ...(ngDevMode ? [{ debugName: "borderless" }] : []));
+    /**
+     * Type of border. Plain background value colors the whole border,
+     * `top-` or `left-` prefixed value draws a thick accent border on that side.
+     */
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : []));
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    breakpointService = inject(BreakpointService);
+    breakpointInputs = computed(() => {
+        return this.breakpointService.getBreakpointInputs({
+            background: this.background(),
+            padding: this.padding(),
+            borderRadius: this.borderRadius(),
+            borderless: this.borderless(),
+            border: this.border(),
+            xs: this.xs(),
+            sm: this.sm(),
+            md: this.md(),
+            lg: this.lg(),
+            xl: this.xl(),
+            xxl: this.xxl(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
+    classes = computed(() => {
+        const { border, borderless, borderRadius } = this.breakpointInputs();
+        const classList = ["tedi-card"];
+        const [placement, color] = getCardBorderPlacementColor(border);
+        if (placement) {
+            classList.push(`tedi-card--border-${placement}`);
+        }
+        if (color) {
+            classList.push(`tedi-card--border--${color}`);
+        }
+        if (borderless) {
+            classList.push("tedi-card--borderless");
+        }
+        const corners = resolveCardBorderRadius(borderRadius);
+        if (!corners.topLeft) {
+            classList.push("tedi-card--no-radius-tl");
+        }
+        if (!corners.topRight) {
+            classList.push("tedi-card--no-radius-tr");
+        }
+        if (!corners.bottomRight) {
+            classList.push("tedi-card--no-radius-br");
+        }
+        if (!corners.bottomLeft) {
+            classList.push("tedi-card--no-radius-bl");
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardComponent, isStandalone: true, selector: "tedi-card", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-card--border--accent{border-color:var(--card-background-accent);--card-border-color: var(--card-background-accent)}.tedi-card--border--brand-primary{border-color:var(--card-background-brand-primary);--card-border-color: var(--card-background-brand-primary)}.tedi-card--border--brand-secondary{border-color:var(--card-background-brand-secondary);--card-border-color: var(--card-background-brand-secondary)}.tedi-card--border--brand-tertiary{border-color:var(--card-background-brand-tertiary);--card-border-color: var(--card-background-brand-tertiary)}.tedi-card--border--brand-quaternary{border-color:var(--card-background-brand-quaternary);--card-border-color: var(--card-background-brand-quaternary)}.tedi-card--border--primary{border-color:var(--card-background-primary);--card-border-color: var(--card-background-primary)}.tedi-card--border--secondary{border-color:var(--card-background-secondary);--card-border-color: var(--card-background-secondary)}.tedi-card--border--tertiary{border-color:var(--card-background-tertiary);--card-border-color: var(--card-background-tertiary)}.tedi-card--border--info-primary{border-color:var(--general-status-info-background-light);--card-border-color: var(--general-status-info-background-light)}.tedi-card--border--info-secondary{border-color:var(--general-status-info-background-dark);--card-border-color: var(--general-status-info-background-dark)}.tedi-card--border--neutral-primary{border-color:var(--general-status-neutral-background-light);--card-border-color: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-secondary{border-color:var(--general-status-neutral-background-dark);--card-border-color: var(--general-status-neutral-background-dark)}.tedi-card--border--success-primary{border-color:var(--card-background-success);--card-border-color: var(--card-background-success)}.tedi-card--border--success-secondary{border-color:var(--general-status-success-background-secondary);--card-border-color: var(--general-status-success-background-secondary)}.tedi-card--border--danger-primary{border-color:var(--general-status-danger-background-primary);--card-border-color: var(--general-status-danger-background-primary)}.tedi-card--border--danger-secondary{border-color:var(--general-status-danger-background-secondary);--card-border-color: var(--general-status-danger-background-secondary)}.tedi-card--border--warning-primary{border-color:var(--general-status-warning-background-light);--card-border-color: var(--general-status-warning-background-light)}.tedi-card--border--warning-secondary{border-color:var(--general-status-warning-background-dark);--card-border-color: var(--general-status-warning-background-dark)}.tedi-card--border-left{border-top-color:var(--card-border-primary);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left:4px solid var(--card-border-color)}.tedi-card--border-top{border-top:4px solid var(--card-border-color);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left-color:var(--card-border-primary)}.tedi-card--borderless{border:none}.tedi-card--no-radius-tl{border-top-left-radius:0}.tedi-card--no-radius-tr{border-top-right-radius:0}.tedi-card--no-radius-br{border-bottom-right-radius:0}.tedi-card--no-radius-bl{border-bottom-left-radius:0}@media print{.tedi-card--border-left,.tedi-card--border-top{border-color:var(--general-border-secondary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-card--border--accent{border-color:var(--card-background-accent);--card-border-color: var(--card-background-accent)}.tedi-card--border--brand-primary{border-color:var(--card-background-brand-primary);--card-border-color: var(--card-background-brand-primary)}.tedi-card--border--brand-secondary{border-color:var(--card-background-brand-secondary);--card-border-color: var(--card-background-brand-secondary)}.tedi-card--border--brand-tertiary{border-color:var(--card-background-brand-tertiary);--card-border-color: var(--card-background-brand-tertiary)}.tedi-card--border--brand-quaternary{border-color:var(--card-background-brand-quaternary);--card-border-color: var(--card-background-brand-quaternary)}.tedi-card--border--primary{border-color:var(--card-background-primary);--card-border-color: var(--card-background-primary)}.tedi-card--border--secondary{border-color:var(--card-background-secondary);--card-border-color: var(--card-background-secondary)}.tedi-card--border--tertiary{border-color:var(--card-background-tertiary);--card-border-color: var(--card-background-tertiary)}.tedi-card--border--info-primary{border-color:var(--general-status-info-background-light);--card-border-color: var(--general-status-info-background-light)}.tedi-card--border--info-secondary{border-color:var(--general-status-info-background-dark);--card-border-color: var(--general-status-info-background-dark)}.tedi-card--border--neutral-primary{border-color:var(--general-status-neutral-background-light);--card-border-color: var(--general-status-neutral-background-light)}.tedi-card--border--neutral-secondary{border-color:var(--general-status-neutral-background-dark);--card-border-color: var(--general-status-neutral-background-dark)}.tedi-card--border--success-primary{border-color:var(--card-background-success);--card-border-color: var(--card-background-success)}.tedi-card--border--success-secondary{border-color:var(--general-status-success-background-secondary);--card-border-color: var(--general-status-success-background-secondary)}.tedi-card--border--danger-primary{border-color:var(--general-status-danger-background-primary);--card-border-color: var(--general-status-danger-background-primary)}.tedi-card--border--danger-secondary{border-color:var(--general-status-danger-background-secondary);--card-border-color: var(--general-status-danger-background-secondary)}.tedi-card--border--warning-primary{border-color:var(--general-status-warning-background-light);--card-border-color: var(--general-status-warning-background-light)}.tedi-card--border--warning-secondary{border-color:var(--general-status-warning-background-dark);--card-border-color: var(--general-status-warning-background-dark)}.tedi-card--border-left{border-top-color:var(--card-border-primary);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left:4px solid var(--card-border-color)}.tedi-card--border-top{border-top:4px solid var(--card-border-color);border-right-color:var(--card-border-primary);border-bottom-color:var(--card-border-primary);border-left-color:var(--card-border-primary)}.tedi-card--borderless{border:none}.tedi-card--no-radius-tl{border-top-left-radius:0}.tedi-card--no-radius-tr{border-top-right-radius:0}.tedi-card--no-radius-br{border-bottom-right-radius:0}.tedi-card--no-radius-bl{border-bottom-left-radius:0}@media print{.tedi-card--border-left,.tedi-card--border-top{border-color:var(--general-border-secondary)}}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
+/**
+ * Content block of a card. Inherits unset `background` and `padding`
+ * from the parent `tedi-card`.
+ */
+class CardContentComponent {
+    /**
+     * Background color.
+     * @default primary
+     */
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    /**
+     * Content padding.
+     * Value is either a predefined number in rems or an object of
+     * vertical/horizontal or top/right/bottom/left number values in rems.
+     * @default 1
+     */
+    padding = input(...(ngDevMode ? [undefined, { debugName: "padding" }] : []));
+    /**
+     * Background image url.
+     */
+    backgroundImage = input(...(ngDevMode ? [undefined, { debugName: "backgroundImage" }] : []));
+    /**
+     * Background position for the image.
+     */
+    backgroundPosition = input(...(ngDevMode ? [undefined, { debugName: "backgroundPosition" }] : []));
+    /**
+     * Background size for the image.
+     */
+    backgroundSize = input(...(ngDevMode ? [undefined, { debugName: "backgroundSize" }] : []));
+    /**
+     * Background repeat for the image.
+     */
+    backgroundRepeat = input(...(ngDevMode ? [undefined, { debugName: "backgroundRepeat" }] : []));
+    /**
+     * Takes only as much width as its content needs instead of growing.
+     * Useful for icon or date cells inside `tedi-card-row`.
+     * @default false
+     */
+    autoWidth = input(false, ...(ngDevMode ? [{ debugName: "autoWidth" }] : []));
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    blockClass = "tedi-card-content";
+    defaultBackground = "primary";
+    breakpointService = inject(BreakpointService);
+    card = inject(CardComponent, { optional: true });
+    breakpointInputs = computed(() => {
+        return this.breakpointService.getBreakpointInputs({
+            background: this.background(),
+            padding: this.padding(),
+            backgroundImage: this.backgroundImage(),
+            backgroundPosition: this.backgroundPosition(),
+            backgroundSize: this.backgroundSize(),
+            backgroundRepeat: this.backgroundRepeat(),
+            autoWidth: this.autoWidth(),
+            xs: this.xs(),
+            sm: this.sm(),
+            md: this.md(),
+            lg: this.lg(),
+            xl: this.xl(),
+            xxl: this.xxl(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
+    classes = computed(() => {
+        const { background, autoWidth } = this.breakpointInputs();
+        const resolvedBackground = background ?? this.inheritedBackground() ?? this.defaultBackground;
+        const classList = [
+            this.blockClass,
+            `${this.blockClass}--background--${resolvedBackground}`,
+        ];
+        if (autoWidth) {
+            classList.push(`${this.blockClass}--auto-width`);
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    styles = computed(() => {
+        const { padding, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat } = this.breakpointInputs();
+        const resolvedPadding = padding ?? this.card?.breakpointInputs().padding ?? this.defaultPadding();
+        const styles = getPaddingCssVariables(resolvedPadding);
+        if (backgroundImage) {
+            styles["background-image"] = `url(${backgroundImage})`;
+        }
+        if (backgroundPosition) {
+            styles["background-position"] = backgroundPosition;
+        }
+        if (backgroundSize) {
+            styles["background-size"] = backgroundSize;
+        }
+        if (backgroundRepeat) {
+            styles["background-repeat"] = backgroundRepeat;
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
+    inheritedBackground() {
+        return this.card?.breakpointInputs().background;
+    }
+    defaultPadding() {
+        return 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardContentComponent, isStandalone: true, selector: "tedi-card-content", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, backgroundImage: { classPropertyName: "backgroundImage", publicName: "backgroundImage", isSignal: true, isRequired: false, transformFunction: null }, backgroundPosition: { classPropertyName: "backgroundPosition", publicName: "backgroundPosition", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, backgroundRepeat: { classPropertyName: "backgroundRepeat", publicName: "backgroundRepeat", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style": "styles()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content--background--accent{background-color:var(--card-background-accent)}.tedi-card-content--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-content--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-content--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-content--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-content--background--primary{background-color:var(--card-background-primary)}.tedi-card-content--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-content--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-content--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-content--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-content--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-content--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-content--background--success-primary{background-color:var(--card-background-success)}.tedi-card-content--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-content--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-content--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-content--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-content--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-content--background--brand-primary,.tedi-card-content--background--brand-secondary{color:var(--general-text-white)}.tedi-card-content{display:block;flex:1 1 1px;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-content--auto-width{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-content", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-content--background--accent{background-color:var(--card-background-accent)}.tedi-card-content--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-content--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-content--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-content--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-content--background--primary{background-color:var(--card-background-primary)}.tedi-card-content--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-content--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-content--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-content--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-content--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-content--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-content--background--success-primary{background-color:var(--card-background-success)}.tedi-card-content--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-content--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-content--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-content--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-content--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-content--background--brand-primary,.tedi-card-content--background--brand-secondary{color:var(--general-text-white)}.tedi-card-content{display:block;flex:1 1 1px;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-content--auto-width{flex:0 0 auto}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], backgroundImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundImage", required: false }] }], backgroundPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundPosition", required: false }] }], backgroundSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundSize", required: false }] }], backgroundRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundRepeat", required: false }] }], autoWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoWidth", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
+/**
+ * Icon cell for a card row. The projected icon is aligned to the top of the
+ * cell and inherits the cell color. Pair the small size with a 16px icon.
+ */
+class CardIconComponent extends CardContentComponent {
+    /**
+     * Visual type of the icon cell.
+     * @default default
+     */
+    type = input("default", ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /**
+     * Size of the icon cell.
+     * @default default
+     */
+    size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    blockClass = "tedi-card-icon";
+    inheritedBackground() {
+        return this.type() === "brand" ? "brand-primary" : "secondary";
+    }
+    defaultPadding() {
+        return this.size() === "small" ? 0.75 : 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: CardIconComponent, isStandalone: true, selector: "tedi-card-icon", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style": "styles()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-icon{display:flex;flex:0 0 auto;gap:var(--layout-grid-gutters-08);align-items:flex-start;color:var(--general-icon-secondary);padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-icon .tedi-icon{color:inherit}.tedi-card-icon--background--accent{background-color:var(--card-background-accent)}.tedi-card-icon--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-icon--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-icon--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-icon--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-icon--background--primary{background-color:var(--card-background-primary)}.tedi-card-icon--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-icon--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-icon--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-icon--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-icon--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-icon--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-icon--background--success-primary{background-color:var(--card-background-success)}.tedi-card-icon--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-icon--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-icon--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-icon--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-icon--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-icon--background--brand-primary,.tedi-card-icon--background--brand-secondary{color:var(--general-text-white)}.tedi-card-icon--auto-width{flex:0 0 auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-icon", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-icon{display:flex;flex:0 0 auto;gap:var(--layout-grid-gutters-08);align-items:flex-start;color:var(--general-icon-secondary);padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}.tedi-card-icon .tedi-icon{color:inherit}.tedi-card-icon--background--accent{background-color:var(--card-background-accent)}.tedi-card-icon--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-icon--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-icon--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-icon--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-icon--background--primary{background-color:var(--card-background-primary)}.tedi-card-icon--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-icon--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-icon--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-icon--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-icon--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-icon--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-icon--background--success-primary{background-color:var(--card-background-success)}.tedi-card-icon--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-icon--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-icon--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-icon--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-icon--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-icon--background--brand-primary,.tedi-card-icon--background--brand-secondary{color:var(--general-text-white)}.tedi-card-icon--auto-width{flex:0 0 auto}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Lays out card content cells horizontally inside a card.
+ * Place a `tedi-separator` between cells (vertical, `size="auto"`) or
+ * between rows (horizontal) to draw dividers.
+ */
+class CardRowComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardRowComponent, isStandalone: true, selector: "tedi-card-row", host: { properties: { "class.tedi-card-row": "true" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-row", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class.tedi-card-row]": "true",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-row{display:flex}\n"] }]
+        }] });
+
+/**
+ * Header block of a card. Same API as `tedi-card-content`, but defaults to
+ * the brand-primary background and does not inherit background from the card.
+ */
+class CardHeaderComponent extends CardContentComponent {
+    blockClass = "tedi-card-header";
+    defaultBackground = "brand-primary";
+    inheritedBackground() {
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: CardHeaderComponent, isStandalone: true, selector: "tedi-card-header", host: { properties: { "class": "classes()", "style": "styles()" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{z-index:1;display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-card-header", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style]": "styles()",
+                    }, template: "<ng-content></ng-content>\n", styles: [".tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{z-index:1;display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"] }]
+        }] });
+
 class ListComponent {
     /**
      * Is list styled?
@@ -12418,6 +12774,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 class TimelineComponent {
     /** Index of active item */
     activeIndex = input(...(ngDevMode ? [undefined, { debugName: "activeIndex" }] : []));
+    /**
+     * Visual variant. "card" wraps the timeline in the borders and paddings
+     * of a card.
+     * @default default
+     */
+    variant = input("default", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Item padding in rems for the card variant.
+     * @default 1
+     */
+    cardPadding = input(...(ngDevMode ? [undefined, { debugName: "cardPadding" }] : []));
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     registerItem(item) {
         this.items.update((list) => [...list, item]);
@@ -12426,17 +12793,42 @@ class TimelineComponent {
         this.items.update((list) => list.filter((i) => i !== item));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TimelineComponent, isStandalone: true, selector: "tedi-timeline", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cardPadding: { classPropertyName: "cardPadding", publicName: "cardPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline--card": "variant() === 'card'", "style.--_timeline-card-padding": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null" }, classAttribute: "tedi-timeline" }, ngImport: i0, template: "<ng-content />", isInline: true, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-timeline", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}\n"] }]
-        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }] } });
+            args: [{ standalone: true, selector: "tedi-timeline", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-timeline",
+                        "[class.tedi-timeline--card]": "variant() === 'card'",
+                        "[style.--_timeline-card-padding]": "variant() === 'card' && cardPadding() != null ? cardPadding() + 'rem' : null",
+                    }, styles: [".tedi-timeline{display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:auto;grid-auto-flow:row dense;column-gap:var(--layout-grid-gutters-12)}@media(min-width:62rem){.tedi-timeline{grid-template-columns:max-content max-content 1fr;grid-auto-flow:row;row-gap:0}}.tedi-timeline--card{--_timeline-card-padding: var(--card-padding-md-default);background:var(--card-background-primary);border:1px solid var(--card-border-primary);border-radius:var(--card-radius-rounded)}.tedi-timeline--card .tedi-timeline-item{display:grid;grid-template-columns:subgrid;grid-column:1/-1;padding:var(--_timeline-card-padding);border-bottom:1px solid var(--card-border-primary)}.tedi-timeline--card .tedi-timeline-item:last-child{border-bottom:0}.tedi-timeline--card .tedi-timeline-item:not(:last-child) .tedi-timeline__marker{margin-bottom:calc(-2 * var(--_timeline-card-padding) - 10px)}.tedi-timeline--card .tedi-timeline__marker .tedi-separator--dot-only-outlined:before{background-color:var(--card-background-primary)}@media(max-width:61.98rem){.tedi-timeline--card .tedi-timeline-item .tedi-timeline__marker{grid-row:1/span 2}.tedi-timeline--card .tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:1/span 3}}\n"] }]
+        }], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cardPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardPadding", required: false }] }] } });
+
+/**
+ * Marks content that is pinned to the bottom of a timeline item's timings
+ * column on desktop and rendered after the item content on mobile.
+ *
+ * Usage: `<p *tediTimelineTimingsBottom>Muudetud 08.02.2024</p>`
+ */
+class TimelineTimingsBottomDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTimingsBottomDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.24", type: TimelineTimingsBottomDirective, isStandalone: true, selector: "[tediTimelineTimingsBottom]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineTimingsBottomDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tediTimelineTimingsBottom]",
+                    standalone: true,
+                }]
+        }] });
 
 class TimelineItemComponent {
     /** Item timings */
     timings = input([], ...(ngDevMode ? [{ debugName: "timings" }] : []));
     timeline = inject(TimelineComponent, { optional: true });
+    isMobile = inject(BreakpointService).isBelowBreakpoint("lg");
+    timingsBottom = contentChild(TimelineTimingsBottomDirective, ...(ngDevMode ? [{ debugName: "timingsBottom" }] : []));
     ngOnInit() {
         if (!this.timeline) {
             return;
@@ -12486,12 +12878,15 @@ class TimelineItemComponent {
         return "secondary";
     }, ...(ngDevMode ? [{ debugName: "color" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimelineItemComponent, isStandalone: true, selector: "tedi-timeline-item", inputs: { timings: { classPropertyName: "timings", publicName: "timings", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tedi-timeline__item--has-bottom": "isMobile() && !!timingsBottom()" }, classAttribute: "tedi-timeline-item" }, queries: [{ propertyName: "timingsBottom", first: true, predicate: TimelineTimingsBottomDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n  @if (!isMobile() && timingsBottom()) {\n    <div class=\"tedi-timeline__timings-bottom\">\n      <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n  <div class=\"tedi-timeline__timings-bottom\">\n    <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n  </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"], dependencies: [{ kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}\n"] }]
-        }], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }] } });
+            args: [{ standalone: true, selector: "tedi-timeline-item", imports: [SeparatorComponent, TextComponent, NgClass, NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: "tedi-timeline-item",
+                        "[class.tedi-timeline__item--has-bottom]": "isMobile() && !!timingsBottom()",
+                    }, template: "<div class=\"tedi-timeline__timings\">\n  @for (timing of timings(); track timing; let index = $index) {\n    <div tedi-text color=\"tertiary\" class=\"tedi-timeline__time\">\n      {{ timing }}\n    </div>\n  }\n  @if (!isMobile() && timingsBottom()) {\n    <div class=\"tedi-timeline__timings-bottom\">\n      <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n    </div>\n  }\n</div>\n<div\n  class=\"tedi-timeline__marker\"\n  [ngClass]=\"{ 'tedi-timeline__marker--large': state() === 'current' }\"\n>\n  <tedi-separator\n    [color]=\"color()\"\n    variant=\"dot-only\"\n    [dotSize]=\"state() === 'current' ? 'large' : 'medium'\"\n    [dotFilled]=\"state() !== 'future'\"\n  />\n  @if (!isLast()) {\n    <tedi-separator\n      axis=\"vertical\"\n      [color]=\"state() === 'past' ? 'accent' : 'secondary'\"\n    />\n  }\n</div>\n<div class=\"tedi-timeline__info\">\n  <div>\n    <ng-content select=\"tedi-timeline-title\" />\n    <ng-content select=\"tedi-timeline-description\" />\n  </div>\n  <div class=\"tedi-timeline__content\">\n    <ng-content />\n  </div>\n</div>\n@if (isMobile() && timingsBottom()) {\n  <div class=\"tedi-timeline__timings-bottom\">\n    <ng-container *ngTemplateOutlet=\"timingsBottom()!.templateRef\" />\n  </div>\n}\n", styles: [":root{--timeline-padding-y: 8px;--timeline-text-min-height: 24px}tedi-timeline-item{display:contents}tedi-timeline-item .tedi-timeline__timings{display:flex;grid-row:auto;grid-column:2;gap:var(--layout-grid-gutters-04);align-items:center}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings{flex-direction:column;grid-column:1;gap:0;align-items:end;padding-bottom:var(--timeline-padding-y)}}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings>.tedi-timeline__timings-bottom{margin-top:auto;text-align:right}}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{position:relative;display:flex;align-items:center;font-size:var(--body-small-regular-size)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time{min-height:var(--timeline-text-min-height)}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:first-child{font-size:var(--body-regular-size)}}@media(max-width:61.98rem){tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:before{display:none;width:4px;height:4px;margin-inline:var(--layout-grid-gutters-04);content:\"\";background-color:currentcolor;border-radius:50%}tedi-timeline-item .tedi-timeline__timings .tedi-timeline__time:not(:first-child):before{display:inline-block}}tedi-timeline-item .tedi-timeline__marker{display:flex;flex-direction:column;grid-row:span 2;grid-column:1;align-items:center;align-self:stretch;padding-top:6px}tedi-timeline-item .tedi-timeline__marker:not(:last-child){margin-bottom:-6px}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__marker{grid-row:auto;grid-column:2}}tedi-timeline-item .tedi-timeline__marker--large{padding-top:3px}tedi-timeline-item .tedi-timeline__info{display:flex;flex-direction:column;grid-row:auto;grid-column:2;gap:var(--timeline-padding-y);padding-bottom:var(--timeline-padding-y)}@media(min-width:62rem){tedi-timeline-item .tedi-timeline__info{grid-column:3}}tedi-timeline-item .tedi-timeline__content{display:flex;flex-direction:column;gap:var(--timeline-padding-y)}tedi-timeline-item>.tedi-timeline__timings-bottom{grid-row:auto;grid-column:2;padding-bottom:var(--timeline-padding-y)}tedi-timeline-item.tedi-timeline__item--has-bottom .tedi-timeline__marker{grid-row:span 3}\n"] }]
+        }], propDecorators: { timings: [{ type: i0.Input, args: [{ isSignal: true, alias: "timings", required: false }] }], timingsBottom: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TimelineTimingsBottomDirective), { isSignal: true }] }] } });
 
 class TimelineDescriptionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimelineDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -13788,5 +14183,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, toConnectedPositions, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreakpointService, ButtonComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoutComponent, HeaderProfileComponent, HeaderRoleComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TEDI_FORM_FIELD_CONTROL, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, breakpointInput, calculateArrowOffset, createTablePersistence, generateUUID, getCardBorderPlacementColor, getPaddingCssVariables, getPlacementFromPositionChange, groupRowSpan, injectTediTableContext, provideTedi, resolveCardBorderRadius, toConnectedPositions, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map