@fusion.dev/helix-headless 0.132.0 → 0.133.1

package/custom-elements.json

@@ -7777,6 +7777,10 @@
             {
               "description": "The inner control.",
               "name": "button"
+            },
+            {
+              "description": "The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.",
+              "name": "text"
             }
           ],
           "slots": [
@@ -21869,6 +21873,10 @@
               "description": "The clipboard icon, and the check mark that replaces it after a copy.",
               "name": "copy-mark"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "copy-text"
+            },
             {
               "description": "The copy button's tooltip.",
               "name": "copy-tooltip"
@@ -23189,6 +23197,10 @@
               "description": "The button inside `picker-eyedropper`.",
               "name": "picker-eyedropper-button"
             },
+            {
+              "description": "The words on the button inside `picker-eyedropper`.",
+              "name": "picker-eyedropper-text"
+            },
             {
               "description": "The row holding the value and the tools.",
               "name": "picker-footer"
@@ -23201,6 +23213,10 @@
               "description": "The button inside `picker-format`.",
               "name": "picker-format-button"
             },
+            {
+              "description": "The words on the button inside `picker-format`.",
+              "name": "picker-format-text"
+            },
             {
               "description": "The saturation and brightness square.",
               "name": "picker-grid"
@@ -25149,6 +25165,10 @@
               "description": "The button inside `eyedropper`.",
               "name": "eyedropper-button"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "eyedropper-text"
+            },
             {
               "description": "The row holding the value and the tools.",
               "name": "footer"
@@ -25161,6 +25181,10 @@
               "description": "The button inside `format`.",
               "name": "format-button"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "format-text"
+            },
             {
               "description": "The saturation and brightness square. Draw the mark that shows where the color sits with `::part(grid)::after` in your stylesheet. The square carries the two channels as `--color-picker-saturation` and `--color-picker-brightness`, and this tier ships no CSS.",
               "name": "grid"
@@ -29839,6 +29863,14 @@
             {
               "description": "The bubble while it is above the button. Set together with `tooltip`.",
               "name": "tooltip-top"
+            },
+            {
+              "description": "The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessButton",
+                "module": "src/button/root/button-root.ts"
+              }
             }
           ],
           "slots": [
@@ -54019,6 +54051,14 @@
                 "name": "HelixHeadlessButton",
                 "module": "src/button/root/button-root.ts"
               }
+            },
+            {
+              "description": "The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessButton",
+                "module": "src/button/root/button-root.ts"
+              }
             }
           ],
           "slots": [
@@ -82379,6 +82419,10 @@
               "description": "The clipboard icon, and the confirmation icon that replaces it.",
               "name": "copy-mark"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "copy-text"
+            },
             {
               "description": "The tooltip, forwarded from the copy button's tooltip.",
               "name": "copy-tooltip"
@@ -104924,6 +104968,10 @@
               "description": "The button inside the label.",
               "name": "label-button"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "label-text"
+            },
             {
               "description": "The glyph inside the marker: a tick, a dot, or an empty ring.",
               "name": "mark"
@@ -123631,6 +123679,10 @@
               "description": "The button inside `back`.",
               "name": "back-button"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "back-text"
+            },
             {
               "description": "The panel that points at the target.",
               "name": "bubble"
@@ -123647,6 +123699,10 @@
               "description": "The button inside `next`.",
               "name": "next-button"
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "next-text"
+            },
             {
               "description": "The control that ends the tour early.",
               "name": "skip"
@@ -123654,6 +123710,10 @@
             {
               "description": "The button inside `skip`.",
               "name": "skip-button"
+            },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "skip-text"
             }
           ],
           "slots": [

package/dist/button/root/button-root.d.ts

@@ -31,6 +31,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot start - Content before the label, usually an icon.
  *
  * @csspart button - The inner control.
+ * @csspart text - The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
  */
 export declare class HelixHeadlessButton extends HelixFormElement {
     protected readonly aria: AriaForwardController;

package/dist/button/root/button-root.js

@@ -117,7 +117,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.linkCommand();
     }
     render() {
-        const label = html `<slot name="start"></slot><slot></slot><slot name="end"></slot>`;
+        const label = html `<slot name="start"></slot><slot part="text"></slot><slot name="end"></slot>`;
         const stop = this.focusable ? nothing : '-1';
         return html `<button
       part="button"

package/dist/code-block/root/code-block-root.d.ts

@@ -43,6 +43,7 @@ import '../../copy-button/index.js';
  * @csspart copy - The copy button. It sits in the header when there is one, and beside the code otherwise.
  * @csspart copy-button - The inner button.
  * @csspart copy-mark - The clipboard icon, and the check mark that replaces it after a copy.
+ * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The copy button's tooltip.
  * @csspart copy-tooltip-arrow - The tooltip's arrow, which points at the copy button.
  * @csspart copy-tooltip-arrow-bottom - The arrow while the tooltip is below the copy button, on the tooltip's top edge. Applied with `copy-tooltip-arrow`.

package/dist/code-block/root/code-block-root.js

@@ -64,7 +64,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     renderCopyButton(value = this.text) {
         return html `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,

package/dist/color-input/root/color-input-root.d.ts

@@ -67,9 +67,11 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @csspart picker-controls - The row under the square.
  * @csspart picker-eyedropper - The control that samples a color from the screen.
  * @csspart picker-eyedropper-button - The button inside `picker-eyedropper`.
+ * @csspart picker-eyedropper-text - The words on the button inside `picker-eyedropper`.
  * @csspart picker-footer - The row holding the value and the tools.
  * @csspart picker-format - The control that changes the syntax the value is written in.
  * @csspart picker-format-button - The button inside `picker-format`.
+ * @csspart picker-format-text - The words on the button inside `picker-format`.
  * @csspart picker-grid - The saturation and brightness square.
  * @csspart picker-grid-brightness - The range input for the square's vertical axis.
  * @csspart picker-grid-handle - The mark showing where in the square the color sits.

package/dist/color-input/root/color-input-root.js

@@ -85,8 +85,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         channel-marker: picker-channel-marker, channel-marker-label: picker-channel-marker-label,
         channel-markers: picker-channel-markers, channel-output: picker-channel-output,
         channels: picker-channels, controls: picker-controls, eyedropper: picker-eyedropper,
-        eyedropper-button: picker-eyedropper-button, footer: picker-footer, format: picker-format,
-        format-button: picker-format-button, grid: picker-grid,
+        eyedropper-button: picker-eyedropper-button, eyedropper-text: picker-eyedropper-text, footer: picker-footer, format: picker-format,
+        format-button: picker-format-button, format-text: picker-format-text, grid: picker-grid,
         grid-brightness: picker-grid-brightness, grid-handle: picker-grid-handle,
         grid-saturation: picker-grid-saturation, icon: picker-icon, sample: picker-sample,
         swatch: picker-swatch, swatches: picker-swatches, value: picker-value"

package/dist/color-picker/root/color-picker-root.d.ts

@@ -51,9 +51,11 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart controls - The row under the square.
  * @csspart eyedropper - The control that samples a color from the screen.
  * @csspart eyedropper-button - The button inside `eyedropper`.
+ * @csspart eyedropper-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart footer - The row holding the value and the tools.
  * @csspart format - The control that changes the syntax the value is written in.
  * @csspart format-button - The button inside `format`.
+ * @csspart format-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart grid - The saturation and brightness square. Draw the mark that shows
  * where the color sits with `::part(grid)::after` in your stylesheet. The
  * square carries the two channels as `--color-picker-saturation` and

package/dist/color-picker/root/color-picker-root.js

@@ -219,7 +219,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
                 ${this.sampling && !this.noEyedropper
             ? html `<${this.tag('button')}
                         part="eyedropper"
-      exportparts="button: eyedropper-button"
+      exportparts="button: eyedropper-button, text: eyedropper-text"
                         aria-label=${this.eyedropperLabel}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleEyeDropper}
@@ -231,7 +231,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
             ? nothing
             : html `<${this.tag('button')}
                         part="format"
-      exportparts="button: format-button"
+      exportparts="button: format-button, text: format-text"
                         aria-label=${fillTemplate(this.formatLabel, { format: this.format ?? 'hex' })}
                         ?disabled=${this.isDisabled}
                         @click=${this.handleFormat}

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -55,6 +55,7 @@ interface Row {
  * @csspart copy - The copy button, which copies the active row.
  * @csspart copy-button - The button inside the copy control.
  * @csspart copy-mark - The clipboard icon, and the confirmation icon that replaces it.
+ * @csspart copy-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart copy-tooltip - The tooltip, forwarded from the copy button's tooltip.
  * @csspart copy-tooltip-arrow - The tooltip's arrow, pointing at the copy button.
  * @csspart copy-tooltip-arrow-bottom - The arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside `copy-tooltip-arrow`.

package/dist/object-inspector/root/object-inspector-root.js

@@ -288,7 +288,7 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
     renderCopyButton(row) {
         return staticHtml `<${this.tag('copy-button')}
       part="copy"
-      exportparts="button: copy-button, mark: copy-mark, tooltip: copy-tooltip,
+      exportparts="button: copy-button, text: copy-text, mark: copy-mark, tooltip: copy-tooltip,
         tooltip-arrow: copy-tooltip-arrow, tooltip-arrow-bottom: copy-tooltip-arrow-bottom,
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,

package/dist/steps/step/step.d.ts

@@ -38,6 +38,7 @@ import '../../button/index.js';
  * @csspart description - The line under the name.
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The button inside the label.
+ * @csspart label-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.
  * @csspart marker - The shape carrying the number or the check.
  */

package/dist/steps/step/step.js

@@ -40,7 +40,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     renderLabel() {
         return html `<${this.tag('button')}
       part="label"
-      exportparts="button: label-button"
+      exportparts="button: label-button, text: label-text"
       emphasis="ghost"
       ?disabled=${this.disabled}
       @click=${this.select}

package/dist/tour/stop/tour-stop.d.ts

@@ -43,12 +43,15 @@ import '../../button/index.js';
  * @csspart arrow-top - The arrow while the panel is above its target, on the panel's bottom edge. Applied with `arrow`.
  * @csspart back - The control that goes to the previous stop.
  * @csspart back-button - The button inside `back`.
+ * @csspart back-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart bubble - The panel that points at the target.
  * @csspart content - The region holding the slotted content.
  * @csspart next - The control that goes to the next stop, and finishes the tour on the last stop.
  * @csspart next-button - The button inside `next`.
+ * @csspart next-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart skip - The control that ends the tour early.
  * @csspart skip-button - The button inside `skip`.
+ * @csspart skip-text - The words on that button, trimmed to their capitals and baseline.
  *
  * @cssstate placed-bottom - The panel sits below its target.
  * @cssstate placed-left - The panel sits to the left of its target.

package/dist/tour/stop/tour-stop.js

@@ -60,14 +60,14 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
         return html `<slot name="actions">
       <${this.tag('button')}
         part="skip"
-      exportparts="button: skip-button" emphasis="ghost" @click=${() => this.ask('skip')}>
+      exportparts="button: skip-button, text: skip-text" emphasis="ghost" @click=${() => this.ask('skip')}>
         ${this.skipLabel}
       </${this.tag('button')}>
       ${this.first
             ? ''
             : html `<${this.tag('button')}
               part="back"
-      exportparts="button: back-button"
+      exportparts="button: back-button, text: back-text"
               emphasis="outlined"
               @click=${() => this.ask('back')}
             >
@@ -75,7 +75,7 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
             </${this.tag('button')}>`}
       <${this.tag('button')}
         part="next"
-      exportparts="button: next-button"
+      exportparts="button: next-button, text: next-text"
         emphasis="solid"
         tone="primary"
         @click=${() => this.ask('next')}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.132.0",
+  "version": "0.133.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.132.0",
-    "@fusion.dev/helix-icons": "0.132.0",
+    "@fusion.dev/helix-core": "0.133.1",
+    "@fusion.dev/helix-icons": "0.133.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.132.0",
-    "@fusion.dev/helix-testing": "0.132.0",
+    "@fusion.dev/helix-cem": "0.133.1",
+    "@fusion.dev/helix-testing": "0.133.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -25083,6 +25083,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner control.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -26927,6 +26928,7 @@ export type CustomElements = {
    * - `copy`: The copy button. It sits in the header when there is one, and beside the code otherwise.
    * - `copy-button`: The inner button.
    * - `copy-mark`: The clipboard icon, and the check mark that replaces it after a copy.
+   * - `copy-text`: The words on that button, trimmed to their capitals and baseline.
    * - `copy-tooltip`: The copy button's tooltip.
    * - `copy-tooltip-arrow`: The tooltip's arrow, which points at the copy button.
    * - `copy-tooltip-arrow-bottom`: The arrow while the tooltip is below the copy button, on the tooltip's top edge. Applied with `copy-tooltip-arrow`.
@@ -27284,9 +27286,11 @@ export type CustomElements = {
    * - `picker-controls`: The row under the square.
    * - `picker-eyedropper`: The control that samples a color from the screen.
    * - `picker-eyedropper-button`: The button inside `picker-eyedropper`.
+   * - `picker-eyedropper-text`: The words on the button inside `picker-eyedropper`.
    * - `picker-footer`: The row holding the value and the tools.
    * - `picker-format`: The control that changes the syntax the value is written in.
    * - `picker-format-button`: The button inside `picker-format`.
+   * - `picker-format-text`: The words on the button inside `picker-format`.
    * - `picker-grid`: The saturation and brightness square.
    * - `picker-grid-brightness`: The range input for the square's vertical axis.
    * - `picker-grid-handle`: The mark showing where in the square the color sits.
@@ -27586,9 +27590,11 @@ export type CustomElements = {
    * - `controls`: The row under the square.
    * - `eyedropper`: The control that samples a color from the screen.
    * - `eyedropper-button`: The button inside `eyedropper`.
+   * - `eyedropper-text`: The words on that button, trimmed to their capitals and baseline.
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The button inside `format`.
+   * - `format-text`: The words on that button, trimmed to their capitals and baseline.
    * - `grid`: The saturation and brightness square. Draw the mark that shows where the color sits with `::part(grid)::after` in your stylesheet. The square carries the two channels as `--color-picker-saturation` and `--color-picker-brightness`, and this tier ships no CSS.
    * - `grid-brightness`: The range input for the square's vertical axis.
    * - `grid-saturation`: The range input for the square's horizontal axis.
@@ -28270,6 +28276,7 @@ export type CustomElements = {
    * - `tooltip-left`: The bubble while it is left of the button. Set together with `tooltip`.
    * - `tooltip-right`: The bubble while it is right of the button. Set together with `tooltip`.
    * - `tooltip-top`: The bubble while it is above the button. Set together with `tooltip`.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -32035,6 +32042,7 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button or anchor.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -36078,6 +36086,7 @@ export type CustomElements = {
    * - `copy`: The copy button, which copies the active row.
    * - `copy-button`: The button inside the copy control.
    * - `copy-mark`: The clipboard icon, and the confirmation icon that replaces it.
+   * - `copy-text`: The words on that button, trimmed to their capitals and baseline.
    * - `copy-tooltip`: The tooltip, forwarded from the copy button's tooltip.
    * - `copy-tooltip-arrow`: The tooltip's arrow, pointing at the copy button.
    * - `copy-tooltip-arrow-bottom`: The arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside `copy-tooltip-arrow`.
@@ -39715,6 +39724,7 @@ export type CustomElements = {
    * - `description`: The line under the name.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The button inside the label.
+   * - `label-text`: The words on that button, trimmed to their capitals and baseline.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
    *
@@ -42680,12 +42690,15 @@ export type CustomElements = {
    * - `arrow-top`: The arrow while the panel is above its target, on the panel's bottom edge. Applied with `arrow`.
    * - `back`: The control that goes to the previous stop.
    * - `back-button`: The button inside `back`.
+   * - `back-text`: The words on that button, trimmed to their capitals and baseline.
    * - `bubble`: The panel that points at the target.
    * - `content`: The region holding the slotted content.
    * - `next`: The control that goes to the next stop, and finishes the tour on the last stop.
    * - `next-button`: The button inside `next`.
+   * - `next-text`: The words on that button, trimmed to their capitals and baseline.
    * - `skip`: The control that ends the tour early.
    * - `skip-button`: The button inside `skip`.
+   * - `skip-text`: The words on that button, trimmed to their capitals and baseline.
    *
    * ## CSS States
    *
@@ -45407,6 +45420,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner control.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -47277,6 +47291,7 @@ export type CustomElementsSolidJs = {
    * - `copy`: The copy button. It sits in the header when there is one, and beside the code otherwise.
    * - `copy-button`: The inner button.
    * - `copy-mark`: The clipboard icon, and the check mark that replaces it after a copy.
+   * - `copy-text`: The words on that button, trimmed to their capitals and baseline.
    * - `copy-tooltip`: The copy button's tooltip.
    * - `copy-tooltip-arrow`: The tooltip's arrow, which points at the copy button.
    * - `copy-tooltip-arrow-bottom`: The arrow while the tooltip is below the copy button, on the tooltip's top edge. Applied with `copy-tooltip-arrow`.
@@ -47640,9 +47655,11 @@ export type CustomElementsSolidJs = {
    * - `picker-controls`: The row under the square.
    * - `picker-eyedropper`: The control that samples a color from the screen.
    * - `picker-eyedropper-button`: The button inside `picker-eyedropper`.
+   * - `picker-eyedropper-text`: The words on the button inside `picker-eyedropper`.
    * - `picker-footer`: The row holding the value and the tools.
    * - `picker-format`: The control that changes the syntax the value is written in.
    * - `picker-format-button`: The button inside `picker-format`.
+   * - `picker-format-text`: The words on the button inside `picker-format`.
    * - `picker-grid`: The saturation and brightness square.
    * - `picker-grid-brightness`: The range input for the square's vertical axis.
    * - `picker-grid-handle`: The mark showing where in the square the color sits.
@@ -47943,9 +47960,11 @@ export type CustomElementsSolidJs = {
    * - `controls`: The row under the square.
    * - `eyedropper`: The control that samples a color from the screen.
    * - `eyedropper-button`: The button inside `eyedropper`.
+   * - `eyedropper-text`: The words on that button, trimmed to their capitals and baseline.
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The button inside `format`.
+   * - `format-text`: The words on that button, trimmed to their capitals and baseline.
    * - `grid`: The saturation and brightness square. Draw the mark that shows where the color sits with `::part(grid)::after` in your stylesheet. The square carries the two channels as `--color-picker-saturation` and `--color-picker-brightness`, and this tier ships no CSS.
    * - `grid-brightness`: The range input for the square's vertical axis.
    * - `grid-saturation`: The range input for the square's horizontal axis.
@@ -48634,6 +48653,7 @@ export type CustomElementsSolidJs = {
    * - `tooltip-left`: The bubble while it is left of the button. Set together with `tooltip`.
    * - `tooltip-right`: The bubble while it is right of the button. Set together with `tooltip`.
    * - `tooltip-top`: The bubble while it is above the button. Set together with `tooltip`.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -52441,6 +52461,7 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `button`: The inner button or anchor.
+   * - `text`: The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
    *
    * ## CSS States
    *
@@ -56559,6 +56580,7 @@ export type CustomElementsSolidJs = {
    * - `copy`: The copy button, which copies the active row.
    * - `copy-button`: The button inside the copy control.
    * - `copy-mark`: The clipboard icon, and the confirmation icon that replaces it.
+   * - `copy-text`: The words on that button, trimmed to their capitals and baseline.
    * - `copy-tooltip`: The tooltip, forwarded from the copy button's tooltip.
    * - `copy-tooltip-arrow`: The tooltip's arrow, pointing at the copy button.
    * - `copy-tooltip-arrow-bottom`: The arrow while the tooltip is below the copy button, on the tooltip's top edge. Set alongside `copy-tooltip-arrow`.
@@ -60262,6 +60284,7 @@ export type CustomElementsSolidJs = {
    * - `description`: The line under the name.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The button inside the label.
+   * - `label-text`: The words on that button, trimmed to their capitals and baseline.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
    *
@@ -63285,12 +63308,15 @@ export type CustomElementsSolidJs = {
    * - `arrow-top`: The arrow while the panel is above its target, on the panel's bottom edge. Applied with `arrow`.
    * - `back`: The control that goes to the previous stop.
    * - `back-button`: The button inside `back`.
+   * - `back-text`: The words on that button, trimmed to their capitals and baseline.
    * - `bubble`: The panel that points at the target.
    * - `content`: The region holding the slotted content.
    * - `next`: The control that goes to the next stop, and finishes the tour on the last stop.
    * - `next-button`: The button inside `next`.
+   * - `next-text`: The words on that button, trimmed to their capitals and baseline.
    * - `skip`: The control that ends the tour early.
    * - `skip-button`: The button inside `skip`.
+   * - `skip-text`: The words on that button, trimmed to their capitals and baseline.
    *
    * ## CSS States
    *