@fusion.dev/helix 0.132.0 → 0.133.1

package/custom-elements.json

@@ -10883,6 +10883,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": [
@@ -28643,6 +28651,14 @@
                 "module": "src/code-block/root/code-block-root.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "copy-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCodeBlock",
+                "module": "src/code-block/root/code-block-root.ts"
+              }
+            },
             {
               "description": "The copy button's tooltip.",
               "name": "copy-tooltip",
@@ -31460,6 +31476,14 @@
                 "module": "src/color-input/root/color-input-root.ts"
               }
             },
+            {
+              "description": "The words on the button inside `picker-eyedropper`.",
+              "name": "picker-eyedropper-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessColorInput",
+                "module": "src/color-input/root/color-input-root.ts"
+              }
+            },
             {
               "description": "The row holding the value and the tools.",
               "name": "picker-footer",
@@ -31484,6 +31508,14 @@
                 "module": "src/color-input/root/color-input-root.ts"
               }
             },
+            {
+              "description": "The words on the button inside `picker-format`.",
+              "name": "picker-format-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessColorInput",
+                "module": "src/color-input/root/color-input-root.ts"
+              }
+            },
             {
               "description": "The saturation and brightness square.",
               "name": "picker-grid",
@@ -33642,6 +33674,14 @@
                 "module": "src/color-picker/root/color-picker-root.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "eyedropper-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessColorPicker",
+                "module": "src/color-picker/root/color-picker-root.ts"
+              }
+            },
             {
               "description": "The row holding the value and the tools.",
               "name": "footer",
@@ -33666,6 +33706,14 @@
                 "module": "src/color-picker/root/color-picker-root.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "format-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessColorPicker",
+                "module": "src/color-picker/root/color-picker-root.ts"
+              }
+            },
             {
               "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",
@@ -38879,6 +38927,14 @@
                 "name": "HelixHeadlessCopyButton",
                 "module": "src/copy-button/root/copy-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"
+              }
             }
           ],
           "events": [
@@ -66932,6 +66988,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": [
@@ -102187,6 +102251,14 @@
                 "module": "src/object-inspector/root/object-inspector-root.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "copy-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessObjectInspector",
+                "module": "src/object-inspector/root/object-inspector-root.ts"
+              }
+            },
             {
               "description": "The tooltip, forwarded from the copy button's tooltip.",
               "name": "copy-tooltip",
@@ -134325,6 +134397,14 @@
                 "module": "src/steps/step/step.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessStep",
+                "module": "src/steps/step/step.ts"
+              }
+            },
             {
               "description": "The glyph inside the marker: a tick, a dot, or an empty ring.",
               "name": "mark",
@@ -156797,6 +156877,14 @@
                 "module": "src/tour/stop/tour-stop.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "back-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
             {
               "description": "The panel that points at the target.",
               "name": "bubble",
@@ -156829,6 +156917,14 @@
                 "module": "src/tour/stop/tour-stop.ts"
               }
             },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "next-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
             {
               "description": "The control that ends the tour early.",
               "name": "skip",
@@ -156844,6 +156940,14 @@
                 "name": "HelixHeadlessTourStop",
                 "module": "src/tour/stop/tour-stop.ts"
               }
+            },
+            {
+              "description": "The words on that button, trimmed to their capitals and baseline.",
+              "name": "skip-text",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
             }
           ],
           "attributes": [

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

@@ -171,6 +171,14 @@ cursor: not-allowed;
 opacity: 0.5;
 }
 
+@supports (text-box: trim-both cap alphabetic) {
+slot:not([name]) {
+display: block;
+padding-block: var(--helix-space-2xs);
+text-box: trim-both cap alphabetic;
+}
+}
+
 [part="button"] ::slotted(helix-icon) {
 --icon-size: 1.15em;
 }

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

@@ -19,8 +19,8 @@ color: var(--helix-color-foreground-subtle);
 }
 
 [part="trigger"] {
-align-items: stretch;
 all: unset;
+align-items: stretch;
 align-self: stretch;
 box-sizing: border-box;
 cursor: pointer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.132.0",
+  "version": "0.133.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.132.0",
-    "@fusion.dev/helix-headless": "0.132.0",
-    "@fusion.dev/helix-styles": "0.132.0"
+    "@fusion.dev/helix-core": "0.133.1",
+    "@fusion.dev/helix-headless": "0.133.1",
+    "@fusion.dev/helix-styles": "0.133.1"
   },
   "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

@@ -29091,6 +29091,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
    *
@@ -31084,6 +31085,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`.
@@ -31441,9 +31443,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.
@@ -31760,9 +31764,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.
@@ -32455,6 +32461,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
    *
@@ -36378,6 +36385,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
    *
@@ -40581,6 +40589,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`.
@@ -45045,6 +45054,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.
    *
@@ -48092,12 +48102,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
    *
@@ -51288,6 +51301,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
    *
@@ -53315,6 +53329,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`.
@@ -53677,9 +53692,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.
@@ -53999,9 +54016,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.
@@ -54703,6 +54722,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
    *
@@ -58698,6 +58718,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
    *
@@ -63001,6 +63022,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`.
@@ -67574,6 +67596,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.
    *
@@ -70688,12 +70711,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
    *