@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,227 +1,47 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-
-min-inline-size: var(--button-inline-size, auto);
-max-inline-size: 100%;
-}
-
-:host {
---_button-edge: var(--helix-color-border);
-
---_button-fill: var(--_button-tone);
---_button-fill-hover: var(--_button-tone-hover);
---_button-on-tone: var(--helix-color-background);
---_button-tone: var(--helix-color-foreground);
-
---_button-turn: 0.8s;
-
---_button-tone-hover: color-mix(
+export const styles = createSheet(`:host {display: inline-flex;min-inline-size: var(--button-inline-size, auto);max-inline-size: 100%;}:host {--_button-edge: var(--helix-color-border);--_button-fill: var(--_button-tone);--_button-fill-hover: var(--_button-tone-hover);--_button-on-tone: var(--helix-color-background);--_button-tone: var(--helix-color-foreground);--_button-turn: 0.8s;--_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-foreground) 86%,
 var(--helix-color-background)
-);
-}
-:host([tone="primary"]) {
---_button-edge: var(--helix-color-primary);
---_button-fill: var(--helix-color-primary-surface);
---_button-fill-hover: var(--helix-color-primary-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-primary);
---_button-tone: var(--helix-color-primary);
---_button-tone-hover: var(--helix-color-primary-hover);
-}
-
-:host([tone="accent"]) {
---_button-edge: var(--helix-color-accent);
---_button-fill: var(--helix-color-accent-surface);
---_button-fill-hover: var(--helix-color-accent-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-accent);
---_button-tone: var(--helix-color-accent);
---_button-tone-hover: var(--helix-color-accent-hover);
-}
-:host([tone="danger"]) {
---_button-edge: var(--helix-color-danger);
---_button-fill: var(--helix-color-danger-surface);
---_button-fill-hover: var(--helix-color-danger-surface-hover);
---_button-on-tone: var(--helix-color-foreground-on-status);
---_button-tone: var(--helix-color-danger);
-
---_button-tone-hover: color-mix(
+);}:host([tone="primary"]) {--_button-edge: var(--helix-color-primary);--_button-fill: var(--helix-color-primary-surface);--_button-fill-hover: var(--helix-color-primary-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-primary);--_button-tone: var(--helix-color-primary);--_button-tone-hover: var(--helix-color-primary-hover);}:host([tone="accent"]) {--_button-edge: var(--helix-color-accent);--_button-fill: var(--helix-color-accent-surface);--_button-fill-hover: var(--helix-color-accent-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-accent);--_button-tone: var(--helix-color-accent);--_button-tone-hover: var(--helix-color-accent-hover);}:host([tone="danger"]) {--_button-edge: var(--helix-color-danger);--_button-fill: var(--helix-color-danger-surface);--_button-fill-hover: var(--helix-color-danger-surface-hover);--_button-on-tone: var(--helix-color-foreground-on-status);--_button-tone: var(--helix-color-danger);--_button-tone-hover: color-mix(
 in oklab,
 var(--helix-color-danger) 86%,
 var(--helix-color-foreground)
-);
-}
-
-[part="button"] {
-all: unset;
-align-items: center;
-
-background-color: var(
+);}[part="button"] {all: unset;align-items: center;background-color: var(
 --button-background-color,
 color-mix(in oklab, var(--_button-tone) 6%, transparent)
-);
-
-block-size: var(--button-size, var(--helix-size-control));
-border: var(--helix-border-thin) solid var(--button-border-color, var(--_button-edge));
-box-sizing: border-box;
-color: var(--button-foreground-color, var(--_button-tone));
-cursor: pointer;
-display: inline-flex;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-control);
-font-weight: var(--helix-weight-medium);
-gap: var(--button-gap, var(--helix-space-xs));
-inline-size: 100%;
-justify-content: center;
-letter-spacing: var(--helix-tracking-normal);
-line-height: var(--helix-leading-tight);
-
-padding-inline: var(--button-padding-inline, var(--helix-space-control));
-text-decoration: none;
-transition:
+);block-size: var(--button-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--button-border-color, var(--_button-edge));box-sizing: border-box;color: var(--button-foreground-color, var(--_button-tone));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-weight: var(--helix-weight-medium);gap: var(--button-gap, var(--helix-space-xs));inline-size: 100%;justify-content: center;letter-spacing: var(--helix-tracking-normal);line-height: var(--helix-leading-tight);padding-inline: var(--button-padding-inline, var(--helix-space-control));text-decoration: none;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-white-space: nowrap;
-}
-
-[part="button"] {
-border-end-end-radius: var(
+color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap;}[part="button"] {border-end-end-radius: var(
 --button-radius-end-end,
 var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
-);
-border-end-start-radius: var(
+);border-end-start-radius: var(
 --button-radius-end-start,
 var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
-);
-border-start-end-radius: var(
+);border-start-end-radius: var(
 --button-radius-start-end,
 var(--button-radius-end, var(--button-radius, var(--helix-radii-sm)))
-);
-border-start-start-radius: var(
+);border-start-start-radius: var(
 --button-radius-start-start,
 var(--button-radius-start, var(--button-radius, var(--helix-radii-sm)))
-);
-}
-
-:host(:not(:disabled)) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 12%, transparent))
-);
-}
-
-[part="button"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-:host([emphasis="solid"]) [part="button"] {
-background-color: var(--button-background-color, var(--_button-fill));
-border-color: transparent;
-color: var(--button-foreground-color, var(--_button-on-tone));
-}
-:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(
+);}[part="button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}:host([emphasis="solid"]) [part="button"] {background-color: var(--button-background-color, var(--_button-fill));border-color: transparent;color: var(--button-foreground-color, var(--_button-on-tone));}:host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, var(--_button-fill-hover))
-);
-border-color: transparent;
-}
-
-:host([emphasis="subtle"]) [part="button"] {
-background-color: var(
+);border-color: transparent;}:host([emphasis="subtle"]) [part="button"] {background-color: var(
 --button-background-color,
 color-mix(in oklab, var(--_button-tone) 14%, transparent)
-);
-border-color: transparent;
-color: var(
+);border-color: transparent;color: var(
 --button-foreground-color,
 color-mix(in oklab, var(--_button-tone) 78%, var(--helix-color-foreground))
-);
-}
-
-:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: var(
+);}:host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 22%, transparent))
-);
-border-color: transparent;
-}
-:host([emphasis="ghost"]) [part="button"] {
-background-color: var(--button-background-color, transparent);
-border-color: transparent;
-color: var(--button-foreground-color, var(--_button-tone));
-}
-
-:host(:not(:disabled)[emphasis="ghost"]) [part="button"]:hover {
-background-color: var(
+);border-color: transparent;}:host([emphasis="ghost"]) [part="button"] {background-color: var(--button-background-color, transparent);border-color: transparent;color: var(--button-foreground-color, var(--_button-tone));}:host(:not(:disabled)[emphasis="ghost"]) [part="button"]:hover {background-color: var(
 --button-background-color-hover,
 var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, transparent))
-);
-border-color: transparent;
-}
-
-:host([width="full"]) {
-display: flex;
-inline-size: 100%;
-}
-
-:host(:disabled) [part="button"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-@supports (text-box: trim-both cap alphabetic) {
-slot:not([name]) {
-display: block;
-padding-block: var(--helix-space-2xs);
-text-box: trim-both cap alphabetic;
-}
-}
-
-[part="button"] ::slotted(helix-icon) {
---icon-size: 1.15em;
-}
-
-:host(:state(pending)) [part="button"] {
-cursor: progress;
-position: relative;
-}
-
-:host(:state(pending)) [part="button"] > slot {
-visibility: hidden;
-}
-
-:host(:state(pending)) [part="button"]::after {
-animation: helix-button-turn var(--_button-turn) linear infinite;
-block-size: var(--button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
-border-block-start-color: currentColor;
-border-radius: var(--helix-radii-full);
-box-sizing: border-box;
-content: "";
-inline-size: var(--button-spinner-size, 1.15em);
-inset: 0;
-margin: auto;
-position: absolute;
-}
-
-@keyframes helix-button-turn {
-to {
-rotate: 1turn;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-:host(:state(pending)) [part="button"]::after {
-animation-duration: calc(var(--helix-duration-slow) * 12);
-}
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+);border-color: transparent;}:host([width="full"]) {display: flex;inline-size: 100%;}:host(:disabled) [part="button"] {cursor: not-allowed;opacity: 0.5;}@supports (text-box: trim-both cap alphabetic) {slot:not([name]) {display: block;padding-block: var(--helix-space-2xs);text-box: trim-both cap alphabetic;}}[part="button"] ::slotted(helix-icon) {--icon-size: 1.15em;}:host(:state(pending)) [part="button"] {cursor: progress;position: relative;}:host(:state(pending)) [part="button"] > slot {visibility: hidden;}[part="spinner"] {animation: helix-button-turn var(--button-spinner-duration, var(--_button-turn)) linear infinite;block-size: var(--button-spinner-size, 1.15em);border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--button-spinner-color, currentColor) 30%, transparent);border-block-start-color: var(--button-spinner-color, currentColor);border-radius: var(--helix-radii-full);box-sizing: border-box;inline-size: var(--button-spinner-size, 1.15em);inset: 0;margin: auto;position: absolute;}@keyframes helix-button-turn {to {rotate: 1turn;}}@media (prefers-reduced-motion: reduce) {[part="spinner"] {animation-duration: calc(var(--helix-duration-slow) * 12);}}@media print {:host {display: none;}}`);

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

@@ -27,6 +27,7 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  *
  * @csspart button - The inner control.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
+ * @csspart spinner - The ring a pending button turns over its words, sized and colored by the `--button-spinner-*` hooks.
  *
  * @cssproperty --button-background-color - Fill behind the button, in every state.
  * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Without it, `--button-background-color` also applies on hover.
@@ -43,6 +44,8 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-radius-start-end - The top trailing corner, for a group stacking down.
  * @cssproperty --button-radius-start-start - The top leading corner, for a group stacking down.
  * @cssproperty --button-size - Height of the control, for a row height outside the density steps.
+ * @cssproperty --button-spinner-color - Color of the ring a pending button turns. It follows the label's color.
+ * @cssproperty --button-spinner-duration - How long the ring takes to turn once.
  * @cssproperty --button-spinner-size - Size of the ring a pending button turns. Defaults to the size of its icons.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.

package/dist/button-group/root/button-group-root.css.js

@@ -1,53 +1,3 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: inline-flex;
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
-margin-inline-start: calc(var(--helix-border-thin) * -1);
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
---button-radius-start: 0;
-}
-
-:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
---button-radius-end: 0;
-}
-
-:host([orientation="vertical"]) {
-align-items: stretch;
-flex-direction: column;
-}
-
-:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {
---button-radius-start-start: 0;
---button-radius-start-end: 0;
---button-radius-start: var(--button-radius, var(--helix-radii-sm));
-margin-block-start: calc(var(--helix-border-thin) * -1);
-
-margin-inline-start: 0;
-}
-
-:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {
---button-radius-end-end: 0;
---button-radius-end-start: 0;
---button-radius-end: var(--button-radius, var(--helix-radii-sm));
-}
-
-::slotted(*:hover),
-::slotted(*:focus-within) {
-position: relative;
-
-z-index: var(--helix-layer-raised);
-}
-
-:host([variant="spaced"]) {
-gap: var(--button-group-gap, var(--helix-space-xs));
-}
-
-@media print {
-:host {
-display: none;
-}
-}`);
+export const styles = createSheet(`:host {display: inline-flex;}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {margin-inline-start: calc(var(--helix-border-thin) * -1);}:host(:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start: 0;}:host(:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end: 0;}:host([orientation="vertical"]) {align-items: stretch;flex-direction: column;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:first-child)) {--button-radius-start-start: 0;--button-radius-start-end: 0;--button-radius-start: var(--button-radius, var(--helix-radii-sm));margin-block-start: calc(var(--helix-border-thin) * -1);margin-inline-start: 0;}:host([orientation="vertical"]:not([variant="spaced"])) ::slotted(*:not(:last-child)) {--button-radius-end-end: 0;--button-radius-end-start: 0;--button-radius-end: var(--button-radius, var(--helix-radii-sm));}::slotted(*:hover),
+::slotted(*:focus-within) {position: relative;z-index: var(--helix-layer-raised);}:host([variant="spaced"]) {gap: var(--button-group-gap, var(--helix-space-xs));}@media print {:host {display: none;}}`);

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

@@ -1,141 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
---_callout-tone: var(--helix-color-info);
-
---_callout-color: var(--callout-accent-color, var(--_callout-tone));
---_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));
---_callout-inset: var(--callout-padding, var(--helix-space-md));
-
-font-size: var(--callout-font-size, var(--helix-text-sm));
-background-color: var(
+export const styles = createSheet(`:host {--_callout-tone: var(--helix-color-info);--_callout-color: var(--callout-accent-color, var(--_callout-tone));--_callout-bar: var(--callout-bar-thickness, var(--helix-border-thick));--_callout-inset: var(--callout-padding, var(--helix-space-control));font-size: var(--callout-font-size, var(--helix-text-control));background-color: var(
 --callout-background-color,
 color-mix(in oklab, var(--_callout-color) 10%, transparent)
-);
-overflow: hidden;
-position: relative;
-
-border-radius: var(--callout-radius, var(--helix-radii-sm));
-color: var(--helix-color-foreground);
-display: flex;
-gap: var(--callout-gap, var(--helix-space-sm));
-
-padding: var(--_callout-inset);
-padding-inline-start: calc(var(--_callout-inset) + var(--_callout-bar));
-}
-
-:host::before {
-background-color: var(--_callout-color);
-content: "";
-inline-size: var(--_callout-bar);
-inset-block: 0;
-inset-inline-start: 0;
-position: absolute;
-}
-
-:host([tone="neutral"]) {
---_callout-tone: var(--helix-color-foreground-muted);
-}
-
-:host([tone="success"]) {
---_callout-tone: var(--helix-color-success);
-}
-
-:host([tone="warning"]) {
---_callout-tone: var(--helix-color-warning);
-}
-
-:host([tone="danger"]) {
---_callout-tone: var(--helix-color-danger);
-}
-
-:host([separation="outlined"]) {
-background-color: var(--callout-background-color, transparent);
-box-shadow: inset 0 0 0 var(--helix-border-thin)
-color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));
-}
-
-:host([separation="plain"]) {
-background-color: var(--callout-background-color, transparent);
-}
-
-[part="icon"] {
-color: var(--_callout-color);
-display: inline-flex;
-flex: 0 0 auto;
-}
-
-[part="icon"] svg {
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-slot[name="icon"]::slotted(*) {
---icon-size: var(--helix-size-icon);
-
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-[part="content"] {
-line-height: var(--helix-leading-normal);
-min-inline-size: 0;
-}
-
-[part="dismiss"] {
-all: unset;
-
-box-sizing: border-box;
-block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
-cursor: pointer;
-display: inline-flex;
-flex: 0 0 auto;
-inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
-margin-block: calc(var(--helix-space-2xs) * -1);
-margin-inline: auto calc(var(--helix-space-2xs) * -1);
-place-content: center;
-place-items: center;
-transition:
+);overflow: hidden;position: relative;border-radius: var(--callout-radius, var(--helix-radii-sm));color: var(--helix-color-foreground);display: flex;gap: var(--callout-gap, var(--helix-space-sm));padding: var(--_callout-inset);padding-inline-start: calc(var(--_callout-inset) + var(--_callout-bar));}:host::before {background-color: var(--_callout-color);content: "";inline-size: var(--_callout-bar);inset-block: 0;inset-inline-start: 0;position: absolute;}:host([tone="neutral"]) {--_callout-tone: var(--helix-color-foreground-muted);}:host([tone="success"]) {--_callout-tone: var(--helix-color-success);}:host([tone="warning"]) {--_callout-tone: var(--helix-color-warning);}:host([tone="danger"]) {--_callout-tone: var(--helix-color-danger);}:host([separation="outlined"]) {background-color: var(--callout-background-color, transparent);box-shadow: inset 0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--_callout-color) 45%, var(--helix-color-background));}:host([separation="plain"]) {background-color: var(--callout-background-color, transparent);}[part="icon"] {color: var(--_callout-color);display: inline-flex;flex: 0 0 auto;}[part="icon"] svg {block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}slot[name="icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}[part="content"] {line-height: var(--helix-leading-normal);min-inline-size: 0;}[part="dismiss"] {all: unset;box-sizing: border-box;block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;flex: 0 0 auto;inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);margin-block: calc(var(--helix-space-2xs) * -1);margin-inline: auto calc(var(--helix-space-2xs) * -1);place-content: center;place-items: center;transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="dismiss"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
-}
-
-[part="dismiss"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="dismiss"] svg,
-slot[name="dismiss-icon"]::slotted(*) {
---icon-size: var(--helix-size-icon);
-
-block-size: var(--helix-size-icon);
-inline-size: var(--helix-size-icon);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="dismiss"] {
-transition: none;
-}
-}
-
-slot[name="heading"]::slotted(*) {
-color: var(--helix-color-foreground);
-
-display: block;
-font-size: var(--callout-font-size, var(--helix-text-sm));
-font-weight: var(--helix-weight-semibold);
-margin: var(--helix-space-none);
-}
-
-@media print {
-:host {
-background-color: transparent;
-}
-}`);
+color var(--helix-duration-fast) var(--helix-easing-standard);}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="dismiss"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="dismiss"] svg,
+slot[name="dismiss-icon"]::slotted(*) {--icon-size: var(--helix-size-icon);block-size: var(--helix-size-icon);inline-size: var(--helix-size-icon);}@media (prefers-reduced-motion: reduce) {[part="dismiss"] {transition: none;}}slot[name="heading"]::slotted(*) {color: var(--helix-color-foreground);display: block;font-size: var(--callout-font-size, var(--helix-text-control));font-weight: var(--helix-weight-semibold);margin: var(--helix-space-none);}@media print {:host {background-color: transparent;}}`);

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

@@ -14,6 +14,12 @@ import type { CSSResultGroup } from 'lit';
  * draws it. `separation` is where the box ends: absent is the tint with the
  * bar, `outlined` an edge with no fill, and `plain` the bar and the mark alone.
  *
+ * The inset and the type follow `data-density`, as the controls around a
+ * callout do: set it on a region for tighter or looser callouts, or on one
+ * callout itself, as `<helix-callout data-density="sm">`. That is how one
+ * callout is sized, and there is no `size` beside it. `--callout-padding` and
+ * `--callout-font-size` set either to a value of your own.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -33,9 +39,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --callout-accent-color - The color of the bar, the mark and the tint, in place of the tone's.
  * @cssproperty --callout-background-color - The fill behind the callout.
  * @cssproperty --callout-bar-thickness - The thickness of the bar on the inline start edge.
- * @cssproperty --callout-font-size - The size of the callout's text.
+ * @cssproperty --callout-font-size - The size of the callout's text. Defaults to the control text step, which follows `data-density`.
  * @cssproperty --callout-gap - The space between the mark and the content.
- * @cssproperty --callout-padding - The inset around the content, to which the bar's width is added at the start.
+ * @cssproperty --callout-padding - The inset around the content, to which the bar's width is added at the start. Defaults to the control space step, which follows `data-density`.
  * @cssproperty --callout-radius - The corner radius of the callout.
  */
 export declare class HelixCallout extends HelixHeadlessCallout {