@fusion.dev/helix 0.145.0 → 0.146.0

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.

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

@@ -1,5 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="button"] {
+export const styles = createSheet(`:host {
+--_icon-button-ink: var(--copy-button-color, var(--helix-color-foreground-muted));
+--_icon-button-ink-hover: var(
+--copy-button-color-hover,
+var(--copy-button-color, var(--helix-color-foreground))
+);
+--_icon-button-size: var(--copy-button-size, var(--icon-button-size, var(--helix-size-control)));
+}
+
+[part="button"] {
 display: inline-grid;
 place-items: center;
 }
@@ -13,21 +22,21 @@ display: none;
 }
 
 [part="button"][data-copied] {
-color: var(--helix-color-success);
+color: var(--copy-button-success-color, var(--helix-color-success));
 }
 
 :host(:not(:disabled)) [part="button"][data-copied]:hover {
-color: var(--helix-color-success);
+color: var(--copy-button-success-color, var(--helix-color-success));
 }
 
 [part="button"][data-failed],
 :host(:not(:disabled)) [part="button"][data-failed]:hover {
-color: var(--helix-color-danger);
+color: var(--copy-button-error-color, var(--helix-color-danger));
 }
 
 slot > svg {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
+block-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));
+inline-size: var(--copy-button-icon-size, var(--helix-size-icon-tight));
 }
 
 @media print {

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

@@ -14,6 +14,13 @@ declare const HelixCopyButton_base: (new (...args: any[]) => import("../../share
  * @status stable
  * @category actions
  * @documentation https://fusion.dev/helix/components/copy-button
+ *
+ * @cssproperty --copy-button-color - The icon's color at rest. A `tone` keeps its own.
+ * @cssproperty --copy-button-color-hover - The icon's color under the pointer. Without it, `--copy-button-color` also applies on hover.
+ * @cssproperty --copy-button-error-color - The cross's color after a copy that put nothing on the clipboard.
+ * @cssproperty --copy-button-icon-size - The width and height of the clipboard, check, and cross icons drawn by default.
+ * @cssproperty --copy-button-size - Edge length of the button. Without it, `--icon-button-size` applies.
+ * @cssproperty --copy-button-success-color - The check mark's color after a copy.
  */
 export declare class HelixCopyButton extends HelixCopyButton_base {
     static tier: string;

package/dist/data-table/root/data-table-root.css.js

@@ -144,7 +144,10 @@ grid-column: 1 / -1;
 }
 
 :host([child-field]) [part~="cell-header"] {
---_data-table-gutter: calc(var(--helix-size-icon-tight) + var(--helix-space-2xs));
+--_data-table-gutter: calc(
+var(--data-table-toggle-size, var(--helix-size-icon-tight)) +
+var(--helix-space-2xs)
+);
 padding-inline-start: calc(
 (var(--data-table-level, 1) - 1) *
 var(--data-table-indent, var(--_data-table-gutter))
@@ -162,12 +165,12 @@ var(--_data-table-gutter)
 [part~="toggle"] {
 align-items: center;
 background: none;
-block-size: var(--helix-size-icon-tight);
+block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
 border: none;
-color: var(--helix-color-foreground-muted);
+color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: inline-flex;
-inline-size: var(--helix-size-icon-tight);
+inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
 justify-content: center;
 margin-inline-end: var(--helix-space-2xs);
 padding: 0;
@@ -191,8 +194,9 @@ padding-block: var(--data-table-padding-block, var(--helix-space-sm));
 
 [part="more-button"] {
 background: none;
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+border: var(--helix-border-thin) solid
+var(--data-table-more-border-color, var(--helix-color-border));
+border-radius: var(--data-table-more-radius, var(--helix-radii-sm));
 color: var(--data-table-color, var(--helix-color-foreground));
 cursor: pointer;
 font-family: var(--helix-font-sans);
@@ -202,7 +206,10 @@ padding-inline: var(--helix-space-sm);
 }
 
 [part="more-button"]:hover {
-background-color: var(--helix-color-surface-raised);
+background-color: var(
+--data-table-more-hover-background-color,
+var(--helix-color-surface-raised)
+);
 }
 
 :host([windowed]) [part="table"] {

package/dist/data-table/root/data-table-root.d.ts

@@ -45,12 +45,17 @@ import '../../table/index.js';
  * It is opaque, because rows scroll under the sticky heading. Unset otherwise.
  * @cssproperty --data-table-heading-color - The text color of a heading.
  * @cssproperty --data-table-indent - How far a tree grid's row header steps in for each level. It defaults to the width of the mark that opens a row.
+ * @cssproperty --data-table-more-border-color - The color of the edge around the button in the `load-more` row.
+ * @cssproperty --data-table-more-hover-background-color - The fill behind the button in the `load-more` row while the pointer is over it.
+ * @cssproperty --data-table-more-radius - The corner radius of the button in the `load-more` row.
  * @cssproperty --data-table-padding-block - The space above and below a cell's content.
  * @cssproperty --data-table-padding-inline - The space on either side of a cell's content.
  * @cssproperty --data-table-rule-color - The color of the line between rows. It takes a
  * color only, because it fills the color in a border shorthand, and a full border value
  * makes the rule invalid. It is drawn on the cells, because the row is `display: contents`.
  * @cssproperty --data-table-text - The font size of headings and cells.
+ * @cssproperty --data-table-toggle-color - The color of the mark that opens and closes a row of a tree grid.
+ * @cssproperty --data-table-toggle-size - The size of the mark that opens and closes a row of a tree grid, and of the room a row with no children keeps for it.
  */
 export declare class HelixDataTable extends HelixHeadlessDataTable {
     static tier: string;

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

@@ -51,6 +51,16 @@ padding: var(--helix-space-sm);
 position: absolute;
 }
 
+::slotted([slot="panel-header"]) {
+display: block;
+margin-block-end: var(--helix-space-sm);
+}
+
+::slotted([slot="panel-footer"]) {
+display: block;
+margin-block-start: var(--helix-space-sm);
+}
+
 :host(:disabled) [part="field"] {
 color: var(--helix-color-foreground-subtle);
 }

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

@@ -185,4 +185,23 @@ margin: var(--helix-space-none);
 overflow: hidden;
 position: absolute;
 white-space: nowrap;
+}
+
+[part="slice-label"] {
+background-color: var(--donut-chart-slice-label-background-color, var(--helix-color-surface));
+border-radius: var(--helix-radii-sm);
+color: var(--donut-chart-slice-label-color, var(--helix-color-foreground));
+font-family: var(--helix-font-sans);
+font-size: var(--donut-chart-slice-label-font-size, var(--helix-text-xs));
+font-variant-numeric: tabular-nums;
+line-height: 1.4;
+padding: 0 var(--helix-space-2xs);
+pointer-events: none;
+position: absolute;
+translate: -50% -50%;
+white-space: nowrap;
+}
+
+:host([sweep="half"]:dir(rtl)) [part="slice-label"] {
+translate: 50% -50%;
 }`);

package/dist/donut-chart/root/donut-chart-root.d.ts

@@ -28,6 +28,9 @@ import '../../tooltip/index.js';
  *
  * @cssproperty --donut-chart-edge-stroke - Thickness of the slice boundary under `outlined`.
  * @cssproperty --donut-chart-size - Width and height of the ring.
+ * @cssproperty --donut-chart-slice-label-background-color - Plate behind a slice's share, under `slice-labels`.
+ * @cssproperty --donut-chart-slice-label-color - Color of a slice's share, under `slice-labels`.
+ * @cssproperty --donut-chart-slice-label-font-size - Size of a slice's share, under `slice-labels`.
  * @cssproperty --donut-chart-track-color - Color of the ring under the slices.
  */
 export declare class HelixDonutChart extends HelixHeadlessDonutChart {

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

@@ -195,6 +195,53 @@ overflow-y: auto;
 padding-inline: var(--helix-size-focus-reach);
 }
 
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+position: absolute;
+inset-block-start: calc(
+var(--drawer-padding-block-start, var(--drawer-padding, var(--helix-space-2xl))) +
+(var(--helix-text-lg) * var(--helix-leading-tight) - var(--helix-size-control-sm)) /
+2
+);
+inset-inline-end: var(--helix-space-md);
+block-size: var(--helix-size-control-sm);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--helix-size-control-sm);
+place-content: center;
+place-items: center;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon-sm);
+inline-size: var(--helix-size-icon-sm);
+}
+
+[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);
+}
+
+:host([dismissible]) ::slotted([slot="header"]) {
+padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -15,9 +15,14 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/drawer
  *
  * @slot - The drawer's content.
+ * @slot dismiss-icon - Replaces the glyph inside the close control.
+ * @slot footer - Content pinned below the scrolling area, such as the drawer's actions.
  * @slot header - Content pinned above the scrolling area.
  *
  * @csspart content - The scrolling content region.
+ * @csspart dismiss - The close control, drawn when the drawer is `dismissible`, in the corner by the title.
+ * @csspart dismiss-mark - The glyph on the close control, where none is slotted.
+ * @csspart footer - The footer region.
  * @csspart header - The header region.
  * @csspart panel - The sliding panel.
  *

package/dist/drilldown/item/drilldown-item.css.js

@@ -6,17 +6,17 @@ display: block;
 [part="item"] {
 all: unset;
 align-items: center;
-block-size: var(--helix-size-control-tight);
+block-size: var(--drilldown-item-block-size, var(--helix-size-control-tight));
 box-sizing: border-box;
 inline-size: 100%;
-color: var(--helix-color-foreground);
+color: var(--drilldown-item-color, var(--helix-color-foreground));
 cursor: pointer;
 display: flex;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--drilldown-item-font-size, var(--helix-text-sm));
 gap: var(--helix-space-xs);
 
-padding-inline: var(--helix-space-sm);
+padding-inline: var(--drilldown-item-padding-inline, var(--helix-space-sm));
 user-select: none;
 }
 
@@ -30,7 +30,7 @@ white-space: nowrap;
 [part="mark"],
 slot[name="chevron"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
-color: var(--helix-color-foreground-subtle);
+color: var(--drilldown-item-mark-color, var(--helix-color-foreground-subtle));
 flex: none;
 inline-size: var(--helix-size-icon-tight);
 }
@@ -50,5 +50,5 @@ outline-offset: calc(var(--helix-size-focus-offset) * -1);
 
 :host([disabled]) [part="item"] {
 cursor: default;
-opacity: 0.5;
+opacity: var(--drilldown-item-disabled-opacity, 0.5);
 }`);

package/dist/drilldown/item/drilldown-item.d.ts

@@ -12,7 +12,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Panel item, Drill row
  * @documentation https://fusion.dev/helix/components/drilldown
  *
+ * @cssproperty --drilldown-item-block-size - Height of a row.
+ * @cssproperty --drilldown-item-color - Color of a row's words.
+ * @cssproperty --drilldown-item-disabled-opacity - How faint a disabled row is drawn.
+ * @cssproperty --drilldown-item-font-size - Size of a row's words.
  * @cssproperty --drilldown-item-hover-color - Fill when a row is under the pointer.
+ * @cssproperty --drilldown-item-mark-color - Color of the caret on a row that opens a page.
+ * @cssproperty --drilldown-item-padding-inline - Space at either end of a row.
  */
 export declare class HelixDrilldownItem extends HelixHeadlessDrilldownItem {
     static styles: CSSResultGroup;