@fusion.dev/helix 0.150.0 → 0.152.0

package/types/vue.d.ts

@@ -165,6 +165,8 @@ import type {
   HelixBeforeOpenEvent,
   HelixDismissEvent,
   HelixScrolledEvent,
+  HelixReadingChangeEvent,
+  HelixReadingPressEvent,
   HelixAuraFallbackEvent,
   HelixBeforeChangeEvent,
   HelixPressEvent,
@@ -648,6 +650,22 @@ the wordmark and the actions happen to measure.
 takes a search field or a breadcrumb trail as readily as a `Navigation`, so
 the property carries the part's name, `content`. */
   contentAlign?: (HelixAppHeader["contentAlign"]) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  "fold-below"?: (HelixAppHeader["foldBelow"] | `${number}`) | undefined;
+  /** The width of the bar, in pixels, below which the middle region folds behind
+a toggle. Unset, it never folds. */
+  foldBelow?: (HelixAppHeader["foldBelow"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  "hide-on-scroll"?: (HelixAppHeader["hideOnScroll"]) | undefined;
+  /** Hides the bar as the page scrolls down past it, and shows it again as the
+page scrolls up. */
+  hideOnScroll?: (HelixAppHeader["hideOnScroll"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  "menu-label"?: (HelixAppHeader["menuLabel"]) | undefined;
+  /** The name of the toggle that opens a folded middle region. */
+  menuLabel?: (HelixAppHeader["menuLabel"]) | undefined;
   /** The id of the element whose scrolling lifts the bar, for an app shell that
 scrolls a container instead of the window. Unset is the window. */
   scroller?: (HelixAppHeader["scroller"]) | undefined;
@@ -658,6 +676,18 @@ export type HelixAppHeaderVueEvents = {
   "helix-scrolled": HelixAppHeaderHelixScrolledElementEvent;
 };
 
+/** `HelixAreaChart` component event */
+export type HelixAreaChartElementEvent<E = Event> = TypedEvent<
+  HelixAreaChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixAreaChartHelixReadingChangeElementEvent =
+  HelixAreaChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixAreaChartHelixReadingPressElementEvent =
+  HelixAreaChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixAreaChartVueProps = {
   /** The id of the table to read.
 
@@ -744,9 +774,26 @@ locale, and `{shares}` each part's share, listed as the locale lists. */
   "total-label"?: (HelixAreaChart["totalLabel"]) | undefined;
   /** The name for the sum of the parts, shown in the tooltip and the summary. */
   totalLabel?: (HelixAreaChart["totalLabel"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules: amounts, or percentages under `share`.
+
+Absent draws none: bands read as a composition need no numbers beside
+them, and the tooltip and the table hold every reading. */
+  "value-axis"?: (HelixAreaChart["valueAxis"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules: amounts, or percentages under `share`.
+
+Absent draws none: bands read as a composition need no numbers beside
+them, and the tooltip and the table hold every reading. */
+  valueAxis?: (HelixAreaChart["valueAxis"]) | undefined;
 };
 
-export type HelixAreaChartVueEvents = {};
+export type HelixAreaChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixAreaChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixAreaChartHelixReadingPressElementEvent;
+};
 
 /** `HelixAura` component event */
 export type HelixAuraElementEvent<E = Event> = TypedEvent<HelixAura, E>;
@@ -1064,6 +1111,15 @@ is showing a count must not lose the count for being handed one. */
 
 export type HelixBadgeVueEvents = {};
 
+/** `HelixBarChart` component event */
+export type HelixBarChartElementEvent<E = Event> = TypedEvent<HelixBarChart, E>;
+/** `helix-reading-change` event type */
+export type HelixBarChartHelixReadingChangeElementEvent =
+  HelixBarChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixBarChartHelixReadingPressElementEvent =
+  HelixBarChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixBarChartVueProps = {
   /** How strongly the columns are drawn.
 
@@ -1315,9 +1371,28 @@ the reading as the table writes it. */
 `{readings}` each series' highest reading: the series, the category and
 the reading as the table writes it. */
   summaryLabel?: (HelixBarChart["summaryLabel"]) | undefined;
+  /** Draws the numbers of the scale the bars are measured on, the `axis` part,
+at the levels `gridlines` rules: down the side of columns, and along the
+bottom of bars under `orientation="horizontal"`.
+
+Absent draws none with one scale, since bars compared with each other need
+no numbers. With `secondary` both scales are drawn whatever this says. */
+  "value-axis"?: (HelixBarChart["valueAxis"]) | undefined;
+  /** Draws the numbers of the scale the bars are measured on, the `axis` part,
+at the levels `gridlines` rules: down the side of columns, and along the
+bottom of bars under `orientation="horizontal"`.
+
+Absent draws none with one scale, since bars compared with each other need
+no numbers. With `secondary` both scales are drawn whatever this says. */
+  valueAxis?: (HelixBarChart["valueAxis"]) | undefined;
 };
 
-export type HelixBarChartVueEvents = {};
+export type HelixBarChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixBarChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixBarChartHelixReadingPressElementEvent;
+};
 
 export type HelixBlockquoteVueProps = {
   /** Who said it, and where, as words, such as "Maria Lopez, operations
@@ -2999,8 +3074,21 @@ export type HelixChatComposerHelixTypingElementEvent =
 export type HelixChatComposerVueProps = {
   /** The field's name, read by screen readers. */
   label?: (HelixChatComposer["label"]) | undefined;
+  /** The most characters a draft can have. The field stops taking more. */
+  maxlength?: (HelixChatComposer["maxLength"] | `${number}`) | undefined;
+  /** The most characters a draft can have. The field stops taking more. */
+  maxLength?: (HelixChatComposer["maxLength"]) | undefined;
+  /** The fewest characters a draft can have, once the reader has written in
+the field, as on a `<textarea>`. */
+  minlength?: (HelixChatComposer["minLength"] | `${number}`) | undefined;
+  /** The fewest characters a draft can have, once the reader has written in
+the field, as on a `<textarea>`. */
+  minLength?: (HelixChatComposer["minLength"]) | undefined;
   /** Placeholder text shown in an empty field. */
   placeholder?: (HelixChatComposer["placeholder"]) | undefined;
+  /** Whether the form needs a draft to submit. An empty draft never sends,
+required or not. */
+  required?: (HelixChatComposer["required"]) | undefined;
   /** How many rows the field opens at.
 
 It grows from there. */
@@ -5299,6 +5387,20 @@ rows are chosen, written in the locale, and a language that needs plural
 forms writes them: `{count, plural, one {# wybrany} few {# wybrane} many
 {# wybranych} other {# wybranego}}`. */
   selectedLabel?: (HelixDataTable["selectedLabel"]) | undefined;
+  /** What a key or a press on a row does to the rows already selected, in a
+`selectable` table. `toggle`, the default, keeps them: Space adds or takes
+out the row. `replace` selects the row alone, as a file list does: Down and
+Up carry the selection with them, and a press on a row selects it. Control
+or Command with a press or Space adds or takes out one row, and with a move
+goes without selecting. The checkboxes add or take out one row either way. */
+  "selection-behavior"?: (HelixDataTable["selectionBehavior"]) | undefined;
+  /** What a key or a press on a row does to the rows already selected, in a
+`selectable` table. `toggle`, the default, keeps them: Space adds or takes
+out the row. `replace` selects the row alone, as a file list does: Down and
+Up carry the selection with them, and a press on a row selects it. Control
+or Command with a press or Space adds or takes out one row, and with a move
+goes without selecting. The checkboxes add or take out one row either way. */
+  selectionBehavior?: (HelixDataTable["selectionBehavior"]) | undefined;
   /** The name of a row's checkbox. `{row}` is replaced with the row's value in
 the first column that has a field, or with its key. */
   "select-row-label"?: (HelixDataTable["selectRowLabel"]) | undefined;
@@ -6336,8 +6438,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedby?: (HelixDialog["closedBy"]) | undefined;
   /** Which close requests the browser handles on its own.
 
@@ -6347,8 +6455,14 @@ first, `handleCancel` prevents it, and `requestOpen` decides. So
 `closedby="any"` gains light dismiss without giving up the refusal, which is
 the property this component exists to keep.
 
+The press on the backdrop that this element handles itself follows it too:
+`closerequest` and `none` leave the dialog open on that press, as the
+platform does, and `none` also keeps it open on Escape in a browser without
+`closedby`.
+
 Absent by default, which is the platform's `auto` and this library's rule
-that a resting value is an attribute's absence. */
+that a resting value is an attribute's absence. Absent, a press on the
+backdrop closes the dialog. */
   closedBy?: (HelixDialog["closedBy"]) | undefined;
   /** Draws a control that closes the dialog, in the corner where the title is.
 
@@ -6418,11 +6532,7 @@ short length of line, `--divider-content-offset`, kept before or after it.
 A divider with nothing set into it is one line whatever this says. */
   contentPlacement?: (HelixDivider["contentPlacement"]) | undefined;
   /** Whether screen readers announce the line as a separator, which they now do
-by default.
-
-It dates from when the line was decorative by default. It is still read,
-and it wins over `decorative`, so a divider written with it stays a
-separator. */
+by default. */
   announced?: (HelixDivider["announced"]) | undefined;
   /** Takes the line out of the accessibility tree, for a rule that separates
 nothing: one under a heading, or between the facts of a byline.
@@ -6685,6 +6795,12 @@ lost its focus trap because a consumer forgot a word would be worse than an
 attribute on the host, and nothing selects on it: the scrim is rendered or
 not, rather than shown or hidden by CSS. */
   modal?: (HelixDrawer["modal"]) | undefined;
+  /** Stops Escape, a press outside, and a swipe from closing the drawer, for a
+drawer that has to be answered.
+
+The close control and `close()` still close it, as on `Dialog`: a panel
+with no way out at all is a trap. */
+  persistent?: (HelixDrawer["persistent"]) | undefined;
   /** Which edge the drawer comes from.
 
 Unset is `end`, and it stays unset rather than being written down: a
@@ -9242,6 +9358,18 @@ export type HelixLightboxVueEvents = {
   "helix-before-open": HelixLightboxHelixBeforeOpenElementEvent;
 };
 
+/** `HelixLineChart` component event */
+export type HelixLineChartElementEvent<E = Event> = TypedEvent<
+  HelixLineChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixLineChartHelixReadingChangeElementEvent =
+  HelixLineChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixLineChartHelixReadingPressElementEvent =
+  HelixLineChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixLineChartVueProps = {
   /** How strongly the lines and their washes are drawn.
 
@@ -9419,6 +9547,20 @@ masked with one disc per series and every stroke stops at its own ring's
 inner edge. `mask-composite: intersect` is what makes N holes out of N
 layers; a single `mask-image` would only ever cut the last one. */
   terminus?: (HelixLineChart["terminus"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules, so a reading can be measured off the drawing as well
+as read from the tooltip.
+
+Absent draws none: a line read for its shape needs no numbers beside it,
+and the tooltip and the table hold every reading. */
+  "value-axis"?: (HelixLineChart["valueAxis"]) | undefined;
+  /** Draws the scale's numbers beside the plot, the `axis` part, at the levels
+`gridlines` rules, so a reading can be measured off the drawing as well
+as read from the tooltip.
+
+Absent draws none: a line read for its shape needs no numbers beside it,
+and the tooltip and the table hold every reading. */
+  valueAxis?: (HelixLineChart["valueAxis"]) | undefined;
   /** Whether the range always includes zero.
 
 Absent measures from the data's own extent, which is what a line is for.
@@ -9428,7 +9570,12 @@ near the top of the box. */
   zero?: (HelixLineChart["zero"]) | undefined;
 };
 
-export type HelixLineChartVueEvents = {};
+export type HelixLineChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixLineChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixLineChartHelixReadingPressElementEvent;
+};
 
 /** `HelixListItem` component event */
 export type HelixListItemElementEvent<E = Event> = TypedEvent<HelixListItem, E>;
@@ -13829,6 +13976,18 @@ export type HelixSandboxToolbarVueProps = {};
 
 export type HelixSandboxToolbarVueEvents = {};
 
+/** `HelixScatterChart` component event */
+export type HelixScatterChartElementEvent<E = Event> = TypedEvent<
+  HelixScatterChart,
+  E
+>;
+/** `helix-reading-change` event type */
+export type HelixScatterChartHelixReadingChangeElementEvent =
+  HelixScatterChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixScatterChartHelixReadingPressElementEvent =
+  HelixScatterChartElementEvent<HelixReadingPressEvent>;
+
 export type HelixScatterChartVueProps = {
   /** The id of the table to read.
 
@@ -13927,7 +14086,12 @@ gives each series' correlation, which says how near the points are to it. */
   trend?: (HelixScatterChart["trend"]) | undefined;
 };
 
-export type HelixScatterChartVueEvents = {};
+export type HelixScatterChartVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixScatterChartHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixScatterChartHelixReadingPressElementEvent;
+};
 
 /** `HelixScrollArea` component event */
 export type HelixScrollAreaElementEvent<E = Event> = TypedEvent<
@@ -14924,6 +15088,9 @@ Reading gives where it is; writing declares it the consumer's, and
 `default-position` seeds one this element owns. The same accessor pair
 `Pagination.page` and the calendar's `month` carry. */
   position?: (HelixSplitter["position"]) | undefined;
+  /** The pane that keeps its size when the splitter's own size changes. The
+other pane takes all of the change. Unset, both keep their share. */
+  primary?: (HelixSplitter["primary"]) | undefined;
   /** Where a dragged divider snaps, comma separated, as Web Awesome's split
 panel does: a bare number is a percentage and a length such as `240px` is
 measured along the splitter, so `snap="25, 50, 75"` or `snap="240px, 50"`.
@@ -15662,6 +15829,13 @@ export type HelixTableVueEvents = {
 };
 
 export type HelixTableRowVueProps = {
+  /** Takes the row out of the table's selection and out of its link: the row's
+checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
+pass over it, and a press does not follow `href`. A row already selected
+stays selected. A screen reader hears it as unavailable, and in a `grid`
+table the arrow keys still reach it, as a disabled cell in a grid is
+reached. */
+  disabled?: (HelixTableRow["disabled"]) | undefined;
   /** The URL a press on the row follows, which makes the whole row a link.
 Empty, the default, leaves presses to the row's cells. */
   href?: (HelixTableRow["href"]) | undefined;
@@ -18409,6 +18583,14 @@ regardless, because a reader who stopped it is deciding what to do next. */
   loadingLabel?: (HelixVideo["loadingLabel"]) | undefined;
   /** Whether the video starts again at the end. */
   loop?: (HelixVideo["loop"]) | undefined;
+  /** The title the device's own media controls show while the video plays,
+such as on a lock screen. Empty, the default, shows `label`. A playlist
+writes the current entry's name here. */
+  "media-title"?: (HelixVideo["mediaTitle"]) | undefined;
+  /** The title the device's own media controls show while the video plays,
+such as on a lock screen. Empty, the default, shows `label`. A playlist
+writes the current entry's name here. */
+  mediaTitle?: (HelixVideo["mediaTitle"]) | undefined;
   /** What the button that opens `overflow-controls` is called. */
   "more-label"?: (HelixVideo["moreLabel"]) | undefined;
   /** What the button that opens `overflow-controls` is called. */
@@ -18667,6 +18849,12 @@ export type HelixVirtualListVueProps = {
 items out as a grid of that many equal columns, windowed a line at a
 time, with Left and Right moving along a line. */
   columns?: (HelixVirtualList["columns"]) | undefined;
+  /** The text of the row shown when there are no items and none are loading,
+where the `empty` slot is empty. Empty, the default, shows no row. */
+  "empty-label"?: (HelixVirtualList["emptyLabel"]) | undefined;
+  /** The text of the row shown when there are no items and none are loading,
+where the `empty` slot is empty. Empty, the default, shows no row. */
+  emptyLabel?: (HelixVirtualList["emptyLabel"]) | undefined;
   /** The height of one row, in pixels, used to find the row at a scroll offset.
 
 An estimate rather than a measurement while `measured` is off, which is
@@ -18824,6 +19012,8 @@ export type CustomCssProperties = {
   "--area-chart-width"?: (string) | undefined;
   /** Thickness of a band's top edge. Area Chart, Line Chart, and Bar Chart's `lines` all read this one property. `--area-chart-width` overrides it here. */
   "--chart-stroke"?: (string) | undefined;
+  /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
+  "--area-chart-axis"?: (string) | undefined;
   /** The bright stop of the ramp. Defaults to `--helix-color-primary`. */
   "--aura-glow"?: (string) | undefined;
   /** The page the field fades into. Defaults to `--helix-color-background`. */
@@ -19834,6 +20024,8 @@ export type CustomCssProperties = {
   "--chart-terminus-x"?: (string) | undefined;
   /** Where a series' last reading sits vertically, as a percentage. Written by the component. */
   "--chart-terminus-y"?: (string) | undefined;
+  /** The width of the axis, in `ch`, set from the widest number on it. Written by the component on the axis. */
+  "--line-chart-axis"?: (string) | undefined;
   /** The fill behind a row that is `current`. */
   "--list-item-current-background-color"?: (string) | undefined;
   /** The opacity of a `disabled` row. */
@@ -20756,6 +20948,8 @@ export type CustomCssProperties = {
   "--table-grip-color"?: (string) | undefined;
   /** The opacity of a row's grip while a sort decides the order. */
   "--table-grip-disabled-opacity"?: (string) | undefined;
+  /** The opacity of the cells of a `disabled` row. */
+  "--table-row-disabled-opacity"?: (string) | undefined;
   /** The wash across the cells of a row with `href` under the pointer. */
   "--table-row-hover-background-color"?: (string) | undefined;
   /** The space between the tab row and the panel's content. */
@@ -21132,6 +21326,10 @@ export type CustomCssProperties = {
   "--video-progress"?: (string) | undefined;
   /** How tall the scrolling box is. */
   "--virtual-list-block-size"?: (string) | undefined;
+  /** The color of the text in the row shown when there are no items. */
+  "--virtual-list-empty-color"?: (string) | undefined;
+  /** The space around the text in the row shown when there are no items. */
+  "--virtual-list-empty-padding"?: (string) | undefined;
   /** The color of the text in the row drawn while `loading` is set. */
   "--virtual-list-loading-color"?: (string) | undefined;
   /** The space around the text in the row drawn while `loading` is set. */
@@ -21798,7 +21996,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixSandboxPreviewVueProps,
     HelixSandboxPreviewVueEvents
   >;
-  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The event carries the pane's 'name', so one sandbox can hold several panes. 'html' sets the preview's markup and 'css' sets its stylesheet. The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width. */
+  /** A source pane dispatches 'helix-before-edit', which bubbles, and the sandbox passes the value to the preview slotted into it. The source pane and the preview do not reference each other, so you can replace either one or use it alone.  The event carries the pane's 'name', so one sandbox can hold several panes. 'html' sets the preview's markup and 'css' sets its stylesheet. The sandbox ignores a pane with any other name, so that pane can show content without changing the preview.  **The dividers are two nested 'helix-splitter' elements**, which handle the pointer, the keyboard, and the corner. The inner splitter holds the panes and the outer one holds the panel, so the panel spans the full width.  On a focused divider, the arrow keys move it, and 'Home' and 'End' move it to its ends. 'Enter' on the panes divider shuts the lead pane, and pressed again it opens the pane where it was. 'Enter' on the panel divider shuts the panel to 'panel-collapsed-size', and pressed again it opens the panel to its last height. */
   "helix-sandbox": DefineCustomElement<
     HelixSandbox,
     HelixSandboxVueProps,
@@ -21912,6 +22110,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixStepsVueProps,
     HelixStepsVueEvents
   >;
+  /** A step draws its mark, its name as a 'helix-button', and the line that joins it to the steps either side. The mark is a tick on a finished step, a dot on the current one, and an empty ring on one nobody has reached. Where the list sets 'variant="numeric"', it is the step's number.  Down a column, the current step opens to show what is in its 'content' slot, and the others collapse it. A collapsed stage's content is hidden, so Tab and a screen reader pass over it as well. */
   "helix-step": DefineCustomElement<
     HelixStep,
     HelixStepVueProps,

package/types/words.d.ts

@@ -832,6 +832,14 @@ declare module '@fusion.dev/helix-core' {
        */
       zoomOutLabel: Message
     }
+    'helix-app-header': {
+      /**
+       * The name of the toggle that opens a folded middle region.
+       *
+       * English: `Menu`
+       */
+      menuLabel: Message
+    }
     'helix-avatar-group': {
       /**
        * What a screen reader is told the count is, with `{count}` for the number,