@fusion.dev/helix 0.142.1 → 0.144.0

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

@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary A person or entity, shown as an image or as their initials.
  *
  * @description
- * The font size of the initials is set in `em` against the avatar's own
- * dimension, so the initials scale with every size, including a size you set
- * through `--avatar-size`.
+ * The font size of the initials is a share of the avatar's own size, so the
+ * initials scale with every size, including a size you set through
+ * `--avatar-size`.
  *
  * @since 0.1.0
  * @status stable

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

@@ -20,7 +20,8 @@ block-size: var(--_badge-size);
 border-radius: var(--helix-radii-full);
 
 box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-color: var(--_badge-on);
+
+color: var(--badge-color, var(--_badge-on));
 display: inline-flex;
 font-size: var(--_badge-text);
 font-weight: var(--helix-weight-semibold);
@@ -101,7 +102,42 @@ background-color: var(--badge-background-color, var(--helix-color-danger-surface
 
 :host([tone="neutral"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-surface-raised));
-color: var(--helix-color-foreground);
+color: var(--badge-color, var(--helix-color-foreground));
+}
+
+:host([placement="top-start"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {
+inset-inline-end: auto;
+inset-inline-start: var(--badge-offset, calc(var(--_badge-size) / 4));
+}
+
+:host([placement="bottom-end"]) [part="indicator"],
+:host([placement="bottom-start"]) [part="indicator"] {
+inset-block-end: var(--badge-offset, calc(var(--_badge-size) / 4));
+inset-block-start: auto;
+}
+
+:host([placement="top-start"]) [part="indicator"] {
+translate: -50% -50%;
+}
+
+:host([placement="bottom-end"]) [part="indicator"] {
+translate: 50% 50%;
+}
+
+:host([placement="bottom-start"]) [part="indicator"] {
+translate: -50% 50%;
+}
+
+:host([placement="inline"]) {
+align-items: center;
+gap: var(--badge-gap, var(--helix-space-2xs));
+}
+
+:host([placement="inline"]) [part="indicator"] {
+box-shadow: none;
+position: static;
+translate: none;
 }
 
 @media print {

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

@@ -8,6 +8,12 @@ import type { CSSResultGroup } from 'lit';
  * where it overlaps the element it is pinned to, such as a dark badge on a dark
  * icon.
  *
+ * `placement` pins it to another corner, or puts it in the line with
+ * `inline`. **Inside a control, `inline` puts the count in the control's
+ * name**: `<button>Inbox <helix-badge placement="inline" value="8"
+ * label="8 unread"></helix-badge></button>` is the button "Inbox 8 unread",
+ * kept current by the badge with no label of yours to update.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -15,10 +21,21 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/badge
  *
  * @cssproperty --badge-background-color - The fill of the indicator.
+ * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
+ * @cssproperty --badge-gap - The space between the content and the count under `placement="inline"`.
  * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
  * @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.
  */
 export declare class HelixBadge extends HelixHeadlessBadge {
+    /**
+     * Where the mark sits: a corner, `top-start`, `bottom-end` or `bottom-start`,
+     * or `inline`, in the line after the content.
+     *
+     * Absent is the top end, the corner a count is looked for in. `inline` is
+     * for a badge inside a control, where its count is read as part of the
+     * control's name.
+     */
+    placement?: 'bottom-end' | 'bottom-start' | 'inline' | 'top-start';
     /**
      * What the mark means. The stylesheet picks the fill from it.
      *

package/dist/badge/root/badge-root.js

@@ -11,6 +11,9 @@ import { styles } from './badge-root.css.js';
 let HelixBadge = class HelixBadge extends HelixHeadlessBadge {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixBadge.prototype, "placement", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixBadge.prototype, "tone", void 0);

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -289,4 +289,14 @@ stop-opacity: calc(0.35 * var(--helix-material-opacity));
 :host {
 print-color-adjust: exact;
 }
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

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

@@ -3,6 +3,10 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
+[part="figure"] {
+margin: var(--helix-space-none);
+}
+
 [part="blockquote"] {
 display: block;
 margin: var(--helix-space-none);
@@ -10,8 +14,8 @@ margin: var(--helix-space-none);
 
 slot:not([name]) {
 
-color: var(--helix-color-foreground-muted);
-font-family: var(--helix-font-display);
+color: var(--blockquote-color, var(--helix-color-foreground-muted));
+font-family: var(--blockquote-font-family, var(--helix-font-display));
 font-size: var(--blockquote-size, var(--helix-text-xl));
 font-weight: var(--helix-weight-medium);
 letter-spacing: var(--helix-tracking-tight);
@@ -23,10 +27,10 @@ margin: var(--helix-space-none);
 }
 
 [part="attribution"] {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
+color: var(--blockquote-attribution-color, var(--helix-color-foreground-muted));
+font-size: var(--blockquote-attribution-size, var(--helix-text-sm));
 
-margin-block-start: var(--helix-space-sm);
+margin-block-start: var(--blockquote-gap, var(--helix-space-sm));
 }
 
 [part="attribution"][data-empty] {

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

@@ -14,6 +14,11 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Pullquote, Citation, Excerpt
  * @documentation https://fusion.dev/helix/components/blockquote
  *
+ * @cssproperty --blockquote-attribution-color - The color of the attribution.
+ * @cssproperty --blockquote-attribution-size - The font size of the attribution.
+ * @cssproperty --blockquote-color - The color of the quoted passage.
+ * @cssproperty --blockquote-font-family - The typeface of the quoted passage, the display face by default.
+ * @cssproperty --blockquote-gap - The space between the passage and its attribution.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

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

@@ -14,6 +14,8 @@ max-inline-size: 100%;
 --_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%,
@@ -61,7 +63,7 @@ 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-edge);
+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;
@@ -183,6 +185,41 @@ text-box: trim-both cap alphabetic;
 --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;

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

@@ -26,9 +26,11 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @slot start - Content before the label, usually an icon.
  *
  * @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.
  *
  * @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.
+ * @cssproperty --button-border-color - Edge color of an outlined button. The other emphases draw no edge.
  * @cssproperty --button-foreground-color - Label and icon color.
  * @cssproperty --button-gap - Space between the label and the content on either side of it.
  * @cssproperty --button-inline-size - Minimum width. It inherits, so you can set it once on a section for every button inside it.
@@ -41,6 +43,9 @@ 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-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.
  */
 export declare class HelixButton extends HelixButton_base {
     /**

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

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessButton } from '@fusion.dev/helix-headless/button';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './button-root.css.js';
 let HelixButton = class HelixButton extends MixinControlSurface(HelixHeadlessButton) {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -1,8 +1,12 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
---_callout-color: var(--helix-color-info);
+--_callout-tone: var(--helix-color-info);
 
-font-size: var(--helix-text-sm);
+--_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(
 --callout-background-color,
 color-mix(in oklab, var(--_callout-color) 10%, transparent)
@@ -13,35 +17,45 @@ position: relative;
 border-radius: var(--callout-radius, var(--helix-radii-sm));
 color: var(--helix-color-foreground);
 display: flex;
-gap: var(--helix-space-sm);
+gap: var(--callout-gap, var(--helix-space-sm));
 
-padding: var(--helix-space-md);
-padding-inline-start: calc(var(--helix-space-md) + var(--helix-border-thick));
+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(--helix-border-thick);
+inline-size: var(--_callout-bar);
 inset-block: 0;
 inset-inline-start: 0;
 position: absolute;
 }
 
 :host([tone="neutral"]) {
---_callout-color: var(--helix-color-foreground-muted);
+--_callout-tone: var(--helix-color-foreground-muted);
 }
 
 :host([tone="success"]) {
---_callout-color: var(--helix-color-success);
+--_callout-tone: var(--helix-color-success);
 }
 
 :host([tone="warning"]) {
---_callout-color: var(--helix-color-warning);
+--_callout-tone: var(--helix-color-warning);
 }
 
 :host([tone="danger"]) {
---_callout-color: var(--helix-color-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"] {
@@ -67,11 +81,55 @@ 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(--helix-text-sm);
+font-size: var(--callout-font-size, var(--helix-text-sm));
 font-weight: var(--helix-weight-semibold);
 margin: var(--helix-space-none);
 }

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

@@ -10,8 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * A bar on the inline start edge also marks the tone, so it still shows in
  * grayscale and for people who do not distinguish the hues.
  *
- * This tier has no treatment property. `tone` is set on the headless tier and
- * carries the meaning, and this tier draws it.
+ * `tone` is set on the headless tier and carries the meaning, and this tier
+ * 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.
  *
  * @since 0.1.0
  * @status stable
@@ -20,15 +21,37 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/callout
  *
  * @slot - The callout's content.
+ * @slot dismiss-icon - Replaces the cross inside the dismiss button.
+ * @slot heading - A heading above the content.
  * @slot icon - Replaces the icon chosen by `tone`.
  *
  * @csspart content - The content region.
+ * @csspart dismiss - The button that dismisses the callout, shown when `dismissible` is set.
+ * @csspart dismiss-mark - The cross on the dismiss button, shown when the `dismiss-icon` slot is empty.
  * @csspart icon - The icon region.
  *
+ * @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-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-radius - The corner radius of the callout.
  */
 export declare class HelixCallout extends HelixHeadlessCallout {
+    /**
+     * Where the callout's box ends, whatever its tone.
+     *
+     * Absent, or `filled`, is the tint with the bar, the resting look.
+     * `outlined` draws the tone at the edge with no fill, and `plain` keeps only
+     * the bar and the mark, for an aside in running prose. The bar stays in
+     * every one, being what says the tone where the hue is not seen.
+     *
+     * Web Awesome calls this `appearance`. It is `separation` here, as on
+     * `Announcement` and `Card`, since a box's edge and its meaning are two
+     * choices.
+     */
+    separation?: 'filled' | 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCallout } from '@fusion.dev/helix-headless/callout';
+import { property } from 'lit/decorators.js';
 import { styles } from './callout-root.css.js';
 let HelixCallout = class HelixCallout extends HelixHeadlessCallout {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixCallout.prototype, "separation", void 0);
 HelixCallout = __decorate([
     customElement('helix-callout')
 ], HelixCallout);

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

@@ -17,7 +17,7 @@ color: var(--helix-color-foreground-muted);
 
 align-content: var(--card-align, start);
 display: grid;
-gap: var(--helix-space-sm);
+gap: var(--card-gap, var(--helix-space-sm));
 grid-template-columns: minmax(0, 1fr);
 line-height: var(--helix-leading-normal);
 
@@ -39,6 +39,7 @@ border-color: transparent;
 }
 
 :host([separation="plain"]) {
+--card-shadow: none;
 background-color: transparent;
 border-color: transparent;
 }
@@ -67,6 +68,31 @@ 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;

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

@@ -10,6 +10,11 @@ import type { CSSResultGroup } from 'lit';
  * slotted content directly: a header is the element you slotted, so there is no
  * part to target.
  *
+ * `header-actions` and `footer-actions` put controls at the end of the header's
+ * and the footer's line; the footer then moves to the start of its line. Put a
+ * header of more than one element in one wrapper, since the header and its
+ * actions share a line.
+ *
  * `media` runs edge to edge and clips to the card's corners, so an image needs
  * no inset. Set `orientation="horizontal"` to put the media beside the header,
  * content, and footer. Set `media-placement="end"` to put it below the content,
@@ -23,9 +28,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The card's main content.
  * @slot footer - Actions that conclude the card.
+ * @slot footer-actions - Controls at the end of the footer's line, with the footer at its start.
  * @slot header - Title and any actions for the whole card.
+ * @slot header-actions - Controls for the whole card at the end of the header's line, such as a menu.
  * @slot media - Image, video, or chart that runs edge to edge, outside the inset.
  *
+ * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
+ *
  * @cssproperty --card-align - How the regions pack when the card is stretched
  *   taller than its content. `start` by default, so the slack is at the bottom;
  *   `space-between` puts a footer on the floor.
@@ -36,6 +46,7 @@ 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-gap - Space between the regions, and between a header or footer and its actions.
  * @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.

package/dist/carousel/root/carousel-root.js

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCarousel } from '@fusion.dev/helix-headless/carousel';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './carousel-root.css.js';
 let HelixCarousel = class HelixCarousel extends HelixHeadlessCarousel {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ attribute: 'controls-align', reflect: true })

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

@@ -54,7 +54,7 @@ border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted));
 }
 
 :host(:state(checked)) [part="control"],
-:host([indeterminate]) [part="control"] {
+:host(:state(indeterminate)) [part="control"] {
 border-color: var(
 --checkbox-border-color,
 var(--checkbox-checked-color, var(--helix-color-foreground))
@@ -78,7 +78,7 @@ transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
 :host(:state(checked)) [part~="mark"],
-:host([indeterminate]) [part~="mark"] {
+:host(:state(indeterminate)) [part~="mark"] {
 scale: 1;
 }
 
@@ -97,7 +97,7 @@ border-color: var(--helix-color-danger);
 }
 
 :host(:state(invalid):state(checked)) [part="control"],
-:host(:state(invalid)[indeterminate]) [part="control"] {
+:host(:state(invalid):state(indeterminate)) [part="control"] {
 border-color: var(--helix-color-danger);
 }
 

package/dist/checkbox-group/root/checkbox-group-root.d.ts

@@ -1,5 +1,6 @@
 import { HelixHeadlessCheckboxGroup } from '@fusion.dev/helix-headless/checkbox-group';
 import type { CSSResultGroup } from 'lit';
+import '../../checkbox/index.js';
 /**
  * @summary A group of related checkboxes under one label, with one value for the set.
  *
@@ -16,6 +17,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --checkbox-group-gap - The space between the checkboxes.
  */
 export declare class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    static tier: string;
     /**
      * The direction the checkboxes run. Set `horizontal` for a row. Unset is a
      * column.

package/dist/checkbox-group/root/checkbox-group-root.js

@@ -10,7 +10,9 @@ import { property } from 'lit/decorators.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles } from './checkbox-group-root.css.js';
+import '../../checkbox/index.js';
 let HelixCheckboxGroup = class HelixCheckboxGroup extends HelixHeadlessCheckboxGroup {
+    static { this.tier = 'helix-'; }
     static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
 };
 __decorate([

package/dist/code-block/root/code-block-root.css.js

@@ -101,9 +101,32 @@ line-height: var(--helix-leading-normal);
 
 :host(:not([diff])) [part="code"] {
 display: block;
+
+max-block-size: var(--code-block-max-block-size, none);
 overflow-x: auto;
 }
 
+:host([wrap]:not([diff], [line-numbers])) [part="code"] {
+overflow-wrap: anywhere;
+white-space: pre-wrap;
+}
+
+:host([line-numbers]:not([diff])) [part="block"] {
+column-gap: var(--helix-space-md);
+display: grid;
+grid-template-columns: auto minmax(0, 1fr);
+}
+
+[part="gutter"] {
+color: var(--code-block-gutter-color, var(--helix-color-foreground-subtle));
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+line-height: var(--helix-leading-normal);
+text-align: end;
+user-select: none;
+}
+
 :host([diff]) {
 gap: var(--helix-space-md);
 }