@fusion.dev/helix 0.153.0 → 0.154.0

package/types/jsx.d.ts

@@ -5170,12 +5170,6 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  undefined?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixCardSolidJsProps = {
@@ -5258,12 +5252,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"?: (HelixCard["mediaPlacement"]) | undefined;
-  /**  */
-  "attr:aria-labelledby"?: unknown;
-  /**  */
-  "prop:undefined"?: unknown;
-  /**  */
-  "attr:aria-label"?: unknown;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -7377,6 +7365,22 @@ significant in code and a wrapped line reads as two. For prose-like code, such a
 a log line, a wrap reads better than a scroll. Line numbers keep the lines
 unwrapped, since a wrapped line would take one number and several rows. */
   wrap?: (HelixCodeBlock["wrap"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "code-label"?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  codeLabel?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "code-name-label"?: (HelixCodeBlock["codeNameLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  codeNameLabel?: (HelixCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "collapse-label"?: (HelixCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -7524,6 +7528,22 @@ significant in code and a wrapped line reads as two. For prose-like code, such a
 a log line, a wrap reads better than a scroll. Line numbers keep the lines
 unwrapped, since a wrapped line would take one number and several rows. */
   "prop:wrap"?: (HelixCodeBlock["wrap"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "attr:code-label"?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, which is a tab stop while it does.
+
+Where the block has a name, the scroller says it too, such as "Code,
+app.ts", as `code-name-label` puts it. */
+  "prop:codeLabel"?: (HelixCodeBlock["codeLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "attr:code-name-label"?: (HelixCodeBlock["codeNameLabel"]) | undefined;
+  /** The name of a block that scrolls, where the block has a name. `{code}` is
+`code-label` and `{name}` the block's name. */
+  "prop:codeNameLabel"?: (HelixCodeBlock["codeNameLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
   "attr:collapse-label"?: (HelixCodeBlock["collapseLabel"]) | undefined;
   /** The expand button's words while the block shows every line. */
@@ -17073,6 +17093,31 @@ invoker without an id in the same tree needs. */
 export type HelixIconElementEvent<E = Event> = TypedEvent<HelixIcon, E>;
 
 export type HelixIconProps = {
+  /** A motion that draws the eye or says work is going on: `spin` turns the
+glyph without end, `pulse` fades it in and out, and `beat` swells it.
+
+Absent is still. Reduced motion stills every one of them. */
+  animation?: (HelixIcon["animation"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  "auto-width"?: (HelixIcon["autoWidth"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  autoWidth?: (HelixIcon["autoWidth"]) | undefined;
+  /** Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+`both` across both.
+
+Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+that follows the direction. */
+  flip?: (HelixIcon["flip"]) | undefined;
+  /** Turns the glyph clockwise by 90, 180 or 270 degrees.
+
+Absent draws it upright. `--icon-rotate` turns it by any other angle. */
+  rotate?: (HelixIcon["rotate"]) | undefined;
   /** The icon's name, read by screen readers. Set it for an icon that is not
 decorative. */
   label?: (HelixIcon["label"]) | undefined;
@@ -17096,6 +17141,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  src?: (HelixIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -17110,13 +17160,38 @@ 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?: (HelixIcon["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: HelixIconElementEvent) => 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: HelixIconElementEvent) => void) | undefined;
 };
 
 export type HelixIconSolidJsProps = {
+  /** A motion that draws the eye or says work is going on: `spin` turns the
+glyph without end, `pulse` fades it in and out, and `beat` swells it.
+
+Absent is still. Reduced motion stills every one of them. */
+  "prop:animation"?: (HelixIcon["animation"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  "bool:auto-width"?: (HelixIcon["autoWidth"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  "prop:autoWidth"?: (HelixIcon["autoWidth"]) | undefined;
+  /** Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+`both` across both.
+
+Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+that follows the direction. */
+  "prop:flip"?: (HelixIcon["flip"]) | undefined;
+  /** Turns the glyph clockwise by 90, 180 or 270 degrees.
+
+Absent draws it upright. `--icon-rotate` turns it by any other angle. */
+  "prop:rotate"?: (HelixIcon["rotate"]) | undefined;
   /** The icon's name, read by screen readers. Set it for an icon that is not
 decorative. */
   "prop:label"?: (HelixIcon["label"]) | undefined;
@@ -17140,6 +17215,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   "prop:name"?: (HelixIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  "prop:src"?: (HelixIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -17153,9 +17233,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"?: (HelixIcon["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: HelixIconElementEvent) => 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: HelixIconElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
@@ -25940,11 +26020,39 @@ which is what makes it read as dots rather than as a softened square code. */
 export type HelixQuoteProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "no-marks"?: (HelixQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  noMarks?: (HelixQuote["noMarks"]) | undefined;
 };
 
 export type HelixQuoteSolidJsProps = {
   /** URL identifying where the quotation came from. */
   "prop:cite"?: (HelixQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "bool:no-marks"?: (HelixQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "prop:noMarks"?: (HelixQuote["noMarks"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -28591,6 +28699,11 @@ fade the fill in and out, or `none` to sit still.
 
 Reduced motion stills both. */
   effect?: (HelixSkeleton["effect"]) | undefined;
+  /** How many lines of text the placeholder stands for, with `shape="text"`.
+
+Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+paragraph by it. */
+  lines?: (HelixSkeleton["lines"]) | undefined;
   /** The shape of the placeholder: `text`, `circle`, or a block when unset.
 
 Unset is a block, which is what most missing things are. A block is the
@@ -28616,6 +28729,11 @@ fade the fill in and out, or `none` to sit still.
 
 Reduced motion stills both. */
   "prop:effect"?: (HelixSkeleton["effect"]) | undefined;
+  /** How many lines of text the placeholder stands for, with `shape="text"`.
+
+Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+paragraph by it. */
+  "prop:lines"?: (HelixSkeleton["lines"]) | undefined;
   /** The shape of the placeholder: `text`, `circle`, or a block when unset.
 
 Unset is a block, which is what most missing things are. A block is the
@@ -30031,7 +30149,10 @@ figures compared one against another keep their own widths. */
   columns?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   divided?: (HelixStatGroup["divided"]) | undefined;
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   label?: (HelixStatGroup["label"]) | undefined;
 };
 
@@ -30045,7 +30166,10 @@ figures compared one against another keep their own widths. */
   "prop:columns"?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   "prop:divided"?: (HelixStatGroup["divided"]) | undefined;
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   "prop:label"?: (HelixStatGroup["label"]) | undefined;
 
   /** Set the innerHTML of the element */
@@ -30081,6 +30205,29 @@ reports a hydration mismatch. The absent attribute is the column, which the
 stylesheet reads as the base case, and the server spec asserts the host
 carries nothing nobody wrote. */
   direction?: (HelixStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "format-options"?: (HelixStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  formatOptions?: (HelixStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  locale?: (HelixStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  value?: (HelixStat["value"]) | undefined;
 };
 
 export type HelixStatSolidJsProps = {
@@ -30110,6 +30257,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"?: (HelixStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "attr:format-options"?: (HelixStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "prop:formatOptions"?: (HelixStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  "prop:locale"?: (HelixStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  "prop:value"?: (HelixStat["value"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -38869,6 +39039,7 @@ 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 Custom Properties
    *
@@ -38879,6 +39050,7 @@ export type CustomElements = {
    * - `--badge-color`: The color of the count, to pair with a fill set through `--badge-background-color`.
    * - `--badge-font-weight`: The weight of the count.
    * - `--badge-gap`: The space between the content and the count under `placement="inline"`.
+   * - `--badge-icon-size`: The size of an icon in the `icon` slot. The count's own size by default.
    * - `--badge-offset`: Pulls the mark in from the corner, along both axes.
    * - `--badge-radius`: How far the indicator's corners are rounded.
    * - `--badge-ring-color`: The color of the ring between the indicator and what is behind it.
@@ -38887,7 +39059,8 @@ export type CustomElements = {
    *
    * 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
    *
@@ -38895,7 +39068,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-badge": Partial<HelixBadgeProps & BaseProps<HelixBadge> & BaseEvents<HelixBadge>>;
@@ -40931,8 +41105,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
@@ -40965,6 +41137,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 Custom Properties
    *
    * CSS variables available for styling the component.
@@ -42378,6 +42558,12 @@ export type CustomElements = {
    * significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
    * a log line, a wrap reads better than a scroll. Line numbers keep the lines
    * unwrapped, since a wrapped line would take one number and several rows.
+   * - `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.
@@ -46640,13 +46826,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-empty": Partial<HelixEmptyProps & BaseProps<HelixEmpty> & BaseEvents<HelixEmpty>>;
@@ -49016,10 +49207,33 @@ export type CustomElements = {
    * Inside a button, `--icon-size` is set in `em`, so the icon scales with the
    * button.
    *
+   * **The glyph turns, flips and moves inside its own box**, so the line around
+   * it keeps its place: `rotate` turns it by a quarter, a half or three
+   * quarters, `--icon-rotate` by any angle, `flip` mirrors it across either
+   * axis, and `animation` spins, pulses or beats it, as Web Awesome's icon does.
+   * Reduced motion stills every animation. `auto-width` gives the box the
+   * glyph's own proportions, for a mark wider than it is tall.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `animation`: A motion that draws the eye or says work is going on: `spin` turns the
+   * glyph without end, `pulse` fades it in and out, and `beat` swells it.
+   *
+   * Absent is still. Reduced motion stills every one of them.
+   * - `auto-width`/`autoWidth`: Whether the box takes the glyph's own proportions, its height from
+   * `--icon-size` and its width from the glyph's box.
+   *
+   * Absent is a square, which lines icons up in a column.
+   * - `flip`: Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+   * `both` across both.
+   *
+   * Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+   * that follows the direction.
+   * - `rotate`: Turns the glyph clockwise by 90, 180 or 270 degrees.
+   *
+   * Absent draws it upright. `--icon-rotate` turns it by any other angle.
    * - `label`: The icon's name, read by screen readers. Set it for an icon that is not
    * decorative.
    * - `mirror`: Flips the glyph on a right-to-left page. Use it for an arrow that means
@@ -49040,6 +49254,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
@@ -49077,8 +49295,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
    *
@@ -49092,7 +49310,9 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--icon-size`: The width and height of the icon's box.
+   * - `--icon-animation-duration`: How long one turn, pulse or beat of `animation` takes.
+   * - `--icon-rotate`: An angle the glyph is turned by, such as `45deg`. `rotate` wins over it.
+   * - `--icon-size`: The width and height of the icon's box. The height alone under `auto-width`.
    *
    * ## CSS Parts
    *
@@ -55989,6 +56209,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
@@ -58161,6 +58387,11 @@ export type CustomElements = {
    * Around content with `loading`, the skeleton takes the content's box and
    * paints over it, and the content is hidden until `loading` is taken off.
    *
+   * **`lines` draws a paragraph.** With `shape="text"` and `lines="3"`, one
+   * element stands in for three lines of text: each line a `skeleton` part one
+   * `em` tall, spaced a body line height apart, and the last one shorter, as the end
+   * of a paragraph is.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -58169,6 +58400,10 @@ export type CustomElements = {
    * fade the fill in and out, or `none` to sit still.
    *
    * Reduced motion stills both.
+   * - `lines`: How many lines of text the placeholder stands for, with `shape="text"`.
+   *
+   * Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+   * paragraph by it.
    * - `shape`: The shape of the placeholder: `text`, `circle`, or a block when unset.
    *
    * Unset is a block, which is what most missing things are. A block is the
@@ -58217,6 +58452,7 @@ export type CustomElements = {
    * - `--skeleton-block-size`: The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
    * - `--skeleton-color`: The placeholder's fill.
    * - `--skeleton-duration`: How long one sweep or one pulse takes.
+   * - `--skeleton-last-line-size`: The width of the last line of a `lines` paragraph. Defaults to 60%.
    * - `--skeleton-radius`: The corner of the block shape.
    * - `--skeleton-sheen-color`: The highlight the sweep carries across the fill.
    * - `--skeleton-size`: The diameter of the circle shape.
@@ -58226,8 +58462,10 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `content`: The box around the content, hidden while `loading`.
+   * - `line`: Each line of a `lines` paragraph, which is also a `skeleton` part.
+   * - `lines`: The column holding a `lines` paragraph, drawn only for `shape="text"` with two or more lines.
    * - `sheen`: The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
-   * - `skeleton`: The placeholder shape.
+   * - `skeleton`: The placeholder shape, or each line of a `lines` paragraph.
    *
    * ## CSS States
    *
@@ -59395,7 +59633,10 @@ export type CustomElements = {
    * with its rule; and a count is what a set of facts read across wants, where
    * figures compared one against another keep their own widths.
    * - `divided`: Draws a rule between the figures, in addition to the space.
-   * - `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
@@ -59423,6 +59664,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 Custom Properties
    *
    * CSS variables available for styling the component.
@@ -59474,6 +59723,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
@@ -59521,11 +59784,17 @@ 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.
    *
    * ## 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-stat": Partial<HelixStatProps & BaseProps<HelixStat> & BaseEvents<HelixStat>>;
@@ -66541,6 +66810,7 @@ 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 Custom Properties
    *
@@ -66551,6 +66821,7 @@ export type CustomElementsSolidJs = {
    * - `--badge-color`: The color of the count, to pair with a fill set through `--badge-background-color`.
    * - `--badge-font-weight`: The weight of the count.
    * - `--badge-gap`: The space between the content and the count under `placement="inline"`.
+   * - `--badge-icon-size`: The size of an icon in the `icon` slot. The count's own size by default.
    * - `--badge-offset`: Pulls the mark in from the corner, along both axes.
    * - `--badge-radius`: How far the indicator's corners are rounded.
    * - `--badge-ring-color`: The color of the ring between the indicator and what is behind it.
@@ -66559,7 +66830,8 @@ export type CustomElementsSolidJs = {
    *
    * 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
    *
@@ -66567,7 +66839,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-badge": Partial<
@@ -68638,8 +68911,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
@@ -68672,6 +68943,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 Custom Properties
    *
    * CSS variables available for styling the component.
@@ -70104,6 +70383,12 @@ export type CustomElementsSolidJs = {
    * significant in code and a wrapped line reads as two. For prose-like code, such as a long command or
    * a log line, a wrap reads better than a scroll. Line numbers keep the lines
    * unwrapped, since a wrapped line would take one number and several rows.
+   * - `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.
@@ -74417,13 +74702,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-empty": Partial<
@@ -76834,10 +77124,33 @@ export type CustomElementsSolidJs = {
    * Inside a button, `--icon-size` is set in `em`, so the icon scales with the
    * button.
    *
+   * **The glyph turns, flips and moves inside its own box**, so the line around
+   * it keeps its place: `rotate` turns it by a quarter, a half or three
+   * quarters, `--icon-rotate` by any angle, `flip` mirrors it across either
+   * axis, and `animation` spins, pulses or beats it, as Web Awesome's icon does.
+   * Reduced motion stills every animation. `auto-width` gives the box the
+   * glyph's own proportions, for a mark wider than it is tall.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `animation`: A motion that draws the eye or says work is going on: `spin` turns the
+   * glyph without end, `pulse` fades it in and out, and `beat` swells it.
+   *
+   * Absent is still. Reduced motion stills every one of them.
+   * - `auto-width`/`autoWidth`: Whether the box takes the glyph's own proportions, its height from
+   * `--icon-size` and its width from the glyph's box.
+   *
+   * Absent is a square, which lines icons up in a column.
+   * - `flip`: Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+   * `both` across both.
+   *
+   * Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+   * that follows the direction.
+   * - `rotate`: Turns the glyph clockwise by 90, 180 or 270 degrees.
+   *
+   * Absent draws it upright. `--icon-rotate` turns it by any other angle.
    * - `label`: The icon's name, read by screen readers. Set it for an icon that is not
    * decorative.
    * - `mirror`: Flips the glyph on a right-to-left page. Use it for an arrow that means
@@ -76858,6 +77171,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
@@ -76895,8 +77212,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
    *
@@ -76910,7 +77227,9 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--icon-size`: The width and height of the icon's box.
+   * - `--icon-animation-duration`: How long one turn, pulse or beat of `animation` takes.
+   * - `--icon-rotate`: An angle the glyph is turned by, such as `45deg`. `rotate` wins over it.
+   * - `--icon-size`: The width and height of the icon's box. The height alone under `auto-width`.
    *
    * ## CSS Parts
    *
@@ -83945,6 +84264,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
@@ -86160,6 +86485,11 @@ export type CustomElementsSolidJs = {
    * Around content with `loading`, the skeleton takes the content's box and
    * paints over it, and the content is hidden until `loading` is taken off.
    *
+   * **`lines` draws a paragraph.** With `shape="text"` and `lines="3"`, one
+   * element stands in for three lines of text: each line a `skeleton` part one
+   * `em` tall, spaced a body line height apart, and the last one shorter, as the end
+   * of a paragraph is.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -86168,6 +86498,10 @@ export type CustomElementsSolidJs = {
    * fade the fill in and out, or `none` to sit still.
    *
    * Reduced motion stills both.
+   * - `lines`: How many lines of text the placeholder stands for, with `shape="text"`.
+   *
+   * Absent, or 1, is one line. Reflected, because the stylesheet sizes a
+   * paragraph by it.
    * - `shape`: The shape of the placeholder: `text`, `circle`, or a block when unset.
    *
    * Unset is a block, which is what most missing things are. A block is the
@@ -86216,6 +86550,7 @@ export type CustomElementsSolidJs = {
    * - `--skeleton-block-size`: The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
    * - `--skeleton-color`: The placeholder's fill.
    * - `--skeleton-duration`: How long one sweep or one pulse takes.
+   * - `--skeleton-last-line-size`: The width of the last line of a `lines` paragraph. Defaults to 60%.
    * - `--skeleton-radius`: The corner of the block shape.
    * - `--skeleton-sheen-color`: The highlight the sweep carries across the fill.
    * - `--skeleton-size`: The diameter of the circle shape.
@@ -86225,8 +86560,10 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `content`: The box around the content, hidden while `loading`.
+   * - `line`: Each line of a `lines` paragraph, which is also a `skeleton` part.
+   * - `lines`: The column holding a `lines` paragraph, drawn only for `shape="text"` with two or more lines.
    * - `sheen`: The highlight swept across the shape. Hidden for `effect="pulse"` and `effect="none"`.
-   * - `skeleton`: The placeholder shape.
+   * - `skeleton`: The placeholder shape, or each line of a `lines` paragraph.
    *
    * ## CSS States
    *
@@ -87418,7 +87755,10 @@ export type CustomElementsSolidJs = {
    * with its rule; and a count is what a set of facts read across wants, where
    * figures compared one against another keep their own widths.
    * - `divided`: Draws a rule between the figures, in addition to the space.
-   * - `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
@@ -87446,6 +87786,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 Custom Properties
    *
    * CSS variables available for styling the component.
@@ -87500,6 +87848,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
@@ -87547,11 +87909,17 @@ 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.
    *
    * ## 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-stat": Partial<
@@ -93386,6 +93754,8 @@ export type CustomCssProperties = {
   "--badge-font-weight"?: (string) | undefined;
   /** The space between the content and the count under `placement="inline"`. */
   "--badge-gap"?: (string) | undefined;
+  /** The size of an icon in the `icon` slot. The count's own size by default. */
+  "--badge-icon-size"?: (string) | undefined;
   /** Pulls the mark in from the corner, along both axes. */
   "--badge-offset"?: (string) | undefined;
   /** How far the indicator's corners are rounded. */
@@ -94246,7 +94616,11 @@ export type CustomCssProperties = {
   "--heatmap-rows"?: (string) | undefined;
   /** The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it. */
   "--heatmap-tone"?: (string) | undefined;
-  /** The width and height of the icon's box. */
+  /** How long one turn, pulse or beat of `animation` takes. */
+  "--icon-animation-duration"?: (string) | undefined;
+  /** An angle the glyph is turned by, such as `45deg`. `rotate` wins over it. */
+  "--icon-rotate"?: (string) | undefined;
+  /** The width and height of the icon's box. The height alone under `auto-width`. */
   "--icon-size"?: (string) | undefined;
   /** The aspect ratio of the box, such as `16 / 9`. */
   "--image-aspect"?: (string) | undefined;
@@ -95052,6 +95426,8 @@ export type CustomCssProperties = {
   "--skeleton-color"?: (string) | undefined;
   /** How long one sweep or one pulse takes. */
   "--skeleton-duration"?: (string) | undefined;
+  /** The width of the last line of a `lines` paragraph. Defaults to 60%. */
+  "--skeleton-last-line-size"?: (string) | undefined;
   /** The corner of the block shape. */
   "--skeleton-radius"?: (string) | undefined;
   /** The highlight the sweep carries across the fill. */