@fusion.dev/helix-headless 0.153.0 → 0.154.0

package/types/vue.d.ts

@@ -2163,10 +2163,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?: (HelixHeadlessCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixHeadlessCardVueEvents = {};
@@ -2983,6 +2979,22 @@ export type HelixHeadlessCheckboxVueEvents = {
 };
 
 export type HelixHeadlessCodeBlockVueProps = {
+  /** 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"?: (HelixHeadlessCodeBlock["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?: (HelixHeadlessCodeBlock["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"?: (HelixHeadlessCodeBlock["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?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -7538,6 +7550,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixHeadlessIcon["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?: (HelixHeadlessIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -7554,9 +7571,9 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixHeadlessIconVueEvents = {
-  /** `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: HelixHeadlessIconElementEvent;
-  /** 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: HelixHeadlessIconElementEvent;
 };
 
@@ -11784,6 +11801,20 @@ export type HelixHeadlessQrCodeVueEvents = {
 export type HelixHeadlessQuoteVueProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixHeadlessQuote["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"?: (HelixHeadlessQuote["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?: (HelixHeadlessQuote["noMarks"]) | undefined;
 };
 
 export type HelixHeadlessQuoteVueEvents = {};
@@ -13245,7 +13276,10 @@ export type HelixHeadlessSplitterVueEvents = {
 };
 
 export type HelixHeadlessStatGroupVueProps = {
-  /** 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?: (HelixHeadlessStatGroup["label"]) | undefined;
 };
 
@@ -13278,6 +13312,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?: (HelixHeadlessStat["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"?: (HelixHeadlessStat["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?: (HelixHeadlessStat["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?: (HelixHeadlessStat["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?: (HelixHeadlessStat["value"]) | undefined;
 };
 
 export type HelixHeadlessStatVueEvents = {};
@@ -17080,7 +17137,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessAvatarVueProps,
     HelixHeadlessAvatarVueEvents
   >;
-  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  'format-options' writes a count with 'Intl.NumberFormat', in 'locale': 'format-options='{"notation":"compact"}'' shows 1,200 as '1.2K'. Absent, the count is shown as it was given.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **A badge wrapped around a control describes it.** The control is the first element in the badge that takes focus, and its description is the badge's words, so focusing '<helix-badge value="8" label="{count} unread"><button>Inbox </button></helix-badge>' announces "Inbox, button, 8 unread", current as the count changes. A control that already has a description keeps its own. The count is also a status of its own, read when it changes.  **Put the badge inside the control to have its count read with the control's name**, as Web Awesome and Shoelace do: '<button>Inbox <helix-badge value="8" label="8 unread"></helix-badge></button>' is the button "Inbox 8 unread", and stays current as the count changes. The styled tier's 'placement="inline"' draws the mark in the line for that case. */
+  /** Badge wraps the element it decorates and pins an indicator to its corner, so the wrapped element keeps its place in the layout.  What the indicator shows depends on 'value':  - A 'value' of zero shows no indicator. - No 'value' shows a dot. - Any other value shows the value. Above 'max', the indicator shows '{max}+',   so its width stays the same as the count grows.  'format-options' writes a count with 'Intl.NumberFormat', in 'locale': 'format-options='{"notation":"compact"}'' shows 1,200 as '1.2K'. Absent, the count is shown as it was given.  A count is announced from its own text, and 'label' replaces that with a fuller name, such as '4 unread'. A dot needs a 'label'. Without one, the dot is a colored circle that screen readers do not announce.  **A badge wrapped around a control describes it.** The control is the first element in the badge that takes focus, and its description is the badge's words, so focusing '<helix-badge value="8" label="{count} unread"><button>Inbox </button></helix-badge>' announces "Inbox, button, 8 unread", current as the count changes. A control that already has a description keeps its own. The count is also a status of its own, read when it changes.  **Put the badge inside the control to have its count read with the control's name**, as Web Awesome and Shoelace do: '<button>Inbox <helix-badge value="8" label="8 unread"></helix-badge></button>' is the button "Inbox 8 unread", and stays current as the count changes. The styled tier's 'placement="inline"' draws the mark in the line for that case.  **An icon goes inside the mark** through the 'icon' slot, before the count, as Web Awesome's badge takes one at its start. With no 'value' the icon is the whole mark, such as a check on an avatar, drawn where the dot would be. The icon is hidden from screen readers: the count and 'label' are what the mark says. */
   "helix-headless-badge": DefineCustomElement<
     HelixHeadlessBadge,
     HelixHeadlessBadgeVueProps,
@@ -17146,7 +17203,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCanvasVueProps,
     HelixHeadlessCanvasVueEvents
   >;
-  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. These are the only names that work with server rendering, because reading a title from the light DOM needs a DOM, and the server has none. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so served actions sit on their own line until the script runs.  **The card says which regions it holds**, as ':state(has-media)', ':state(has-header)' and ':state(has-footer)', so a sheet can draw a card with a header differently, as Web Awesome's 'with-header' does, with no attribute written onto the card. Read in the browser, so a served card carries none until the script runs. */
+  /** The header, body, and footer regions are slots, because they have no state, behavior, or API of their own. You bring your own markup, so a title can be a real '<h2>'.  The host is the surface. The element itself takes the border, the radius, and the grid, so you style 'Card' directly and there is no wrapper part to reach through with '::part'.  Name the card with 'label', as a Stat Group is named, or with 'aria-label' or 'aria-labelledby'. 'label' is set through 'ElementInternals', so it writes no attribute onto the card. **A named card is a group**, so a reader entering it hears its name; an unnamed one has no role, since a group with no name only adds "group" to what a reader says.  **With none of those, a heading in 'header' names the card**, such as the '<h2>' of its title, by reference, so the name follows the heading's words. Reading a heading needs a DOM, so a served card is named by it once the script runs; 'label', 'aria-label' and 'aria-labelledby' are the names a server writes.  Each region's slot is a part of the same name, 'body' for the main content, as Web Awesome's card names its regions. A slot draws no box, so a part passes inherited properties to what is slotted, and a page wanting a box there gives it one with 'display'.  'header-actions' and 'footer-actions' hold controls at the end of the header's and the footer's line, as Web Awesome's card does. While one holds something, its line is a 'header-row' or 'footer-row' part; otherwise there is no wrapper and every region is a bare slot. A server cannot see slotted content, so a served card has no row; the styled tier sets served actions at the end of their line from the stylesheet alone, so they do not move when the script runs.  **The card says which regions it holds**, as ':state(has-media)', ':state(has-header)' and ':state(has-footer)', so a sheet can draw a card with a header differently, as Web Awesome's 'with-header' does, with no attribute written onto the card. Read in the browser, so a served card carries none until the script runs. */
   "helix-headless-card": DefineCustomElement<
     HelixHeadlessCard,
     HelixHeadlessCardVueProps,
@@ -17188,13 +17245,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCheckboxVueProps,
     HelixHeadlessCheckboxVueEvents
   >;
-  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
+  /** Renders a '<pre><code>' pair: 'pre' keeps the whitespace, and 'code' marks it as code. Long lines scroll inside the block and do not wrap, because a line break can be significant in code.  A copy button is on by default. Set 'no-copy' to remove it. The button copies the slotted text, so there is no second copy of the code to keep in sync.  For a fragment of code inside a sentence, use 'Code'.  Set 'line-numbers' to number the lines in a gutter beside the code, hidden from the accessibility tree and left out of a copy. Set 'highlight' to a function that turns the code into highlighted markup, such as one wrapping Shiki or Prism, and the block draws what it returns; it is handed the block's 'language', so one function serves every block. The code stays in the slot, so the copy button and the page's own text are the code as written.  Set 'expandable' on a block whose height is capped, such as by '--code-block-max-block-size', and a button under it shows every line and then fewer again, as a docs site's long example does. The button is drawn only while the cap hides something, says whether the block is expanded with 'aria-expanded', names the block it opens with 'aria-controls', and the block carries ':state(expanded)' while it is.  Set 'diff' to show a change. Put a unified diff, the output of 'git diff' or 'diff -u', in the same slot, and the block draws the lines it added and removed. The block never computes a diff itself. Line numbers come from the hunk headers and are hidden from the accessibility tree. Changed lines are '<ins>' and '<del>' with the '+' and '-' kept as text, so the change does not depend on color. Each file in the patch is its own block under its own name, and its copy button copies the new version of the file. 'variant="split"' shows the old version beside the new, each removal opposite its replacement.  **A block that scrolls is a tab stop.** While its lines run past its width or its cap, the scroller is a region named for the block, such as "Code, app.ts", that Tab reaches, so a keyboard scrolls it with the arrow keys in every browser. Chromium and Firefox make a scrolling box focusable on their own, and Safari does not. A block that fits is no stop at all.  **The code the block draws is marked untranslated**, 'translate="no"' on its '<pre>', so a page translator leaves highlighted lines and a diff as written. Code in the slot takes its translation mode from the element, which writes nothing onto itself, so set 'translate="no"' on the element to keep a translator off plain code too.  On the server, the slot renders as ordinary code, so a diff first appears as the patch text in a '<pre>'. The client makes the same first render, which keeps hydration clean, and draws the diff once it can read the content. Diff mode is experimental. The rest of the family is stable. */
   "helix-headless-code-block": DefineCustomElement<
     HelixHeadlessCodeBlock,
     HelixHeadlessCodeBlockVueProps,
     HelixHeadlessCodeBlockVueEvents
   >;
-  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
+  /** Renders a real '<code>' element, which marks the text as code for translation tools and document search. A styled span carries no such meaning, and a screen reader announces nothing about it.  **Set 'translate="no"' on the element to keep a page translator off the code.** A translator that rewrites prose would also rewrite an identifier. The slotted text takes its translation mode from the element, its parent in the page, and the element writes nothing onto itself, so the attribute is yours to set. The '<code>' inside carries 'translate="no"' for anything the element draws itself.  'Code' is inline only and never scrolls. For a block of code with its own box, its own overflow, and copying, use 'CodeBlock', which is a separate family. */
   "helix-headless-code": DefineCustomElement<
     HelixHeadlessCode,
     HelixHeadlessCodeVueProps,
@@ -17296,7 +17353,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrilldownVueProps,
     HelixHeadlessDrilldownVueEvents
   >;
-  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
+  /** Shows what would be in a region and the one action that would fill it, so an empty region does not look like one that failed to load.  The message is announced, because an empty view often replaces content that was loading, and the announcement tells a screen reader user that the search returned nothing. It is announced from a status region of its own, which is rendered empty and filled a frame after the view appears. Screen readers read a region that arrives with its text already in it inconsistently. For the seven seconds the region holds its copy, the heading and the message are hidden from screen readers, so the words are in the page once.  Every region is a bare slot. There is no 'empty-state-heading' or 'empty-state-actions' element: assign your own heading and actions to the slots. The icon, the message and the actions slots are parts of the same names, as Card's regions are. A slot draws no box, so a part passes inherited properties, such as color and font, to what is slotted, and a page wanting a box there gives it one with 'display', such as a row of actions with 'display: flex'.  **The view says which regions it holds**, as ':state(has-icon)' and ':state(has-actions)', so a sheet can space a view with no icon or no actions differently. Read in the browser, so a served view carries neither until the script runs.  **Or give the heading as words.** 'heading' draws them in a 'heading' part that is a heading at 'heading-level', 3 where it is not set, so a page rendering from data or on a server gets a heading a reader finds in the outline without writing the element. A heading slotted in replaces it.  **Whatever is slotted into 'heading' is read as a heading.** An element that is no heading, such as a '<span>' or a '<p>', is set inside the 'heading' part at 'heading-level', so a screen reader still finds it in the outline. A heading element, or an element holding one, keeps its own level. A server cannot see the slotted element, so a served '<span>' becomes a heading once the script runs. */
   "helix-headless-empty": DefineCustomElement<
     HelixHeadlessEmpty,
     HelixHeadlessEmptyVueProps,
@@ -17362,7 +17419,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  A name with no match renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  **Or point 'src' at an SVG file**, such as 'src="/icons/rocket.svg"', and the element fetches it and draws its shapes in 'currentColor' where the file does not color them. A file is fetched once a page, however many icons name it, and 'load' fires when it is drawn. Scripts, event handlers and 'javascript:' links in the file are taken out before it is drawn. A server fetches nothing, so a served icon with a 'src' is drawn once the script runs.  A name with no match, or a 'src' that is no SVG, renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
@@ -17632,7 +17689,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessQrCodeVueProps,
     HelixHeadlessQrCodeVueEvents
   >;
-  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  For a passage set off from the surrounding text, use a blockquote. */
+  /** Renders a real '<q>', so the browser supplies the quotation marks. It inserts the correct marks for the document's language and nests them correctly when one quotation sits inside another. Do not type quotation marks into the content: one that starts or ends with a typed mark warns once, with the runtime kind 'typed-marks'. A quotation in a language other than the page's takes 'lang' on the element, and its marks follow it: 'lang="de"' sets „…“ and 'lang="fr"' «…» inside an English page.  **'no-marks' leaves the marks off**, for a quotation set where the page draws its own, such as a pull quote with a large decorative mark beside it or a table of sayings. The quotation still counts toward nesting, so a quote inside it takes the inner marks it would have had. Text with marks typed into it raises no warning under 'no-marks'.  For a passage set off from the surrounding text, use a blockquote. */
   "helix-headless-quote": DefineCustomElement<
     HelixHeadlessQuote,
     HelixHeadlessQuoteVueProps,
@@ -17722,13 +17779,13 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSplitterVueProps,
     HelixHeadlessSplitterVueEvents
   >;
-  /** Screen readers announce the stats as a group. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
+  /** **A named group is a group**, so a screen reader announces the stats together under its name, such as "Usage, group". Name it with 'label', 'aria-label' or 'aria-labelledby'. An unnamed one has no role, since a group with no name only adds "group" to what a reader says, as an unnamed Card has none. The figures are read together and their order has no meaning, so the group does not announce positions such as "1 of 4". */
   "helix-headless-stat-group": DefineCustomElement<
     HelixHeadlessStatGroup,
     HelixHeadlessStatGroupVueProps,
     HelixHeadlessStatGroupVueEvents
   >;
-  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies. */
+  /** The label comes first in the markup and the value after it, so a screen reader reads what the figure counts before the number. Visually, the number stands out either way.  Both are bare slots. An element that assigned itself a slot on connect would add an attribute after upgrade, which markup rendered on the server by React does not have.  **A stat with a label is a group named by it**, so a reader moving through a dashboard hears "Revenue, group" and then the figure, its unit and its trend as one reading, rather than a run of loose words. The role and the name are set through 'ElementInternals' once the label is known, which writes no attribute; a stat with no label has no role. Put a 'Trend' in the 'trend' slot to have it read inside the group, after the figure it qualifies.  **Or give the figure as a number.** 'value' is written with 'Intl.NumberFormat', in 'locale' and with 'format-options', so 'value="1234567" format-options='{"notation":"compact"}'' shows '1.2M', and a server writes it as the browser does. A number in 'value' takes the place of a slotted figure.  **Each slot is a part of the same name**, and 'value' for the figure, so a page reaches the label, the unit and the trend from outside. A slot draws no box, so a part passes inherited properties to what is slotted. **The stat says which pieces it holds**, as ':state(has-label)', ':state(has-unit)' and ':state(has-trend)', read in the browser, so a served stat carries none until the script runs. */
   "helix-headless-stat": DefineCustomElement<
     HelixHeadlessStat,
     HelixHeadlessStatVueProps,

package/types/words.d.ts

@@ -538,6 +538,19 @@ declare module '@fusion.dev/helix-core' {
       valueMissingMessage: Message
     }
     'helix-code-block': {
+      /**
+       * The name of a block that scrolls, which is a tab stop while it does.
+       *
+       * English: `Code`
+       */
+      codeLabel: Message
+      /**
+       * The name of a block that scrolls, where the block has a name. `{code}` is
+       * `code-label` and `{name}` the block's name.
+       *
+       * English: `{code}, {name}`
+       */
+      codeNameLabel: Message
       /**
        * The expand button's words while the block shows every line.
        *