@fusion.dev/helix-headless 0.153.0 → 0.154.0

package/types/jsx.d.ts

@@ -4130,12 +4130,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;
-  /**  */
-  undefined?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixHeadlessCardSolidJsProps = {
@@ -4169,12 +4163,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. */
   "prop:mediaPlacement"?: (HelixHeadlessCard["mediaPlacement"]) | undefined;
-  /**  */
-  "attr:aria-labelledby"?: unknown;
-  /**  */
-  "prop:undefined"?: unknown;
-  /**  */
-  "attr:aria-label"?: unknown;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -5764,6 +5752,22 @@ Here rather than on each control. */
 };
 
 export type HelixHeadlessCodeBlockProps = {
+  /** 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. */
@@ -5904,6 +5908,22 @@ read, nor for a diff. */
 };
 
 export type HelixHeadlessCodeBlockSolidJsProps = {
+  /** 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. */
+  "attr: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. */
+  "prop: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. */
+  "attr: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. */
+  "prop:codeNameLabel"?: (HelixHeadlessCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "attr:collapse-label"?: (HelixHeadlessCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -14751,6 +14771,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
@@ -14765,9 +14790,9 @@ frameworks set properties and plain markup cannot, which is what `name` is
 for. Set both and this wins, the value being the more specific statement. */
   icon?: (HelixHeadlessIcon["icon"]) | undefined;
 
-  /** `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. */
   onerror?: ((e: HelixHeadlessIconElementEvent) => void) | undefined;
-  /** 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. */
   onload?: ((e: HelixHeadlessIconElementEvent) => void) | undefined;
 };
 
@@ -14795,6 +14820,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   "prop: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`. */
+  "prop: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
@@ -14808,9 +14838,9 @@ consumer's own drawings.
 frameworks set properties and plain markup cannot, which is what `name` is
 for. Set both and this wins, the value being the more specific statement. */
   "prop:icon"?: (HelixHeadlessIcon["icon"]) | undefined;
-  /** `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. */
   "on:error"?: ((e: HelixHeadlessIconElementEvent) => void) | undefined;
-  /** 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. */
   "on:load"?: ((e: HelixHeadlessIconElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
@@ -23052,11 +23082,39 @@ which is what makes it read as dots rather than as a softened square code. */
 export type HelixHeadlessQuoteProps = {
   /** 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 HelixHeadlessQuoteSolidJsProps = {
   /** URL identifying where the quotation came from. */
   "prop: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. */
+  "bool: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. */
+  "prop:noMarks"?: (HelixHeadlessQuote["noMarks"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -25935,12 +25993,18 @@ The arrow keys move by `step` and do not snap. */
 };
 
 export type HelixHeadlessStatGroupProps = {
-  /** 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;
 };
 
 export type HelixHeadlessStatGroupSolidJsProps = {
-  /** 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. */
   "prop:label"?: (HelixHeadlessStatGroup["label"]) | undefined;
 
   /** Set the innerHTML of the element */
@@ -25976,6 +26040,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 HelixHeadlessStatSolidJsProps = {
@@ -26005,6 +26092,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. */
   "prop: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. */
+  "attr: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. */
+  "prop: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. */
+  "prop: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. */
+  "prop:value"?: (HelixHeadlessStat["value"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -34093,6 +34203,12 @@ export type CustomElements = {
    * 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.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -34156,12 +34272,14 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The element being decorated.
+   * - `icon`: An icon inside the mark, before the count, or the whole mark when there is no value. Hidden from screen readers.
    *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `indicator`: The count, or the dot when there is no value.
+   * - `icon`: The slot the icon arrives through, inside the indicator. A slot draws no box, so it passes inherited properties, such as color, to the icon.
+   * - `indicator`: The count, or the dot when there is no value. Carries `data-dot` when there is no value, `data-single` when the count is one character, and `data-blank` when the value is zero.
    *
    * ## CSS States
    *
@@ -34169,7 +34287,8 @@ export type CustomElements = {
    *
    * - `blank`: The value is zero, so there is no mark.
    * - `capped`: The count is past `max`, so the mark shows `{max}+`.
-   * - `dot`: There is no value, so the mark is a dot.
+   * - `dot`: There is no value and no icon, so the mark is a dot.
+   * - `has-icon`: Something is slotted into `icon`, so it is drawn inside the mark.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-badge": Partial<
@@ -36059,13 +36178,17 @@ export type CustomElements = {
    * 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
+   * 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
@@ -36075,7 +36198,9 @@ export type CustomElements = {
    * 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.
+   * 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
@@ -36103,8 +36228,6 @@ export type CustomElements = {
    *
    * 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.
-   * - `aria-labelledby`/`undefined`: undefined
-   * - `aria-label`/`undefined`: undefined
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -36137,6 +36260,14 @@ export type CustomElements = {
    * - `header-actions`: Controls for the whole card at the end of the header's line, such as a menu.
    * - `media`: Image, video, or chart that runs edge to edge, outside the inset.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A name written
+   * or taken off asks for an update, because it decides whether the card is a
+   * group and whether its heading names it.
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -37485,6 +37616,18 @@ export type CustomElements = {
    * 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
@@ -37494,6 +37637,12 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `code-label`/`codeLabel`: 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-name-label`/`codeNameLabel`: The name of a block that scrolls, where the block has a name. `{code}` is
+   * `code-label` and `{name}` the block's name.
    * - `collapse-label`/`collapseLabel`: The expand button's words while the block shows every line.
    * - `copied-label`/`copiedLabel`: The copy button's name and tooltip text after a copy.
    * - `copy-label`/`copyLabel`: The copy button's name and tooltip text before a copy.
@@ -37659,6 +37808,13 @@ export type CustomElements = {
    * 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.
@@ -41719,7 +41875,16 @@ export type CustomElements = {
    *
    * 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.
+   * 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
@@ -41784,13 +41949,18 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `actions`: The slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; `display: flex` lays them out in a row.
    * - `heading`: The heading at `heading-level`: the one `heading` draws while nothing is slotted into `heading`, or the one around a slotted element that is no heading.
+   * - `icon`: The slot the icon arrives through, drawing no box, as `actions` does.
    * - `live`: A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.
+   * - `message`: The slot the message arrives through, drawing no box, as `actions` does.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `has-actions`: Something is slotted into `actions`.
+   * - `has-icon`: Something is slotted into `icon`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-empty": Partial<
@@ -44111,8 +44281,16 @@ export type CustomElements = {
    * 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
+   * **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
@@ -44149,6 +44327,10 @@ export type CustomElements = {
    *
    * A name written `prefix:name` asks the library registered under that
    * prefix.
+   * - `src`: 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`.
    * - `icon`: The icon to draw, as an object you import.
    *
    * **The scalable door, and the one this library uses internally.** An icon is
@@ -44186,8 +44368,8 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `error`: `name` matches no registered icon and no library answers it, so nothing is drawn.
-   * - `load`: A glyph a library gave later for `name` is drawn.
+   * - `error`: `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn.
+   * - `load`: A glyph a library gave later for `name`, or the file at `src`, is drawn.
    *
    * ## Methods
    *
@@ -51221,6 +51403,12 @@ export type CustomElements = {
    * 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.
    *
    * ## Attributes & Properties
@@ -51228,6 +51416,12 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `cite`: URL identifying where the quotation came from.
+   * - `no-marks`/`noMarks`: 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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -53951,15 +54145,21 @@ export type CustomElements = {
   >;
 
   /**
-   * 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".
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: Accessible name for the group.
+   * - `label`: 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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -53987,6 +54187,14 @@ export type CustomElements = {
    *
    * - `(default)`: The stats.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A name written
+   * or taken off asks for an update, because it decides whether the stats are
+   * a group.
+   *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
@@ -54013,6 +54221,19 @@ export type CustomElements = {
    * 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.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -54042,6 +54263,20 @@ export type CustomElements = {
    * 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.
+   * - `format-options`/`formatOptions`: `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.
+   * - `locale`: 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.
+   * - `value`: The figure as a number, written with `format-options` in `locale` in
+   * place of a slotted value.
+   *
+   * Absent leaves the figure to the slot.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -54076,12 +54311,18 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `value`: The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+   * - `label`: The slot the label arrives through, drawing no box, as `value` does.
+   * - `trend`: The slot the trend arrives through, drawing no box, as `value` does.
+   * - `unit`: The slot the unit arrives through, drawing no box, as `value` does.
+   * - `value`: The slot the value is written in, or the figure `value` writes. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `has-label`: Something is slotted into `label`.
+   * - `has-trend`: Something is slotted into `trend`.
+   * - `has-unit`: Something is slotted into `unit`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-stat": Partial<
@@ -61114,6 +61355,12 @@ export type CustomElementsSolidJs = {
    * 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.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -61177,12 +61424,14 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The element being decorated.
+   * - `icon`: An icon inside the mark, before the count, or the whole mark when there is no value. Hidden from screen readers.
    *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `indicator`: The count, or the dot when there is no value.
+   * - `icon`: The slot the icon arrives through, inside the indicator. A slot draws no box, so it passes inherited properties, such as color, to the icon.
+   * - `indicator`: The count, or the dot when there is no value. Carries `data-dot` when there is no value, `data-single` when the count is one character, and `data-blank` when the value is zero.
    *
    * ## CSS States
    *
@@ -61190,7 +61439,8 @@ export type CustomElementsSolidJs = {
    *
    * - `blank`: The value is zero, so there is no mark.
    * - `capped`: The count is past `max`, so the mark shows `{max}+`.
-   * - `dot`: There is no value, so the mark is a dot.
+   * - `dot`: There is no value and no icon, so the mark is a dot.
+   * - `has-icon`: Something is slotted into `icon`, so it is drawn inside the mark.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-badge": Partial<
@@ -63101,13 +63351,17 @@ export type CustomElementsSolidJs = {
    * 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
+   * 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
@@ -63117,7 +63371,9 @@ export type CustomElementsSolidJs = {
    * 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.
+   * 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
@@ -63145,8 +63401,6 @@ export type CustomElementsSolidJs = {
    *
    * 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.
-   * - `aria-labelledby`/`undefined`: undefined
-   * - `aria-label`/`undefined`: undefined
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -63179,6 +63433,14 @@ export type CustomElementsSolidJs = {
    * - `header-actions`: Controls for the whole card at the end of the header's line, such as a menu.
    * - `media`: Image, video, or chart that runs edge to edge, outside the inset.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A name written
+   * or taken off asks for an update, because it decides whether the card is a
+   * group and whether its heading names it.
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -64542,6 +64804,18 @@ export type CustomElementsSolidJs = {
    * 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
@@ -64551,6 +64825,12 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `code-label`/`codeLabel`: 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-name-label`/`codeNameLabel`: The name of a block that scrolls, where the block has a name. `{code}` is
+   * `code-label` and `{name}` the block's name.
    * - `collapse-label`/`collapseLabel`: The expand button's words while the block shows every line.
    * - `copied-label`/`copiedLabel`: The copy button's name and tooltip text after a copy.
    * - `copy-label`/`copyLabel`: The copy button's name and tooltip text before a copy.
@@ -64719,6 +64999,13 @@ export type CustomElementsSolidJs = {
    * 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.
@@ -68814,7 +69101,16 @@ export type CustomElementsSolidJs = {
    *
    * 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.
+   * 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
@@ -68879,13 +69175,18 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
+   * - `actions`: The slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; `display: flex` lays them out in a row.
    * - `heading`: The heading at `heading-level`: the one `heading` draws while nothing is slotted into `heading`, or the one around a slotted element that is no heading.
+   * - `icon`: The slot the icon arrives through, drawing no box, as `actions` does.
    * - `live`: A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.
+   * - `message`: The slot the message arrives through, drawing no box, as `actions` does.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `has-actions`: Something is slotted into `actions`.
+   * - `has-icon`: Something is slotted into `icon`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-empty": Partial<
@@ -71225,8 +71526,16 @@ export type CustomElementsSolidJs = {
    * 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
+   * **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
@@ -71263,6 +71572,10 @@ export type CustomElementsSolidJs = {
    *
    * A name written `prefix:name` asks the library registered under that
    * prefix.
+   * - `src`: 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`.
    * - `icon`: The icon to draw, as an object you import.
    *
    * **The scalable door, and the one this library uses internally.** An icon is
@@ -71300,8 +71613,8 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `error`: `name` matches no registered icon and no library answers it, so nothing is drawn.
-   * - `load`: A glyph a library gave later for `name` is drawn.
+   * - `error`: `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn.
+   * - `load`: A glyph a library gave later for `name`, or the file at `src`, is drawn.
    *
    * ## Methods
    *
@@ -78434,6 +78747,12 @@ export type CustomElementsSolidJs = {
    * 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.
    *
    * ## Attributes & Properties
@@ -78441,6 +78760,12 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `cite`: URL identifying where the quotation came from.
+   * - `no-marks`/`noMarks`: 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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -81199,15 +81524,21 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * 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".
    *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: Accessible name for the group.
+   * - `label`: 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.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -81235,6 +81566,14 @@ export type CustomElementsSolidJs = {
    *
    * - `(default)`: The stats.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `attributeChangedCallback(name: string, old: string | null, value: string | null) => void`: Called by the browser when an observed attribute changes. A name written
+   * or taken off asks for an update, because it decides whether the stats are
+   * a group.
+   *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
@@ -81264,6 +81603,19 @@ export type CustomElementsSolidJs = {
    * 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.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -81293,6 +81645,20 @@ export type CustomElementsSolidJs = {
    * 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.
+   * - `format-options`/`formatOptions`: `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.
+   * - `locale`: 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.
+   * - `value`: The figure as a number, written with `format-options` in `locale` in
+   * place of a slotted value.
+   *
+   * Absent leaves the figure to the slot.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -81327,12 +81693,18 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `value`: The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
+   * - `label`: The slot the label arrives through, drawing no box, as `value` does.
+   * - `trend`: The slot the trend arrives through, drawing no box, as `value` does.
+   * - `unit`: The slot the unit arrives through, drawing no box, as `value` does.
+   * - `value`: The slot the value is written in, or the figure `value` writes. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
    *
    * ## CSS States
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `has-label`: Something is slotted into `label`.
+   * - `has-trend`: Something is slotted into `trend`.
+   * - `has-unit`: Something is slotted into `unit`.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-stat": Partial<