@fusion.dev/helix 0.154.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
@@ -4082,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
@@ -4263,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
@@ -4272,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"}`.
 
@@ -4319,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;
@@ -4332,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. */
@@ -6137,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;
@@ -6204,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
@@ -6307,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;
@@ -14666,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.
 
@@ -14892,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}`. */
@@ -14902,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
@@ -15166,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;
 };
@@ -15240,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.
@@ -15539,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
@@ -16262,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,
@@ -16298,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.
@@ -16324,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;
 };
@@ -16338,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;
@@ -16347,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. */
@@ -18394,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. */
@@ -21105,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. */
@@ -21123,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;
@@ -21325,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. */
@@ -22529,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,

package/types/words.d.ts

@@ -357,6 +357,16 @@ declare module '@fusion.dev/helix-core' {
        * English: `Moved down`
        */
       movedDownLabel: Message
+      /**
+       * 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.
+       *
+       * English: `{name} moved into {parent}, position {position} of {count}`
+       */
+      movedIntoLabel: Message
       /**
        * What screen readers hear after a key moves a card, with `{name}` for the
        * card and `{x}` and `{y}` for where it now is, in the document's units.
@@ -1082,6 +1092,13 @@ declare module '@fusion.dev/helix-core' {
        * English: `Brightness`
        */
       brightnessLabel: Message
+      /**
+       * What the chroma channel's field is called, in `channel-fields` with
+       * oklch.
+       *
+       * English: `Chroma`
+       */
+      chromaLabel: Message
       /**
        * The text the sample shows for a moment after it copies the value.
        *
@@ -1121,7 +1138,7 @@ declare module '@fusion.dev/helix-core' {
       hueLabel: Message
       /**
        * What the lightness channel's field is called, in `channel-fields` with
-       * hsl.
+       * hsl and oklch.
        *
        * English: `Lightness`
        */
@@ -2110,6 +2127,14 @@ declare module '@fusion.dev/helix-core' {
        * English: `{start} to {end}`
        */
       rangeText: Message
+      /**
+       * 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`.
+       *
+       * English: `thumb {index}`
+       */
+      thumbLabel: Message
     }
     'helix-sparkline': {
       /**