@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -87,6 +87,7 @@ cursor: pointer;
 }
 
 [part~="cell"]:focus-visible,
+[part="more-cell"]:focus-visible,
 [part~="select"]:focus-visible,
 [part="select-all"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
@@ -142,6 +143,75 @@ margin-inline-start: auto;
 grid-column: 1 / -1;
 }
 
+:host([child-field]) [part~="cell-header"] {
+--_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))
+);
+}
+
+:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {
+padding-inline-start: calc(
+(var(--data-table-level, 1) - 1) *
+var(--data-table-indent, var(--_data-table-gutter)) +
+var(--_data-table-gutter)
+);
+}
+
+[part~="toggle"] {
+align-items: center;
+background: none;
+block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
+border: none;
+color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));
+justify-content: center;
+margin-inline-end: var(--helix-space-2xs);
+padding: 0;
+vertical-align: middle;
+}
+
+[part="toggle-mark"] {
+block-size: 100%;
+inline-size: 100%;
+}
+
+[part="more"] {
+display: contents;
+}
+
+[part="more-cell"] {
+display: flex;
+grid-column: 1 / -1;
+padding-block: var(--data-table-padding-block, var(--helix-space-sm));
+}
+
+[part="more-button"] {
+background: none;
+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);
+font-size: var(--data-table-text, var(--helix-text-sm));
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-sm);
+}
+
+[part="more-button"]:hover {
+background-color: var(
+--data-table-more-hover-background-color,
+var(--helix-color-surface-raised)
+);
+}
+
 :host([windowed]) [part="table"] {
 block-size: var(--data-table-block-size, 24em);
 overflow-y: auto;

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

@@ -44,12 +44,18 @@ import '../../table/index.js';
  * @cssproperty --data-table-heading-background-color - The fill behind a heading while `windowed`.
  * 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/description-list/item/description-list-item.css.js

@@ -24,6 +24,17 @@ overflow-wrap: anywhere;
 text-align: var(--_description-list-value-align, start);
 }
 
+::slotted(dd) {
+color: var(--helix-color-foreground);
+font-variant-numeric: var(--_description-list-value-figures, normal);
+grid-column: -2 / -1;
+justify-self: var(--_description-list-value-align, stretch);
+margin: 0;
+min-inline-size: 0;
+overflow-wrap: anywhere;
+text-align: var(--_description-list-value-align, start);
+}
+
 @media print {
 :host {
 break-inside: avoid;

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;
 }
 
@@ -27,9 +27,10 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-[part="mark"] {
+[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);
 }
@@ -49,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;

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

@@ -11,8 +11,9 @@ overflow: hidden;
 [part="header"] {
 align-items: center;
 
-block-size: var(--helix-size-control);
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+block-size: var(--drilldown-header-block-size, var(--helix-size-control));
+border-block-end: var(--helix-border-thin) solid
+var(--drilldown-header-border-color, var(--helix-color-border));
 display: flex;
 gap: var(--helix-space-2xs);
 padding-inline: var(--helix-space-2xs);
@@ -24,20 +25,24 @@ align-items: center;
 block-size: var(--helix-size-control-tight);
 border-radius: var(--helix-radii-sm);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--drilldown-back-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: flex;
 inline-size: var(--helix-size-control-tight);
 justify-content: center;
 }
 
-[part="back"] svg {
+[part="back"] svg,
+slot[name="back-icon"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);
 }
 
 [part="back"]:hover {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+background-color: var(
+--drilldown-back-hover-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
 color: var(--helix-color-foreground);
 }
 
@@ -47,38 +52,47 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="title"] {
-color: var(--helix-color-foreground);
+color: var(--drilldown-title-color, var(--helix-color-foreground));
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
+font-size: var(--drilldown-title-font-size, var(--helix-text-sm));
+font-weight: var(--drilldown-title-font-weight, var(--helix-weight-medium));
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
 
 [part="page"] {
-padding-block: var(--helix-space-2xs);
+
+--_drilldown-sign: 1;
+
+padding-block: var(--drilldown-page-padding-block, var(--helix-space-2xs));
+}
+
+:host(:dir(rtl)) [part="page"] {
+--_drilldown-sign: -1;
 }
 
 :host([data-direction="forward"]) [part="page"] {
-animation: drilldown-forward var(--helix-duration-normal) var(--helix-easing-decelerate);
+animation: drilldown-forward var(--drilldown-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host([data-direction="back"]) [part="page"] {
-animation: drilldown-back var(--helix-duration-normal) var(--helix-easing-decelerate);
+animation: drilldown-back var(--drilldown-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 @keyframes drilldown-forward {
 from {
 opacity: 0;
-translate: 12% 0;
+translate: calc(var(--drilldown-travel, 12%) * var(--_drilldown-sign, 1)) 0;
 }
 }
 
 @keyframes drilldown-back {
 from {
 opacity: 0;
-translate: -12% 0;
+translate: calc(var(--drilldown-travel, 12%) * var(--_drilldown-sign, 1) * -1) 0;
 }
 }
 

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

@@ -17,8 +17,18 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Panel, Nested list, Drill-in
  * @documentation https://fusion.dev/helix/components/drilldown
  *
+ * @cssproperty --drilldown-back-color - Color of the back button's icon.
+ * @cssproperty --drilldown-back-hover-background-color - Fill of the back button under the pointer.
  * @cssproperty --drilldown-background-color - Fill behind the pages.
+ * @cssproperty --drilldown-duration - How long a page takes to slide in.
+ * @cssproperty --drilldown-header-block-size - Height of the bar above a page.
+ * @cssproperty --drilldown-header-border-color - Color of the rule under the bar above a page.
  * @cssproperty --drilldown-inline-size - Width of the region.
+ * @cssproperty --drilldown-page-padding-block - Space above and below a page's rows.
+ * @cssproperty --drilldown-title-color - Color of the page's name.
+ * @cssproperty --drilldown-title-font-size - Size of the page's name.
+ * @cssproperty --drilldown-title-font-weight - Weight of the page's name.
+ * @cssproperty --drilldown-travel - How far a page slides as it arrives, along the line of text.
  */
 export declare class HelixDrilldown extends HelixHeadlessDrilldown {
     static styles: CSSResultGroup;

package/dist/element-events.generated.js

@@ -3,7 +3,9 @@ registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
+    'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
+    'helix-button': ['helix-press'],
     'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',
@@ -22,7 +24,7 @@ registerElementEvents({
     ],
     'helix-carousel': ['helix-activate', 'helix-select'],
     'helix-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
-    'helix-chat-composer': ['helix-send', 'input'],
+    'helix-chat-composer': ['helix-send', 'helix-typing', 'input'],
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -49,6 +51,7 @@ registerElementEvents({
         'helix-before-open',
         'helix-create',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -56,14 +59,17 @@ registerElementEvents({
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'helix-select',
         'toggle',
     ],
-    'helix-copy-button': ['helix-copy', 'helix-copy-error'],
+    'helix-copy-button': ['helix-copy', 'helix-copy-error', 'helix-press'],
     'helix-data-table': [
         'helix-activate',
+        'helix-expand',
         'helix-filter',
         'helix-filtered',
+        'helix-load-more',
         'helix-navigate',
         'helix-reorder',
         'helix-reordered',
@@ -112,6 +118,7 @@ registerElementEvents({
     ],
     'helix-heatmap': ['helix-resize'],
     'helix-icon': ['error', 'load'],
+    'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-kbd': ['helix-shortcut'],
@@ -124,7 +131,9 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
-    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-list-item': ['helix-action'],
+    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'helix-load-more', 'input'],
     'helix-map': [
         'change',
         'helix-activate',
@@ -137,6 +146,7 @@ registerElementEvents({
         'helix-map-rotate',
         'helix-map-tilt',
         'helix-map-zoom',
+        'helix-toggle',
     ],
     'helix-map-area': ['helix-map-part-change'],
     'helix-map-buildings': ['helix-map-part-change'],
@@ -153,9 +163,18 @@ registerElementEvents({
     'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-notification': ['helix-dismiss', 'helix-read'],
     'helix-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-notifications': ['helix-dismiss', 'helix-read'],
+    'helix-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
     'helix-number-input': ['change', 'helix-before-change', 'input'],
-    'helix-object-inspector': ['helix-copy'],
+    'helix-object-inspector': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-close',
+        'helix-before-open',
+        'helix-copy',
+        'helix-filter',
+        'helix-filtered',
+        'toggle',
+    ],
     'helix-option': ['helix-select'],
     'helix-outline': ['helix-activate'],
     'helix-pagination': ['helix-activate', 'helix-navigate'],
@@ -165,23 +184,29 @@ registerElementEvents({
     'helix-qr-code': ['error'],
     'helix-radio': ['helix-select'],
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'helix-preview', 'input'],
     'helix-sandbox': [
         'helix-before-edit',
         'helix-before-panel-resize',
         'helix-before-split',
         'helix-caret',
         'helix-console',
+        'helix-edit',
+        'helix-panel-resize',
         'helix-resize',
+        'helix-split',
     ],
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
-    'helix-sandbox-source': ['helix-before-edit', 'helix-caret'],
+    'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
+    'helix-sandbox-terminal': ['change', 'helix-before-change'],
+    'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [
         'change',
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
+        'helix-load-more',
         'input',
         'toggle',
     ],
@@ -198,12 +223,12 @@ registerElementEvents({
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-select'],
-    'helix-table': ['helix-sort'],
-    'helix-table-column': ['helix-before-resize'],
+    'helix-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
     'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
-    'helix-textarea': ['change', 'helix-before-change', 'input'],
+    'helix-textarea': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-time-input': [
         'change',
         'helix-before-change',
@@ -225,13 +250,47 @@ registerElementEvents({
         'helix-before-open',
         'helix-complete',
         'helix-tour-ask',
+        'helix-tour-status',
         'toggle',
     ],
     'helix-tour-stop': ['helix-tour-ask'],
     'helix-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
-    'helix-tree-item': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-video': ['ended', 'helix-next', 'helix-previous', 'pause', 'play'],
-    'helix-video-playlist': ['helix-activate', 'helix-before-activate'],
+    'helix-tree-item': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-load',
+        'helix-select',
+        'toggle',
+    ],
+    'helix-video': [
+        'abort',
+        'canplay',
+        'canplaythrough',
+        'durationchange',
+        'emptied',
+        'ended',
+        'error',
+        'helix-next',
+        'helix-previous',
+        'loadeddata',
+        'loadedmetadata',
+        'loadstart',
+        'pause',
+        'play',
+        'playing',
+        'progress',
+        'ratechange',
+        'resize',
+        'seeked',
+        'seeking',
+        'stalled',
+        'suspend',
+        'timeupdate',
+        'volumechange',
+        'waiting',
+    ],
+    'helix-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
     'helix-video-playlist-item': ['helix-select'],
     'helix-video-playlist-menu': ['helix-select'],
+    'helix-virtual-list': ['change', 'helix-before-change', 'helix-load-more', 'helix-range-change'],
 });