@fusion.dev/helix 0.31.0 → 0.33.0

package/types/vue.d.ts

@@ -3047,7 +3047,8 @@ submits a string, and two fields for one question is a different control. */
 
 Worth more than one mainly for a range, where picking a start in March and
 an end in April otherwise means paging between them and losing sight of the
-first. The panel is sized by its content, so this widens it. */
+first. The panel is sized by its content, so this widens it, and where the
+window has no room for that width it shows one month until there is. */
   months?: (HelixDateInput["months"]) | undefined;
   /** What the field says before a date is in it. */
   placeholder?: (HelixDateInput["placeholder"]) | undefined;
@@ -4291,8 +4292,9 @@ container that cannot get narrow. */
 
 `1` is a status strip and `7` is a calendar week, which are the two readings
 this covers. Cells fill down the column and then across, which is what a
-calendar heatmap does: a week is a column, so the strip reads left to right
-in weeks and top to bottom in days. */
+calendar heatmap does: a week is a column, so the strip reads along the
+line in weeks, from the right on a right-to-left page, and top to bottom in
+days. */
   rows?: (HelixHeatmap["rows"]) | undefined;
   /** Lower bounds for the tone buckets, in the order the tones are given.
 
@@ -4530,6 +4532,12 @@ export type HelixIconButtonVueEvents = {};
 export type HelixIconVueProps = {
   /** Accessible name, for an icon that is not decorative. */
   label?: (HelixIcon["label"]) | undefined;
+  /** Turns the glyph round on a right-to-left page, for an arrow meaning forward or back.
+
+Asked for rather than inferred from the name. The names are physical, and
+`arrow-left` drawn pointing right on an Arabic page would be the icon
+disagreeing with its own name for every reader who meant the left. */
+  mirror?: (HelixIcon["mirror"]) | undefined;
   /** Name of the icon in the Helix set. */
   name?: (HelixIcon["name"]) | undefined;
 };
@@ -5017,7 +5025,7 @@ Absent is a dot, and absent rather than defaulted because a reflecting
 property with a default writes its attribute onto a host the consumer
 rendered, which React reports as a hydration mismatch.
 
-**One per series, in a column at the right edge**, because every series here
+**One per series, in a column at the far edge**, because every series here
 shares an x-axis and therefore ends at the same reading. That column is the
 useful thing: it is where a reader looks for "and what is it now", which is
 the question a sparkline's single mark answers too.
@@ -8148,7 +8156,21 @@ export type HelixTableColumnVueProps = {
 
 `end` is what a column of numbers wants, so digits of the same magnitude sit
 above each other. Left unset the cell inherits the table's own alignment,
-which is `start` for text in either writing direction. */
+which is `start` for text in either writing direction. `helix-data-table`
+aligns the cells it draws. A `helix-table`'s cells are markup the consumer
+wrote, so the table writes nothing onto them: it publishes the edge to each
+cell under this column as `--table-cell-align`, which `@fusion.dev/helix`
+reads. The heading is this element's own, and `@fusion.dev/helix` sets it to
+the same edge in either table. `end` is the inline end, so in a
+right-to-left table it is the left.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected `align` left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
   align?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -8175,13 +8197,23 @@ stores the widths can take the decision. */
 
 Ignored without a `field`, and silently: a column with nothing to sort by
 has no order to offer, and refusing loudly would mean an actions column
-carrying `sortable` breaks a table rather than doing nothing. */
+carrying `sortable` breaks a table rather than doing nothing.
+
+**Reflected, because a stylesheet selects on it.** `@fusion.dev/helix`
+gives a data table's sortable headings a pointer through
+`::slotted(helix-table-column[sortable])`, and set as a property, which is
+how React sets it, an unreflected `sortable` left no attribute to match.
+`false` reflects as no attribute at all, so an unset column writes nothing
+onto its host. */
   sortable?: (HelixTableColumn["sortable"]) | undefined;
   /** The track this column takes, as CSS.
 
 A single track value, so anything valid in `grid-template-columns` works:
-`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column shares what is
-left over equally, as `minmax(max-content, 1fr)`.
+`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
+in its place in a `helix-table`'s `columns`, where that table sets one, and
+otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
+Set here, it wins over that list, which is what lets a reader resize a
+column in a table that set one.
 
 **The floor is `max-content`, never `0` and never `min-content`.** A zero
 floor lets a track shrink under its own content: at 375 the columns squeeze
@@ -8236,15 +8268,24 @@ say that without the component knowing what a row looks like. */
   "loading-text"?: (HelixTable["loadingText"]) | undefined;
   /** What is said while they are on their way. */
   loadingText?: (HelixTable["loadingText"]) | undefined;
-  /** Column track list, as CSS. Deprecated: declare columns instead.
-
-Kept for a table that has no `helix-table-column` children, and ignored the
-moment it has one. A raw track list is the right shape for the value and
-the wrong place for it: the headings and the widths were two halves of one
-fact held in two places, and nothing checked that they agreed. Worse, the
-value is CSS, so handing it headings by mistake produced an invalid track
-list, which a grid ignores in silence: the table collapsed to one column
-and said nothing. Columns carry both halves now. */
+  /** The column widths as one track list, written once on the table.
+
+With `helix-table-column` children, each track sizes the column in its
+place, a hidden column counted, so hiding one takes its track with it and
+the rest keep theirs. The columns decide how many tracks there are and this
+list only how wide: a track past the last column is dropped, and a column
+past the last track shares what is left. With no columns declared it is
+the whole track list. Tracks count as the grid counts them, so
+`minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid
+would refuse leaves its column at the default rather than taking the table
+down to one column.
+
+**A column's own `width` wins over its track here.** The width is written
+on the column it sizes, which is the more particular statement, and it is
+where a resize lands: a reader dragging a column's edge writes `width`, so
+were this list to win, the drag would move the separator and leave the
+track where the list put it. This is the table's default for its columns,
+and each column may say otherwise. */
   columns?: (HelixTable["columns"]) | undefined;
   /** Accessible name for the table. */
   label?: (HelixTable["label"]) | undefined;
@@ -10980,6 +11021,8 @@ export type CustomCssProperties = {
   "--switch-on-color"?: (string) | undefined;
   /** The handle, in both states. */
   "--switch-thumb-color"?: (string) | undefined;
+  /** The edge the column this cell sits under is set to, `start`, `center` or `end`, and unset under a column that sets none. Written by the table around it, since the cell is the consumer's markup and nothing is written onto it; read by the sheet that draws the cell, where `justify-content` and `text-align` both take it as it comes and both follow the writing direction. */
+  "--table-cell-align"?: (string) | undefined;
   /** Track list for the columns. */
   "--table-columns"?: (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. `--table-columns` is the one to set. */
@@ -11154,7 +11197,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixAreaChartVueProps,
     HelixAreaChartVueEvents
   >;
-  /** One fragment shader over a full-screen triangle, with the palette read from the tokens rather than given as colors. A background written with hex values is an asset that has to be re-cut when the brand moves; one written against '--helix-color-primary' is a consequence of it.  **Every shape ramps through four token stops**, and the token layer inverts each: the page's background, 'primary-subtle', 'primary', then a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black takes the chroma out of the pixels carrying most of it. Which way the page runs is read off the ground's own luminance rather than asked of the mode, which is a private token.  **No dependency, and no scene graph.** The geometry is three vertices derived from 'gl_VertexID', so there is no attribute, no buffer and no upload.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box.  Styled only, and with behavior, which the tier split does not otherwise allow: the behavior is drawing to a canvas, so there is no structure a consumer could restyle and nothing for a headless twin to hold. */
+  /** One fragment shader over a full-screen triangle, with the palette read from the tokens rather than given as colors. A background written with hex values is an asset that has to be re-cut when the brand moves; one written against '--helix-color-primary' is a consequence of it.  **Every shape ramps through four token stops**, and the token layer inverts each: the page's background, 'primary-subtle', 'primary', then a peak. The peak is the foreground on a dark page and 'primary-active' on a light one, because mixing a saturated hue toward near-black takes the chroma out of the pixels carrying most of it. Which way the page runs is read off the ground's own luminance rather than asked of the mode, which is a private token.  **No dependency, and no scene graph.** The geometry is three vertices derived from 'gl_VertexID', so there is no attribute, no buffer and no upload.  **It stops when nobody is looking**, off screen and in a background tab, and 'prefers-reduced-motion' gets one still frame rather than an empty box. A context the browser takes back, on a GPU reset or past its cap of about sixteen, stops it too, and the gradient shows until the context returns.  Styled only, and with behavior, which the tier split does not otherwise allow: the behavior is drawing to a canvas, so there is no structure a consumer could restyle and nothing for a headless twin to hold. */
   "helix-aura": DefineCustomElement<
     HelixAura,
     HelixAuraVueProps,