@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -17,9 +17,9 @@ slot:not([name]) {
 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);
+font-weight: var(--blockquote-font-weight, var(--helix-weight-medium));
 letter-spacing: var(--helix-tracking-tight);
-line-height: var(--helix-leading-tight);
+line-height: var(--blockquote-line-height, var(--helix-leading-tight));
 }
 
 slot:not([name])::slotted(*) {

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

@@ -18,7 +18,9 @@ import type { CSSResultGroup } from 'lit';
  * @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-font-weight - The weight of the quoted passage, medium by default.
  * @cssproperty --blockquote-gap - The space between the passage and its attribution.
+ * @cssproperty --blockquote-line-height - The line height of the quoted passage, the tight leading by default.
  * @cssproperty --blockquote-size - The font size of the quoted passage.
  */
 export declare class HelixBlockquote extends HelixHeadlessBlockquote {

package/dist/breadcrumbs/breadcrumb/breadcrumb.css.js

@@ -38,7 +38,7 @@ display: none;
 
 ::slotted(a) {
 background-color: transparent;
-border-radius: var(--helix-radii-sm);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
 padding: var(--helix-space-2xs) var(--helix-space-xs);
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -61,17 +61,17 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host {
-font-weight: var(--helix-weight-medium);
+font-weight: var(--breadcrumbs-font-weight, var(--helix-weight-medium));
 }
 
 :host([current]) {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 [part="link"] {
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
+color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
 display: inline-flex;
 gap: var(--helix-space-xs);
 padding: var(--helix-space-2xs) var(--helix-space-xs);
@@ -95,11 +95,11 @@ background-color: var(
 --breadcrumbs-hover-color,
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
 );
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([current]) [part="link"] {
-color: var(--helix-color-foreground);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
 }
 
 :host([hidden]) {

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -25,7 +25,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --breadcrumbs-control-padding-inline - Inline padding of a control slotted into a crumb, matching the steps either side of it.
  * @cssproperty --breadcrumbs-control-size - How tall a control slotted into a crumb is.
+ * @cssproperty --breadcrumbs-current-color - Text color of the current page's crumb.
+ * @cssproperty --breadcrumbs-font-weight - Weight of every crumb's text.
  * @cssproperty --breadcrumbs-hover-color - Fill behind a step under the pointer.
+ * @cssproperty --breadcrumbs-link-color - Text color of a crumb that is not the current page. A link
+ *   you slot inherits it unless your own styles set a color.
+ * @cssproperty --breadcrumbs-radius - Corner radius of the fill behind a step under the pointer.
  * @cssproperty --breadcrumbs-separator-color - Color of the chevron.
  */
 export declare class HelixBreadcrumb extends HelixHeadlessBreadcrumb {

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

@@ -7,7 +7,7 @@ display: block;
 align-items: center;
 display: flex;
 flex-wrap: wrap;
-font-size: var(--helix-text-sm);
+font-size: var(--breadcrumbs-font-size, var(--helix-text-sm));
 gap: var(--breadcrumbs-gap, var(--helix-space-xs));
 
 list-style: none;
@@ -15,6 +15,29 @@ margin: var(--helix-space-none);
 padding: var(--helix-space-none);
 }
 
+[part="expand"] {
+all: unset;
+border-radius: var(--breadcrumbs-radius, var(--helix-radii-sm));
+box-sizing: border-box;
+color: var(--breadcrumbs-link-color, var(--helix-color-foreground-muted));
+cursor: pointer;
+line-height: var(--helix-leading-normal);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+}
+
+[part="expand"]:hover {
+background-color: var(
+--breadcrumbs-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+color: var(--breadcrumbs-current-color, var(--helix-color-foreground));
+}
+
+[part="expand"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -1,5 +1,6 @@
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import type { CSSResultGroup } from 'lit';
+import '../breadcrumb/breadcrumb.js';
 /**
  * @summary Shows the path to the current page.
  *
@@ -15,11 +16,14 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The trail's items, in order from root to current page.
  *
+ * @csspart expand - The button in the folded crumb that shows the whole trail.
  * @csspart list - The ordered list.
  *
+ * @cssproperty --breadcrumbs-font-size - Size of the trail's text.
  * @cssproperty --breadcrumbs-gap - Space between items and separators.
  */
 export declare class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -7,7 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessBreadcrumbs } from '@fusion.dev/helix-headless/breadcrumbs';
 import { styles } from './breadcrumbs-root.css.js';
+import '../breadcrumb/breadcrumb.js';
 let HelixBreadcrumbs = class HelixBreadcrumbs extends HelixHeadlessBreadcrumbs {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixBreadcrumbs = __decorate([

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

@@ -195,10 +195,11 @@ visibility: hidden;
 }
 
 :host(:state(pending)) [part="button"]::after {
-animation: helix-button-turn var(--_button-turn) linear infinite;
+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, currentColor 30%, transparent);
-border-block-start-color: currentColor;
+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;
 content: "";

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

@@ -43,6 +43,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.d.ts

@@ -12,6 +12,9 @@ import type { CSSResultGroup } from 'lit';
  * shadow root, where this component's styles cannot reach. The same rule works
  * for your own anchor styled as a button.
  *
+ * The buttons take their height from the region, so set `data-density` on the
+ * group to make every button in it smaller or larger together.
+ *
  * @since 0.1.0
  * @status stable
  * @category actions

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

@@ -4,9 +4,10 @@ export const styles = createSheet(`:host {
 
 --_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));
+--_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)
@@ -129,7 +130,7 @@ slot[name="heading"]::slotted(*) {
 color: var(--helix-color-foreground);
 
 display: block;
-font-size: var(--callout-font-size, var(--helix-text-sm));
+font-size: var(--callout-font-size, var(--helix-text-control));
 font-weight: var(--helix-weight-semibold);
 margin: var(--helix-space-none);
 }

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

@@ -14,6 +14,10 @@ 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 set
+ * `--callout-padding` and `--callout-font-size` on one.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -33,9 +37,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 {

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

@@ -84,6 +84,7 @@ transition: none;
 inset: 0;
 overflow: visible;
 position: absolute;
+z-index: var(--helix-layer-beneath);
 }
 
 [part="edge"] {

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

@@ -33,8 +33,14 @@ import type { CSSResultGroup } from 'lit';
  * @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 body - The slot the main content arrives through. A slot draws no box, so it passes inherited properties, such as color and font, to the content; `display: block` gives it one.
+ * @csspart footer - The slot the footer arrives through, drawing no box, as `body` does.
+ * @csspart footer-actions - The slot the footer's controls arrive through, drawing no box, as `body` does.
  * @csspart footer-row - The line holding `footer` and `footer-actions`, drawn only while `footer-actions` holds something.
+ * @csspart header - The slot the header arrives through, drawing no box, as `body` does.
+ * @csspart header-actions - The slot the header's controls arrive through, drawing no box, as `body` does.
  * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
+ * @csspart media - The slot the media arrives through, drawing no box, as `body` does.
  *
  * @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;

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

@@ -170,11 +170,27 @@ outline-offset: var(--helix-size-focus-offset);
 
 [part="rotation"] svg,
 [part="previous"] svg,
-[part="next"] svg {
+[part="next"] svg,
+::slotted([slot="previous-icon"]),
+::slotted([slot="next-icon"]) {
 block-size: 1em;
 inline-size: 1em;
 }
 
+:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
+scale: -1 1;
+}
+
+:host([mouse-drag]) [part="track"] {
+cursor: grab;
+}
+
+:host(:state(dragging)) [part="track"] {
+cursor: grabbing;
+user-select: none;
+}
+
 [part="track"] {
 
 --_carousel-share: calc(

package/dist/chat/message/chat-message.css.js

@@ -181,68 +181,6 @@ background-color: transparent;
 padding: var(--helix-space-none);
 }
 
-[part="indicator"] {
-
---_chat-typing-cycle: 1.2s;
-
-animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;
-background-image:
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent),
-radial-gradient(circle closest-side, currentColor 90%, transparent);
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-background-repeat: no-repeat;
-background-size:
-20% 30%,
-20% 30%,
-20% 30%;
-block-size: 1lh;
-display: block;
-inline-size: 1.75em;
-opacity: 0.7;
-}
-
-@keyframes helix-chat-typing {
-0%,
-60%,
-100% {
-background-position:
-0% 50%,
-50% 50%,
-100% 50%;
-}
-
-20% {
-background-position:
-0% 10%,
-50% 50%,
-100% 50%;
-}
-
-33% {
-background-position:
-0% 50%,
-50% 10%,
-100% 50%;
-}
-
-46% {
-background-position:
-0% 50%,
-50% 50%,
-100% 10%;
-}
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="indicator"] {
-animation: none;
-}
-}
-
 :host([state="failed"]) [part="meta"] {
 color: var(--helix-color-danger);
 }

package/dist/chat/message/chat-message.js

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChatMessage } from '@fusion.dev/helix-headless/chat';
 import { property } from 'lit/decorators.js';
+import { styles as typingStyles } from '../typing.css.js';
 import { styles } from './chat-message.css.js';
 let HelixChatMessage = class HelixChatMessage extends HelixHeadlessChatMessage {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [typingStyles, styles]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -109,6 +109,13 @@ padding-block-start: var(--helix-space-xs);
 padding-inline: var(--chat-padding-inline, var(--helix-space-md));
 }
 
+[part="typing"] {
+align-items: center;
+color: var(--chat-typing-color, var(--helix-color-foreground-muted));
+display: inline-flex;
+gap: var(--chat-typing-gap, var(--helix-space-xs));
+}
+
 [part="composer"] {
 padding-block: var(--helix-space-sm);
 padding-inline: var(--chat-padding-inline, var(--helix-space-md));

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

@@ -36,6 +36,8 @@ import '../message/chat-message.js';
  * @cssproperty --chat-resume-border-width - Width of the edge around the resume control, which sits over content.
  * @cssproperty --chat-resume-shadow - Shadow under the resume control, which floats over the transcript.
  * @cssproperty --chat-rule - The hairline under the header.
+ * @cssproperty --chat-typing-color - The color of the dots and the words that say who is typing.
+ * @cssproperty --chat-typing-gap - The space between the dots and the words that say who is typing.
  */
 export declare class HelixChat extends HelixHeadlessChat {
     static tier: string;

package/dist/chat/root/chat-root.js

@@ -8,12 +8,13 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessChat } from '@fusion.dev/helix-headless/chat';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
+import { styles as typingStyles } from '../typing.css.js';
 import { styles } from './chat-root.css.js';
 import '../composer/chat-composer.js';
 import '../message/chat-message.js';
 let HelixChat = class HelixChat extends HelixHeadlessChat {
     static { this.tier = 'helix-'; }
-    static { this.styles = [liveStyles, collectionStateStyles, styles]; }
+    static { this.styles = [liveStyles, collectionStateStyles, typingStyles, styles]; }
 };
 HelixChat = __decorate([
     customElement('helix-chat')

package/dist/chat/typing.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/chat/typing.css.js

@@ -0,0 +1,62 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="indicator"] {
+
+--_chat-typing-cycle: 1.2s;
+
+animation: helix-chat-typing var(--_chat-typing-cycle) infinite ease-in-out;
+background-image:
+radial-gradient(circle closest-side, currentColor 90%, transparent),
+radial-gradient(circle closest-side, currentColor 90%, transparent),
+radial-gradient(circle closest-side, currentColor 90%, transparent);
+background-position:
+0% 50%,
+50% 50%,
+100% 50%;
+background-repeat: no-repeat;
+background-size:
+20% 30%,
+20% 30%,
+20% 30%;
+block-size: 1lh;
+display: block;
+inline-size: 1.75em;
+opacity: 0.7;
+}
+
+@keyframes helix-chat-typing {
+0%,
+60%,
+100% {
+background-position:
+0% 50%,
+50% 50%,
+100% 50%;
+}
+
+20% {
+background-position:
+0% 10%,
+50% 50%,
+100% 50%;
+}
+
+33% {
+background-position:
+0% 50%,
+50% 10%,
+100% 50%;
+}
+
+46% {
+background-position:
+0% 50%,
+50% 50%,
+100% 10%;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+animation: none;
+}
+}`);

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

@@ -86,6 +86,21 @@ scale: 1;
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
 }
 
+:host(:state(has-check)) [part~="mark"]:not([part~="mark-dash"]),
+:host(:state(has-dash)) [part~="mark-dash"] {
+background-color: transparent;
+color: var(--checkbox-mark-color, var(--helix-color-foreground));
+display: grid;
+mask-image: none;
+place-items: center;
+}
+
+slot[name="check"]::slotted(*),
+slot[name="dash"]::slotted(*) {
+block-size: var(--checkbox-icon-size, 100%);
+inline-size: var(--checkbox-icon-size, 100%);
+}
+
 [part="control"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);

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

@@ -24,7 +24,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --checkbox-card-border-color - The border color of the card.
  * @cssproperty --checkbox-card-padding - The padding of the card.
  * @cssproperty --checkbox-checked-color - The border color of a checked box when `--checkbox-border-color` is not set.
- * @cssproperty --checkbox-mark-color - The color of the check mark and the dash.
+ * @cssproperty --checkbox-icon-size - The width and height of an icon slotted into `check` or `dash`. It fills the box by default.
+ * @cssproperty --checkbox-mark-color - The color of the check mark and the dash, and of an icon slotted into `check` or `dash`.
  * @cssproperty --checkbox-size - The width and height of the box.
  */
 export declare class HelixCheckbox extends HelixHeadlessCheckbox {

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

@@ -9,13 +9,13 @@ background-color: var(
 --code-background-color,
 color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)
 );
-border-radius: var(--helix-radii-sm);
+border-radius: var(--code-radius, var(--helix-radii-sm));
 
 color: var(
 --code-foreground-color,
 color-mix(in oklab, var(--helix-color-foreground) 30%, var(--helix-color-foreground-muted))
 );
-font-family: var(--helix-font-mono);
+font-family: var(--code-font-family, var(--helix-font-mono));
 
 font-size: var(--code-size, calc(var(--helix-text-sm) / var(--helix-text-md) * 1em));
 padding-block: var(--helix-space-none);

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

@@ -15,10 +15,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --code-background-color - Fill behind the fragment. Defaults to the
  * foreground color at 6%, which looks the same on a light page and a dark one.
+ * @cssproperty --code-font-family - The fragment's typeface. Defaults to the mono face.
  * @cssproperty --code-foreground-color - Color of the fragment's text. Defaults to the
  * foreground color mixed toward `foreground-muted`.
  * @cssproperty --code-padding - Space either side of the fragment. Defaults to half of
  * `space-2xs`, so a bracket next to the fragment sits close to it.
+ * @cssproperty --code-radius - Corner radius of the wash. Defaults to `radii-sm`.
  * @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
  */
 export declare class HelixCode extends HelixHeadlessCode {

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

@@ -106,6 +106,30 @@ max-block-size: var(--code-block-max-block-size, none);
 overflow-x: auto;
 }
 
+:host(:state(expanded)) [part="code"] {
+max-block-size: none;
+}
+
+[part="expand"] {
+all: unset;
+
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+color: var(--code-block-expand-color, var(--helix-color-foreground-muted));
+cursor: pointer;
+font-size: var(--helix-text-sm);
+padding: var(--helix-space-xs);
+}
+
+[part="expand"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="expand"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 :host([wrap]:not([diff], [line-numbers])) [part="code"] {
 overflow-wrap: anywhere;
 white-space: pre-wrap;

package/dist/code-block/root/code-block-root.d.ts

@@ -28,9 +28,10 @@ import '../../copy-button/index.js';
  * @cssproperty --code-block-backdrop - A backdrop filter for the block and its header, for a translucent background.
  * @cssproperty --code-block-background-color - The background behind the code. Set it for a block that sits on a surface other than the page background.
  * @cssproperty --code-block-border-color - The line around the block and its header.
+ * @cssproperty --code-block-expand-color - The color of the button under a capped block that shows every line.
  * @cssproperty --code-block-gutter-color - The color of the line numbers.
  * @cssproperty --code-block-header-background-color - The background behind the name. The default is `surface-raised`.
- * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls. The default is no limit.
+ * @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
  * @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
  */
 export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {

package/dist/color-input/root/color-input-root.css.js

@@ -71,6 +71,16 @@ display: block;
 padding: var(--helix-space-sm);
 }
 
+::slotted([slot="panel-header"]) {
+display: block;
+margin: var(--helix-space-sm) var(--helix-space-sm) var(--helix-space-none);
+}
+
+::slotted([slot="panel-footer"]) {
+display: block;
+margin: var(--helix-space-none) var(--helix-space-sm) var(--helix-space-sm);
+}
+
 @media (prefers-reduced-motion: reduce) {
 [part="field"] {
 transition: none;

package/dist/color-picker/root/color-picker-root.css.js

@@ -337,6 +337,14 @@ inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));
 padding: var(--helix-space-none);
 }
 
+[part="feedback"] {
+color: var(--color-picker-feedback-color, var(--helix-color-danger));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);
+padding-inline: var(--color-picker-padding, var(--helix-space-none));
+}
+
 @media (prefers-reduced-motion: reduce) {
 
 [part="sample"] {

package/dist/color-picker/root/color-picker-root.d.ts

@@ -34,6 +34,7 @@ import '../../slider/index.js';
  * @aliases Color, ColorArea, Swatch picker
  * @documentation https://fusion.dev/helix/components/color-picker
  *
+ * @cssproperty --color-picker-feedback-color - The color of the message under the picker, while `feedback` is set.
  * @cssproperty --color-picker-field-label-color - The color of the names above the channel number fields, in `channel-fields`.
  * @cssproperty --color-picker-fields-gap - The space between the channel number fields, in `channel-fields`.
  * @cssproperty --color-picker-grid-radius - The corner radius of the square.