@fusion.dev/helix 0.8.1 → 0.9.0

package/custom-elements.json

@@ -7220,7 +7220,7 @@
               "name": "--button-gap"
             },
             {
-              "description": "Width taken by `width=\"standard\"`.",
+              "description": "A width floor. Inherits, so a section can set it once for every button under it.",
               "name": "--button-inline-size"
             },
             {
@@ -7301,9 +7301,9 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "'auto' | 'full' | 'standard' | undefined"
+                "text": "'auto' | 'full' | undefined"
               },
-              "description": "How much of the space available to it the button takes.\n\n- `auto` is the default and is never written: the button is as wide as its\n  label, which is what a control in a toolbar or beside a field should be.\n- `standard` is one width for every button that takes it, so a column or\n  row of actions lines up instead of following the length of each word.\n- `full` fills the container, for a single action at the foot of a form or\n  a card, and on a phone where a control is a target before it is a label.\n\n**Not `fill`, and not `size`.** `fill` means a surface's own color\neverywhere else in the library, in `separation=\"filled\"`, in\n`ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot\nalso mean geometry beside an `emphasis` documented as \"How filled it is\ndrawn\". `size` fails the rule's own test, which is whether two of them\nsitting together could legitimately differ: two buttons can, because this is\na width *policy* rather than a scale, and `standard` exists precisely to\nstop a row being ragged.\n\nWidth and not weight. `emphasis` says how much a button matters and this\nsays how much room it takes, and the three are independent: a `ghost\nstandard` Cancel beside a `solid primary standard` Save is exactly the\npairing a dialog wants.\n\n**A consumer's own anchor takes it as `data-button-width`**, the way it\ntakes the emphasis as `data-button`:\n\n```html\n<a data-button=\"solid\" data-button-width=\"standard\" data-button-tone=\"primary\" href=\"/save\">Save</a>\n```\n\nBoth are one declaration in the base layer, and both are needed: this class\npromises a link styled as a button and a real button are indistinguishable,\nand a dialog's button row is built on `standard`.",
+              "description": "How much of the space available to it the button takes.\n\n- `auto` is the default and is never written: the button is as wide as its\n  label, which is what a control in a toolbar or beside a field should be.\n- `full` fills the container, for a single action at the foot of a form or\n  a card, and on a phone where a control is a target before it is a label.\n\nFor a row that should line up rather than follow the length of each word,\nset `--button-inline-size` on the container. It inherits, and it reaches a\nplain anchor wearing `data-button` as well as this element.\n\nA consumer's own anchor takes this attribute as `data-button-width`:\n\n```html\n<a data-button=\"solid\" data-button-width=\"full\" data-button-tone=\"primary\" href=\"/save\">Save</a>\n```\n\n**Not `fill`, and not `size`.** `fill` means a surface's own color\neverywhere else in the library, so it cannot also mean geometry beside an\n`emphasis` documented as \"How filled it is drawn\". `size` fails the rule's\nown test, which is whether two of them sitting together could legitimately\ndiffer: two buttons can, because this is a width *policy* rather than a\nscale.",
               "attribute": "width",
               "reflects": true
             },
@@ -7935,9 +7935,9 @@
             {
               "name": "width",
               "type": {
-                "text": "'auto' | 'full' | 'standard' | undefined"
+                "text": "'auto' | 'full' | undefined"
               },
-              "description": "How much of the space available to it the button takes.\n\n- `auto` is the default and is never written: the button is as wide as its\n  label, which is what a control in a toolbar or beside a field should be.\n- `standard` is one width for every button that takes it, so a column or\n  row of actions lines up instead of following the length of each word.\n- `full` fills the container, for a single action at the foot of a form or\n  a card, and on a phone where a control is a target before it is a label.\n\n**Not `fill`, and not `size`.** `fill` means a surface's own color\neverywhere else in the library, in `separation=\"filled\"`, in\n`ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot\nalso mean geometry beside an `emphasis` documented as \"How filled it is\ndrawn\". `size` fails the rule's own test, which is whether two of them\nsitting together could legitimately differ: two buttons can, because this is\na width *policy* rather than a scale, and `standard` exists precisely to\nstop a row being ragged.\n\nWidth and not weight. `emphasis` says how much a button matters and this\nsays how much room it takes, and the three are independent: a `ghost\nstandard` Cancel beside a `solid primary standard` Save is exactly the\npairing a dialog wants.\n\n**A consumer's own anchor takes it as `data-button-width`**, the way it\ntakes the emphasis as `data-button`:\n\n```html\n<a data-button=\"solid\" data-button-width=\"standard\" data-button-tone=\"primary\" href=\"/save\">Save</a>\n```\n\nBoth are one declaration in the base layer, and both are needed: this class\npromises a link styled as a button and a real button are indistinguishable,\nand a dialog's button row is built on `standard`.",
+              "description": "How much of the space available to it the button takes.\n\n- `auto` is the default and is never written: the button is as wide as its\n  label, which is what a control in a toolbar or beside a field should be.\n- `full` fills the container, for a single action at the foot of a form or\n  a card, and on a phone where a control is a target before it is a label.\n\nFor a row that should line up rather than follow the length of each word,\nset `--button-inline-size` on the container. It inherits, and it reaches a\nplain anchor wearing `data-button` as well as this element.\n\nA consumer's own anchor takes this attribute as `data-button-width`:\n\n```html\n<a data-button=\"solid\" data-button-width=\"full\" data-button-tone=\"primary\" href=\"/save\">Save</a>\n```\n\n**Not `fill`, and not `size`.** `fill` means a surface's own color\neverywhere else in the library, so it cannot also mean geometry beside an\n`emphasis` documented as \"How filled it is drawn\". `size` fails the rule's\nown test, which is whether two of them sitting together could legitimately\ndiffer: two buttons can, because this is a width *policy* rather than a\nscale.",
               "fieldName": "width"
             },
             {

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

@@ -1,6 +1,9 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 display: inline-flex;
+
+min-inline-size: var(--button-inline-size, auto);
+max-inline-size: 100%;
 }
 
 :host {
@@ -155,13 +158,6 @@ var(--button-background-color, color-mix(in oklab, var(--_button-tone) 8%, trans
 border-color: transparent;
 }
 
-:host([width="standard"]) {
-
-min-inline-size: var(--button-inline-size, var(--helix-size-button));
-
-max-inline-size: 100%;
-}
-
 :host([width="full"]) {
 display: flex;
 inline-size: 100%;

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

@@ -28,7 +28,7 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
  * @cssproperty --button-background-color-hover - Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover.
  * @cssproperty --button-foreground-color - Label and icon color.
  * @cssproperty --button-gap - Space between the label and whatever flanks it.
- * @cssproperty --button-inline-size - Width taken by `width="standard"`.
+ * @cssproperty --button-inline-size - A width floor. Inherits, so a section can set it once for every button under it.
  * @cssproperty --button-padding-inline - Inline padding, for a container whose rhythm is not the control default.
  * @cssproperty --button-radius - Corner radius of the control.
  * @cssproperty --button-radius-end - Trailing corners, which a group flattens.
@@ -45,37 +45,27 @@ export declare class HelixButton extends HelixButton_base {
      *
      * - `auto` is the default and is never written: the button is as wide as its
      *   label, which is what a control in a toolbar or beside a field should be.
-     * - `standard` is one width for every button that takes it, so a column or
-     *   row of actions lines up instead of following the length of each word.
      * - `full` fills the container, for a single action at the foot of a form or
      *   a card, and on a phone where a control is a target before it is a label.
      *
-     * **Not `fill`, and not `size`.** `fill` means a surface's own color
-     * everywhere else in the library, in `separation="filled"`, in
-     * `ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-     * also mean geometry beside an `emphasis` documented as "How filled it is
-     * drawn". `size` fails the rule's own test, which is whether two of them
-     * sitting together could legitimately differ: two buttons can, because this is
-     * a width *policy* rather than a scale, and `standard` exists precisely to
-     * stop a row being ragged.
-     *
-     * Width and not weight. `emphasis` says how much a button matters and this
-     * says how much room it takes, and the three are independent: a `ghost
-     * standard` Cancel beside a `solid primary standard` Save is exactly the
-     * pairing a dialog wants.
+     * For a row that should line up rather than follow the length of each word,
+     * set `--button-inline-size` on the container. It inherits, and it reaches a
+     * plain anchor wearing `data-button` as well as this element.
      *
-     * **A consumer's own anchor takes it as `data-button-width`**, the way it
-     * takes the emphasis as `data-button`:
+     * A consumer's own anchor takes this attribute as `data-button-width`:
      *
      * ```html
-     * <a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+     * <a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
      * ```
      *
-     * Both are one declaration in the base layer, and both are needed: this class
-     * promises a link styled as a button and a real button are indistinguishable,
-     * and a dialog's button row is built on `standard`.
+     * **Not `fill`, and not `size`.** `fill` means a surface's own color
+     * everywhere else in the library, so it cannot also mean geometry beside an
+     * `emphasis` documented as "How filled it is drawn". `size` fails the rule's
+     * own test, which is whether two of them sitting together could legitimately
+     * differ: two buttons can, because this is a width *policy* rather than a
+     * scale.
      */
-    width?: 'auto' | 'full' | 'standard';
+    width?: 'auto' | 'full';
     static styles: CSSResultGroup;
 }
 declare global {

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.8.1",
+  "version": "0.9.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.8.1",
-    "@fusion.dev/helix-headless": "0.8.1",
-    "@fusion.dev/helix-styles": "0.8.1"
+    "@fusion.dev/helix-core": "0.9.0",
+    "@fusion.dev/helix-headless": "0.9.0",
+    "@fusion.dev/helix-styles": "0.9.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.8.1",
-    "@fusion.dev/helix-testing": "0.8.1",
+    "@fusion.dev/helix-cem": "0.9.0",
+    "@fusion.dev/helix-testing": "0.9.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -1715,35 +1715,25 @@ export type HelixButtonProps = {
 
 - `auto` is the default and is never written: the button is as wide as its
   label, which is what a control in a toolbar or beside a field should be.
-- `standard` is one width for every button that takes it, so a column or
-  row of actions lines up instead of following the length of each word.
 - `full` fills the container, for a single action at the foot of a form or
   a card, and on a phone where a control is a target before it is a label.
 
-**Not `fill`, and not `size`.** `fill` means a surface's own color
-everywhere else in the library, in `separation="filled"`, in
-`ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-also mean geometry beside an `emphasis` documented as "How filled it is
-drawn". `size` fails the rule's own test, which is whether two of them
-sitting together could legitimately differ: two buttons can, because this is
-a width *policy* rather than a scale, and `standard` exists precisely to
-stop a row being ragged.
-
-Width and not weight. `emphasis` says how much a button matters and this
-says how much room it takes, and the three are independent: a `ghost
-standard` Cancel beside a `solid primary standard` Save is exactly the
-pairing a dialog wants.
-
-**A consumer's own anchor takes it as `data-button-width`**, the way it
-takes the emphasis as `data-button`:
+For a row that should line up rather than follow the length of each word,
+set `--button-inline-size` on the container. It inherits, and it reaches a
+plain anchor wearing `data-button` as well as this element.
+
+A consumer's own anchor takes this attribute as `data-button-width`:
 
 ```html
-<a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+<a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
 ```
 
-Both are one declaration in the base layer, and both are needed: this class
-promises a link styled as a button and a real button are indistinguishable,
-and a dialog's button row is built on `standard`. */
+**Not `fill`, and not `size`.** `fill` means a surface's own color
+everywhere else in the library, so it cannot also mean geometry beside an
+`emphasis` documented as "How filled it is drawn". `size` fails the rule's
+own test, which is whether two of them sitting together could legitimately
+differ: two buttons can, because this is a width *policy* rather than a
+scale. */
   width?: (HelixButton["width"]) | undefined;
   /** How filled it is drawn.
 
@@ -1930,35 +1920,25 @@ export type HelixButtonSolidJsProps = {
 
 - `auto` is the default and is never written: the button is as wide as its
   label, which is what a control in a toolbar or beside a field should be.
-- `standard` is one width for every button that takes it, so a column or
-  row of actions lines up instead of following the length of each word.
 - `full` fills the container, for a single action at the foot of a form or
   a card, and on a phone where a control is a target before it is a label.
 
-**Not `fill`, and not `size`.** `fill` means a surface's own color
-everywhere else in the library, in `separation="filled"`, in
-`ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-also mean geometry beside an `emphasis` documented as "How filled it is
-drawn". `size` fails the rule's own test, which is whether two of them
-sitting together could legitimately differ: two buttons can, because this is
-a width *policy* rather than a scale, and `standard` exists precisely to
-stop a row being ragged.
-
-Width and not weight. `emphasis` says how much a button matters and this
-says how much room it takes, and the three are independent: a `ghost
-standard` Cancel beside a `solid primary standard` Save is exactly the
-pairing a dialog wants.
-
-**A consumer's own anchor takes it as `data-button-width`**, the way it
-takes the emphasis as `data-button`:
+For a row that should line up rather than follow the length of each word,
+set `--button-inline-size` on the container. It inherits, and it reaches a
+plain anchor wearing `data-button` as well as this element.
+
+A consumer's own anchor takes this attribute as `data-button-width`:
 
 ```html
-<a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+<a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
 ```
 
-Both are one declaration in the base layer, and both are needed: this class
-promises a link styled as a button and a real button are indistinguishable,
-and a dialog's button row is built on `standard`. */
+**Not `fill`, and not `size`.** `fill` means a surface's own color
+everywhere else in the library, so it cannot also mean geometry beside an
+`emphasis` documented as "How filled it is drawn". `size` fails the rule's
+own test, which is whether two of them sitting together could legitimately
+differ: two buttons can, because this is a width *policy* rather than a
+scale. */
   "prop:width"?: (HelixButton["width"]) | undefined;
   /** How filled it is drawn.
 
@@ -19352,35 +19332,25 @@ export type CustomElements = {
    *
    * - `auto` is the default and is never written: the button is as wide as its
    *   label, which is what a control in a toolbar or beside a field should be.
-   * - `standard` is one width for every button that takes it, so a column or
-   *   row of actions lines up instead of following the length of each word.
    * - `full` fills the container, for a single action at the foot of a form or
    *   a card, and on a phone where a control is a target before it is a label.
    *
-   * **Not `fill`, and not `size`.** `fill` means a surface's own color
-   * everywhere else in the library, in `separation="filled"`, in
-   * `ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-   * also mean geometry beside an `emphasis` documented as "How filled it is
-   * drawn". `size` fails the rule's own test, which is whether two of them
-   * sitting together could legitimately differ: two buttons can, because this is
-   * a width *policy* rather than a scale, and `standard` exists precisely to
-   * stop a row being ragged.
-   *
-   * Width and not weight. `emphasis` says how much a button matters and this
-   * says how much room it takes, and the three are independent: a `ghost
-   * standard` Cancel beside a `solid primary standard` Save is exactly the
-   * pairing a dialog wants.
-   *
-   * **A consumer's own anchor takes it as `data-button-width`**, the way it
-   * takes the emphasis as `data-button`:
+   * For a row that should line up rather than follow the length of each word,
+   * set `--button-inline-size` on the container. It inherits, and it reaches a
+   * plain anchor wearing `data-button` as well as this element.
+   *
+   * A consumer's own anchor takes this attribute as `data-button-width`:
    *
    * ```html
-   * <a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+   * <a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
    * ```
    *
-   * Both are one declaration in the base layer, and both are needed: this class
-   * promises a link styled as a button and a real button are indistinguishable,
-   * and a dialog's button row is built on `standard`.
+   * **Not `fill`, and not `size`.** `fill` means a surface's own color
+   * everywhere else in the library, so it cannot also mean geometry beside an
+   * `emphasis` documented as "How filled it is drawn". `size` fails the rule's
+   * own test, which is whether two of them sitting together could legitimately
+   * differ: two buttons can, because this is a width *policy* rather than a
+   * scale.
    * - `emphasis`: How filled it is drawn.
    *
    * Not `separation`: a Card's `outlined` says where a surface ends, and this
@@ -19592,7 +19562,7 @@ export type CustomElements = {
    * - `--button-background-color-hover`: Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover. (default: `undefined`)
    * - `--button-foreground-color`: Label and icon color. (default: `undefined`)
    * - `--button-gap`: Space between the label and whatever flanks it. (default: `undefined`)
-   * - `--button-inline-size`: Width taken by `width="standard"`. (default: `undefined`)
+   * - `--button-inline-size`: A width floor. Inherits, so a section can set it once for every button under it. (default: `undefined`)
    * - `--button-padding-inline`: Inline padding, for a container whose rhythm is not the control default. (default: `undefined`)
    * - `--button-radius`: Corner radius of the control. (default: `undefined`)
    * - `--button-radius-end`: Trailing corners, which a group flattens. (default: `undefined`)
@@ -35096,35 +35066,25 @@ export type CustomElementsSolidJs = {
    *
    * - `auto` is the default and is never written: the button is as wide as its
    *   label, which is what a control in a toolbar or beside a field should be.
-   * - `standard` is one width for every button that takes it, so a column or
-   *   row of actions lines up instead of following the length of each word.
    * - `full` fills the container, for a single action at the foot of a form or
    *   a card, and on a phone where a control is a target before it is a label.
    *
-   * **Not `fill`, and not `size`.** `fill` means a surface's own color
-   * everywhere else in the library, in `separation="filled"`, in
-   * `ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-   * also mean geometry beside an `emphasis` documented as "How filled it is
-   * drawn". `size` fails the rule's own test, which is whether two of them
-   * sitting together could legitimately differ: two buttons can, because this is
-   * a width *policy* rather than a scale, and `standard` exists precisely to
-   * stop a row being ragged.
-   *
-   * Width and not weight. `emphasis` says how much a button matters and this
-   * says how much room it takes, and the three are independent: a `ghost
-   * standard` Cancel beside a `solid primary standard` Save is exactly the
-   * pairing a dialog wants.
-   *
-   * **A consumer's own anchor takes it as `data-button-width`**, the way it
-   * takes the emphasis as `data-button`:
+   * For a row that should line up rather than follow the length of each word,
+   * set `--button-inline-size` on the container. It inherits, and it reaches a
+   * plain anchor wearing `data-button` as well as this element.
+   *
+   * A consumer's own anchor takes this attribute as `data-button-width`:
    *
    * ```html
-   * <a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+   * <a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
    * ```
    *
-   * Both are one declaration in the base layer, and both are needed: this class
-   * promises a link styled as a button and a real button are indistinguishable,
-   * and a dialog's button row is built on `standard`.
+   * **Not `fill`, and not `size`.** `fill` means a surface's own color
+   * everywhere else in the library, so it cannot also mean geometry beside an
+   * `emphasis` documented as "How filled it is drawn". `size` fails the rule's
+   * own test, which is whether two of them sitting together could legitimately
+   * differ: two buttons can, because this is a width *policy* rather than a
+   * scale.
    * - `emphasis`: How filled it is drawn.
    *
    * Not `separation`: a Card's `outlined` says where a surface ends, and this
@@ -35336,7 +35296,7 @@ export type CustomElementsSolidJs = {
    * - `--button-background-color-hover`: Fill behind the button under the pointer. Only needed beside the one above, which otherwise holds through hover. (default: `undefined`)
    * - `--button-foreground-color`: Label and icon color. (default: `undefined`)
    * - `--button-gap`: Space between the label and whatever flanks it. (default: `undefined`)
-   * - `--button-inline-size`: Width taken by `width="standard"`. (default: `undefined`)
+   * - `--button-inline-size`: A width floor. Inherits, so a section can set it once for every button under it. (default: `undefined`)
    * - `--button-padding-inline`: Inline padding, for a container whose rhythm is not the control default. (default: `undefined`)
    * - `--button-radius`: Corner radius of the control. (default: `undefined`)
    * - `--button-radius-end`: Trailing corners, which a group flattens. (default: `undefined`)
@@ -49917,7 +49877,7 @@ export type CustomCssProperties = {
   "--button-foreground-color"?: (string) | undefined;
   /** Space between the label and whatever flanks it. */
   "--button-gap"?: (string) | undefined;
-  /** Width taken by `width="standard"`. */
+  /** A width floor. Inherits, so a section can set it once for every button under it. */
   "--button-inline-size"?: (string) | undefined;
   /** Inline padding, for a container whose rhythm is not the control default. */
   "--button-padding-inline"?: (string) | undefined;

package/types/vue.d.ts

@@ -882,35 +882,25 @@ export type HelixButtonVueProps = {
 
 - `auto` is the default and is never written: the button is as wide as its
   label, which is what a control in a toolbar or beside a field should be.
-- `standard` is one width for every button that takes it, so a column or
-  row of actions lines up instead of following the length of each word.
 - `full` fills the container, for a single action at the foot of a form or
   a card, and on a phone where a control is a target before it is a label.
 
-**Not `fill`, and not `size`.** `fill` means a surface's own color
-everywhere else in the library, in `separation="filled"`, in
-`ThemeIntent.separation`'s `fill` mechanism and in every chart, so it cannot
-also mean geometry beside an `emphasis` documented as "How filled it is
-drawn". `size` fails the rule's own test, which is whether two of them
-sitting together could legitimately differ: two buttons can, because this is
-a width *policy* rather than a scale, and `standard` exists precisely to
-stop a row being ragged.
-
-Width and not weight. `emphasis` says how much a button matters and this
-says how much room it takes, and the three are independent: a `ghost
-standard` Cancel beside a `solid primary standard` Save is exactly the
-pairing a dialog wants.
-
-**A consumer's own anchor takes it as `data-button-width`**, the way it
-takes the emphasis as `data-button`:
+For a row that should line up rather than follow the length of each word,
+set `--button-inline-size` on the container. It inherits, and it reaches a
+plain anchor wearing `data-button` as well as this element.
+
+A consumer's own anchor takes this attribute as `data-button-width`:
 
 ```html
-<a data-button="solid" data-button-width="standard" data-button-tone="primary" href="/save">Save</a>
+<a data-button="solid" data-button-width="full" data-button-tone="primary" href="/save">Save</a>
 ```
 
-Both are one declaration in the base layer, and both are needed: this class
-promises a link styled as a button and a real button are indistinguishable,
-and a dialog's button row is built on `standard`. */
+**Not `fill`, and not `size`.** `fill` means a surface's own color
+everywhere else in the library, so it cannot also mean geometry beside an
+`emphasis` documented as "How filled it is drawn". `size` fails the rule's
+own test, which is whether two of them sitting together could legitimately
+differ: two buttons can, because this is a width *policy* rather than a
+scale. */
   width?: (HelixButton["width"]) | undefined;
   /** How filled it is drawn.
 
@@ -9308,7 +9298,7 @@ export type CustomCssProperties = {
   "--button-foreground-color"?: (string) | undefined;
   /** Space between the label and whatever flanks it. */
   "--button-gap"?: (string) | undefined;
-  /** Width taken by `width="standard"`. */
+  /** A width floor. Inherits, so a section can set it once for every button under it. */
   "--button-inline-size"?: (string) | undefined;
   /** Inline padding, for a container whose rhythm is not the control default. */
   "--button-padding-inline"?: (string) | undefined;