@fusion.dev/helix 0.37.0 → 0.39.0

package/types/vue.d.ts

@@ -160,7 +160,7 @@ import type {
   HelixResizeEvent,
   HelixShortcutEvent,
   HelixReadEvent,
-  HelixBeforeActivateEvent,
+  HelixActivateEvent,
   HelixCompleteEvent,
   HelixConsoleEvent,
   HelixBeforeEditEvent,
@@ -169,7 +169,7 @@ import type {
   HelixCaretEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
-  HelixActivateEvent,
+  HelixBeforeActivateEvent,
   HelixTourAskEvent,
   HelixNextEvent,
   HelixPreviousEvent,
@@ -2326,7 +2326,16 @@ toggles rather than replaces, and the arrows move without choosing. What
 this adds is the tags, and keeping the panel open between picks.
 
 A comma is therefore not available inside an option's value, which is the
-listbox's contract and not this element's to change. */
+listbox's contract and not this element's to change.
+
+**The list is told, and the field is not.** `aria-multiselectable` belongs
+to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
+ARIA 1.2; the list sets it on itself through `ElementInternals`, where a
+reader on the field hears it through `aria-controls`. This element wrote it
+onto its own `role="combobox"` input as well, which an audit reports as a
+property the role does not support and no spec here ever asserted: the one
+that covers this says in as many words that telling the list is what this
+element is responsible for. */
   multiple?: (HelixCombobox["multiple"]) | undefined;
   /** Text shown while nothing has been chosen. */
   placeholder?: (HelixCombobox["placeholder"]) | undefined;
@@ -3292,10 +3301,11 @@ export type HelixDatePickerVueEvents = {
 };
 
 export type HelixDescriptionListItemVueProps = {
-  /** What the value is, for the common case of plain text.
+  /** What the value is called, for the common case of plain text.
 
 The fallback of the `label` slot, so slotted content replaces it rather than
-appearing beside it. */
+appearing beside it. The value itself is the default slot: it is the half
+that varies and is often more than text. */
   label?: (HelixDescriptionListItem["label"]) | undefined;
 };
 
@@ -3552,12 +3562,12 @@ export type HelixDonutChartVueEvents = {};
 
 /** `HelixDrawer` component event */
 export type HelixDrawerElementEvent<E = Event> = TypedEvent<HelixDrawer, E>;
-/** `helix-before-open` event type */
-export type HelixDrawerHelixBeforeOpenElementEvent =
-  HelixDrawerElementEvent<HelixBeforeOpenEvent>;
 /** `helix-before-close` event type */
 export type HelixDrawerHelixBeforeCloseElementEvent =
   HelixDrawerElementEvent<HelixBeforeCloseEvent>;
+/** `helix-before-open` event type */
+export type HelixDrawerHelixBeforeOpenElementEvent =
+  HelixDrawerElementEvent<HelixBeforeOpenEvent>;
 
 export type HelixDrawerVueProps = {
   /** Whether the panel is glass rather than opaque.
@@ -3653,12 +3663,12 @@ survives to it and a consumer reading one back gets what they wrote. */
 };
 
 export type HelixDrawerVueEvents = {
-  /** Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves. */
-  "helix-before-open": HelixDrawerHelixBeforeOpenElementEvent;
   /** Relayed, because the platform's own does not escape. */
   close: HelixDrawerElementEvent;
   /** Fired before the panel closes, and cancelable. */
   "helix-before-close": HelixDrawerHelixBeforeCloseElementEvent;
+  /** Fired before the panel opens. Cancelable: refusing it takes the decision and nothing moves. */
+  "helix-before-open": HelixDrawerHelixBeforeOpenElementEvent;
   /** Says the state moved, carrying `newState` and `oldState`. */
   toggle: HelixDrawerElementEvent;
 };
@@ -4245,9 +4255,15 @@ shadow root names a table in that root rather than in the document. A
 Absent falls back to the table's own caption, which is usually the right
 words and is already written. */
   label?: (HelixHeatmap["label"]) | undefined;
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   "empty-text"?: (HelixHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it. */
+  /** Shown when the table has no readings in it.
+
+Never shown while the table cannot be read at all, which is a server render
+and the hydrating one after it: see `sourceKnown`. */
   emptyText?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels, for the same reason `min-cell` is a
 number. */
@@ -5302,8 +5318,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   "full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
   /** The width, in pixels, under which a card becomes a band. Zero never does.
 
@@ -5318,8 +5342,16 @@ fits.
 a band is not a question of paint: a band is not placed against the trigger,
 so the controller has to be told not to measure, and that decision is here
 whatever the stylesheet says. Writing the width in both places would be one
-number in two languages, drifting the first time either moved. This sets
-`data-narrow` on the host and the stylesheet arranges itself off that. */
+number in two languages, drifting the first time either moved. This records
+`:state(narrow)` on the host and the stylesheet arranges itself off that.
+
+**A custom state and never `data-narrow`, which is what it was.** The width
+is read in `connectedCallback`, so on a phone this is true on the very first
+update: an attribute written there is markup a consumer's server never sent,
+which React reports as a mismatch and answers by rebuilding the subtree. The
+narrow exception the server specs describe covers a mirror that can only
+become true long after hydration, and a viewport measured before the first
+paint is the opposite case. See `MixinControllerOpen` on `open`. */
   fullBelow?: (HelixMegamenu["fullBelow"]) | undefined;
   /** The section's name, which names the default trigger and the panel. */
   label?: (HelixMegamenu["label"]) | undefined;
@@ -5974,12 +6006,26 @@ page's markup should not take the page down over a comma. */
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   "no-copy"?: (HelixObjectInspector["noCopy"]) | undefined;
   /** Whether to leave the copy button off.
 
 Negative for the reason Code Block's is: a boolean attribute defaulting to
-true could never be turned off from markup. */
+true could never be turned off from markup.
+
+**It does not reflect, where Code Block's does**, and the difference is what
+the two sheets need. Code Block reserves the button's width with
+`:host(:not([no-copy]))`, so the attribute has to be there for a consumer
+who set the property. This button is positioned out of the flow and takes no
+room, so nothing selects on it, and reflection exists so that a selector can
+reach a value. */
   noCopy?: (HelixObjectInspector["noCopy"]) | undefined;
   /** Whether to draw only the rows in view.
 
@@ -6138,9 +6184,9 @@ export type HelixOrbVueEvents = {};
 
 /** `HelixOutline` component event */
 export type HelixOutlineElementEvent<E = Event> = TypedEvent<HelixOutline, E>;
-/** `helix-before-activate` event type */
-export type HelixOutlineHelixBeforeActivateElementEvent =
-  HelixOutlineElementEvent<HelixBeforeActivateEvent>;
+/** `helix-activate` event type */
+export type HelixOutlineHelixActivateElementEvent =
+  HelixOutlineElementEvent<HelixActivateEvent>;
 
 export type HelixOutlineVueProps = {
   /** How a click on one of these links travels to its section.
@@ -6175,8 +6221,8 @@ under the chrome rather than as it reaches the top of what can be seen. */
 };
 
 export type HelixOutlineVueEvents = {
-  /** The section being read has changed, carrying its id as the value. Cancelable: refusing it takes the decision and nothing moves. */
-  "helix-before-activate": HelixOutlineHelixBeforeActivateElementEvent;
+  /** The section being read has changed, carrying its id as the value. An announcement: it is read off where the page is scrolled to, so there is no decision here to take. */
+  "helix-activate": HelixOutlineHelixActivateElementEvent;
 };
 
 /** `HelixPagination` component event */
@@ -10415,7 +10461,7 @@ export type CustomCssProperties = {
   "--combobox-border-color"?: (string) | undefined;
   /** Width of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise. */
   "--combobox-border-width"?: (string) | undefined;
-  /** Smallest the text field shrinks to */
+  /** Smallest the text field shrinks to once tags share its line. */
   "--combobox-control-size"?: (string) | undefined;
   /** Width of the panel. Follows the field by default. */
   "--combobox-panel-size"?: (string) | undefined;
@@ -10449,6 +10495,8 @@ export type CustomCssProperties = {
   "--data-table-rule-color"?: (string) | undefined;
   /** Type size, headings and cells alike. */
   "--data-table-text"?: (string) | undefined;
+  /** The edge the column a cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the component onto each cell it draws, read by the sheet that paints one; `helix-table` publishes `--table-cell-align` for the same attribute on the cells a consumer wrote, under its own family's name. */
+  "--data-table-cell-align"?: (string) | undefined;
   /** The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--data-table-columns` is the one to set. */
   "--data-table-template"?: (string) | undefined;
   /** Fill behind the field. */
@@ -10473,7 +10521,7 @@ export type CustomCssProperties = {
   "--date-picker-track-size"?: (string) | undefined;
   /** How many month columns are drawn, capped at two. `--date-picker-columns` overrides it. */
   "--date-picker-column-count"?: (string) | undefined;
-  /** Space between one pair and the next. */
+  /** Space between one pair and the next. Its resting value is tighter with `direction="row"` than stacked, a row of pairs needing less air between them than a column of them does, and setting this takes both. */
   "--description-list-gap"?: (string) | undefined;
   /** Color of the panel's edge. */
   "--dialog-border-color"?: (string) | undefined;
@@ -10511,7 +10559,7 @@ export type CustomCssProperties = {
   "--donut-chart-track-color"?: (string) | undefined;
   /** How thick the ring is drawn, derived from `hole`. */
   "--donut-chart-stroke"?: (string) | undefined;
-  /** Filter applied behind a `material="glass"` drawer. Follows the theme's material policy; set it to override the strength on one drawer. */
+  /** Filter applied behind a `frosted` or `glass` drawer. Follows the theme's material policy; set it to override the strength on one drawer. */
   "--drawer-backdrop"?: (string) | undefined;
   /** Surface behind the panel. */
   "--drawer-background-color"?: (string) | undefined;
@@ -10521,7 +10569,7 @@ export type CustomCssProperties = {
   "--drawer-border-width"?: (string) | undefined;
   /** Padding inside the panel. */
   "--drawer-padding"?: (string) | undefined;
-  /** Padding above the content, which clears the close control. */
+  /** Padding above the header, which is a step deeper than the other three so the first line clears the window's own edge. Falls back to `--drawer-padding`, so setting that alone governs all four sides. */
   "--drawer-padding-block-start"?: (string) | undefined;
   /** Corner radius on the edges that face the page. */
   "--drawer-radius"?: (string) | undefined;
@@ -10679,7 +10727,7 @@ export type CustomCssProperties = {
   "--loader-size"?: (string) | undefined;
   /** Color of the circle behind it. */
   "--loader-track-color"?: (string) | undefined;
-  /** A filter behind the panel, for glass. */
+  /** A filter behind the panel, which is `none` until one is asked for: this family carries no `material`, so the pair is two hooks rather than a word. */
   "--megamenu-backdrop"?: (string) | undefined;
   /** The panel's own fill. */
   "--megamenu-background-color"?: (string) | undefined;
@@ -11115,7 +11163,7 @@ export type CustomCssProperties = {
   "--toolbar-gap"?: (string) | undefined;
   /** Size of the point at the bubble's edge. */
   "--tooltip-arrow-size"?: (string) | undefined;
-  /** Blur behind a `glass` bubble. */
+  /** Blur behind a `frosted` or `glass` bubble. */
   "--tooltip-backdrop"?: (string) | undefined;
   /** Fill of the bubble. */
   "--tooltip-background-color"?: (string) | undefined;
@@ -11653,7 +11701,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixOrbVueProps,
     HelixOrbVueEvents
   >;
-  /** A rule down the leading edge with the current section lit along it, which is the shape a table of contents has taken since printed marginalia: the line says the list is one thing, and the lit segment says where in it you are.  Nesting is the consumer's, expressed as 'data-level' on a link. An outline that read heading levels itself would have to look at the document, and the document is not always where the headings are. */
+  /** A rule down the leading edge with the current section lit along it, which is the shape a table of contents has taken since printed marginalia: the line says the list is one thing, and the lit segment says where in it you are.  Nesting is the consumer's, expressed as 'data-level' on a link, and the levels are the heading levels: '2' through '6' each take one more step of '--outline-indent', and a link with no 'data-level' is the top one. An outline that read heading levels itself would have to look at the document, and the document is not always where the headings are. */
   "helix-outline": DefineCustomElement<
     HelixOutline,
     HelixOutlineVueProps,