@fusion.dev/helix-headless 0.131.0 → 0.133.0

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"
@@ -26823,6 +26847,10 @@
               "description": "The glyph on the dismiss control, where none is slotted.",
               "name": "tag-dismiss-mark"
             },
+            {
+              "description": "The label, trimmed to its capitals and baseline.",
+              "name": "tag-label"
+            },
             {
               "description": "The category before the label.",
               "name": "tag-start"
@@ -29835,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": [
@@ -33695,6 +33731,10 @@
               "description": "The icon on the remove button, shown when no icon is slotted.",
               "name": "date-dismiss-mark"
             },
+            {
+              "description": "The label, trimmed to its capitals and baseline.",
+              "name": "date-label"
+            },
             {
               "description": "The category before the label.",
               "name": "date-start"
@@ -43446,6 +43486,10 @@
               "description": "The glyph on the dismiss control, where none is slotted.",
               "name": "kind-dismiss-mark"
             },
+            {
+              "description": "The label, trimmed to its capitals and baseline.",
+              "name": "kind-label"
+            },
             {
               "description": "The category before the label.",
               "name": "kind-start"
@@ -43482,6 +43526,10 @@
               "description": "The glyph on the dismiss control, where none is slotted.",
               "name": "size-dismiss-mark"
             },
+            {
+              "description": "The label, trimmed to its capitals and baseline.",
+              "name": "size-label"
+            },
             {
               "description": "The category before the label.",
               "name": "size-start"
@@ -54003,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": [
@@ -82363,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"
@@ -104908,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"
@@ -111028,6 +111092,10 @@
               "description": "The icon on the remove button.",
               "name": "dismiss-mark"
             },
+            {
+              "description": "The label, which the styled tag trims to its capitals and baseline so the letters sit at the middle in any font.",
+              "name": "label"
+            },
             {
               "description": "The category before the label.",
               "name": "start"
@@ -113321,6 +113389,10 @@
               "description": "The default icon on the remove button, shown when none is slotted.",
               "name": "time-dismiss-mark"
             },
+            {
+              "description": "The label, trimmed to its capitals and baseline.",
+              "name": "time-label"
+            },
             {
               "description": "The category before the label.",
               "name": "time-start"
@@ -123607,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"
@@ -123623,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"
@@ -123630,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/combobox/root/combobox-root.d.ts

@@ -72,6 +72,7 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * @csspart tag - One chosen option.
  * @csspart tag-dismiss - The remove button, when `dismissible`.
  * @csspart tag-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart tag-label - The label, trimmed to its capitals and baseline.
  * @csspart tag-start - The category before the label.
  * @csspart tags - The row of chosen options, when `multiple` is set.
  *

package/dist/combobox/root/combobox-root.js

@@ -287,7 +287,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     renderTag(option) {
         return html `<${this.tag('tag')}
                     part="tag"
-      exportparts="dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, start: tag-start"
+      exportparts="dismiss: tag-dismiss, dismiss-mark: tag-dismiss-mark, label: tag-label, start: tag-start"
                     data-value=${option.value}
                     dismiss-label=${fillTemplate(this.removeLabel, { name: option.text })}
                     ?dismissible=${!this.isDisabled}

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

@@ -36,6 +36,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart date - One held date, as a tag, in `multiple`.
  * @csspart date-dismiss - The remove button, when `dismissible`.
  * @csspart date-dismiss-mark - The icon on the remove button, shown when no icon is slotted.
+ * @csspart date-label - The label, trimmed to its capitals and baseline.
  * @csspart date-start - The category before the label.
  * @csspart feedback - The error message under the field.
  * @csspart field - The box that holds the text and the trigger.

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

@@ -201,7 +201,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     renderTag(date) {
         return html `<${this.tag('tag')}
                   part="date"
-      exportparts="dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, start: date-start"
+      exportparts="dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, label: date-label, start: date-start"
                   dismissible
                   dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(date) })}
                   ?disabled=${this.isDisabled}

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

@@ -39,6 +39,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart kind - A file's type.
  * @csspart kind-dismiss - The remove button, when `dismissible`.
  * @csspart kind-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart kind-label - The label, trimmed to its capitals and baseline.
  * @csspart kind-start - The category before the label.
  * @csspart label - The label above the field.
  * @csspart list - The chosen files.
@@ -48,6 +49,7 @@ declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fus
  * @csspart size - A file's size.
  * @csspart size-dismiss - The remove button, when `dismissible`.
  * @csspart size-dismiss-mark - The glyph on the dismiss control, where none is slotted.
+ * @csspart size-label - The label, trimmed to its capitals and baseline.
  * @csspart size-start - The category before the label.
  * @csspart trigger - The label that opens the picker.
  *

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

@@ -164,10 +164,10 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
     }
     renderMeta(file) {
         return html `<${this.tag('tag')} part="size"
-    exportparts="dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
+    exportparts="dismiss: size-dismiss, dismiss-mark: size-dismiss-mark, label: size-label, start: size-start">${size(file.size, this.locale)}</${this.tag('tag')}>
       <${this.tag('tag')}
         part="kind"
-      exportparts="dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
+      exportparts="dismiss: kind-dismiss, dismiss-mark: kind-dismiss-mark, label: kind-label, start: kind-start">${kind(file)}</${this.tag('tag')}>`;
     }
     render() {
         const files = this.files;

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/tag/root/tag-root.d.ts

@@ -26,6 +26,7 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  *
  * @csspart dismiss - The button that removes the tag.
  * @csspart dismiss-mark - The icon on the remove button.
+ * @csspart label - The label, which the styled tag trims to its capitals and baseline so the letters sit at the middle in any font.
  * @csspart start - The category before the label.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {

package/dist/tag/root/tag-root.js

@@ -15,7 +15,7 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
     }
     render() {
         return html `<slot name="start" part="start"></slot>
-      <slot></slot>
+      <slot part="label"></slot>
       ${this.dismissible
             ? html `<button
             part="dismiss"

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

@@ -85,6 +85,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart time - One held time, as a tag, in `multiple`.
  * @csspart time-dismiss - The remove button, when `dismissible`.
  * @csspart time-dismiss-mark - The default icon on the remove button, shown when none is slotted.
+ * @csspart time-label - The label, trimmed to its capitals and baseline.
  * @csspart time-start - The category before the label.
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The icon on the button that opens the clock.

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

@@ -176,7 +176,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
     renderTag(at) {
         return html `<${this.tag('tag')}
                   part="time"
-      exportparts="dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, start: time-start"
+      exportparts="dismiss: time-dismiss, dismiss-mark: time-dismiss-mark, label: time-label, start: time-start"
                   dismissible
                   dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(at) })}
                   ?disabled=${this.isDisabled}

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.131.0",
+  "version": "0.133.0",
   "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.131.0",
-    "@fusion.dev/helix-icons": "0.131.0",
+    "@fusion.dev/helix-core": "0.133.0",
+    "@fusion.dev/helix-icons": "0.133.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.131.0",
-    "@fusion.dev/helix-testing": "0.131.0",
+    "@fusion.dev/helix-cem": "0.133.0",
+    "@fusion.dev/helix-testing": "0.133.0",
     "@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.
@@ -27893,6 +27899,7 @@ export type CustomElements = {
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `tag-label`: The label, trimmed to its capitals and baseline.
    * - `tag-start`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
    *
@@ -28269,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
    *
@@ -28886,6 +28894,7 @@ export type CustomElements = {
    * - `date`: One held date, as a tag, in `multiple`.
    * - `date-dismiss`: The remove button, when `dismissible`.
    * - `date-dismiss-mark`: The icon on the remove button, shown when no icon is slotted.
+   * - `date-label`: The label, trimmed to its capitals and baseline.
    * - `date-start`: The category before the label.
    * - `feedback`: The error message under the field.
    * - `field`: The box that holds the text and the trigger.
@@ -30356,6 +30365,7 @@ export type CustomElements = {
    * - `kind`: A file's type.
    * - `kind-dismiss`: The remove button, when `dismissible`.
    * - `kind-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `kind-label`: The label, trimmed to its capitals and baseline.
    * - `kind-start`: The category before the label.
    * - `label`: The label above the field.
    * - `list`: The chosen files.
@@ -30365,6 +30375,7 @@ export type CustomElements = {
    * - `size`: A file's size.
    * - `size-dismiss`: The remove button, when `dismissible`.
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `size-label`: The label, trimmed to its capitals and baseline.
    * - `size-start`: The category before the label.
    * - `trigger`: The label that opens the picker.
    *
@@ -32031,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
    *
@@ -36074,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`.
@@ -39711,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.
    *
@@ -40692,6 +40706,7 @@ export type CustomElements = {
    *
    * - `dismiss`: The button that removes the tag.
    * - `dismiss-mark`: The icon on the remove button.
+   * - `label`: The label, which the styled tag trims to its capitals and baseline so the letters sit at the middle in any font.
    * - `start`: The category before the label.
    *
    * ## CSS States
@@ -41245,6 +41260,7 @@ export type CustomElements = {
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The default icon on the remove button, shown when none is slotted.
+   * - `time-label`: The label, trimmed to its capitals and baseline.
    * - `time-start`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The icon on the button that opens the clock.
@@ -42674,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
    *
@@ -45401,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
    *
@@ -47271,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`.
@@ -47634,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.
@@ -47937,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.
@@ -48245,6 +48270,7 @@ export type CustomElementsSolidJs = {
    * - `tag`: One chosen option.
    * - `tag-dismiss`: The remove button, when `dismissible`.
    * - `tag-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `tag-label`: The label, trimmed to its capitals and baseline.
    * - `tag-start`: The category before the label.
    * - `tags`: The row of chosen options, when `multiple` is set.
    *
@@ -48627,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
    *
@@ -49248,6 +49275,7 @@ export type CustomElementsSolidJs = {
    * - `date`: One held date, as a tag, in `multiple`.
    * - `date-dismiss`: The remove button, when `dismissible`.
    * - `date-dismiss-mark`: The icon on the remove button, shown when no icon is slotted.
+   * - `date-label`: The label, trimmed to its capitals and baseline.
    * - `date-start`: The category before the label.
    * - `feedback`: The error message under the field.
    * - `field`: The box that holds the text and the trigger.
@@ -50741,6 +50769,7 @@ export type CustomElementsSolidJs = {
    * - `kind`: A file's type.
    * - `kind-dismiss`: The remove button, when `dismissible`.
    * - `kind-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `kind-label`: The label, trimmed to its capitals and baseline.
    * - `kind-start`: The category before the label.
    * - `label`: The label above the field.
    * - `list`: The chosen files.
@@ -50750,6 +50779,7 @@ export type CustomElementsSolidJs = {
    * - `size`: A file's size.
    * - `size-dismiss`: The remove button, when `dismissible`.
    * - `size-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
+   * - `size-label`: The label, trimmed to its capitals and baseline.
    * - `size-start`: The category before the label.
    * - `trigger`: The label that opens the picker.
    *
@@ -52431,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
    *
@@ -56549,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`.
@@ -60252,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.
    *
@@ -61258,6 +61291,7 @@ export type CustomElementsSolidJs = {
    *
    * - `dismiss`: The button that removes the tag.
    * - `dismiss-mark`: The icon on the remove button.
+   * - `label`: The label, which the styled tag trims to its capitals and baseline so the letters sit at the middle in any font.
    * - `start`: The category before the label.
    *
    * ## CSS States
@@ -61817,6 +61851,7 @@ export type CustomElementsSolidJs = {
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The default icon on the remove button, shown when none is slotted.
+   * - `time-label`: The label, trimmed to its capitals and baseline.
    * - `time-start`: The category before the label.
    * - `trigger`: The control that opens the list.
    * - `trigger-icon`: The icon on the button that opens the clock.
@@ -63273,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
    *