@fusion.dev/helix 0.153.0 → 0.155.0

package/types/vue.d.ts

@@ -168,6 +168,7 @@ import type {
   HelixReadingChangeEvent,
   HelixReadingPressEvent,
   HelixAuraFallbackEvent,
+  HelixSelectEvent,
   HelixBeforeChangeEvent,
   HelixPressEvent,
   HelixBeforeMoveEvent,
@@ -182,7 +183,6 @@ import type {
   HelixReconnectEvent,
   HelixRelabelEvent,
   HelixRemoveEvent,
-  HelixSelectEvent,
   HelixActivateEvent,
   HelixSendEvent,
   HelixTypingEvent,
@@ -1532,6 +1532,15 @@ element's language. Leave the marks out of the text. */
 
 export type HelixBlockquoteVueEvents = {};
 
+/** `HelixBreadcrumb` component event */
+export type HelixBreadcrumbElementEvent<E = Event> = TypedEvent<
+  HelixBreadcrumb,
+  E
+>;
+/** `helix-select` event type */
+export type HelixBreadcrumbHelixSelectElementEvent =
+  HelixBreadcrumbElementEvent<HelixSelectEvent>;
+
 export type HelixBreadcrumbVueProps = {
   /** Marks this item as the page you are on. */
   current?: (HelixBreadcrumb["current"]) | undefined;
@@ -1561,7 +1570,10 @@ The consumer's decision. */
   target?: (HelixBreadcrumb["target"]) | undefined;
 };
 
-export type HelixBreadcrumbVueEvents = {};
+export type HelixBreadcrumbVueEvents = {
+  /** A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does. */
+  "helix-select": HelixBreadcrumbHelixSelectElementEvent;
+};
 
 export type HelixBreadcrumbsVueProps = {
   /** How the two halves of a split crumb are told apart. A split crumb is one
@@ -2708,10 +2720,6 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixCardVueEvents = {};
@@ -3795,6 +3803,22 @@ significant in code and a wrapped line reads as two. For prose-like code, such a
 a log line, a wrap reads better than a scroll. Line numbers keep the lines
 unwrapped, since a wrapped line would take one number and several rows. */
   wrap?: (HelixCodeBlock["wrap"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "code-label"?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  codeLabel?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "code-name-label"?: (HelixCodeBlock["codeNameLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  codeNameLabel?: (HelixCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "collapse-label"?: (HelixCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -4070,7 +4094,8 @@ Passed to the panel, whose square, hue ramp and presets say the color's
 name, and read by the swatch in `swatch`, which says it before the value.
 Color Picker lists the keys. */
   colorWords?: (HelixColorInput["colorWords"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`, as Color Picker's `format`.
 
 **Undefaulted, because it reflects.** The two together stamp an attribute
 onto every host anybody renders, including the ones nobody configured: the
@@ -4251,8 +4276,9 @@ language hears its own rather than English between its own labels. */
   brightnessLabel?: (HelixColorPicker["brightnessLabel"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
@@ -4260,13 +4286,20 @@ the syntax the format toggle sets. */
   "channel-fields"?: (HelixColorPicker["channelFields"]) | undefined;
   /** Whether the picker shows a number field for each channel of the color, as
 React Aria's ColorField does with `channel`: red, green and blue for hex
-and rgb, hue, saturation and lightness for hsl, and the opacity with
-`alpha`.
+and rgb, hue, saturation and lightness for hsl, hue, saturation and
+brightness for hsb, lightness, chroma and hue for oklch, and the opacity
+with `alpha`.
 
 For a reader who has the numbers from a brand guide, and for a keyboard,
 where typing 128 is quicker than holding an arrow key. The fields follow
 the syntax the format toggle sets. */
   channelFields?: (HelixColorPicker["channelFields"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  "chroma-label"?: (HelixColorPicker["chromaLabel"]) | undefined;
+  /** What the chroma channel's field is called, in `channel-fields` with
+oklch. */
+  chromaLabel?: (HelixColorPicker["chromaLabel"]) | undefined;
   /** The words a color's name is spoken in, as JSON keyed by their English,
 such as `{"red": "rot", "vibrant": "kräftiges"}`.
 
@@ -4307,10 +4340,16 @@ the color. */
   "eyedropper-label"?: (HelixColorPicker["eyedropperLabel"]) | undefined;
   /** What the eyedropper is called. */
   eyedropperLabel?: (HelixColorPicker["eyedropperLabel"]) | undefined;
-  /** The syntax the value is written in: `hex`, `rgb`, or `hsl`.
+  /** The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or
+`hsb`.
 
 Only what is written. Everything is read whatever this says, so a picker on
-`hex` still takes an `rgb()` handed to it and stores the hex for it. */
+`hex` still takes an `rgb()` or an `oklch()` handed to it and stores the
+hex for it. `oklch` writes the sRGB color the picker holds, such as
+`oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is
+clipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,
+as React Aria's and Zag's color strings do. It is not CSS, so the toggle
+walks the other four. */
   format?: (HelixColorPicker["format"]) | undefined;
   /** What the syntax toggle is called, with `{format}` filled in. */
   "format-label"?: (HelixColorPicker["formatLabel"]) | undefined;
@@ -4320,15 +4359,21 @@ Only what is written. Everything is read whatever this says, so a picker on
   "green-label"?: (HelixColorPicker["greenLabel"]) | undefined;
   /** What the green channel's field is called, in `channel-fields`. */
   greenLabel?: (HelixColorPicker["greenLabel"]) | undefined;
+  /** Help under the picker, such as what the color is used for. The `hint`
+slot takes richer content. */
+  hint?: (HelixColorPicker["hint"]) | undefined;
   /** What the hue channel is called. */
   "hue-label"?: (HelixColorPicker["hueLabel"]) | undefined;
   /** What the hue channel is called. */
   hueLabel?: (HelixColorPicker["hueLabel"]) | undefined;
+  /** The name above the picker, such as "Brand color". The picker is then a
+group with this name. The `label` slot takes richer content. */
+  label?: (HelixColorPicker["label"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   "lightness-label"?: (HelixColorPicker["lightnessLabel"]) | undefined;
   /** What the lightness channel's field is called, in `channel-fields` with
-hsl. */
+hsl and oklch. */
   lightnessLabel?: (HelixColorPicker["lightnessLabel"]) | undefined;
   /** Hides the eyedropper. Without it, the eyedropper appears in browsers that
 support one. */
@@ -6125,15 +6170,22 @@ speaks it. Unset is the sentence registered for the page's language, then
 the English. `{mode}` is `single`, `range` or `multiple`, so each can have
 its own sentence. */
   badInputMessage?: (HelixDatePicker["badInputMessage"]) | undefined;
-  /** The calendar the heading, the days, and the months are written in:
-`gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose
-months are the Gregorian months.
-
-Absent is the locale's own where it is one of the five, such as
-`buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and
-`gregory` for every other, such as `persian` for `fa-IR`, so the heading
-names the Gregorian month the grid shows. The value is `YYYY-MM-DD` in
-every calendar. */
+  /** The calendar the heading, the days, and the months are written in.
+
+`gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five
+whose months are the Gregorian months. Absent is the locale's own where
+it is one of the five, such as `buddhist` for `th-TH` or `japanese` for
+`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`
+for `fa-IR`.
+
+`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,
+`coptic`, and `indian` draw a calendar with months of its own, as React
+Aria's calendars do: each grid is one of that calendar's months, the
+Hebrew leap month and Ethiopia's five-day thirteenth month included, and
+Previous, Next and the page keys move by those months. `month` and
+`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The
+heading stays text, as the months and years views are drawn in Gregorian
+months only. The value is `YYYY-MM-DD` in every calendar. */
   calendar?: (HelixDatePicker["calendar"]) | undefined;
   /** The month to open on when `month` is not set. */
   "default-month"?: (HelixDatePicker["defaultMonth"]) | undefined;
@@ -6192,8 +6244,9 @@ its days. */
   min?: (HelixDatePicker["min"]) | undefined;
   /** How many dates can be held at once. */
   mode?: (HelixDatePicker["mode"]) | undefined;
-  /** The month shown, as `YYYY-MM`. When it is not set, it follows `value`,
-then the current month.
+  /** The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a
+`calendar` with months of its own. When it is not set, it follows
+`value`, then the current month.
 
 Separate from `value` on purpose, so paging selects nothing and a consumer
 can drive the view. Reading gives the month on show; writing sets it, and
@@ -6295,6 +6348,22 @@ date including the one already chosen. */
   "step-mismatch-message"?: (HelixDatePicker["stepMismatchMessage"]) | undefined;
   /** The validation message for a date that `step` skips. */
   stepMismatchMessage?: (HelixDatePicker["stepMismatchMessage"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  "time-zone"?: (HelixDatePicker["timeZone"]) | undefined;
+  /** The time zone today is read in, such as `America/New_York`, as React
+Aria's `today(timeZone)` reads it. Empty is the reader's own.
+
+Dates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:
+the day marked `aria-current` and `day-today`, and the month a picker
+with no value opens on. A desk in Tokyo booking for an office in New York
+sets `America/New_York`, and today is the office's. */
+  timeZone?: (HelixDatePicker["timeZone"]) | undefined;
   /** The validation message for a date that `disable-dates` or `disable-days`
 bars. */
   "unavailable-message"?: (HelixDatePicker["unavailableMessage"]) | undefined;
@@ -8736,6 +8805,31 @@ export type HelixIconButtonVueEvents = {
 export type HelixIconElementEvent<E = Event> = TypedEvent<HelixIcon, E>;
 
 export type HelixIconVueProps = {
+  /** A motion that draws the eye or says work is going on: `spin` turns the
+glyph without end, `pulse` fades it in and out, and `beat` swells it.
+
+Absent is still. Reduced motion stills every one of them. */
+  animation?: (HelixIcon["animation"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  "auto-width"?: (HelixIcon["autoWidth"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  autoWidth?: (HelixIcon["autoWidth"]) | undefined;
+  /** Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+`both` across both.
+
+Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+that follows the direction. */
+  flip?: (HelixIcon["flip"]) | undefined;
+  /** Turns the glyph clockwise by 90, 180 or 270 degrees.
+
+Absent draws it upright. `--icon-rotate` turns it by any other angle. */
+  rotate?: (HelixIcon["rotate"]) | undefined;
   /** The icon's name, read by screen readers. Set it for an icon that is not
 decorative. */
   label?: (HelixIcon["label"]) | undefined;
@@ -8759,6 +8853,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  src?: (HelixIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -8775,9 +8874,9 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixIconVueEvents = {
-  /** `name` matches no registered icon and no library answers it, so nothing is drawn. */
+  /** `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn. */
   error: HelixIconElementEvent;
-  /** A glyph a library gave later for `name` is drawn. */
+  /** A glyph a library gave later for `name`, or the file at `src`, is drawn. */
   load: HelixIconElementEvent;
 };
 
@@ -13287,6 +13386,20 @@ export type HelixQrCodeVueEvents = {
 export type HelixQuoteVueProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "no-marks"?: (HelixQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  noMarks?: (HelixQuote["noMarks"]) | undefined;
 };
 
 export type HelixQuoteVueEvents = {};
@@ -14610,6 +14723,18 @@ the stop moves on the trigger inside the shadow root, as Button's does.
 No attribute, because it is coordination between elements rather than
 anything a consumer sets. */
   focusable?: (HelixSelect["focusable"]) | undefined;
+  /** The options as data, for a list too long to draw whole: each a value,
+which is also its words, or a record with a `value`, a `label` and
+`disabled`. Passed to the list, which draws only the options in sight,
+as Listbox's `items` does. Set, the options you write as children are
+not read.
+
+The trigger shows the chosen options' labels, the letters and the Left
+and Right keys on the closed trigger choose over the whole set, and a
+chosen value whose option leaves `items` drops out of `value`.
+`value-content` is not called for `items`. Import the Option family as
+well, whose elements are drawn. */
+  items?: (HelixSelect["items"]) | undefined;
   /** What the trigger shows for the chosen options: a function given them, in
 the order they appear, that returns text, an element or a Lit template.
 
@@ -14653,6 +14778,11 @@ fade the fill in and out, or `none` to sit still.
 
 Reduced motion stills both. */
   effect?: (HelixSkeleton["effect"]) | undefined;
+  /** How many lines of text the placeholder stands for, with `shape="text"`.
+
+Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+paragraph by it. */
+  lines?: (HelixSkeleton["lines"]) | undefined;
   /** The shape of the placeholder: `text`, `circle`, or a block when unset.
 
 Unset is a block, which is what most missing things are. A block is the
@@ -14831,9 +14961,11 @@ between its thumbs and ignores it. */
   origin?: (HelixSlider["origin"]) | undefined;
   /** Adds a second thumb, so the value is a pair.
 
-The pair is one string, `"10,50"`, which is what a form submits and what
-`MixinControllerValue` already holds. `valueAsNumber` reads the lower of
-the two, since a range has no single number. */
+The pair is one string, `"10,50"`, which is what `value` and
+`MixinControllerValue` hold. A form receives two entries under the name,
+`price=10&price=50`, as React Aria's two thumbs send theirs.
+`valueAsNumber` reads the lower of the two, since a range has no single
+number. */
   range?: (HelixSlider["range"]) | undefined;
   /** How the readout joins a range's two values, with `{start}` and `{end}`
 filled in. Write it in the page's language, such as `{start} bis {end}`. */
@@ -14841,12 +14973,34 @@ filled in. Write it in the page's language, such as `{start} bis {end}`. */
   /** How the readout joins a range's two values, with `{start}` and `{end}`
 filled in. Write it in the page's language, such as `{start} bis {end}`. */
   rangeText?: (HelixSlider["rangeText"]) | undefined;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readonly?: (HelixSlider["readOnly"]) | undefined;
+  /** Whether a reader can see and focus the value and cannot change it. A
+read-only slider still submits its value.
+
+React Aria's `isReadOnly`. Each thumb stays a tab stop and says
+`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag
+leave the value where it is. A script can still set `value`. */
+  readOnly?: (HelixSlider["readOnly"]) | undefined;
   /** Shows the chosen value beside the track. */
   "show-value"?: (HelixSlider["showValue"]) | undefined;
   /** Shows the chosen value beside the track. */
   showValue?: (HelixSlider["showValue"]) | undefined;
   /** How far one press of an arrow key moves the thumb. */
   step?: (HelixSlider["step"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  "thumb-label"?: (HelixSlider["thumbLabel"]) | undefined;
+  /** The name of a thumb between a range's first and last, read after the
+slider's label, with `{index}` filled in: its place, counted from 1. The
+first is `minimum-label` and the last `maximum-label`. */
+  thumbLabel?: (HelixSlider["thumbLabel"]) | undefined;
   /** Whether each thumb shows its value in a bubble beside it, as Web
 Awesome's `with-tooltip`. The styled slider shows the bubbles while the
 slider is under the pointer or holds focus. They repeat what each thumb
@@ -15105,10 +15259,20 @@ export type HelixSpeedDialItemHelixSelectElementEvent =
 export type HelixSpeedDialItemVueProps = {
   /** Whether the action is disabled, so it cannot be chosen. */
   disabled?: (HelixSpeedDialItem["disabled"]) | undefined;
+  /** Whether the link downloads the file when the action is chosen. Only
+meaningful beside an `href`, and only for a file served from the page's
+origin. */
+  download?: (HelixSpeedDialItem["download"]) | undefined;
+  /** The URL the action links to. Setting it draws the action as a link. */
+  href?: (HelixSpeedDialItem["href"]) | undefined;
+  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixSpeedDialItem["rel"]) | undefined;
   /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
 `aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
 keyboard and Control elsewhere. Showing a shortcut does not bind it. */
   shortcut?: (HelixSpeedDialItem["shortcut"]) | undefined;
+  /** Where the link opens, such as `_blank` for a new tab. */
+  target?: (HelixSpeedDialItem["target"]) | undefined;
   /** The action's value, sent in `helix-select` when the action is chosen. */
   value?: (HelixSpeedDialItem["value"]) | undefined;
 };
@@ -15179,13 +15343,17 @@ you described or labeled it yourself. */
   longPressLabel?: (HelixSpeedDial["longPressLabel"]) | undefined;
   /** Space between the trigger and the actions, in pixels. */
   offset?: (HelixSpeedDial["offset"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   "open-on"?: (HelixSpeedDial["openOn"]) | undefined;
-  /** What opens the dial. `click` opens it on a press of the trigger. Under
-`long-press`, a press is the trigger's own action, and the dial opens on a
-press held for half a second, or on Alt+Down or Alt+Up. */
+  /** What opens the dial. `click` opens it on a press of the trigger. `hover`
+also opens it while a mouse rests on the trigger, and closes it once the
+mouse has left. Under `long-press`, a press is the trigger's own action,
+and the dial opens on a press held for half a second, or on Alt+Down or
+Alt+Up. */
   openOn?: (HelixSpeedDial["openOn"]) | undefined;
   /** The direction the actions open in. They move to another side if that side
 does not fit.
@@ -15385,7 +15553,10 @@ figures compared one against another keep their own widths. */
   columns?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   divided?: (HelixStatGroup["divided"]) | undefined;
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   label?: (HelixStatGroup["label"]) | undefined;
 };
 
@@ -15418,6 +15589,29 @@ reports a hydration mismatch. The absent attribute is the column, which the
 stylesheet reads as the base case, and the server spec asserts the host
 carries nothing nobody wrote. */
   direction?: (HelixStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "format-options"?: (HelixStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  formatOptions?: (HelixStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  locale?: (HelixStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  value?: (HelixStat["value"]) | undefined;
 };
 
 export type HelixStatVueEvents = {};
@@ -15452,6 +15646,16 @@ Ignored once `active` is written. */
 
 Ignored once `active` is written. */
   defaultActive?: (HelixSteps["defaultActive"]) | undefined;
+  /** Whether the arrow keys move focus between the stages' names, along the
+way the steps run. Off by default, so the arrows keep scrolling the page. */
+  arrows?: (HelixSteps["arrows"]) | undefined;
+  /** What marks a stage `complete`.
+
+Absent, you do: each step's `complete` is yours, because a reader who
+steps back has finished more stages than the one they are on. `passed`
+marks every stage before the one a reader moves to, and leaves the marks
+when they go back. */
+  completion?: (HelixSteps["completion"]) | undefined;
   /** The sequence's name, read by screen readers.
 
 A list of stages is a landmark a reader arrives at out of order, so it
@@ -16175,6 +16379,12 @@ panels and tells a screen reader the list is vertical.
 
 Optional, so the resting row writes no attribute onto the host. */
   orientation?: (HelixTabs["orientation"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  "scroll-controls"?: (HelixTabs["scrollControls"]) | undefined;
+  /** Whether a strip with more tabs than fit shows a button at each end it can
+scroll toward. */
+  scrollControls?: (HelixTabs["scrollControls"]) | undefined;
   /** How the row of tabs is drawn.
 
 Unset is a raised pill on the selected tab with nothing behind the row,
@@ -16211,11 +16421,38 @@ export type HelixTabsVueEvents = {
 
 /** `HelixTab` component event */
 export type HelixTabElementEvent<E = Event> = TypedEvent<HelixTab, E>;
+/** `helix-dismiss` event type */
+export type HelixTabHelixDismissElementEvent =
+  HelixTabElementEvent<HelixDismissEvent>;
 /** `helix-select` event type */
 export type HelixTabHelixSelectElementEvent =
   HelixTabElementEvent<HelixSelectEvent>;
 
 export type HelixTabVueProps = {
+  /** Whether the element shows a control that dismisses it. */
+  dismissible?: (HelixTab["dismissible"]) | undefined;
+  /** The dismiss control's label, read by screen readers.
+
+`attribute` is spelled out because Lit lowercases a property name to
+derive one rather than dash-casing it, so this would otherwise be
+reachable only as `dismisslabel`, which nobody would guess and no linter
+would catch.
+
+A word property: register it for a locale under the host's key. A family
+that names the control otherwise, such as Tag's `Remove {label}`,
+declares its own English with `@words` above the override. */
+  "dismiss-label"?: (HelixTab["dismissLabel"]) | undefined;
+  /** The dismiss control's label, read by screen readers.
+
+`attribute` is spelled out because Lit lowercases a property name to
+derive one rather than dash-casing it, so this would otherwise be
+reachable only as `dismisslabel`, which nobody would guess and no linter
+would catch.
+
+A word property: register it for a locale under the host's key. A family
+that names the control otherwise, such as Tag's `Remove {label}`,
+declares its own English with `@words` above the override. */
+  dismissLabel?: (HelixTab["dismissLabel"]) | undefined;
   /** Whether the item is disabled and cannot be chosen. */
   disabled?: (HelixTab["disabled"]) | undefined;
   /** Whether the item is selected.
@@ -16237,6 +16474,8 @@ of tabs that are pages of a site. */
 };
 
 export type HelixTabVueEvents = {
+  /** A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable. */
+  "helix-dismiss": HelixTabHelixDismissElementEvent;
   /** Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you. */
   "helix-select": HelixTabHelixSelectElementEvent;
 };
@@ -16251,6 +16490,14 @@ export type HelixTagGroupHelixDismissElementEvent =
   HelixTagGroupElementEvent<HelixDismissEvent>;
 
 export type HelixTagGroupVueProps = {
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  "disallow-empty-selection"?: (HelixTagGroup["disallowEmptySelection"]) | undefined;
+  /** Keeps at least one tag selected once one is, as React Aria's
+`disallowEmptySelection`: a press or a key that would leave none selected
+is refused. Removing the last selected tag still takes it out of `value`. */
+  disallowEmptySelection?: (HelixTagGroup["disallowEmptySelection"]) | undefined;
   /** The words the group shows and says once its last tag is removed, where
 nothing is in the `empty` slot. */
   "empty-label"?: (HelixTagGroup["emptyLabel"]) | undefined;
@@ -16260,6 +16507,20 @@ nothing is in the `empty` slot. */
   /** The name of the set, such as "Filters", which a screen reader announces
 before its tags. */
   label?: (HelixTagGroup["label"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  "selection-behavior"?: (HelixTagGroup["selectionBehavior"]) | undefined;
+  /** What a press, Space, or a move does to the tags already selected.
+`toggle`, the default, keeps them: a press adds or takes out the tag, and
+the arrow keys move focus alone. `replace` selects the tag alone, as a
+file list does, and the arrow keys carry the selection with focus.
+Control or Command with a press or Space adds or takes out one tag in
+`multiple`, and with an arrow moves focus without selecting. */
+  selectionBehavior?: (HelixTagGroup["selectionBehavior"]) | undefined;
   /** How many tags a reader can select: `single`, `multiple`, or none.
 
 Absent selects nothing, and the tags carry no selected state at all. */
@@ -18307,6 +18568,18 @@ refused, in a `reorderable` tree. */
 An `aria-label` or `aria-labelledby` on the host names the tree too, and
 wins over this. */
   label?: (HelixTree["label"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  "moved-into-label"?: (HelixTree["movedIntoLabel"]) | undefined;
+  /** What screen readers hear when an item moves into another branch, in a
+`reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+the branch it moved into, or the tree's `label` for the top level,
+`{position}` its place there, counting from 1, and `{count}` the number of
+items there. */
+  movedIntoLabel?: (HelixTree["movedIntoLabel"]) | undefined;
   /** What screen readers hear each time an item moves, in a `reorderable`
 tree. `{name}` is the item's words, `{position}` its place among its
 siblings, counting from 1, and `{count}` the number of siblings. */
@@ -19308,6 +19581,8 @@ export type CustomCssProperties = {
   "--badge-font-weight"?: (string) | undefined;
   /** The space between the content and the count under `placement="inline"`. */
   "--badge-gap"?: (string) | undefined;
+  /** The size of an icon in the `icon` slot. The count's own size by default. */
+  "--badge-icon-size"?: (string) | undefined;
   /** Pulls the mark in from the corner, along both axes. */
   "--badge-offset"?: (string) | undefined;
   /** How far the indicator's corners are rounded. */
@@ -20168,7 +20443,11 @@ export type CustomCssProperties = {
   "--heatmap-rows"?: (string) | undefined;
   /** The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it. */
   "--heatmap-tone"?: (string) | undefined;
-  /** The width and height of the icon's box. */
+  /** How long one turn, pulse or beat of `animation` takes. */
+  "--icon-animation-duration"?: (string) | undefined;
+  /** An angle the glyph is turned by, such as `45deg`. `rotate` wins over it. */
+  "--icon-rotate"?: (string) | undefined;
+  /** The width and height of the icon's box. The height alone under `auto-width`. */
   "--icon-size"?: (string) | undefined;
   /** The aspect ratio of the box, such as `16 / 9`. */
   "--image-aspect"?: (string) | undefined;
@@ -20974,6 +21253,8 @@ export type CustomCssProperties = {
   "--skeleton-color"?: (string) | undefined;
   /** How long one sweep or one pulse takes. */
   "--skeleton-duration"?: (string) | undefined;
+  /** The width of the last line of a `lines` paragraph. Defaults to 60%. */
+  "--skeleton-last-line-size"?: (string) | undefined;
   /** The corner of the block shape. */
   "--skeleton-radius"?: (string) | undefined;
   /** The highlight the sweep carries across the fill. */
@@ -21010,6 +21291,8 @@ export type CustomCssProperties = {
   "--slider-marker-color"?: (string) | undefined;
   /** The color of the thumb. */
   "--slider-thumb-color"?: (string) | undefined;
+  /** The color of content in the `thumb` and `thumb-end` slots, drawn on the thumb. */
+  "--slider-thumb-content-color"?: (string) | undefined;
   /** The thumb's size along the track. It follows `--slider-thumb-size` unless you set it, and setting one of the two makes the thumb an oval. */
   "--slider-thumb-length"?: (string) | undefined;
   /** The thumb's corner radius. It is fully round by default, so a thumb with two different dimensions is a capsule unless you change it. */
@@ -21028,7 +21311,7 @@ export type CustomCssProperties = {
   "--slider-track-image"?: (string) | undefined;
   /** The thickness of the track. It matches the progress bar's size by default. */
   "--slider-track-size"?: (string) | undefined;
-  /** Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part. */
+  /** Where a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` and `thumb` part. */
   "--slider-at"?: (string) | undefined;
   /** The value as a fraction of the range, 0 to 1. */
   "--slider-fraction"?: (string) | undefined;
@@ -21230,12 +21513,16 @@ export type CustomCssProperties = {
   "--tabs-indicator-thickness"?: (string) | undefined;
   /** The color of the rule under the row in `underlined`. */
   "--tabs-rule-color"?: (string) | undefined;
+  /** The fill behind the scroll buttons, over the tabs that pass under them. */
+  "--tabs-scroll-background-color"?: (string) | undefined;
   /** The height of a tab. `segmented` sizes its tabs to the track and does not read it. */
   "--tabs-tab-block-size"?: (string) | undefined;
   /** The label color of a tab that is not current. */
   "--tabs-tab-color"?: (string) | undefined;
   /** How faint a disabled tab is drawn. */
   "--tabs-tab-disabled-opacity"?: (string) | undefined;
+  /** The color of the mark that closes a `dismissible` tab. */
+  "--tabs-tab-dismiss-color"?: (string) | undefined;
   /** The size of a tab's label. */
   "--tabs-tab-font-size"?: (string) | undefined;
   /** The weight of a tab's label. */
@@ -21954,7 +22241,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixIconButtonVueProps,
     HelixIconButtonVueEvents
   >;
-  /** Draws in 'currentColor' and sizes from '--icon-size', so an icon takes the color of the text around it and a container can resize it without a property. Inside a button, '--icon-size' is set in 'em', so the icon scales with the button. */
+  /** Draws in 'currentColor' and sizes from '--icon-size', so an icon takes the color of the text around it and a container can resize it without a property. Inside a button, '--icon-size' is set in 'em', so the icon scales with the button.  **The glyph turns, flips and moves inside its own box**, so the line around it keeps its place: 'rotate' turns it by a quarter, a half or three quarters, '--icon-rotate' by any angle, 'flip' mirrors it across either axis, and 'animation' spins, pulses or beats it, as Web Awesome's icon does. Reduced motion stills every animation. 'auto-width' gives the box the glyph's own proportions, for a mark wider than it is tall. */
   "helix-icon": DefineCustomElement<
     HelixIcon,
     HelixIconVueProps,
@@ -22308,7 +22595,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixSelectVueProps,
     HelixSelectVueEvents
   >;
-  /** Animates a highlight sweeping across the block, which reads as work in progress. A block fading in and out can look broken, so 'effect="pulse"' is a choice rather than the default.  Around content with 'loading', the skeleton takes the content's box and paints over it, and the content is hidden until 'loading' is taken off. */
+  /** Animates a highlight sweeping across the block, which reads as work in progress. A block fading in and out can look broken, so 'effect="pulse"' is a choice rather than the default.  Around content with 'loading', the skeleton takes the content's box and paints over it, and the content is hidden until 'loading' is taken off.  **'lines' draws a paragraph.** With 'shape="text"' and 'lines="3"', one element stands in for three lines of text: each line a 'skeleton' part one 'em' tall, spaced a body line height apart, and the last one shorter, as the end of a paragraph is. */
   "helix-skeleton": DefineCustomElement<
     HelixSkeleton,
     HelixSkeletonVueProps,
@@ -22434,7 +22721,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixTagGroupVueProps,
     HelixTagGroupVueEvents
   >;
-  /** Seven tones. The fill is a tint of the status color made with 'color-mix', so when a theme changes its status colors, the tints change with them. */
+  /** Seven tones. The fill is a tint of the status color made with 'color-mix', so when a theme changes its status colors, the tints change with them.  A tag takes its height from the region it is in, as the controls beside it do: 'data-density="sm"', 'md', or 'lg' on the tag or on any element around it sets '--helix-size-tag' to the small, resting, or large step, so a row of tags and buttons stays one height. 'shape="pill"' rounds its ends. */
   "helix-tag": DefineCustomElement<
     HelixTag,
     HelixTagVueProps,