@fusion.dev/helix 0.153.0 → 0.154.0

package/types/vue.d.ts

@@ -2708,10 +2708,6 @@ twice what this says once.
 Reflected and undefaulted, so a card that has not asked reads as a card
 with no attribute on it and the stylesheet only describes the departure. */
   mediaPlacement?: (HelixCard["mediaPlacement"]) | undefined;
-  /**  */
-  "aria-labelledby"?: unknown;
-  /**  */
-  "aria-label"?: unknown;
 };
 
 export type HelixCardVueEvents = {};
@@ -3795,6 +3791,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. */
@@ -8736,6 +8748,31 @@ export type HelixIconButtonVueEvents = {
 export type HelixIconElementEvent<E = Event> = TypedEvent<HelixIcon, E>;
 
 export type HelixIconVueProps = {
+  /** A motion that draws the eye or says work is going on: `spin` turns the
+glyph without end, `pulse` fades it in and out, and `beat` swells it.
+
+Absent is still. Reduced motion stills every one of them. */
+  animation?: (HelixIcon["animation"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  "auto-width"?: (HelixIcon["autoWidth"]) | undefined;
+  /** Whether the box takes the glyph's own proportions, its height from
+`--icon-size` and its width from the glyph's box.
+
+Absent is a square, which lines icons up in a column. */
+  autoWidth?: (HelixIcon["autoWidth"]) | undefined;
+  /** Mirrors the glyph across an axis: `x` left to right, `y` top to bottom,
+`both` across both.
+
+Absent draws it as it is. On a right-to-left page, `mirror` is the flip
+that follows the direction. */
+  flip?: (HelixIcon["flip"]) | undefined;
+  /** Turns the glyph clockwise by 90, 180 or 270 degrees.
+
+Absent draws it upright. `--icon-rotate` turns it by any other angle. */
+  rotate?: (HelixIcon["rotate"]) | undefined;
   /** The icon's name, read by screen readers. Set it for an icon that is not
 decorative. */
   label?: (HelixIcon["label"]) | undefined;
@@ -8759,6 +8796,11 @@ the value instead.
 A name written `prefix:name` asks the library registered under that
 prefix. */
   name?: (HelixIcon["name"]) | undefined;
+  /** The URL of an SVG file to draw, fetched once a page and drawn in
+`currentColor` where the file does not color its shapes.
+
+Wins over `name`; `icon` wins over both. Absent draws `name`. */
+  src?: (HelixIcon["src"]) | undefined;
   /** The icon to draw, as an object you import.
 
 **The scalable door, and the one this library uses internally.** An icon is
@@ -8775,9 +8817,9 @@ for. Set both and this wins, the value being the more specific statement. */
 };
 
 export type HelixIconVueEvents = {
-  /** `name` matches no registered icon and no library answers it, so nothing is drawn. */
+  /** `name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn. */
   error: HelixIconElementEvent;
-  /** A glyph a library gave later for `name` is drawn. */
+  /** A glyph a library gave later for `name`, or the file at `src`, is drawn. */
   load: HelixIconElementEvent;
 };
 
@@ -13287,6 +13329,20 @@ export type HelixQrCodeVueEvents = {
 export type HelixQuoteVueProps = {
   /** URL identifying where the quotation came from. */
   cite?: (HelixQuote["cite"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  "no-marks"?: (HelixQuote["noMarks"]) | undefined;
+  /** Whether to leave the quotation marks off, for a quotation set where the
+page draws its own.
+
+Negative, because the marks are on by default and a boolean attribute is
+true whenever it is present. Reflected, because a stylesheet takes the
+marks off on it. */
+  noMarks?: (HelixQuote["noMarks"]) | undefined;
 };
 
 export type HelixQuoteVueEvents = {};
@@ -14653,6 +14709,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
@@ -15385,7 +15446,10 @@ figures compared one against another keep their own widths. */
   columns?: (HelixStatGroup["columns"]) | undefined;
   /** Draws a rule between the figures, in addition to the space. */
   divided?: (HelixStatGroup["divided"]) | undefined;
-  /** Accessible name for the group. */
+  /** Accessible name for the group, which makes it a group.
+
+Absent leaves the stats with no group around them, unless `aria-label` or
+`aria-labelledby` names it. */
   label?: (HelixStatGroup["label"]) | undefined;
 };
 
@@ -15418,6 +15482,29 @@ reports a hydration mismatch. The absent attribute is the column, which the
 stylesheet reads as the base case, and the server spec asserts the host
 carries nothing nobody wrote. */
   direction?: (HelixStat["direction"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  "format-options"?: (HelixStat["formatOptions"]) | undefined;
+  /** `Intl.NumberFormat` options `value` is written with, such as
+`{"notation":"compact"}` for `1.2M` or `{"style":"percent"}` for `98%`,
+written as JSON in the attribute.
+
+Absent writes the number as the locale writes any number. */
+  formatOptions?: (HelixStat["formatOptions"]) | undefined;
+  /** The locale `value` is written in, such as `de` for `1.234.567`.
+
+Absent reads the nearest `lang`, then the runtime's own. Set it on a page
+rendered on a server, so the server and the browser write the figure
+alike. */
+  locale?: (HelixStat["locale"]) | undefined;
+  /** The figure as a number, written with `format-options` in `locale` in
+place of a slotted value.
+
+Absent leaves the figure to the slot. */
+  value?: (HelixStat["value"]) | undefined;
 };
 
 export type HelixStatVueEvents = {};
@@ -19308,6 +19395,8 @@ export type CustomCssProperties = {
   "--badge-font-weight"?: (string) | undefined;
   /** The space between the content and the count under `placement="inline"`. */
   "--badge-gap"?: (string) | undefined;
+  /** The size of an icon in the `icon` slot. The count's own size by default. */
+  "--badge-icon-size"?: (string) | undefined;
   /** Pulls the mark in from the corner, along both axes. */
   "--badge-offset"?: (string) | undefined;
   /** How far the indicator's corners are rounded. */
@@ -20168,7 +20257,11 @@ export type CustomCssProperties = {
   "--heatmap-rows"?: (string) | undefined;
   /** The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it. */
   "--heatmap-tone"?: (string) | undefined;
-  /** The width and height of the icon's box. */
+  /** How long one turn, pulse or beat of `animation` takes. */
+  "--icon-animation-duration"?: (string) | undefined;
+  /** An angle the glyph is turned by, such as `45deg`. `rotate` wins over it. */
+  "--icon-rotate"?: (string) | undefined;
+  /** The width and height of the icon's box. The height alone under `auto-width`. */
   "--icon-size"?: (string) | undefined;
   /** The aspect ratio of the box, such as `16 / 9`. */
   "--image-aspect"?: (string) | undefined;
@@ -20974,6 +21067,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. */
@@ -21954,7 +22049,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixIconButtonVueProps,
     HelixIconButtonVueEvents
   >;
-  /** Draws in 'currentColor' and sizes from '--icon-size', so an icon takes the color of the text around it and a container can resize it without a property. Inside a button, '--icon-size' is set in 'em', so the icon scales with the button. */
+  /** Draws in 'currentColor' and sizes from '--icon-size', so an icon takes the color of the text around it and a container can resize it without a property. Inside a button, '--icon-size' is set in 'em', so the icon scales with the button.  **The glyph turns, flips and moves inside its own box**, so the line around it keeps its place: 'rotate' turns it by a quarter, a half or three quarters, '--icon-rotate' by any angle, 'flip' mirrors it across either axis, and 'animation' spins, pulses or beats it, as Web Awesome's icon does. Reduced motion stills every animation. 'auto-width' gives the box the glyph's own proportions, for a mark wider than it is tall. */
   "helix-icon": DefineCustomElement<
     HelixIcon,
     HelixIconVueProps,
@@ -22308,7 +22403,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixSelectVueProps,
     HelixSelectVueEvents
   >;
-  /** Animates a highlight sweeping across the block, which reads as work in progress. A block fading in and out can look broken, so 'effect="pulse"' is a choice rather than the default.  Around content with 'loading', the skeleton takes the content's box and paints over it, and the content is hidden until 'loading' is taken off. */
+  /** Animates a highlight sweeping across the block, which reads as work in progress. A block fading in and out can look broken, so 'effect="pulse"' is a choice rather than the default.  Around content with 'loading', the skeleton takes the content's box and paints over it, and the content is hidden until 'loading' is taken off.  **'lines' draws a paragraph.** With 'shape="text"' and 'lines="3"', one element stands in for three lines of text: each line a 'skeleton' part one 'em' tall, spaced a body line height apart, and the last one shorter, as the end of a paragraph is. */
   "helix-skeleton": DefineCustomElement<
     HelixSkeleton,
     HelixSkeletonVueProps,

package/types/words.d.ts

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