@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/canvas/root/canvas-root.css.js

@@ -1,275 +1,16 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: contents;
-}
-
-[part="region"] {
-background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
-block-size: var(--canvas-block-size, 30rem);
-border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-display: grid;
-grid-template-rows: auto 1fr auto;
-overflow: hidden;
-position: relative;
-}
-
-:host([separation="plain"]) [part="region"] {
-background-color: transparent;
-border: none;
-border-radius: 0;
-}
-
-[part="viewport"] {
-min-block-size: 0;
-overflow: hidden;
-position: relative;
-}
-
-:host(:not(:state(empty))) ::slotted([slot="empty"]) {
-display: none;
-}
-
-[part="board"] {
-block-size: var(--_canvas-plane-block-size);
-inline-size: var(--_canvas-plane-inline-size);
-
-left: 0;
-position: absolute;
-top: 0;
-transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));
-transform-origin: 0 0;
-
-transition: transform var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([grid]) [part="viewport"] {
-background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);
-background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
-calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));
-
-transition:
+export const styles = createSheet(`:host {display: contents;}[part="region"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));block-size: var(--canvas-block-size, 30rem);border: var(--helix-border-thin) solid var(--canvas-border-color, var(--helix-color-border));border-radius: var(--canvas-radius, var(--helix-radii-sm));box-sizing: border-box;display: grid;grid-template-rows: auto 1fr auto;overflow: hidden;position: relative;}:host([separation="plain"]) [part="region"] {background-color: transparent;border: none;border-radius: 0;}[part="viewport"] {min-block-size: 0;overflow: hidden;position: relative;}:host(:not(:state(empty))) ::slotted([slot="empty"]) {display: none;}[part="board"] {block-size: var(--_canvas-plane-block-size);inline-size: var(--_canvas-plane-inline-size);left: 0;position: absolute;top: 0;transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));transform-origin: 0 0;transition: transform var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid]) [part="viewport"] {background-position: var(--_canvas-rule-x) var(--_canvas-rule-y);background-size: calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom))
+calc(var(--canvas-grid-size, 32px) * var(--_canvas-rule-zoom));transition:
 background-position var(--helix-duration-normal) var(--helix-easing-standard),
-background-size var(--helix-duration-normal) var(--helix-easing-standard);
-}
-
-:host([grid="lines"]) [part="viewport"] {
---_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);
-background-image:
+background-size var(--helix-duration-normal) var(--helix-easing-standard);}:host([grid="lines"]) [part="viewport"] {--_canvas-rule: color-mix(in oklab, var(--helix-color-border) 50%, transparent);background-image:
 linear-gradient(to right, var(--_canvas-rule) var(--helix-border-thin), transparent 0),
-linear-gradient(to bottom, var(--_canvas-rule) var(--helix-border-thin), transparent 0);
-}
-
-:host([grid="dots"]) [part="viewport"] {
-background-image: radial-gradient(
+linear-gradient(to bottom, var(--_canvas-rule) var(--helix-border-thin), transparent 0);}:host([grid="dots"]) [part="viewport"] {background-image: radial-gradient(
 var(--helix-color-border) var(--helix-border-thin),
 transparent 0
-);
-}
-
-:host(:state(direct)) [part="board"],
-:host(:state(direct)) [part="viewport"] {
-transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="board"],
-:host([grid]) [part="viewport"] {
-transition: none;
-}
-}
-
-[part="edges"] {
-inset: 0;
-overflow: visible;
-position: absolute;
-z-index: var(--helix-layer-beneath);
-}
-
-[part="edge"] {
-stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));
-stroke-width: var(--helix-border-thick);
-}
-
-[part="edge"] {
-pointer-events: none;
-}
-
-[part="edge-target"] {
-cursor: grab;
-pointer-events: stroke;
-stroke: transparent;
-stroke-width: var(--canvas-edge-target-width, 12px);
-}
-
-[part="edge-target"]:focus {
-outline: none;
-}
-
-[part="edge-target"]:hover + [part="edge"] {
-stroke: var(--helix-color-focus-ring);
-}
-
-[part="edge-target"]:focus-visible + [part="edge"] {
-stroke: var(--helix-color-focus-ring);
-stroke-width: calc(var(--helix-border-thick) * 2);
-}
-
-[part="edge-end"] {
-background-color: var(--helix-color-accent);
-block-size: var(--canvas-handle-size, 0.625rem);
-border: var(--helix-border-thick) solid var(--helix-color-surface);
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-cursor: grab;
-inline-size: var(--canvas-handle-size, 0.625rem);
-left: var(--_canvas-end-x);
-position: absolute;
-top: var(--_canvas-end-y);
-transform: translate(-50%, -50%);
-z-index: 1;
-}
-
-[part="edge-end"]::after {
-content: "";
-inset: calc(var(--helix-space-sm) * -1);
-position: absolute;
-}
-
-:host(:state(holding)) [part="viewport"] {
-cursor: grabbing;
-}
-
-[part="label-editor"] {
-background-color: var(--helix-color-surface);
-border: var(--helix-border-thin) solid var(--helix-color-accent);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-inline-size: var(--canvas-label-editor-inline-size, 12rem);
-left: var(--_canvas-editor-x);
-padding: var(--helix-space-2xs) var(--helix-space-xs);
-position: absolute;
-text-align: center;
-top: var(--_canvas-editor-y);
-transform: translate(-50%, -50%);
-z-index: 1;
-}
-
-[part="label-editor"][data-target="group"] {
-text-align: start;
-transform: translate(0, -100%);
-}
-
-[part="label-editor"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="marquee"] {
-background-color: color-mix(in oklab, var(--helix-color-accent) 10%, transparent);
-block-size: var(--_canvas-marquee-block-size);
-border: var(--helix-border-thin) dashed var(--helix-color-accent);
-box-sizing: border-box;
-inline-size: var(--_canvas-marquee-inline-size);
-left: var(--_canvas-marquee-x);
-pointer-events: none;
-position: absolute;
-top: var(--_canvas-marquee-y);
-z-index: 1;
-}
-
-[part="draft"] {
-pointer-events: none;
-stroke: var(--helix-color-accent);
-stroke-dasharray: 6 4;
-stroke-width: var(--helix-border-thick);
-}
-
-:host(:state(connecting)) [part="viewport"] {
-cursor: crosshair;
-}
-
-[part="arrow"] {
-fill: var(--canvas-edge-color, var(--helix-color-border));
-}
-
-@supports (fill: context-stroke) {
-[part="arrow"] {
-fill: context-stroke;
-}
-}
-
-[part="edge"][data-tone="accent"] {
-stroke: var(--helix-color-accent);
-}
-[part="edge"][data-tone="danger"] {
-stroke: var(--helix-color-danger);
-}
-[part="edge"][data-tone="info"] {
-stroke: var(--helix-color-info);
-}
-[part="edge"][data-tone="primary"] {
-stroke: var(--helix-color-primary);
-}
-[part="edge"][data-tone="success"] {
-stroke: var(--helix-color-success);
-}
-[part="edge"][data-tone="warning"] {
-stroke: var(--helix-color-warning);
-}
-
-[part="edge"][data-selected] {
-stroke: var(--helix-color-accent);
-stroke-width: calc(var(--helix-border-thick) * 2);
-}
-
-[part="edge"][data-variant="dashed"] {
-stroke-dasharray: 6 4;
-}
-
-[part="edge"][data-variant="dotted"] {
-stroke-dasharray: 0 5;
-stroke-linecap: round;
-}
-
-[part="label"] {
-background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));
-color: var(--helix-color-foreground-subtle);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-xs);
-left: var(--_canvas-label-x);
-line-height: 1;
-padding: var(--helix-space-2xs);
-pointer-events: none;
-position: absolute;
-top: var(--_canvas-label-y);
-transform: translate(-50%, -50%);
-white-space: nowrap;
-}
-
-[part="viewport"] {
-cursor: grab;
-touch-action: none;
-}
-
-:host(:state(sharing)) [part="viewport"] {
-touch-action: pan-x pan-y;
-}
-
-:host(:state(pressing)) [part="viewport"] {
-user-select: none;
-}
-
-[part="viewport"]:active {
-cursor: grabbing;
-}
-
-@media print {
-[part="controls"] {
-display: none;
-}
-}`);
+);}:host(:state(direct)) [part="board"],
+:host(:state(direct)) [part="viewport"] {transition: none;}@media (prefers-reduced-motion: reduce) {[part="board"],
+:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--canvas-edge-width, var(--helix-border-thick));}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge-end"] {background-color: var(--canvas-selected-color, var(--helix-color-accent));block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}@media (pointer: coarse) {[part="edge-end"]::after {inset: calc((2.75rem - 100%) / -2);}}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(
+in oklab,
+var(--canvas-selected-color, var(--helix-color-accent)) 10%,
+transparent
+);block-size: var(--_canvas-marquee-block-size);border: var(--helix-border-thin) dashed var(--canvas-selected-color, var(--helix-color-accent));box-sizing: border-box;inline-size: var(--_canvas-marquee-inline-size);left: var(--_canvas-marquee-x);pointer-events: none;position: absolute;top: var(--_canvas-marquee-y);z-index: 1;}[part="draft"] {pointer-events: none;stroke: var(--canvas-connect-color, var(--helix-color-accent));stroke-dasharray: 6 4;stroke-width: var(--helix-border-thick);}:host(:state(connecting)) [part="viewport"] {cursor: crosshair;}[part="arrow"] {fill: var(--canvas-edge-color, var(--helix-color-border));}@supports (fill: context-stroke) {[part="arrow"] {fill: context-stroke;}}[part="edge"][data-tone="accent"] {stroke: var(--helix-color-accent);}[part="edge"][data-tone="danger"] {stroke: var(--helix-color-danger);}[part="edge"][data-tone="info"] {stroke: var(--helix-color-info);}[part="edge"][data-tone="primary"] {stroke: var(--helix-color-primary);}[part="edge"][data-tone="success"] {stroke: var(--helix-color-success);}[part="edge"][data-tone="warning"] {stroke: var(--helix-color-warning);}[part="edge"][data-selected] {stroke: var(--canvas-selected-color, var(--helix-color-accent));stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge"][data-variant="dashed"] {stroke-dasharray: 6 4;}[part="edge"][data-variant="dotted"] {stroke-dasharray: 0 5;stroke-linecap: round;}[part="label"] {background-color: var(--canvas-background-color, var(--helix-color-surface-sunken));color: var(--canvas-label-color, var(--helix-color-foreground-subtle));font-family: var(--helix-font-sans);font-size: var(--canvas-label-font-size, var(--helix-text-xs));left: var(--_canvas-label-x);line-height: 1;padding: var(--helix-space-2xs);pointer-events: none;position: absolute;top: var(--_canvas-label-y);transform: translate(-50%, -50%);white-space: nowrap;}[part="viewport"] {cursor: grab;touch-action: none;}:host(:state(sharing)) [part="viewport"] {touch-action: pan-x pan-y;}:host(:state(pressing)) [part="viewport"] {user-select: none;}[part="viewport"]:active {cursor: grabbing;}@media print {[part="controls"] {display: none;}}`);

package/dist/canvas/root/canvas-root.d.ts

@@ -21,11 +21,17 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --canvas-background-color - The background behind the board.
  * @cssproperty --canvas-block-size - The height of the frame.
  * @cssproperty --canvas-border-color - The color of the frame's edge.
+ * @cssproperty --canvas-connect-color - The color of a connection being drawn, and of the card it will arrive at and that card's points.
  * @cssproperty --canvas-edge-color - The color of a connection with no tone. Set it in one edge's `style` to color only that edge.
  * @cssproperty --canvas-edge-target-width - The width of the area a pointer can press on a connection, which is wider than the drawn line.
+ * @cssproperty --canvas-edge-width - The width of a connection's line. A selected or focused connection is drawn at twice it.
  * @cssproperty --canvas-grid-size - The spacing of the grid lines or dots, in the document's units, so it scales with the zoom.
  * @cssproperty --canvas-handle-size - The size of the ends of a selected connection. A card's connection points use the same property.
+ * @cssproperty --canvas-label-color - The color of the label on a connection.
  * @cssproperty --canvas-label-editor-inline-size - The width of the field for editing a label.
+ * @cssproperty --canvas-label-font-size - The size of the label on a connection.
+ * @cssproperty --canvas-radius - The frame's corners.
+ * @cssproperty --canvas-selected-color - The color of what is selected: a card's outline, its corners and its move handle, a connection and its ends, and the box drawn to select.
  * @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. `Map` uses the same property.
  */
 export declare class HelixCanvas extends HelixHeadlessCanvas {

package/dist/card/root/card-root.css.js

@@ -1,136 +1,7 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_card-inset: var(--card-padding, var(--helix-space-control));
-
---_card-media: var(--card-media-size, 12rem);
-
---_heading-ink: var(--helix-color-foreground);
-background-color: var(--card-background-color, var(--helix-color-surface));
-border: var(--card-border-width, var(--helix-border-surface)) solid
-var(--card-border-color, var(--helix-color-border));
-
-border-radius: var(--card-radius, var(--helix-radii-lg));
-
-box-shadow: var(--card-shadow, var(--helix-shadow-surface));
-color: var(--helix-color-foreground-muted);
-
-align-content: var(--card-align, start);
-display: grid;
-gap: var(--card-gap, var(--helix-space-sm));
-grid-template-columns: minmax(0, 1fr);
-line-height: var(--helix-leading-normal);
-
-overflow: hidden;
-padding: var(--_card-inset);
-transition:
+export const styles = createSheet(`:host {--_card-inset: var(--card-padding, var(--helix-space-control));--_card-media: var(--card-media-size, 12rem);--_heading-ink: var(--card-heading-color, var(--helix-color-foreground));background-color: var(--card-background-color, var(--helix-color-surface));border: var(--card-border-width, var(--helix-border-surface)) solid
+var(--card-border-color, var(--helix-color-border));border-radius: var(--card-radius, var(--helix-radii-lg));box-shadow: var(--card-shadow, var(--helix-shadow-surface));color: var(--card-color, var(--helix-color-foreground-muted));align-content: var(--card-align, start);display: grid;gap: var(--card-gap, var(--helix-space-sm));grid-template-columns: minmax(0, 1fr);line-height: var(--card-line-height, var(--helix-leading-normal));overflow: hidden;padding: var(--_card-inset);transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-box-shadow var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host([separation="elevated"]) {
---card-shadow: var(--helix-shadow-md);
-border-color: light-dark(transparent, var(--helix-color-border));
-}
-
-:host([separation="filled"]) {
---card-shadow: none;
-border-color: transparent;
-}
-
-:host([separation="plain"]) {
---card-shadow: none;
-background-color: transparent;
-border-color: transparent;
-}
-
-slot[name="media"]::slotted(*) {
-
-block-size: var(--card-media-block-size, auto);
-display: block;
-inline-size: calc(100% + var(--_card-inset) * 2);
-margin: calc(var(--_card-inset) * -1);
-margin-block-end: 0;
-object-fit: cover;
-}
-
-:host([media-placement="end"]) slot[name="media"]::slotted(*) {
-margin-block-end: calc(var(--_card-inset) * -1);
-margin-block-start: 0;
-order: 1;
-}
-
-slot[name="header"]::slotted(*) {
-color: var(--helix-color-foreground);
-}
-
-slot[name="footer"]::slotted(*) {
-justify-self: end;
-}
-
-[part="header-row"],
-[part="footer-row"] {
-align-items: center;
-display: flex;
-
-flex-wrap: wrap;
-gap: var(--card-gap, var(--helix-space-sm));
-min-inline-size: 0;
-}
-
-[part="header-row"] slot[name="header"]::slotted(*) {
-flex: 1 1 auto;
-min-inline-size: 0;
-}
-
-slot[name="header-actions"]::slotted(*),
-slot[name="footer-actions"]::slotted(*) {
-flex: none;
-justify-self: end;
-}
-
-[part="footer-row"] slot[name="footer-actions"]::slotted(*) {
-margin-inline-start: auto;
-}
-
-:host([orientation="horizontal"]) {
-padding-inline-start: calc(var(--_card-media) + var(--_card-inset));
-position: relative;
-}
-
-:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {
-block-size: 100%;
-inline-size: var(--_card-media);
-inset-block: 0;
-inset-inline-start: 0;
-margin: var(--helix-space-none);
-position: absolute;
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host {
-transition: none;
-}
-}
-
-:host([material="glass"]) {
-backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));
-background-color: var(--card-background-color, var(--helix-material-translucent));
-}
-
-:host([material="frosted"]) {
-backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));
-background-color: var(--card-background-color, var(--helix-material-translucent-strong));
-}
-
-:host([material="transparent"]) {
-backdrop-filter: none;
-background-color: transparent;
-}
-
-@media print {
-:host {
-background-color: transparent;
-box-shadow: none;
-}
-}`);
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard);}:host([separation="elevated"]) {--card-shadow: var(--helix-shadow-md);border-color: light-dark(transparent, var(--helix-color-border));}:host([separation="filled"]) {--card-shadow: none;border-color: transparent;}:host([separation="plain"]) {--card-shadow: none;background-color: transparent;border-color: transparent;}slot[name="media"]::slotted(*) {block-size: var(--card-media-block-size, auto);display: block;inline-size: calc(100% + var(--_card-inset) * 2);margin: calc(var(--_card-inset) * -1);margin-block-end: 0;object-fit: var(--card-media-fit, cover);}:host([media-placement="end"]) slot[name="media"]::slotted(*) {margin-block-end: calc(var(--_card-inset) * -1);margin-block-start: 0;order: 1;}slot[name="header"]::slotted(*) {color: var(--_heading-ink);}slot[name="footer"]::slotted(*) {justify-self: end;}[part="header-row"],
+[part="footer-row"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--card-gap, var(--helix-space-sm));min-inline-size: 0;}[part="header-row"] slot[name="header"]::slotted(*) {flex: 1 1 auto;min-inline-size: 0;}slot[name="header-actions"]::slotted(*),
+slot[name="footer-actions"]::slotted(*) {flex: none;justify-self: end;}[part="footer-row"] slot[name="footer-actions"]::slotted(*) {margin-inline-start: auto;}:host([orientation="horizontal"]) {padding-inline-start: calc(var(--_card-media) + var(--_card-inset));position: relative;}:host([orientation="horizontal"]) slot[name="media"]::slotted(*) {block-size: 100%;inline-size: var(--_card-media);inset-block: 0;inset-inline-start: 0;margin: var(--helix-space-none);position: absolute;}@media (prefers-reduced-motion: reduce) {:host {transition: none;}}:host([material="glass"]) {backdrop-filter: var(--card-backdrop, var(--helix-material-backdrop));background-color: var(--card-background-color, var(--helix-material-translucent));}:host([material="frosted"]) {backdrop-filter: var(--card-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--card-background-color, var(--helix-material-translucent-strong));}:host([material="transparent"]) {backdrop-filter: none;background-color: transparent;}@media print {:host {background-color: transparent;box-shadow: none;}}`);

package/dist/card/root/card-root.d.ts

@@ -52,10 +52,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --card-border-width - Width of the surface's edge. Follows
  *   `--helix-border-surface`, which is a hairline unless your theme sets another width.
  *   The edge is what sets the surface apart.
+ * @cssproperty --card-color - Color of the card's text. Muted by default, so the header reads as the card's own voice.
  * @cssproperty --card-gap - Space between the regions, and between a header or footer and its actions.
+ * @cssproperty --card-heading-color - Color of the header, and of a `Text` heading anywhere in the card. The foreground by default.
+ * @cssproperty --card-line-height - Line height of the card's text. The normal leading by default.
  * @cssproperty --card-media-block-size - Height of the media region. Defaults to
  *   `auto`, which follows an image's own proportions. A chart has no height of its own,
  *   so set one here for a chart.
+ * @cssproperty --card-media-fit - How a slotted picture fills the media region, as `object-fit`. `cover` by default; `contain` shows all of a logo or a screenshot.
  * @cssproperty --card-media-size - Width of the media column when horizontal.
  * @cssproperty --card-padding - Inset applied to each region.
  * @cssproperty --card-radius - Corner radius of the surface.