@rivet-health/design-system 40.14.0 → 40.16.0

package/fesm2015/rivet-health-design-system.mjs

@@ -5526,47 +5526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     CardActionsComponent.Orientations = ['horizontal', 'vertical'];
 })(CardActionsComponent || (CardActionsComponent = {}));
 
-/**
- * Body of a `riv-card`.
- *
- * Grows to absorb any spare height by default, which keeps `riv-card-actions`
- * pinned to the bottom when cards of differing content sit in an equal-height
- * grid. Set `[grow]="false"` when the card should shrink to its content.
- */
-class CardContentComponent {
-    constructor() {
-        this.padding = 'medium';
-        this.grow = true;
-        /** Draws a separator below the content. */
-        this.divider = false;
-    }
-    get classes() {
-        return Object.entries({
-            [`padding-${this.padding}`]: true,
-            grow: this.grow,
-            divider: this.divider,
-        })
-            .filter(([_, v]) => v)
-            .map(([k]) => k)
-            .join(' ');
-    }
-}
-CardContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}\n"] }]
-        }], propDecorators: { padding: [{
-                type: Input
-            }], grow: [{
-                type: Input
-            }], divider: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 /**
  * Surface container that groups related content into a single scannable unit.
  *
@@ -5610,6 +5569,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * When the card's action is really a navigation, prefer `[riv-card-link]` on an
  * `<a>` instead: that keeps the URL, middle-click, and "open in new tab".
  *
+ * ## Selection
+ *
+ * Set `selected` to mark the card the user is currently looking at. It gives
+ * the surface a distinct border and shadow, and announces through
+ * `aria-current` so the state is not conveyed by colour alone.
+ *
+ * ```html
+ * <riv-card [selected]="workbook.id === activeId">
+ * ```
+ *
+ * Selection is separate from `tone`, so it composes with any tint — a selected
+ * `danger` card keeps its danger background.
+ *
+ * ## Making the card expand and collapse
+ *
+ * Set `expandable` on `riv-card-header` and render the body only while it is
+ * open. The header owns the toggle affordance and its accessibility; the
+ * consumer owns the state:
+ *
+ * ```html
+ * <riv-card>
+ *   <riv-card-header
+ *     [heading]="'Patient info'"
+ *     [expandable]="true"
+ *     [(expanded)]="open"
+ *   ></riv-card-header>
+ *   <riv-card-content *ngIf="open">...</riv-card-content>
+ * </riv-card>
+ * ```
+ *
+ * The card relays the region id from the header to the content, so the toggle's
+ * `aria-controls` names the body with no ids wired by hand.
+ *
+ * Do not combine `expandable` with `clickable`: both claim the same click, and
+ * a card that opens as well as expands leaves the user no way to tell which one
+ * they are about to get.
+ *
  * ## Notes
  *
  * When projecting raw content with no sub-components, set `padding` so the
@@ -5646,6 +5642,12 @@ class CardComponent {
          * affordance and keyboard support.
          */
         this.clickable = false;
+        /**
+         * Marks the card as the current selection, giving it a distinct border and
+         * shadow. Composes with any `tone`, so a selected danger card keeps its
+         * tint. Announced to assistive technology through `aria-current`.
+         */
+        this.selected = false;
         /**
          * Mutes the surface, suppresses hover feedback, and disables the click
          * target. Presentational for everything else — disable the card's own
@@ -5660,6 +5662,13 @@ class CardComponent {
          */
         this.cardId = '';
     }
+    /**
+     * Id an expandable header's toggle points `aria-controls` at, worn by a
+     * projected `riv-card-content`.
+     */
+    get regionId() {
+        return this.expandRegionId;
+    }
     ngOnInit() {
         this.cardId = this.el.nativeElement.id || uniqueId('riv-card-');
         if (!this.el.nativeElement.id) {
@@ -5685,6 +5694,24 @@ class CardComponent {
             this.setTitleId(undefined);
         }
     }
+    /**
+     * Relays the region an expandable header controls to the projected
+     * `riv-card-content`, so neither side needs the consumer to wire an id.
+     * Called by `riv-card-header`; not part of the public API.
+     */
+    setRegionId(id) {
+        this.expandRegionId = id;
+        this.cdr.markForCheck();
+    }
+    /**
+     * Gives up a region registered by `setRegionId`. Ignores ids that are no
+     * longer the one in use.
+     */
+    clearRegionId(id) {
+        if (this.expandRegionId === id) {
+            this.setRegionId(undefined);
+        }
+    }
     /**
      * Element whose text names the click target, unless `clickLabel` is set. The
      * host id is read from the DOM rather than cached, so a bound `[id]` that
@@ -5696,6 +5723,10 @@ class CardComponent {
             return null;
         return (_a = this.titleId) !== null && _a !== void 0 ? _a : (this.el.nativeElement.id || this.cardId);
     }
+    /** Announces the current selection to assistive technology. */
+    get ariaCurrent() {
+        return this.selected ? 'true' : null;
+    }
     get classes() {
         return Object.entries({
             [this.variant]: true,
@@ -5704,6 +5735,7 @@ class CardComponent {
             [this.orientation]: true,
             [`padding-${this.padding}`]: true,
             clickable: this.clickable,
+            selected: this.selected,
             disabled: this.disabled,
         })
             .filter(([_, v]) => v)
@@ -5712,10 +5744,10 @@ class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", clickable: "clickable", clickLabel: "clickLabel", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;border-radius:var(--card-border-radius, var(--border-radius-medium));color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light-blend)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.clickable{transition:box-shadow var(--short-transition)}:host.clickable:not(.disabled):hover{box-shadow:var(--depth-1)}:host.elevated.clickable:not(.disabled):hover{box-shadow:var(--depth-2)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;border-radius:var(--card-border-radius, var(--border-radius-medium));color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light-blend)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.clickable{transition:box-shadow var(--short-transition)}:host.clickable:not(.disabled):hover{box-shadow:var(--depth-1)}:host.elevated.clickable:not(.disabled):hover{box-shadow:var(--depth-2)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;border-radius:var(--card-border-radius, var(--border-radius-medium));color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light-blend)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.clickable{transition:box-shadow var(--short-transition)}:host.clickable:not(.disabled):hover{box-shadow:var(--depth-1)}:host.elevated.clickable:not(.disabled):hover{box-shadow:var(--depth-2)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"] }]
+            args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;border-radius:var(--card-border-radius, var(--border-radius-medium));color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light-blend)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.clickable{transition:box-shadow var(--short-transition)}:host.clickable:not(.disabled):hover{box-shadow:var(--depth-1)}:host.elevated.clickable:not(.disabled):hover{box-shadow:var(--depth-2)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { variant: [{
                 type: Input
             }], surface: [{
@@ -5730,10 +5762,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], clickLabel: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], cardClick: [{
                 type: Output
+            }], ariaCurrent: [{
+                type: HostBinding,
+                args: ['attr.aria-current']
             }], classes: [{
                 type: HostBinding,
                 args: ['class']
@@ -5754,6 +5791,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     CardComponent.Paddings = ['none', 'small', 'medium', 'large'];
 })(CardComponent || (CardComponent = {}));
 
+/**
+ * Body of a `riv-card`.
+ *
+ * Grows to absorb any spare height by default, which keeps `riv-card-actions`
+ * pinned to the bottom when cards of differing content sit in an equal-height
+ * grid. Set `[grow]="false"` when the card should shrink to its content.
+ *
+ * In a card with an expandable header, this is the region the toggle controls —
+ * it takes an id from the card so that `aria-controls` resolves as soon as the
+ * body is rendered.
+ */
+class CardContentComponent {
+    constructor(el, renderer, card) {
+        this.el = el;
+        this.renderer = renderer;
+        this.card = card;
+        this.padding = 'medium';
+        this.grow = true;
+        /** Draws a separator below the content. */
+        this.divider = false;
+    }
+    /**
+     * Wears the region id an expandable header's toggle points `aria-controls`
+     * at, so neither side needs the consumer to name the body. An id the consumer
+     * set of their own is left alone.
+     */
+    ngOnInit() {
+        var _a;
+        const regionId = (_a = this.card) === null || _a === void 0 ? void 0 : _a.regionId;
+        if (regionId && !this.el.nativeElement.id) {
+            this.renderer.setAttribute(this.el.nativeElement, 'id', regionId);
+        }
+    }
+    get classes() {
+        return Object.entries({
+            [`padding-${this.padding}`]: true,
+            grow: this.grow,
+            divider: this.divider,
+        })
+            .filter(([_, v]) => v)
+            .map(([k]) => k)
+            .join(' ');
+    }
+}
+CardContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CardContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: CardComponent, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { padding: [{
+                type: Input
+            }], grow: [{
+                type: Input
+            }], divider: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 /**
  * Top row of a `riv-card`: heading text plus optional adornments.
  *
@@ -5777,8 +5878,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * outline; pick the level that follows the surrounding content rather than the
  * one that looks right, since size comes from the design tokens either way.
  *
- * The heading font can be overridden per-instance with the
- * `--card-heading-font` custom property.
+ * The heading font and colour can be overridden per-instance with the
+ * `--card-heading-font` and `--card-heading-color` custom properties.
+ *
+ * ## Expanding and collapsing
+ *
+ * `expandable` turns the header into the toggle for the card's body: it renders
+ * a chevron and covers the row with a real `<button>` carrying `aria-expanded`
+ * and `aria-controls`, so the pattern is keyboard operable and announces its
+ * state. Controls in `[actions]` sit above that button and stay independently
+ * clickable, so a menu beside the toggle needs no `stopPropagation`.
+ *
+ * The header holds no state of its own — bind `expanded` and act on
+ * `expandedChange`, or use `[(expanded)]`:
+ *
+ * ```html
+ * <riv-card>
+ *   <riv-card-header
+ *     [heading]="'Patient info'"
+ *     [expandable]="true"
+ *     [(expanded)]="open"
+ *   ></riv-card-header>
+ *   <riv-card-content *ngIf="open">...</riv-card-content>
+ * </riv-card>
+ * ```
+ *
+ * The toggle is named by the header's title, so an expandable header needs a
+ * `heading` or a projected title.
  */
 class CardHeaderComponent {
     constructor(card) {
@@ -5788,6 +5914,11 @@ class CardHeaderComponent {
          * target from the title rather than from the card's whole text.
          */
         this.titleId = uniqueId('riv-card-title-');
+        /**
+         * Names the body the toggle controls. Handed to the enclosing card, which
+         * relays it to the projected `riv-card-content`.
+         */
+        this.regionId = uniqueId('riv-card-region-');
         /** Heading element rendered for `heading`, for document outline purposes. */
         this.headingLevel = 3;
         /** `filled` gives the header its own background, separating it from the body. */
@@ -5797,14 +5928,29 @@ class CardHeaderComponent {
         this.divider = false;
         /** Cross-axis alignment of the leading slot, heading block, and actions. */
         this.align = 'start';
+        /** Turns the header row into the toggle for the card's body. */
+        this.expandable = false;
+        /** Whether the body is currently open. The consumer owns this state. */
+        this.expanded = false;
+        /** Side of the header the chevron sits on. */
+        this.togglePosition = 'trailing';
+        /**
+         * Blocks the toggle, for a section that is not yet available to open. Set it
+         * alongside a disabled `riv-card`, whose own `disabled` mutes the surface but
+         * does not reach the header's controls.
+         */
+        this.disabled = false;
+        /** Emitted with the state the consumer is being asked to move to. */
+        this.expandedChange = new EventEmitter();
     }
     /**
-     * Offers the heading to an enclosing card as the name for its click target.
-     * Only a text heading is offered: projected titles can be anything, so those
-     * cards fall back to naming against their whole content.
+     * Offers the heading to an enclosing card as the name for its click target,
+     * and the toggle's region so a projected `riv-card-content` can wear it. Only
+     * a text heading is offered: projected titles can be anything, so those cards
+     * fall back to naming against their whole content.
      */
     ngOnChanges(changes) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (changes['heading']) {
             if ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.trim()) {
                 (_b = this.card) === null || _b === void 0 ? void 0 : _b.setTitleId(this.titleId);
@@ -5813,11 +5959,27 @@ class CardHeaderComponent {
                 (_c = this.card) === null || _c === void 0 ? void 0 : _c.clearTitleId(this.titleId);
             }
         }
+        if (changes['expandable']) {
+            if (this.expandable) {
+                (_d = this.card) === null || _d === void 0 ? void 0 : _d.setRegionId(this.regionId);
+            }
+            else {
+                (_e = this.card) === null || _e === void 0 ? void 0 : _e.clearRegionId(this.regionId);
+            }
+        }
     }
     /** Withdraws the offer, so the card stops naming itself against this header. */
     ngOnDestroy() {
-        var _a;
+        var _a, _b;
         (_a = this.card) === null || _a === void 0 ? void 0 : _a.clearTitleId(this.titleId);
+        (_b = this.card) === null || _b === void 0 ? void 0 : _b.clearRegionId(this.regionId);
+    }
+    /**
+     * Asks for the opposite state rather than taking it, which keeps the header
+     * free of state that could drift from the consumer's.
+     */
+    toggle() {
+        this.expandedChange.emit(!this.expanded);
     }
     get classes() {
         return Object.entries({
@@ -5825,6 +5987,7 @@ class CardHeaderComponent {
             [`padding-${this.padding}`]: true,
             [`align-${this.align}`]: true,
             divider: this.divider,
+            expandable: this.expandable,
         })
             .filter(([_, v]) => v)
             .map(([k]) => k)
@@ -5846,10 +6009,10 @@ class CardHeaderComponent {
     }
 }
 CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardHeaderComponent, deps: [{ token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--type-light-high-contrast)}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--type-light-high-contrast)}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"] }]
+            args: [{ selector: 'riv-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light-blend)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: CardComponent, decorators: [{
                         type: Optional
@@ -5870,6 +6033,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], clamp: [{
                 type: Input
+            }], expandable: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], togglePosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
             }], classes: [{
                 type: HostBinding,
                 args: ['class']
@@ -5878,6 +6051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     CardHeaderComponent.Variants = ['plain', 'filled'];
     CardHeaderComponent.HeadingLevels = [1, 2, 3, 4, 5, 6];
     CardHeaderComponent.Aligns = ['start', 'center'];
+    CardHeaderComponent.TogglePositions = ['leading', 'trailing'];
 })(CardHeaderComponent || (CardHeaderComponent = {}));
 
 /**