@fusion.dev/helix 0.54.0 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/custom-elements.json +180 -156
  2. package/dist/avatar/root/avatar-root.css.js +1 -1
  3. package/dist/avatar/root/avatar-root.d.ts +5 -1
  4. package/dist/bar-chart/root/bar-chart-root.css.js +19 -19
  5. package/dist/carousel/root/carousel-root.css.js +18 -18
  6. package/dist/carousel/root/carousel-root.d.ts +22 -15
  7. package/dist/checkbox/root/checkbox-root.css.js +20 -11
  8. package/dist/checkbox/root/checkbox-root.d.ts +19 -7
  9. package/dist/checkbox/root/checkbox-root.js +1 -1
  10. package/dist/description-list/root/description-list-root.d.ts +6 -3
  11. package/dist/dialog/root/dialog-root.css.js +3 -3
  12. package/dist/dialog/root/dialog-root.d.ts +24 -16
  13. package/dist/dialog/root/dialog-root.js +3 -3
  14. package/dist/flex/root/flex-root.css.js +8 -12
  15. package/dist/flex/root/flex-root.d.ts +23 -4
  16. package/dist/flex/root/flex-root.js +4 -4
  17. package/dist/grid/root/grid-root.css.js +3 -7
  18. package/dist/grid/root/grid-root.d.ts +14 -2
  19. package/dist/grid/root/grid-root.js +2 -2
  20. package/dist/image/root/image-root.css.js +1 -1
  21. package/dist/image/root/image-root.d.ts +7 -6
  22. package/dist/image/root/image-root.js +2 -6
  23. package/dist/megamenu/root/megamenu-root.css.js +6 -6
  24. package/dist/orb/root/orb-root.d.ts +8 -1
  25. package/dist/progress/root/progress-root.d.ts +2 -2
  26. package/dist/radio/root/radio-root.css.js +22 -12
  27. package/dist/radio/root/radio-root.d.ts +36 -14
  28. package/dist/radio/root/radio-root.js +3 -0
  29. package/dist/rating/root/rating-root.css.js +2 -2
  30. package/dist/rating/root/rating-root.d.ts +17 -12
  31. package/dist/rating/root/rating-root.js +1 -1
  32. package/dist/select/root/select-root.d.ts +5 -5
  33. package/dist/table/column/table-column.css.js +4 -4
  34. package/package.json +6 -6
  35. package/types/jsx.d.ts +1139 -487
  36. package/types/vue.d.ts +347 -136
package/types/jsx.d.ts CHANGED
@@ -1298,7 +1298,11 @@ never asked for a limit, including on the server. */
1298
1298
  export type HelixAvatarElementEvent<E = Event> = TypedEvent<HelixAvatar, E>;
1299
1299
 
1300
1300
  export type HelixAvatarProps = {
1301
- /** Whether the avatar is a circle or a rounded square. */
1301
+ /** Whether the avatar is a circle or a rounded square.
1302
+
1303
+ `rounded` and not `square`, which is the sharp-cornered pole of the same
1304
+ axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
1305
+ for it is the one the registry already has. */
1302
1306
  shape?: (HelixAvatar["shape"]) | undefined;
1303
1307
  /** Edge length of the avatar. */
1304
1308
  size?: (HelixAvatar["size"]) | undefined;
@@ -1327,7 +1331,11 @@ Mirrored to `data-status` rather than reflected, as `Image` explains. */
1327
1331
  };
1328
1332
 
1329
1333
  export type HelixAvatarSolidJsProps = {
1330
- /** Whether the avatar is a circle or a rounded square. */
1334
+ /** Whether the avatar is a circle or a rounded square.
1335
+
1336
+ `rounded` and not `square`, which is the sharp-cornered pole of the same
1337
+ axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
1338
+ for it is the one the registry already has. */
1331
1339
  "prop:shape"?: (HelixAvatar["shape"]) | undefined;
1332
1340
  /** Edge length of the avatar. */
1333
1341
  "prop:size"?: (HelixAvatar["size"]) | undefined;
@@ -1563,19 +1571,12 @@ shadow root names a table in that root rather than in the document. A
1563
1571
  Absent falls back to the table's own caption, which is usually the right
1564
1572
  words and is already written. */
1565
1573
  label?: (HelixBarChart["label"]) | undefined;
1566
- /** Whether the categories run down the side rather than along the bottom.
1567
-
1568
- Absent is columns. `horizontal` is the one to reach for when the category
1569
- names are words rather than dates: a row of long names either overlaps or
1570
- turns on its side, and neither is as readable as putting them down the left
1571
- where they read normally. */
1572
- direction?: (HelixBarChart["direction"]) | undefined;
1573
1574
  /** Which rules are drawn across the plot, if any.
1574
1575
 
1575
1576
  Absent draws none. `value` rules the axis the columns are *measured* on,
1576
1577
  `category` rules the axis they are *arranged* on with one through each
1577
1578
  group, and `both` draws both. Which of those is horizontal turns with
1578
- `direction`, because a rule belongs to an axis and not to a screen edge.
1579
+ `orientation`, because a rule belongs to an axis and not to a screen edge.
1579
1580
 
1580
1581
  **A bare `gridlines` means `value`**, and so does anything unrecognized: an
1581
1582
  unrecognized value that draws nothing is indistinguishable from the
@@ -1611,6 +1612,16 @@ A line among columns measures from zero, because the columns do and they
1611
1612
  share the axis. So does a line on the second scale, which is that scale's
1612
1613
  own rule rather than this one's. */
1613
1614
  lines?: (HelixBarChart["lines"]) | undefined;
1615
+ /** Whether the categories run down the side rather than along the bottom.
1616
+
1617
+ Absent is columns. `horizontal` is the one to reach for when the category
1618
+ names are words rather than dates: a row of long names either overlaps or
1619
+ turns on its side, and neither is as readable as putting them down the left
1620
+ where they read normally.
1621
+
1622
+ `orientation` and not `orientation`, which `Trend` uses in the same group for
1623
+ which way a number moved. */
1624
+ orientation?: (HelixBarChart["orientation"]) | undefined;
1614
1625
  /** Which series are measured against a scale of their own, by name.
1615
1626
 
1616
1627
  Separated and matched the way `lines` is, against the column headings the
@@ -1765,19 +1776,12 @@ shadow root names a table in that root rather than in the document. A
1765
1776
  Absent falls back to the table's own caption, which is usually the right
1766
1777
  words and is already written. */
1767
1778
  "prop:label"?: (HelixBarChart["label"]) | undefined;
1768
- /** Whether the categories run down the side rather than along the bottom.
1769
-
1770
- Absent is columns. `horizontal` is the one to reach for when the category
1771
- names are words rather than dates: a row of long names either overlaps or
1772
- turns on its side, and neither is as readable as putting them down the left
1773
- where they read normally. */
1774
- "prop:direction"?: (HelixBarChart["direction"]) | undefined;
1775
1779
  /** Which rules are drawn across the plot, if any.
1776
1780
 
1777
1781
  Absent draws none. `value` rules the axis the columns are *measured* on,
1778
1782
  `category` rules the axis they are *arranged* on with one through each
1779
1783
  group, and `both` draws both. Which of those is horizontal turns with
1780
- `direction`, because a rule belongs to an axis and not to a screen edge.
1784
+ `orientation`, because a rule belongs to an axis and not to a screen edge.
1781
1785
 
1782
1786
  **A bare `gridlines` means `value`**, and so does anything unrecognized: an
1783
1787
  unrecognized value that draws nothing is indistinguishable from the
@@ -1813,6 +1817,16 @@ A line among columns measures from zero, because the columns do and they
1813
1817
  share the axis. So does a line on the second scale, which is that scale's
1814
1818
  own rule rather than this one's. */
1815
1819
  "prop:lines"?: (HelixBarChart["lines"]) | undefined;
1820
+ /** Whether the categories run down the side rather than along the bottom.
1821
+
1822
+ Absent is columns. `horizontal` is the one to reach for when the category
1823
+ names are words rather than dates: a row of long names either overlaps or
1824
+ turns on its side, and neither is as readable as putting them down the left
1825
+ where they read normally.
1826
+
1827
+ `orientation` and not `orientation`, which `Trend` uses in the same group for
1828
+ which way a number moved. */
1829
+ "prop:orientation"?: (HelixBarChart["orientation"]) | undefined;
1816
1830
  /** Which series are measured against a scale of their own, by name.
1817
1831
 
1818
1832
  Separated and matched the way `lines` is, against the column headings the
@@ -2642,9 +2656,9 @@ where an arrow over a photograph belongs. */
2642
2656
  /** Which side of the slides the arrows sit on.
2643
2657
 
2644
2658
  The same four sides as `indicatorPlacement` and the same default, so a
2645
- carousel that moves only one of them keeps the other where it was.
2646
- `inline-start` or `inline-end` stacks the arrows into a column, which is
2647
- what a vertical track usually wants.
2659
+ carousel that moves only one of them keeps the other where it was. `start`
2660
+ or `end` stacks the arrows into a column, which is what a vertical track
2661
+ usually wants.
2648
2662
 
2649
2663
  `overlay` puts them on the slides, at the track's own edges, which is what a
2650
2664
  full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2661,9 +2675,9 @@ chrome can go. */
2661
2675
  /** Which side of the slides the arrows sit on.
2662
2676
 
2663
2677
  The same four sides as `indicatorPlacement` and the same default, so a
2664
- carousel that moves only one of them keeps the other where it was.
2665
- `inline-start` or `inline-end` stacks the arrows into a column, which is
2666
- what a vertical track usually wants.
2678
+ carousel that moves only one of them keeps the other where it was. `start`
2679
+ or `end` stacks the arrows into a column, which is what a vertical track
2680
+ usually wants.
2667
2681
 
2668
2682
  `overlay` puts them on the slides, at the track's own edges, which is what a
2669
2683
  full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2691,8 +2705,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
2691
2705
  is a column and the same question is `align-self`. A consumer should not
2692
2706
  have to know which of those two words their edge wanted.
2693
2707
 
2694
- Logical, like the placement: `start` is the left in English and the right in
2695
- Arabic on a horizontal run, and the top on a vertical one.
2708
+ Logical, like the placement's own `start` and `end`: `start` is the left in
2709
+ English and the right in Arabic on a horizontal run, and the top on a
2710
+ vertical one.
2696
2711
 
2697
2712
  Unset splits the row, dots to the start and arrows to the end, which is
2698
2713
  what keeps two items in one grid cell from landing on each other. Beside the
@@ -2715,8 +2730,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
2715
2730
  is a column and the same question is `align-self`. A consumer should not
2716
2731
  have to know which of those two words their edge wanted.
2717
2732
 
2718
- Logical, like the placement: `start` is the left in English and the right in
2719
- Arabic on a horizontal run, and the top on a vertical one.
2733
+ Logical, like the placement's own `start` and `end`: `start` is the left in
2734
+ English and the right in Arabic on a horizontal run, and the top on a
2735
+ vertical one.
2720
2736
 
2721
2737
  Unset splits the row, dots to the start and arrows to the end, which is
2722
2738
  what keeps two items in one grid cell from landing on each other. Beside the
@@ -2727,31 +2743,43 @@ exist to avoid. */
2727
2743
  indicatorAlign?: (HelixCarousel["indicatorAlign"]) | undefined;
2728
2744
  /** Which side of the slides the dots sit on.
2729
2745
 
2730
- Unset is `block-end`, under them. `block-start` puts them above,
2731
- `inline-start` and `inline-end` beside, where a run of dots becomes a
2732
- column.
2746
+ Unset is `bottom`, under them. `top` puts them above, `start` and `end`
2747
+ beside, where a run of dots becomes a column.
2733
2748
 
2734
- **The sides of the content, not positions along a bar**, and logical names
2735
- rather than `top`/`left`: an `inline-start` carousel should put its dots on
2736
- the right in Arabic without being told.
2749
+ **The sides of the content, not positions along a bar.** `start` and `end`
2750
+ are the logical ones and they are logical because that axis flips: a
2751
+ carousel with its dots at the start should put them on the right in Arabic
2752
+ without being told. `top` and `bottom` are the block edges, which flip in
2753
+ no writing mode this library draws for, so the plain word is the honest one
2754
+ and `block-start` would be jargon standing in for it.
2737
2755
 
2738
- Independent of `controlsPlacement`. Both default to the block end, where
2739
- they share the row and split it, dots to the start and arrows to the end,
2756
+ **`Drawer` and `Toast` say it in exactly these four words**, and one
2757
+ vocabulary across the three is worth more than each family's own: a
2758
+ consumer who has placed a drawer knows where a carousel's dots go.
2759
+
2760
+ Independent of `controlsPlacement`. Both default to the bottom, where they
2761
+ share the row and split it, dots to the start and arrows to the end,
2740
2762
  arrived at by two defaults rather than by a rule about the pair, so moving
2741
2763
  one leaves the other alone. */
2742
2764
  "indicator-placement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
2743
2765
  /** Which side of the slides the dots sit on.
2744
2766
 
2745
- Unset is `block-end`, under them. `block-start` puts them above,
2746
- `inline-start` and `inline-end` beside, where a run of dots becomes a
2747
- column.
2767
+ Unset is `bottom`, under them. `top` puts them above, `start` and `end`
2768
+ beside, where a run of dots becomes a column.
2769
+
2770
+ **The sides of the content, not positions along a bar.** `start` and `end`
2771
+ are the logical ones and they are logical because that axis flips: a
2772
+ carousel with its dots at the start should put them on the right in Arabic
2773
+ without being told. `top` and `bottom` are the block edges, which flip in
2774
+ no writing mode this library draws for, so the plain word is the honest one
2775
+ and `block-start` would be jargon standing in for it.
2748
2776
 
2749
- **The sides of the content, not positions along a bar**, and logical names
2750
- rather than `top`/`left`: an `inline-start` carousel should put its dots on
2751
- the right in Arabic without being told.
2777
+ **`Drawer` and `Toast` say it in exactly these four words**, and one
2778
+ vocabulary across the three is worth more than each family's own: a
2779
+ consumer who has placed a drawer knows where a carousel's dots go.
2752
2780
 
2753
- Independent of `controlsPlacement`. Both default to the block end, where
2754
- they share the row and split it, dots to the start and arrows to the end,
2781
+ Independent of `controlsPlacement`. Both default to the bottom, where they
2782
+ share the row and split it, dots to the start and arrows to the end,
2755
2783
  arrived at by two defaults rather than by a rule about the pair, so moving
2756
2784
  one leaves the other alone. */
2757
2785
  indicatorPlacement?: (HelixCarousel["indicatorPlacement"]) | undefined;
@@ -2960,9 +2988,9 @@ where an arrow over a photograph belongs. */
2960
2988
  /** Which side of the slides the arrows sit on.
2961
2989
 
2962
2990
  The same four sides as `indicatorPlacement` and the same default, so a
2963
- carousel that moves only one of them keeps the other where it was.
2964
- `inline-start` or `inline-end` stacks the arrows into a column, which is
2965
- what a vertical track usually wants.
2991
+ carousel that moves only one of them keeps the other where it was. `start`
2992
+ or `end` stacks the arrows into a column, which is what a vertical track
2993
+ usually wants.
2966
2994
 
2967
2995
  `overlay` puts them on the slides, at the track's own edges, which is what a
2968
2996
  full-bleed carousel wants: the slide is the page and the controls are on it
@@ -2979,9 +3007,9 @@ chrome can go. */
2979
3007
  /** Which side of the slides the arrows sit on.
2980
3008
 
2981
3009
  The same four sides as `indicatorPlacement` and the same default, so a
2982
- carousel that moves only one of them keeps the other where it was.
2983
- `inline-start` or `inline-end` stacks the arrows into a column, which is
2984
- what a vertical track usually wants.
3010
+ carousel that moves only one of them keeps the other where it was. `start`
3011
+ or `end` stacks the arrows into a column, which is what a vertical track
3012
+ usually wants.
2985
3013
 
2986
3014
  `overlay` puts them on the slides, at the track's own edges, which is what a
2987
3015
  full-bleed carousel wants: the slide is the page and the controls are on it
@@ -3009,8 +3037,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
3009
3037
  is a column and the same question is `align-self`. A consumer should not
3010
3038
  have to know which of those two words their edge wanted.
3011
3039
 
3012
- Logical, like the placement: `start` is the left in English and the right in
3013
- Arabic on a horizontal run, and the top on a vertical one.
3040
+ Logical, like the placement's own `start` and `end`: `start` is the left in
3041
+ English and the right in Arabic on a horizontal run, and the top on a
3042
+ vertical one.
3014
3043
 
3015
3044
  Unset splits the row, dots to the start and arrows to the end, which is
3016
3045
  what keeps two items in one grid cell from landing on each other. Beside the
@@ -3033,8 +3062,9 @@ block edge the run is a row and this is `justify-self`; on an inline edge it
3033
3062
  is a column and the same question is `align-self`. A consumer should not
3034
3063
  have to know which of those two words their edge wanted.
3035
3064
 
3036
- Logical, like the placement: `start` is the left in English and the right in
3037
- Arabic on a horizontal run, and the top on a vertical one.
3065
+ Logical, like the placement's own `start` and `end`: `start` is the left in
3066
+ English and the right in Arabic on a horizontal run, and the top on a
3067
+ vertical one.
3038
3068
 
3039
3069
  Unset splits the row, dots to the start and arrows to the end, which is
3040
3070
  what keeps two items in one grid cell from landing on each other. Beside the
@@ -3045,31 +3075,43 @@ exist to avoid. */
3045
3075
  "prop:indicatorAlign"?: (HelixCarousel["indicatorAlign"]) | undefined;
3046
3076
  /** Which side of the slides the dots sit on.
3047
3077
 
3048
- Unset is `block-end`, under them. `block-start` puts them above,
3049
- `inline-start` and `inline-end` beside, where a run of dots becomes a
3050
- column.
3078
+ Unset is `bottom`, under them. `top` puts them above, `start` and `end`
3079
+ beside, where a run of dots becomes a column.
3080
+
3081
+ **The sides of the content, not positions along a bar.** `start` and `end`
3082
+ are the logical ones and they are logical because that axis flips: a
3083
+ carousel with its dots at the start should put them on the right in Arabic
3084
+ without being told. `top` and `bottom` are the block edges, which flip in
3085
+ no writing mode this library draws for, so the plain word is the honest one
3086
+ and `block-start` would be jargon standing in for it.
3051
3087
 
3052
- **The sides of the content, not positions along a bar**, and logical names
3053
- rather than `top`/`left`: an `inline-start` carousel should put its dots on
3054
- the right in Arabic without being told.
3088
+ **`Drawer` and `Toast` say it in exactly these four words**, and one
3089
+ vocabulary across the three is worth more than each family's own: a
3090
+ consumer who has placed a drawer knows where a carousel's dots go.
3055
3091
 
3056
- Independent of `controlsPlacement`. Both default to the block end, where
3057
- they share the row and split it, dots to the start and arrows to the end,
3092
+ Independent of `controlsPlacement`. Both default to the bottom, where they
3093
+ share the row and split it, dots to the start and arrows to the end,
3058
3094
  arrived at by two defaults rather than by a rule about the pair, so moving
3059
3095
  one leaves the other alone. */
3060
3096
  "attr:indicator-placement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
3061
3097
  /** Which side of the slides the dots sit on.
3062
3098
 
3063
- Unset is `block-end`, under them. `block-start` puts them above,
3064
- `inline-start` and `inline-end` beside, where a run of dots becomes a
3065
- column.
3099
+ Unset is `bottom`, under them. `top` puts them above, `start` and `end`
3100
+ beside, where a run of dots becomes a column.
3066
3101
 
3067
- **The sides of the content, not positions along a bar**, and logical names
3068
- rather than `top`/`left`: an `inline-start` carousel should put its dots on
3069
- the right in Arabic without being told.
3102
+ **The sides of the content, not positions along a bar.** `start` and `end`
3103
+ are the logical ones and they are logical because that axis flips: a
3104
+ carousel with its dots at the start should put them on the right in Arabic
3105
+ without being told. `top` and `bottom` are the block edges, which flip in
3106
+ no writing mode this library draws for, so the plain word is the honest one
3107
+ and `block-start` would be jargon standing in for it.
3070
3108
 
3071
- Independent of `controlsPlacement`. Both default to the block end, where
3072
- they share the row and split it, dots to the start and arrows to the end,
3109
+ **`Drawer` and `Toast` say it in exactly these four words**, and one
3110
+ vocabulary across the three is worth more than each family's own: a
3111
+ consumer who has placed a drawer knows where a carousel's dots go.
3112
+
3113
+ Independent of `controlsPlacement`. Both default to the bottom, where they
3114
+ share the row and split it, dots to the start and arrows to the end,
3073
3115
  arrived at by two defaults rather than by a rule about the pair, so moving
3074
3116
  one leaves the other alone. */
3075
3117
  "prop:indicatorPlacement"?: (HelixCarousel["indicatorPlacement"]) | undefined;
@@ -3772,19 +3814,31 @@ export type HelixCheckboxHelixBeforeToggleElementEvent =
3772
3814
  HelixCheckboxElementEvent<HelixBeforeToggleEvent>;
3773
3815
 
3774
3816
  export type HelixCheckboxProps = {
3775
- /** How the choice presents itself.
3817
+ /** Where the choice's own surface ends.
3818
+
3819
+ The question `separation` asks everywhere else, asked of one option, so it
3820
+ is that word: what these values pick is a surface, and `plain` is already
3821
+ the registry's own word for the answer this family used it for. `Radio`
3822
+ takes the same three for the same reason.
3776
3823
 
3777
- - `plain` is the default and is never written: a box beside its words,
3824
+ - `plain` is the resting one and is never written: a box beside its words,
3778
3825
  which is what a list of choices should be almost always.
3779
- - `card` puts it in a bounded surface, for options that need room to
3826
+ - `outlined` puts it in a bounded surface, for options that need room to
3780
3827
  explain themselves: a description, an icon, a price. It is the half a
3781
3828
  `data-card` link cannot do, because a link reports no value and belongs
3782
3829
  to no group, so a card that is genuinely an answer has to be this.
3783
-
3784
- The box stays in both. A card whose only marker was its own border would
3785
- ask a reader to compare surfaces across a row to find the answer, and would
3786
- leave nothing for a high-contrast display. */
3787
- variant?: (HelixCheckbox["variant"]) | undefined;
3830
+ - `filled` is that same card on a ground of its own with no edge, which is
3831
+ what a column of options wants where a hairline around every one of them
3832
+ is a grid of lines rather than a set of answers.
3833
+
3834
+ **`elevated` is the one value of the axis this family does not take.** A
3835
+ raised choice competes with a dialog: the top layer is where a thing that
3836
+ interrupts you lives, and an option in a form is not one of those.
3837
+
3838
+ The box stays in all of them. A card whose only marker was its own border
3839
+ would ask a reader to compare surfaces across a row to find the answer, and
3840
+ would leave nothing for a high-contrast display. */
3841
+ separation?: (HelixCheckbox["separation"]) | undefined;
3788
3842
  /** Whether the control is checked.
3789
3843
 
3790
3844
  One property rather than two. Writing always applies;
@@ -3850,19 +3904,31 @@ Here rather than on each control. */
3850
3904
  };
3851
3905
 
3852
3906
  export type HelixCheckboxSolidJsProps = {
3853
- /** How the choice presents itself.
3907
+ /** Where the choice's own surface ends.
3854
3908
 
3855
- - `plain` is the default and is never written: a box beside its words,
3909
+ The question `separation` asks everywhere else, asked of one option, so it
3910
+ is that word: what these values pick is a surface, and `plain` is already
3911
+ the registry's own word for the answer this family used it for. `Radio`
3912
+ takes the same three for the same reason.
3913
+
3914
+ - `plain` is the resting one and is never written: a box beside its words,
3856
3915
  which is what a list of choices should be almost always.
3857
- - `card` puts it in a bounded surface, for options that need room to
3916
+ - `outlined` puts it in a bounded surface, for options that need room to
3858
3917
  explain themselves: a description, an icon, a price. It is the half a
3859
3918
  `data-card` link cannot do, because a link reports no value and belongs
3860
3919
  to no group, so a card that is genuinely an answer has to be this.
3861
-
3862
- The box stays in both. A card whose only marker was its own border would
3863
- ask a reader to compare surfaces across a row to find the answer, and would
3864
- leave nothing for a high-contrast display. */
3865
- "prop:variant"?: (HelixCheckbox["variant"]) | undefined;
3920
+ - `filled` is that same card on a ground of its own with no edge, which is
3921
+ what a column of options wants where a hairline around every one of them
3922
+ is a grid of lines rather than a set of answers.
3923
+
3924
+ **`elevated` is the one value of the axis this family does not take.** A
3925
+ raised choice competes with a dialog: the top layer is where a thing that
3926
+ interrupts you lives, and an option in a form is not one of those.
3927
+
3928
+ The box stays in all of them. A card whose only marker was its own border
3929
+ would ask a reader to compare surfaces across a row to find the answer, and
3930
+ would leave nothing for a high-contrast display. */
3931
+ "prop:separation"?: (HelixCheckbox["separation"]) | undefined;
3866
3932
  /** Whether the control is checked.
3867
3933
 
3868
3934
  One property rather than two. Writing always applies;
@@ -6896,9 +6962,12 @@ the end edge instead, with the label on the start one, and in figures of one
6896
6962
  width so a column of numbers lines up by its digits. Only with
6897
6963
  `direction="row"`: stacked, a label and its value share one edge already.
6898
6964
 
6899
- Flex's word for the same thing, and a grid rather than a flex row
6900
- underneath, so the labels still share one column while the values share an
6901
- end. */
6965
+ Flex's value for the same idea, under a shorter name than Flex's own:
6966
+ there it is `justify-content`, the CSS property it sets, and here the
6967
+ underlying layout is a grid handing an edge down to each item as a custom
6968
+ property, so the labels still share one column while the values share an
6969
+ end. Naming a property this does not set after it would be the wrong kind
6970
+ of precision. */
6902
6971
  justify?: (HelixDescriptionList["justify"]) | undefined;
6903
6972
  /** How wide the list is.
6904
6973
 
@@ -6934,9 +7003,12 @@ the end edge instead, with the label on the start one, and in figures of one
6934
7003
  width so a column of numbers lines up by its digits. Only with
6935
7004
  `direction="row"`: stacked, a label and its value share one edge already.
6936
7005
 
6937
- Flex's word for the same thing, and a grid rather than a flex row
6938
- underneath, so the labels still share one column while the values share an
6939
- end. */
7006
+ Flex's value for the same idea, under a shorter name than Flex's own:
7007
+ there it is `justify-content`, the CSS property it sets, and here the
7008
+ underlying layout is a grid handing an edge down to each item as a custom
7009
+ property, so the labels still share one column while the values share an
7010
+ end. Naming a property this does not set after it would be the wrong kind
7011
+ of precision. */
6940
7012
  "prop:justify"?: (HelixDescriptionList["justify"]) | undefined;
6941
7013
  /** How wide the list is.
6942
7014
 
@@ -6979,17 +7051,6 @@ export type HelixDialogHelixBeforeOpenElementEvent =
6979
7051
  HelixDialogElementEvent<HelixBeforeOpenEvent>;
6980
7052
 
6981
7053
  export type HelixDialogProps = {
6982
- /** Which way the panel's contents read.
6983
-
6984
- One property for the whole panel rather than one per region. The regions are
6985
- never mixed in practice: a dialog that asks a short question centers its
6986
- mark, its title, its sentence and its buttons together, and a dialog holding
6987
- a form runs all four from the start. Three properties would be three ways to
6988
- write the same two arrangements, and a fourth way to get one of them wrong.
6989
-
6990
- Unset is `start` and stays unset, so a reflected default cannot appear on a
6991
- host whose server output never had it. */
6992
- align?: (HelixDialog["align"]) | undefined;
6993
7054
  /** How wide the panel is allowed to be.
6994
7055
 
6995
7056
  Steps rather than a number, because a dialog's width is a fact about what is
@@ -7006,10 +7067,48 @@ reflects, and a default would put `size="md"` into markup no consumer wrote.
7006
7067
  rule's own test is whether two of them sitting together could legitimately
7007
7068
  differ, and it is answering "a ragged row is unwritable". Two dialogs never
7008
7069
  sit together. One is on screen at a time, in the top layer, and it is the
7009
- region rather than a control in one, which is the same reason `Avatar` and
7010
- `Spinner` keep theirs. Not `appearance`, which says how a thing reads
7011
- rather than how wide it is. */
7070
+ region rather than a control in one, which is the other half of the axis's
7071
+ domain: the rest of it is pictures, which are not controls either. Not
7072
+ `appearance`, which says how a thing reads rather than how wide it is. */
7012
7073
  size?: (HelixDialog["size"]) | undefined;
7074
+ /** Which way the panel's contents read.
7075
+
7076
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
7077
+ box-alignment question, where things sit in a container, and they are named
7078
+ for the properties they mirror; this one is `text-align` on a panel of
7079
+ prose, and `Table.Column` answers the same question under the same name.
7080
+ One word for both questions is how a consumer who learned it on a layout
7081
+ writes it here and gets no error, a value a component does not have leaving
7082
+ the default in place and looking deliberate.
7083
+
7084
+ One property for the whole panel rather than one per region. The regions are
7085
+ never mixed in practice: a dialog that asks a short question centers its
7086
+ mark, its title, its sentence and its buttons together, and a dialog holding
7087
+ a form runs all four from the start. Three properties would be three ways to
7088
+ write the same two arrangements, and a fourth way to get one of them wrong.
7089
+
7090
+ Unset is `start` and stays unset, so a reflected default cannot appear on a
7091
+ host whose server output never had it. */
7092
+ "text-align"?: (HelixDialog["textAlign"]) | undefined;
7093
+ /** Which way the panel's contents read.
7094
+
7095
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
7096
+ box-alignment question, where things sit in a container, and they are named
7097
+ for the properties they mirror; this one is `text-align` on a panel of
7098
+ prose, and `Table.Column` answers the same question under the same name.
7099
+ One word for both questions is how a consumer who learned it on a layout
7100
+ writes it here and gets no error, a value a component does not have leaving
7101
+ the default in place and looking deliberate.
7102
+
7103
+ One property for the whole panel rather than one per region. The regions are
7104
+ never mixed in practice: a dialog that asks a short question centers its
7105
+ mark, its title, its sentence and its buttons together, and a dialog holding
7106
+ a form runs all four from the start. Three properties would be three ways to
7107
+ write the same two arrangements, and a fourth way to get one of them wrong.
7108
+
7109
+ Unset is `start` and stays unset, so a reflected default cannot appear on a
7110
+ host whose server output never had it. */
7111
+ textAlign?: (HelixDialog["textAlign"]) | undefined;
7013
7112
  /** Whether the element is open.
7014
7113
 
7015
7114
  One property, not two, so `dialog.open` answers the question anyone
@@ -7084,17 +7183,6 @@ survives to it and a consumer reading one back gets what they wrote. */
7084
7183
  };
7085
7184
 
7086
7185
  export type HelixDialogSolidJsProps = {
7087
- /** Which way the panel's contents read.
7088
-
7089
- One property for the whole panel rather than one per region. The regions are
7090
- never mixed in practice: a dialog that asks a short question centers its
7091
- mark, its title, its sentence and its buttons together, and a dialog holding
7092
- a form runs all four from the start. Three properties would be three ways to
7093
- write the same two arrangements, and a fourth way to get one of them wrong.
7094
-
7095
- Unset is `start` and stays unset, so a reflected default cannot appear on a
7096
- host whose server output never had it. */
7097
- "prop:align"?: (HelixDialog["align"]) | undefined;
7098
7186
  /** How wide the panel is allowed to be.
7099
7187
 
7100
7188
  Steps rather than a number, because a dialog's width is a fact about what is
@@ -7111,10 +7199,48 @@ reflects, and a default would put `size="md"` into markup no consumer wrote.
7111
7199
  rule's own test is whether two of them sitting together could legitimately
7112
7200
  differ, and it is answering "a ragged row is unwritable". Two dialogs never
7113
7201
  sit together. One is on screen at a time, in the top layer, and it is the
7114
- region rather than a control in one, which is the same reason `Avatar` and
7115
- `Spinner` keep theirs. Not `appearance`, which says how a thing reads
7116
- rather than how wide it is. */
7202
+ region rather than a control in one, which is the other half of the axis's
7203
+ domain: the rest of it is pictures, which are not controls either. Not
7204
+ `appearance`, which says how a thing reads rather than how wide it is. */
7117
7205
  "prop:size"?: (HelixDialog["size"]) | undefined;
7206
+ /** Which way the panel's contents read.
7207
+
7208
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
7209
+ box-alignment question, where things sit in a container, and they are named
7210
+ for the properties they mirror; this one is `text-align` on a panel of
7211
+ prose, and `Table.Column` answers the same question under the same name.
7212
+ One word for both questions is how a consumer who learned it on a layout
7213
+ writes it here and gets no error, a value a component does not have leaving
7214
+ the default in place and looking deliberate.
7215
+
7216
+ One property for the whole panel rather than one per region. The regions are
7217
+ never mixed in practice: a dialog that asks a short question centers its
7218
+ mark, its title, its sentence and its buttons together, and a dialog holding
7219
+ a form runs all four from the start. Three properties would be three ways to
7220
+ write the same two arrangements, and a fourth way to get one of them wrong.
7221
+
7222
+ Unset is `start` and stays unset, so a reflected default cannot appear on a
7223
+ host whose server output never had it. */
7224
+ "attr:text-align"?: (HelixDialog["textAlign"]) | undefined;
7225
+ /** Which way the panel's contents read.
7226
+
7227
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
7228
+ box-alignment question, where things sit in a container, and they are named
7229
+ for the properties they mirror; this one is `text-align` on a panel of
7230
+ prose, and `Table.Column` answers the same question under the same name.
7231
+ One word for both questions is how a consumer who learned it on a layout
7232
+ writes it here and gets no error, a value a component does not have leaving
7233
+ the default in place and looking deliberate.
7234
+
7235
+ One property for the whole panel rather than one per region. The regions are
7236
+ never mixed in practice: a dialog that asks a short question centers its
7237
+ mark, its title, its sentence and its buttons together, and a dialog holding
7238
+ a form runs all four from the start. Three properties would be three ways to
7239
+ write the same two arrangements, and a fourth way to get one of them wrong.
7240
+
7241
+ Unset is `start` and stays unset, so a reflected default cannot appear on a
7242
+ host whose server output never had it. */
7243
+ "prop:textAlign"?: (HelixDialog["textAlign"]) | undefined;
7118
7244
  /** Whether the element is open.
7119
7245
 
7120
7246
  One property, not two, so `dialog.open` answers the question anyone
@@ -8566,31 +8692,115 @@ Here rather than on each control. */
8566
8692
  };
8567
8693
 
8568
8694
  export type HelixFlexProps = {
8569
- /** Alignment across the direction. */
8570
- align?: (HelixFlex["align"]) | undefined;
8695
+ /** Alignment across the direction, which is `align-items`.
8696
+
8697
+ **Named for the CSS property it sets, because it is that property.** A flex
8698
+ container is the one place where the box-alignment words are already the
8699
+ reader's, so a shorter name would be a second vocabulary for something they
8700
+ can already say, and `align` alone is the word four other families use for
8701
+ four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
8702
+
8703
+ **It also keeps the name out of the browser's way.** `align` is a legacy
8704
+ HTML presentational attribute mapped to `text-align` on any element that
8705
+ carries one, this one included: measured, an invented tag with
8706
+ `align="center"` computes centered text too, so it is nothing to do with
8707
+ being a known element. A row that carried it therefore centered the text
8708
+ inside every field in it, through a hint no rule here declares and none can
8709
+ see, and the fix is a name the platform has no opinion about rather than a
8710
+ guard against the hint. */
8711
+ "align-items"?: (HelixFlex["alignItems"]) | undefined;
8712
+ /** Alignment across the direction, which is `align-items`.
8713
+
8714
+ **Named for the CSS property it sets, because it is that property.** A flex
8715
+ container is the one place where the box-alignment words are already the
8716
+ reader's, so a shorter name would be a second vocabulary for something they
8717
+ can already say, and `align` alone is the word four other families use for
8718
+ four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
8719
+
8720
+ **It also keeps the name out of the browser's way.** `align` is a legacy
8721
+ HTML presentational attribute mapped to `text-align` on any element that
8722
+ carries one, this one included: measured, an invented tag with
8723
+ `align="center"` computes centered text too, so it is nothing to do with
8724
+ being a known element. A row that carried it therefore centered the text
8725
+ inside every field in it, through a hint no rule here declares and none can
8726
+ see, and the fix is a name the platform has no opinion about rather than a
8727
+ guard against the hint. */
8728
+ alignItems?: (HelixFlex["alignItems"]) | undefined;
8571
8729
  /** Whether items run across or down. */
8572
8730
  direction?: (HelixFlex["direction"]) | undefined;
8573
8731
  /** Space between items, named on the space scale. */
8574
8732
  gap?: (HelixFlex["gap"]) | undefined;
8575
8733
  /** Flows with surrounding text instead of taking the full width. */
8576
8734
  inline?: (HelixFlex["inline"]) | undefined;
8577
- /** Distribution along the direction. */
8578
- justify?: (HelixFlex["justify"]) | undefined;
8735
+ /** Distribution along the direction, which is `justify-content`.
8736
+
8737
+ Named for the property it sets, the way `alignItems` is. `between` and
8738
+ `around` drop the `space-` prefix and nothing else does, because those two
8739
+ are the only values whose CSS spelling is two words. */
8740
+ "justify-content"?: (HelixFlex["justifyContent"]) | undefined;
8741
+ /** Distribution along the direction, which is `justify-content`.
8742
+
8743
+ Named for the property it sets, the way `alignItems` is. `between` and
8744
+ `around` drop the `space-` prefix and nothing else does, because those two
8745
+ are the only values whose CSS spelling is two words. */
8746
+ justifyContent?: (HelixFlex["justifyContent"]) | undefined;
8579
8747
  /** Whether items wrap onto more lines. */
8580
8748
  wrap?: (HelixFlex["wrap"]) | undefined;
8581
8749
  };
8582
8750
 
8583
8751
  export type HelixFlexSolidJsProps = {
8584
- /** Alignment across the direction. */
8585
- "prop:align"?: (HelixFlex["align"]) | undefined;
8752
+ /** Alignment across the direction, which is `align-items`.
8753
+
8754
+ **Named for the CSS property it sets, because it is that property.** A flex
8755
+ container is the one place where the box-alignment words are already the
8756
+ reader's, so a shorter name would be a second vocabulary for something they
8757
+ can already say, and `align` alone is the word four other families use for
8758
+ four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
8759
+
8760
+ **It also keeps the name out of the browser's way.** `align` is a legacy
8761
+ HTML presentational attribute mapped to `text-align` on any element that
8762
+ carries one, this one included: measured, an invented tag with
8763
+ `align="center"` computes centered text too, so it is nothing to do with
8764
+ being a known element. A row that carried it therefore centered the text
8765
+ inside every field in it, through a hint no rule here declares and none can
8766
+ see, and the fix is a name the platform has no opinion about rather than a
8767
+ guard against the hint. */
8768
+ "attr:align-items"?: (HelixFlex["alignItems"]) | undefined;
8769
+ /** Alignment across the direction, which is `align-items`.
8770
+
8771
+ **Named for the CSS property it sets, because it is that property.** A flex
8772
+ container is the one place where the box-alignment words are already the
8773
+ reader's, so a shorter name would be a second vocabulary for something they
8774
+ can already say, and `align` alone is the word four other families use for
8775
+ four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
8776
+
8777
+ **It also keeps the name out of the browser's way.** `align` is a legacy
8778
+ HTML presentational attribute mapped to `text-align` on any element that
8779
+ carries one, this one included: measured, an invented tag with
8780
+ `align="center"` computes centered text too, so it is nothing to do with
8781
+ being a known element. A row that carried it therefore centered the text
8782
+ inside every field in it, through a hint no rule here declares and none can
8783
+ see, and the fix is a name the platform has no opinion about rather than a
8784
+ guard against the hint. */
8785
+ "prop:alignItems"?: (HelixFlex["alignItems"]) | undefined;
8586
8786
  /** Whether items run across or down. */
8587
8787
  "prop:direction"?: (HelixFlex["direction"]) | undefined;
8588
8788
  /** Space between items, named on the space scale. */
8589
8789
  "prop:gap"?: (HelixFlex["gap"]) | undefined;
8590
8790
  /** Flows with surrounding text instead of taking the full width. */
8591
8791
  "prop:inline"?: (HelixFlex["inline"]) | undefined;
8592
- /** Distribution along the direction. */
8593
- "prop:justify"?: (HelixFlex["justify"]) | undefined;
8792
+ /** Distribution along the direction, which is `justify-content`.
8793
+
8794
+ Named for the property it sets, the way `alignItems` is. `between` and
8795
+ `around` drop the `space-` prefix and nothing else does, because those two
8796
+ are the only values whose CSS spelling is two words. */
8797
+ "attr:justify-content"?: (HelixFlex["justifyContent"]) | undefined;
8798
+ /** Distribution along the direction, which is `justify-content`.
8799
+
8800
+ Named for the property it sets, the way `alignItems` is. `between` and
8801
+ `around` drop the `space-` prefix and nothing else does, because those two
8802
+ are the only values whose CSS spelling is two words. */
8803
+ "prop:justifyContent"?: (HelixFlex["justifyContent"]) | undefined;
8594
8804
  /** Whether items wrap onto more lines. */
8595
8805
  "prop:wrap"?: (HelixFlex["wrap"]) | undefined;
8596
8806
 
@@ -8716,8 +8926,34 @@ Empty is the runtime's own. */
8716
8926
  };
8717
8927
 
8718
8928
  export type HelixGridProps = {
8719
- /** Alignment of each cell within its row. */
8720
- align?: (HelixGrid["align"]) | undefined;
8929
+ /** Alignment of each cell within its row, which is `align-items`.
8930
+
8931
+ **Named for the CSS property it sets**, the way `Flex` is, and the same
8932
+ property on a grid: it places every cell in its row's track rather than
8933
+ placing the tracks. No `baseline`, which `Flex` offers, because cells in a
8934
+ row of a grid are boxes of unrelated content and lining their first lines
8935
+ up is a thing a reader asks for between siblings in a row, not between
8936
+ cells in a table of them.
8937
+
8938
+ There is no `justifyContent` here for the same reason: the tracks are
8939
+ `1fr`, so they already fill the row and there is nothing left over to
8940
+ distribute. `columns`, `min` and `--grid-columns` are how a grid says how
8941
+ wide its tracks are. */
8942
+ "align-items"?: (HelixGrid["alignItems"]) | undefined;
8943
+ /** Alignment of each cell within its row, which is `align-items`.
8944
+
8945
+ **Named for the CSS property it sets**, the way `Flex` is, and the same
8946
+ property on a grid: it places every cell in its row's track rather than
8947
+ placing the tracks. No `baseline`, which `Flex` offers, because cells in a
8948
+ row of a grid are boxes of unrelated content and lining their first lines
8949
+ up is a thing a reader asks for between siblings in a row, not between
8950
+ cells in a table of them.
8951
+
8952
+ There is no `justifyContent` here for the same reason: the tracks are
8953
+ `1fr`, so they already fill the row and there is nothing left over to
8954
+ distribute. `columns`, `min` and `--grid-columns` are how a grid says how
8955
+ wide its tracks are. */
8956
+ alignItems?: (HelixGrid["alignItems"]) | undefined;
8721
8957
  /** Fixed number of equal columns. */
8722
8958
  columns?: (HelixGrid["columns"]) | undefined;
8723
8959
  /** Space between cells, named on the space scale. */
@@ -8730,8 +8966,34 @@ is two intentions in one element. */
8730
8966
  };
8731
8967
 
8732
8968
  export type HelixGridSolidJsProps = {
8733
- /** Alignment of each cell within its row. */
8734
- "prop:align"?: (HelixGrid["align"]) | undefined;
8969
+ /** Alignment of each cell within its row, which is `align-items`.
8970
+
8971
+ **Named for the CSS property it sets**, the way `Flex` is, and the same
8972
+ property on a grid: it places every cell in its row's track rather than
8973
+ placing the tracks. No `baseline`, which `Flex` offers, because cells in a
8974
+ row of a grid are boxes of unrelated content and lining their first lines
8975
+ up is a thing a reader asks for between siblings in a row, not between
8976
+ cells in a table of them.
8977
+
8978
+ There is no `justifyContent` here for the same reason: the tracks are
8979
+ `1fr`, so they already fill the row and there is nothing left over to
8980
+ distribute. `columns`, `min` and `--grid-columns` are how a grid says how
8981
+ wide its tracks are. */
8982
+ "attr:align-items"?: (HelixGrid["alignItems"]) | undefined;
8983
+ /** Alignment of each cell within its row, which is `align-items`.
8984
+
8985
+ **Named for the CSS property it sets**, the way `Flex` is, and the same
8986
+ property on a grid: it places every cell in its row's track rather than
8987
+ placing the tracks. No `baseline`, which `Flex` offers, because cells in a
8988
+ row of a grid are boxes of unrelated content and lining their first lines
8989
+ up is a thing a reader asks for between siblings in a row, not between
8990
+ cells in a table of them.
8991
+
8992
+ There is no `justifyContent` here for the same reason: the tracks are
8993
+ `1fr`, so they already fill the row and there is nothing left over to
8994
+ distribute. `columns`, `min` and `--grid-columns` are how a grid says how
8995
+ wide its tracks are. */
8996
+ "prop:alignItems"?: (HelixGrid["alignItems"]) | undefined;
8735
8997
  /** Fixed number of equal columns. */
8736
8998
  "prop:columns"?: (HelixGrid["columns"]) | undefined;
8737
8999
  /** Space between cells, named on the space scale. */
@@ -9402,11 +9664,12 @@ export type HelixImageElementEvent<E = Event> = TypedEvent<HelixImage, E>;
9402
9664
  export type HelixImageProps = {
9403
9665
  /** Whether the corners are cut.
9404
9666
 
9405
- A boolean rather than a radius, because the radius is a token and the
9406
- question a consumer is answering is whether this picture is a card's
9407
- surface or a page's. `--image-radius` moves it for the case that is
9408
- neither. */
9409
- rounded?: (HelixImage["rounded"]) | undefined;
9667
+ The axis and not a boolean, because `rounded` is a registered word and a
9668
+ private spelling of a registry question is what `appearance` was retired
9669
+ for. Not a radius either: the radius is a token and the question a consumer
9670
+ is answering is whether this picture is a card's surface or a page's.
9671
+ `--image-radius` moves it for the case that is neither. */
9672
+ shape?: (HelixImage["shape"]) | undefined;
9410
9673
  /** What it shows, for a reader who cannot see it.
9411
9674
 
9412
9675
  Empty is a real answer and means decoration. Omitting the attribute is not
@@ -9485,11 +9748,12 @@ resting state of a mirror is the attribute's absence. */
9485
9748
  export type HelixImageSolidJsProps = {
9486
9749
  /** Whether the corners are cut.
9487
9750
 
9488
- A boolean rather than a radius, because the radius is a token and the
9489
- question a consumer is answering is whether this picture is a card's
9490
- surface or a page's. `--image-radius` moves it for the case that is
9491
- neither. */
9492
- "prop:rounded"?: (HelixImage["rounded"]) | undefined;
9751
+ The axis and not a boolean, because `rounded` is a registered word and a
9752
+ private spelling of a registry question is what `appearance` was retired
9753
+ for. Not a radius either: the radius is a token and the question a consumer
9754
+ is answering is whether this picture is a card's surface or a page's.
9755
+ `--image-radius` moves it for the case that is neither. */
9756
+ "prop:shape"?: (HelixImage["shape"]) | undefined;
9493
9757
  /** What it shows, for a reader who cannot see it.
9494
9758
 
9495
9759
  Empty is a real answer and means decoration. Omitting the attribute is not
@@ -10929,7 +11193,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
10929
11193
  narrow exception the server specs describe covers a mirror that can only
10930
11194
  become true long after hydration, and a viewport measured before the first
10931
11195
  paint is the opposite case. See `MixinControllerOpen` on `open`. */
10932
- "full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
11196
+ "band-below"?: (HelixMegamenu["bandBelow"] | `${number}`) | undefined;
10933
11197
  /** The width, in pixels, under which a card becomes a band. Zero never does.
10934
11198
 
10935
11199
  A card is a panel hung off one word, and there is no room to hang anything
@@ -10953,7 +11217,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
10953
11217
  narrow exception the server specs describe covers a mirror that can only
10954
11218
  become true long after hydration, and a viewport measured before the first
10955
11219
  paint is the opposite case. See `MixinControllerOpen` on `open`. */
10956
- fullBelow?: (HelixMegamenu["fullBelow"]) | undefined;
11220
+ bandBelow?: (HelixMegamenu["bandBelow"]) | undefined;
10957
11221
  /** The section's name, which names the default trigger and the panel. */
10958
11222
  label?: (HelixMegamenu["label"]) | undefined;
10959
11223
  /** Whether hovering the trigger opens the panel, or only a press does.
@@ -10973,16 +11237,23 @@ heavy enough that opening it on the way past is rude. */
10973
11237
  /** Whether the panel is a card under the trigger or a band across the page.
10974
11238
 
10975
11239
  The resting one is the card, hanging off the trigger and as wide as it
10976
- needs to be. `full` is the other shape navigations use: a band from edge to
11240
+ needs to be. `band` is the other shape navigations use: a run from edge to
10977
11241
  edge under the header, with its contents held to the page's own measure, so
10978
11242
  a set of destinations too wide to sit under one word gets the whole width
10979
11243
  to lay out in.
10980
11244
 
10981
- It changes where the panel goes as well as how it looks, which is why this
10982
- tier knows about it at all: a band spans the viewport, so there is nothing
10983
- to measure it against and nothing to flip or shift to, and the placing pass
10984
- is told not to run. Everything else the popover gives, the top layer and
10985
- the dismissal, is exactly what such a band needs. */
11245
+ **A band and not a width, which is why the word is not `full`.** It changes
11246
+ where the panel goes as well as how wide it is, which is why this tier
11247
+ knows about it at all: a band spans the viewport, so there is nothing to
11248
+ measure it against and nothing to flip or shift to, and the placing pass is
11249
+ told not to run. Everything else the popover gives, the top layer and the
11250
+ dismissal, is exactly what such a band needs. `full` is the registry's word
11251
+ for a width, and `Button` and `Dialog` are the two families answering that
11252
+ question; borrowing it here would put a third meaning on it.
11253
+
11254
+ `variant` and not an axis, for the reason the registry gives: a card under
11255
+ a word and a band under a header are two arrangements this family has, and
11256
+ no other family is being asked the same question. */
10986
11257
  variant?: (HelixMegamenu["variant"]) | undefined;
10987
11258
 
10988
11259
  /** Fired before it closes, and cancelable. */
@@ -11036,7 +11307,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
11036
11307
  narrow exception the server specs describe covers a mirror that can only
11037
11308
  become true long after hydration, and a viewport measured before the first
11038
11309
  paint is the opposite case. See `MixinControllerOpen` on `open`. */
11039
- "attr:full-below"?: (HelixMegamenu["fullBelow"] | `${number}`) | undefined;
11310
+ "attr:band-below"?: (HelixMegamenu["bandBelow"] | `${number}`) | undefined;
11040
11311
  /** The width, in pixels, under which a card becomes a band. Zero never does.
11041
11312
 
11042
11313
  A card is a panel hung off one word, and there is no room to hang anything
@@ -11060,7 +11331,7 @@ which React reports as a mismatch and answers by rebuilding the subtree. The
11060
11331
  narrow exception the server specs describe covers a mirror that can only
11061
11332
  become true long after hydration, and a viewport measured before the first
11062
11333
  paint is the opposite case. See `MixinControllerOpen` on `open`. */
11063
- "prop:fullBelow"?: (HelixMegamenu["fullBelow"]) | undefined;
11334
+ "prop:bandBelow"?: (HelixMegamenu["bandBelow"]) | undefined;
11064
11335
  /** The section's name, which names the default trigger and the panel. */
11065
11336
  "prop:label"?: (HelixMegamenu["label"]) | undefined;
11066
11337
  /** Whether hovering the trigger opens the panel, or only a press does.
@@ -11080,16 +11351,23 @@ heavy enough that opening it on the way past is rude. */
11080
11351
  /** Whether the panel is a card under the trigger or a band across the page.
11081
11352
 
11082
11353
  The resting one is the card, hanging off the trigger and as wide as it
11083
- needs to be. `full` is the other shape navigations use: a band from edge to
11354
+ needs to be. `band` is the other shape navigations use: a run from edge to
11084
11355
  edge under the header, with its contents held to the page's own measure, so
11085
11356
  a set of destinations too wide to sit under one word gets the whole width
11086
11357
  to lay out in.
11087
11358
 
11088
- It changes where the panel goes as well as how it looks, which is why this
11089
- tier knows about it at all: a band spans the viewport, so there is nothing
11090
- to measure it against and nothing to flip or shift to, and the placing pass
11091
- is told not to run. Everything else the popover gives, the top layer and
11092
- the dismissal, is exactly what such a band needs. */
11359
+ **A band and not a width, which is why the word is not `full`.** It changes
11360
+ where the panel goes as well as how wide it is, which is why this tier
11361
+ knows about it at all: a band spans the viewport, so there is nothing to
11362
+ measure it against and nothing to flip or shift to, and the placing pass is
11363
+ told not to run. Everything else the popover gives, the top layer and the
11364
+ dismissal, is exactly what such a band needs. `full` is the registry's word
11365
+ for a width, and `Button` and `Dialog` are the two families answering that
11366
+ question; borrowing it here would put a third meaning on it.
11367
+
11368
+ `variant` and not an axis, for the reason the registry gives: a card under
11369
+ a word and a band under a header are two arrangements this family has, and
11370
+ no other family is being asked the same question. */
11093
11371
  "prop:variant"?: (HelixMegamenu["variant"]) | undefined;
11094
11372
  /** Fired before it closes, and cancelable. */
11095
11373
  "on:helix-before-close"?: ((
@@ -12620,6 +12898,13 @@ the name of the tool being run, or the file being read. */
12620
12898
  label?: (HelixOrb["label"]) | undefined;
12621
12899
  /** Diameter relative to the surrounding text.
12622
12900
 
12901
+ **`Loader`'s three steps, because the two are swapped for each other.** An
12902
+ orb and a spinner are the same job drawn differently, a wait a reader is
12903
+ looking at, and a product that replaces one with the other should not find
12904
+ that a step it was writing has stopped existing. `md` is the resting one
12905
+ and selects nothing, landing on the base rule the way a written resting
12906
+ value does everywhere else.
12907
+
12623
12908
  Reflected because the stylesheet selects on it. The mesh is chosen from the
12624
12909
  rendered box rather than from this, so `--orb-size` and a consumer's own
12625
12910
  `inline-size` get the same treatment as the named steps. */
@@ -12646,6 +12931,13 @@ the name of the tool being run, or the file being read. */
12646
12931
  "prop:label"?: (HelixOrb["label"]) | undefined;
12647
12932
  /** Diameter relative to the surrounding text.
12648
12933
 
12934
+ **`Loader`'s three steps, because the two are swapped for each other.** An
12935
+ orb and a spinner are the same job drawn differently, a wait a reader is
12936
+ looking at, and a product that replaces one with the other should not find
12937
+ that a step it was writing has stopped existing. `md` is the resting one
12938
+ and selects nothing, landing on the base rule the way a written resting
12939
+ value does everywhere else.
12940
+
12649
12941
  Reflected because the stylesheet selects on it. The mesh is chosen from the
12650
12942
  rendered box rather than from this, so `--orb-size` and a consumer's own
12651
12943
  `inline-size` get the same treatment as the named steps. */
@@ -13950,9 +14242,9 @@ export type HelixRadioProps = {
13950
14242
  Unnecessary under `chip`, which has no room for a circle beside its mark
13951
14243
  and hides it already.
13952
14244
 
13953
- `card` only, and it is a graphic that goes rather than a radio: the control
13954
- in the shadow root is untouched, so the row is still focusable, still
13955
- reported to a screen reader, and still the thing a form submits.
14245
+ A separated choice only, and it is a graphic that goes rather than a radio:
14246
+ the control in the shadow root is untouched, so the row is still focusable,
14247
+ still reported to a screen reader, and still the thing a form submits.
13956
14248
 
13957
14249
  Safe because the card already carries the answer in its surface, a raised
13958
14250
  fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -13967,9 +14259,9 @@ card with no box loses the only thing that says you may pick several. */
13967
14259
  Unnecessary under `chip`, which has no room for a circle beside its mark
13968
14260
  and hides it already.
13969
14261
 
13970
- `card` only, and it is a graphic that goes rather than a radio: the control
13971
- in the shadow root is untouched, so the row is still focusable, still
13972
- reported to a screen reader, and still the thing a form submits.
14262
+ A separated choice only, and it is a graphic that goes rather than a radio:
14263
+ the control in the shadow root is untouched, so the row is still focusable,
14264
+ still reported to a screen reader, and still the thing a form submits.
13973
14265
 
13974
14266
  Safe because the card already carries the answer in its surface, a raised
13975
14267
  fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -13979,21 +14271,41 @@ Not on `Checkbox`, deliberately. A radio card with no circle is still
13979
14271
  unmistakably one-of-many because its siblings behave that way; a checkbox
13980
14272
  card with no box loses the only thing that says you may pick several. */
13981
14273
  hideControl?: (HelixRadio["hideControl"]) | undefined;
13982
- /** How the choice presents itself.
14274
+ /** Where the choice's own surface ends.
13983
14275
 
13984
- - `plain` is the default and is never written: a circle beside its words,
13985
- which is what a list of choices should be almost always.
13986
- - `card` puts it in a bounded surface, for options that need room to
14276
+ The question `separation` asks everywhere else, asked of one option, so it
14277
+ is that word: what these values pick is a surface, and `plain` is already
14278
+ the registry's own word for the answer this family used it for.
14279
+
14280
+ - `plain` is the resting one and is never written: a circle beside its
14281
+ words, which is what a list of choices should be almost always.
14282
+ - `outlined` puts it in a bounded surface, for options that need room to
13987
14283
  explain themselves: a description, an icon, a price. It is the half a
13988
14284
  `data-card` link cannot do, because a link reports no value and belongs
13989
14285
  to no group, so a card that is genuinely an answer has to be this.
13990
- - `chip` is the answer as its own small surface, for a row of short
13991
- choices read at a glance. It hides the circle, the surface being the
13992
- whole mark, which is why `hide-control` says it is unnecessary here.
13993
-
13994
- The circle stays in both. A card whose only marker was its own border would
13995
- ask a reader to compare surfaces across a row to find the answer, and would
13996
- leave nothing for a high-contrast display. */
14286
+ - `filled` is that same card on a ground of its own with no edge, which is
14287
+ what a column of choices wants where a hairline around every one of them
14288
+ is a grid of lines rather than a set of answers.
14289
+
14290
+ **`elevated` is the one value of the axis this family does not take.** A
14291
+ raised choice competes with a dialog: the top layer is where a thing that
14292
+ interrupts you lives, and an option in a form is not one of those, so a
14293
+ column of lifted cards reads as a stack of floating things none of which is
14294
+ settled.
14295
+
14296
+ The circle stays in all of them. A card whose only marker was its own
14297
+ border would ask a reader to compare surfaces across a row to find the
14298
+ answer, and would leave nothing for a high-contrast display. */
14299
+ separation?: (HelixRadio["separation"]) | undefined;
14300
+ /** The answer as its own small surface, for a row of short choices read at a
14301
+ glance.
14302
+
14303
+ **Not a separation, which is why it is still `variant`.** The other values
14304
+ pick where a surface ends around a row that keeps its circle and its words;
14305
+ a chip has neither. It hides the circle, the surface being the whole mark,
14306
+ which is why `hide-control` says it is unnecessary here, and it takes the
14307
+ words out of the flow to be the accessible name. That removes the
14308
+ distinction `separation` exists to make rather than answering it. */
13997
14309
  variant?: (HelixRadio["variant"]) | undefined;
13998
14310
  /** Whether this one can be chosen. */
13999
14311
  disabled?: (HelixRadio["disabled"]) | undefined;
@@ -14057,9 +14369,9 @@ export type HelixRadioSolidJsProps = {
14057
14369
  Unnecessary under `chip`, which has no room for a circle beside its mark
14058
14370
  and hides it already.
14059
14371
 
14060
- `card` only, and it is a graphic that goes rather than a radio: the control
14061
- in the shadow root is untouched, so the row is still focusable, still
14062
- reported to a screen reader, and still the thing a form submits.
14372
+ A separated choice only, and it is a graphic that goes rather than a radio:
14373
+ the control in the shadow root is untouched, so the row is still focusable,
14374
+ still reported to a screen reader, and still the thing a form submits.
14063
14375
 
14064
14376
  Safe because the card already carries the answer in its surface, a raised
14065
14377
  fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -14074,9 +14386,9 @@ card with no box loses the only thing that says you may pick several. */
14074
14386
  Unnecessary under `chip`, which has no room for a circle beside its mark
14075
14387
  and hides it already.
14076
14388
 
14077
- `card` only, and it is a graphic that goes rather than a radio: the control
14078
- in the shadow root is untouched, so the row is still focusable, still
14079
- reported to a screen reader, and still the thing a form submits.
14389
+ A separated choice only, and it is a graphic that goes rather than a radio:
14390
+ the control in the shadow root is untouched, so the row is still focusable,
14391
+ still reported to a screen reader, and still the thing a form submits.
14080
14392
 
14081
14393
  Safe because the card already carries the answer in its surface, a raised
14082
14394
  fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -14086,21 +14398,41 @@ Not on `Checkbox`, deliberately. A radio card with no circle is still
14086
14398
  unmistakably one-of-many because its siblings behave that way; a checkbox
14087
14399
  card with no box loses the only thing that says you may pick several. */
14088
14400
  "prop:hideControl"?: (HelixRadio["hideControl"]) | undefined;
14089
- /** How the choice presents itself.
14401
+ /** Where the choice's own surface ends.
14090
14402
 
14091
- - `plain` is the default and is never written: a circle beside its words,
14092
- which is what a list of choices should be almost always.
14093
- - `card` puts it in a bounded surface, for options that need room to
14403
+ The question `separation` asks everywhere else, asked of one option, so it
14404
+ is that word: what these values pick is a surface, and `plain` is already
14405
+ the registry's own word for the answer this family used it for.
14406
+
14407
+ - `plain` is the resting one and is never written: a circle beside its
14408
+ words, which is what a list of choices should be almost always.
14409
+ - `outlined` puts it in a bounded surface, for options that need room to
14094
14410
  explain themselves: a description, an icon, a price. It is the half a
14095
14411
  `data-card` link cannot do, because a link reports no value and belongs
14096
14412
  to no group, so a card that is genuinely an answer has to be this.
14097
- - `chip` is the answer as its own small surface, for a row of short
14098
- choices read at a glance. It hides the circle, the surface being the
14099
- whole mark, which is why `hide-control` says it is unnecessary here.
14100
-
14101
- The circle stays in both. A card whose only marker was its own border would
14102
- ask a reader to compare surfaces across a row to find the answer, and would
14103
- leave nothing for a high-contrast display. */
14413
+ - `filled` is that same card on a ground of its own with no edge, which is
14414
+ what a column of choices wants where a hairline around every one of them
14415
+ is a grid of lines rather than a set of answers.
14416
+
14417
+ **`elevated` is the one value of the axis this family does not take.** A
14418
+ raised choice competes with a dialog: the top layer is where a thing that
14419
+ interrupts you lives, and an option in a form is not one of those, so a
14420
+ column of lifted cards reads as a stack of floating things none of which is
14421
+ settled.
14422
+
14423
+ The circle stays in all of them. A card whose only marker was its own
14424
+ border would ask a reader to compare surfaces across a row to find the
14425
+ answer, and would leave nothing for a high-contrast display. */
14426
+ "prop:separation"?: (HelixRadio["separation"]) | undefined;
14427
+ /** The answer as its own small surface, for a row of short choices read at a
14428
+ glance.
14429
+
14430
+ **Not a separation, which is why it is still `variant`.** The other values
14431
+ pick where a surface ends around a row that keeps its circle and its words;
14432
+ a chip has neither. It hides the circle, the surface being the whole mark,
14433
+ which is why `hide-control` says it is unnecessary here, and it takes the
14434
+ words out of the flow to be the accessible name. That removes the
14435
+ distinction `separation` exists to make rather than answering it. */
14104
14436
  "prop:variant"?: (HelixRadio["variant"]) | undefined;
14105
14437
  /** Whether this one can be chosen. */
14106
14438
  "prop:disabled"?: (HelixRadio["disabled"]) | undefined;
@@ -14169,23 +14501,28 @@ export type HelixRatingHelixBeforeChangeElementEvent =
14169
14501
  HelixRatingElementEvent<HelixBeforeChangeEvent>;
14170
14502
 
14171
14503
  export type HelixRatingProps = {
14172
- /** Which mark the row is drawn with.
14173
-
14174
- `marks` is the star, and is what a rating means to most readers. `dots`
14175
- drops the glyph for a plain circle, which says how much rather than how
14176
- good: a star carries a judgment that a level of spice, a difficulty or a
14177
- confidence has not earned.
14178
-
14179
- Both are one shape repeated and clipped to the score, so halves work in
14180
- either, and both are only a choice of drawing. A scale whose marks are
14504
+ /** The geometry one mark is drawn to.
14505
+
14506
+ The registry's word, because the question is the registry's: `Avatar`,
14507
+ `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
14508
+ their own thing is cut to under this name, and `dots` is already a value
14509
+ the axis holds. What is picked here is the outline of one mark and nothing
14510
+ else, which is a shape and not a component-specific choice.
14511
+
14512
+ `dots` drops the glyph for a plain circle, which says how much rather than
14513
+ how good: a star carries a judgment that a level of spice, a difficulty or
14514
+ a confidence has not earned. Either way it is one shape repeated and
14515
+ clipped to the score, so halves work in both. A scale whose marks are
14181
14516
  *different* drawings is a set of choices rather than a quantity: that is
14182
14517
  `Radio.Group`, whose options already carry a value and a name each.
14183
14518
 
14184
- **Undefaulted, because it reflects.** A default of `marks` writes
14185
- `variant="marks"` onto every server-rendered rating, which React holds no
14186
- prop for and reports as a hydration mismatch. The stylesheet names only
14187
- `dots`, so an unset one draws marks anyway. */
14188
- variant?: (HelixRating["variant"]) | undefined;
14519
+ **The star is the resting one and has no word**, which is the rule every
14520
+ axis follows and is also what this family needed anyway: it reflects, so a
14521
+ default would write the resting value onto every server-rendered rating,
14522
+ an attribute React holds no prop for and so a hydration mismatch for each
14523
+ one. The stylesheet names only `dots`, so an unset one draws the star by
14524
+ landing on the base rule. */
14525
+ shape?: (HelixRating["shape"]) | undefined;
14189
14526
  /** The value the markup declared, which is where a reset returns to. */
14190
14527
  "default-value"?: (HelixRating["defaultValue"]) | undefined;
14191
14528
  /** The value the markup declared, which is where a reset returns to. */
@@ -14343,23 +14680,28 @@ form would submit it. */
14343
14680
  };
14344
14681
 
14345
14682
  export type HelixRatingSolidJsProps = {
14346
- /** Which mark the row is drawn with.
14347
-
14348
- `marks` is the star, and is what a rating means to most readers. `dots`
14349
- drops the glyph for a plain circle, which says how much rather than how
14350
- good: a star carries a judgment that a level of spice, a difficulty or a
14351
- confidence has not earned.
14352
-
14353
- Both are one shape repeated and clipped to the score, so halves work in
14354
- either, and both are only a choice of drawing. A scale whose marks are
14683
+ /** The geometry one mark is drawn to.
14684
+
14685
+ The registry's word, because the question is the registry's: `Avatar`,
14686
+ `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
14687
+ their own thing is cut to under this name, and `dots` is already a value
14688
+ the axis holds. What is picked here is the outline of one mark and nothing
14689
+ else, which is a shape and not a component-specific choice.
14690
+
14691
+ `dots` drops the glyph for a plain circle, which says how much rather than
14692
+ how good: a star carries a judgment that a level of spice, a difficulty or
14693
+ a confidence has not earned. Either way it is one shape repeated and
14694
+ clipped to the score, so halves work in both. A scale whose marks are
14355
14695
  *different* drawings is a set of choices rather than a quantity: that is
14356
14696
  `Radio.Group`, whose options already carry a value and a name each.
14357
14697
 
14358
- **Undefaulted, because it reflects.** A default of `marks` writes
14359
- `variant="marks"` onto every server-rendered rating, which React holds no
14360
- prop for and reports as a hydration mismatch. The stylesheet names only
14361
- `dots`, so an unset one draws marks anyway. */
14362
- "prop:variant"?: (HelixRating["variant"]) | undefined;
14698
+ **The star is the resting one and has no word**, which is the rule every
14699
+ axis follows and is also what this family needed anyway: it reflects, so a
14700
+ default would write the resting value onto every server-rendered rating,
14701
+ an attribute React holds no prop for and so a hydration mismatch for each
14702
+ one. The stylesheet names only `dots`, so an unset one draws the star by
14703
+ landing on the base rule. */
14704
+ "prop:shape"?: (HelixRating["shape"]) | undefined;
14363
14705
  /** The value the markup declared, which is where a reset returns to. */
14364
14706
  "attr:default-value"?: (HelixRating["defaultValue"]) | undefined;
14365
14707
  /** The value the markup declared, which is where a reset returns to. */
@@ -15185,11 +15527,11 @@ takes, where a trigger's loudness is its frame rather than its ink.
15185
15527
  `outlined` is what the unset frame already draws, so writing it would be
15186
15528
  writing the resting state out.
15187
15529
 
15188
- **The other three fields want this too and do not have it yet.** `Input`,
15189
- `Textarea` and `Combobox` wear the same frame from the same shared
15190
- stylesheet, and an inline one of each is as reasonable as an inline select.
15191
- They are left alone rather than swept, because each has a different thing
15192
- inside the frame and guessing at three is how an axis ends up meaning four
15530
+ **Every field wearing `field-frame.css` wants this too and does not have it
15531
+ yet**, which this trigger is not one of: it draws its own frame below. An
15532
+ inline number input in a toolbar is as reasonable as an inline select. They
15533
+ are left alone rather than swept, because each has a different thing inside
15534
+ the frame and guessing at a set of them is how an axis ends up meaning four
15193
15535
  things, which is the fault `appearance` was retired for. */
15194
15536
  emphasis?: (HelixSelect["emphasis"]) | undefined;
15195
15537
  /** Whether the element is open.
@@ -15328,11 +15670,11 @@ takes, where a trigger's loudness is its frame rather than its ink.
15328
15670
  `outlined` is what the unset frame already draws, so writing it would be
15329
15671
  writing the resting state out.
15330
15672
 
15331
- **The other three fields want this too and do not have it yet.** `Input`,
15332
- `Textarea` and `Combobox` wear the same frame from the same shared
15333
- stylesheet, and an inline one of each is as reasonable as an inline select.
15334
- They are left alone rather than swept, because each has a different thing
15335
- inside the frame and guessing at three is how an axis ends up meaning four
15673
+ **Every field wearing `field-frame.css` wants this too and does not have it
15674
+ yet**, which this trigger is not one of: it draws its own frame below. An
15675
+ inline number input in a toolbar is as reasonable as an inline select. They
15676
+ are left alone rather than swept, because each has a different thing inside
15677
+ the frame and guessing at a set of them is how an axis ends up meaning four
15336
15678
  things, which is the fault `appearance` was retired for. */
15337
15679
  "prop:emphasis"?: (HelixSelect["emphasis"]) | undefined;
15338
15680
  /** Whether the element is open.
@@ -16791,26 +17133,6 @@ export type HelixTableColumnHelixBeforeResizeElementEvent =
16791
17133
  HelixTableColumnElementEvent<HelixBeforeResizeEvent>;
16792
17134
 
16793
17135
  export type HelixTableColumnProps = {
16794
- /** Which edge the values line up against.
16795
-
16796
- `end` is what a column of numbers wants, so digits of the same magnitude
16797
- sit above each other. Left unset the cell inherits the table's own
16798
- alignment, which is `start` for text in either writing direction.
16799
- `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
16800
- consumer wrote, so the table writes nothing onto them: it publishes the
16801
- edge to each cell under this column as `--table-cell-align`, which
16802
- `@fusion.dev/helix` reads. The heading is this element's own, and
16803
- `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
16804
- inline end, so in a right-to-left table it is the left.
16805
-
16806
- **Reflected, because the heading is drawn by a stylesheet and has no other
16807
- way to learn it.** Set as a property, which is how React sets it, an
16808
- unreflected `align` left no attribute to select on, so the heading stayed at
16809
- the start over a column of digits set to the end. It is the author's
16810
- declaration and nothing moves it afterwards, so an attribute cannot come to
16811
- disagree with the element, which is the reason `open` records a custom
16812
- state instead. No default, so an unset column writes nothing onto its host. */
16813
- align?: (HelixTableColumn["align"]) | undefined;
16814
17136
  /** The key this column reads out of a row.
16815
17137
 
16816
17138
  Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -16845,6 +17167,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
16845
17167
  `false` reflects as no attribute at all, so an unset column writes nothing
16846
17168
  onto its host. */
16847
17169
  sortable?: (HelixTableColumn["sortable"]) | undefined;
17170
+ /** Which edge the values line up against.
17171
+
17172
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
17173
+ box-alignment question, where a thing sits in a container, and they are
17174
+ named for the properties they mirror; this is `text-align` down a column of
17175
+ values, and `Dialog` answers the same question under the same name. One
17176
+ word for both questions is how a consumer who learned it on a layout writes
17177
+ it here and gets no error, a value a component does not have leaving the
17178
+ default in place and looking deliberate.
17179
+
17180
+ `end` is what a column of numbers wants, so digits of the same magnitude
17181
+ sit above each other. Left unset the cell inherits the table's own
17182
+ alignment, which is `start` for text in either writing direction.
17183
+ `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
17184
+ consumer wrote, so the table writes nothing onto them: it publishes the
17185
+ edge to each cell under this column as `--table-cell-align`, which
17186
+ `@fusion.dev/helix` reads. The heading is this element's own, and
17187
+ `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
17188
+ inline end, so in a right-to-left table it is the left.
17189
+
17190
+ **Reflected, because the heading is drawn by a stylesheet and has no other
17191
+ way to learn it.** Set as a property, which is how React sets it, an
17192
+ unreflected edge left no attribute to select on, so the heading stayed at
17193
+ the start over a column of digits set to the end. It is the author's
17194
+ declaration and nothing moves it afterwards, so an attribute cannot come to
17195
+ disagree with the element, which is the reason `open` records a custom
17196
+ state instead. No default, so an unset column writes nothing onto its host. */
17197
+ "text-align"?: (HelixTableColumn["textAlign"]) | undefined;
17198
+ /** Which edge the values line up against.
17199
+
17200
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
17201
+ box-alignment question, where a thing sits in a container, and they are
17202
+ named for the properties they mirror; this is `text-align` down a column of
17203
+ values, and `Dialog` answers the same question under the same name. One
17204
+ word for both questions is how a consumer who learned it on a layout writes
17205
+ it here and gets no error, a value a component does not have leaving the
17206
+ default in place and looking deliberate.
17207
+
17208
+ `end` is what a column of numbers wants, so digits of the same magnitude
17209
+ sit above each other. Left unset the cell inherits the table's own
17210
+ alignment, which is `start` for text in either writing direction.
17211
+ `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
17212
+ consumer wrote, so the table writes nothing onto them: it publishes the
17213
+ edge to each cell under this column as `--table-cell-align`, which
17214
+ `@fusion.dev/helix` reads. The heading is this element's own, and
17215
+ `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
17216
+ inline end, so in a right-to-left table it is the left.
17217
+
17218
+ **Reflected, because the heading is drawn by a stylesheet and has no other
17219
+ way to learn it.** Set as a property, which is how React sets it, an
17220
+ unreflected edge left no attribute to select on, so the heading stayed at
17221
+ the start over a column of digits set to the end. It is the author's
17222
+ declaration and nothing moves it afterwards, so an attribute cannot come to
17223
+ disagree with the element, which is the reason `open` records a custom
17224
+ state instead. No default, so an unset column writes nothing onto its host. */
17225
+ textAlign?: (HelixTableColumn["textAlign"]) | undefined;
16848
17226
  /** The track this column takes, as CSS.
16849
17227
 
16850
17228
  A single track value, so anything valid in `grid-template-columns` works:
@@ -16893,26 +17271,6 @@ correct default: the raw value is what an API sorted by. */
16893
17271
  };
16894
17272
 
16895
17273
  export type HelixTableColumnSolidJsProps = {
16896
- /** Which edge the values line up against.
16897
-
16898
- `end` is what a column of numbers wants, so digits of the same magnitude
16899
- sit above each other. Left unset the cell inherits the table's own
16900
- alignment, which is `start` for text in either writing direction.
16901
- `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
16902
- consumer wrote, so the table writes nothing onto them: it publishes the
16903
- edge to each cell under this column as `--table-cell-align`, which
16904
- `@fusion.dev/helix` reads. The heading is this element's own, and
16905
- `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
16906
- inline end, so in a right-to-left table it is the left.
16907
-
16908
- **Reflected, because the heading is drawn by a stylesheet and has no other
16909
- way to learn it.** Set as a property, which is how React sets it, an
16910
- unreflected `align` left no attribute to select on, so the heading stayed at
16911
- the start over a column of digits set to the end. It is the author's
16912
- declaration and nothing moves it afterwards, so an attribute cannot come to
16913
- disagree with the element, which is the reason `open` records a custom
16914
- state instead. No default, so an unset column writes nothing onto its host. */
16915
- "prop:align"?: (HelixTableColumn["align"]) | undefined;
16916
17274
  /** The key this column reads out of a row.
16917
17275
 
16918
17276
  Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -16947,6 +17305,62 @@ how React sets it, an unreflected `sortable` left no attribute to match.
16947
17305
  `false` reflects as no attribute at all, so an unset column writes nothing
16948
17306
  onto its host. */
16949
17307
  "prop:sortable"?: (HelixTableColumn["sortable"]) | undefined;
17308
+ /** Which edge the values line up against.
17309
+
17310
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
17311
+ box-alignment question, where a thing sits in a container, and they are
17312
+ named for the properties they mirror; this is `text-align` down a column of
17313
+ values, and `Dialog` answers the same question under the same name. One
17314
+ word for both questions is how a consumer who learned it on a layout writes
17315
+ it here and gets no error, a value a component does not have leaving the
17316
+ default in place and looking deliberate.
17317
+
17318
+ `end` is what a column of numbers wants, so digits of the same magnitude
17319
+ sit above each other. Left unset the cell inherits the table's own
17320
+ alignment, which is `start` for text in either writing direction.
17321
+ `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
17322
+ consumer wrote, so the table writes nothing onto them: it publishes the
17323
+ edge to each cell under this column as `--table-cell-align`, which
17324
+ `@fusion.dev/helix` reads. The heading is this element's own, and
17325
+ `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
17326
+ inline end, so in a right-to-left table it is the left.
17327
+
17328
+ **Reflected, because the heading is drawn by a stylesheet and has no other
17329
+ way to learn it.** Set as a property, which is how React sets it, an
17330
+ unreflected edge left no attribute to select on, so the heading stayed at
17331
+ the start over a column of digits set to the end. It is the author's
17332
+ declaration and nothing moves it afterwards, so an attribute cannot come to
17333
+ disagree with the element, which is the reason `open` records a custom
17334
+ state instead. No default, so an unset column writes nothing onto its host. */
17335
+ "attr:text-align"?: (HelixTableColumn["textAlign"]) | undefined;
17336
+ /** Which edge the values line up against.
17337
+
17338
+ **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
17339
+ box-alignment question, where a thing sits in a container, and they are
17340
+ named for the properties they mirror; this is `text-align` down a column of
17341
+ values, and `Dialog` answers the same question under the same name. One
17342
+ word for both questions is how a consumer who learned it on a layout writes
17343
+ it here and gets no error, a value a component does not have leaving the
17344
+ default in place and looking deliberate.
17345
+
17346
+ `end` is what a column of numbers wants, so digits of the same magnitude
17347
+ sit above each other. Left unset the cell inherits the table's own
17348
+ alignment, which is `start` for text in either writing direction.
17349
+ `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
17350
+ consumer wrote, so the table writes nothing onto them: it publishes the
17351
+ edge to each cell under this column as `--table-cell-align`, which
17352
+ `@fusion.dev/helix` reads. The heading is this element's own, and
17353
+ `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
17354
+ inline end, so in a right-to-left table it is the left.
17355
+
17356
+ **Reflected, because the heading is drawn by a stylesheet and has no other
17357
+ way to learn it.** Set as a property, which is how React sets it, an
17358
+ unreflected edge left no attribute to select on, so the heading stayed at
17359
+ the start over a column of digits set to the end. It is the author's
17360
+ declaration and nothing moves it afterwards, so an attribute cannot come to
17361
+ disagree with the element, which is the reason `open` records a custom
17362
+ state instead. No default, so an unset column writes nothing onto its host. */
17363
+ "prop:textAlign"?: (HelixTableColumn["textAlign"]) | undefined;
16950
17364
  /** The track this column takes, as CSS.
16951
17365
 
16952
17366
  A single track value, so anything valid in `grid-template-columns` works:
@@ -21795,6 +22209,10 @@ export type CustomElements = {
21795
22209
  * Component attributes and properties that can be applied to the element or by using JavaScript.
21796
22210
  *
21797
22211
  * - `shape`: Whether the avatar is a circle or a rounded square.
22212
+ *
22213
+ * `rounded` and not `square`, which is the sharp-cornered pole of the same
22214
+ * axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
22215
+ * for it is the one the registry already has.
21798
22216
  * - `size`: Edge length of the avatar.
21799
22217
  * - `name`: Name of the person or entity.
21800
22218
  *
@@ -22079,18 +22497,12 @@ export type CustomElements = {
22079
22497
  *
22080
22498
  * Absent falls back to the table's own caption, which is usually the right
22081
22499
  * words and is already written.
22082
- * - `direction`: Whether the categories run down the side rather than along the bottom.
22083
- *
22084
- * Absent is columns. `horizontal` is the one to reach for when the category
22085
- * names are words rather than dates: a row of long names either overlaps or
22086
- * turns on its side, and neither is as readable as putting them down the left
22087
- * where they read normally.
22088
22500
  * - `gridlines`: Which rules are drawn across the plot, if any.
22089
22501
  *
22090
22502
  * Absent draws none. `value` rules the axis the columns are *measured* on,
22091
22503
  * `category` rules the axis they are *arranged* on with one through each
22092
22504
  * group, and `both` draws both. Which of those is horizontal turns with
22093
- * `direction`, because a rule belongs to an axis and not to a screen edge.
22505
+ * `orientation`, because a rule belongs to an axis and not to a screen edge.
22094
22506
  *
22095
22507
  * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
22096
22508
  * unrecognized value that draws nothing is indistinguishable from the
@@ -22124,6 +22536,15 @@ export type CustomElements = {
22124
22536
  * A line among columns measures from zero, because the columns do and they
22125
22537
  * share the axis. So does a line on the second scale, which is that scale's
22126
22538
  * own rule rather than this one's.
22539
+ * - `orientation`: Whether the categories run down the side rather than along the bottom.
22540
+ *
22541
+ * Absent is columns. `horizontal` is the one to reach for when the category
22542
+ * names are words rather than dates: a row of long names either overlaps or
22543
+ * turns on its side, and neither is as readable as putting them down the left
22544
+ * where they read normally.
22545
+ *
22546
+ * `orientation` and not `orientation`, which `Trend` uses in the same group for
22547
+ * which way a number moved.
22127
22548
  * - `secondary`: Which series are measured against a scale of their own, by name.
22128
22549
  *
22129
22550
  * Separated and matched the way `lines` is, against the column headings the
@@ -23092,9 +23513,9 @@ export type CustomElements = {
23092
23513
  * - `controls-placement`/`controlsPlacement`: Which side of the slides the arrows sit on.
23093
23514
  *
23094
23515
  * The same four sides as `indicatorPlacement` and the same default, so a
23095
- * carousel that moves only one of them keeps the other where it was.
23096
- * `inline-start` or `inline-end` stacks the arrows into a column, which is
23097
- * what a vertical track usually wants.
23516
+ * carousel that moves only one of them keeps the other where it was. `start`
23517
+ * or `end` stacks the arrows into a column, which is what a vertical track
23518
+ * usually wants.
23098
23519
  *
23099
23520
  * `overlay` puts them on the slides, at the track's own edges, which is what a
23100
23521
  * full-bleed carousel wants: the slide is the page and the controls are on it
@@ -23121,8 +23542,9 @@ export type CustomElements = {
23121
23542
  * is a column and the same question is `align-self`. A consumer should not
23122
23543
  * have to know which of those two words their edge wanted.
23123
23544
  *
23124
- * Logical, like the placement: `start` is the left in English and the right in
23125
- * Arabic on a horizontal run, and the top on a vertical one.
23545
+ * Logical, like the placement's own `start` and `end`: `start` is the left in
23546
+ * English and the right in Arabic on a horizontal run, and the top on a
23547
+ * vertical one.
23126
23548
  *
23127
23549
  * Unset splits the row, dots to the start and arrows to the end, which is
23128
23550
  * what keeps two items in one grid cell from landing on each other. Beside the
@@ -23132,16 +23554,22 @@ export type CustomElements = {
23132
23554
  * exist to avoid.
23133
23555
  * - `indicator-placement`/`indicatorPlacement`: Which side of the slides the dots sit on.
23134
23556
  *
23135
- * Unset is `block-end`, under them. `block-start` puts them above,
23136
- * `inline-start` and `inline-end` beside, where a run of dots becomes a
23137
- * column.
23557
+ * Unset is `bottom`, under them. `top` puts them above, `start` and `end`
23558
+ * beside, where a run of dots becomes a column.
23559
+ *
23560
+ * **The sides of the content, not positions along a bar.** `start` and `end`
23561
+ * are the logical ones and they are logical because that axis flips: a
23562
+ * carousel with its dots at the start should put them on the right in Arabic
23563
+ * without being told. `top` and `bottom` are the block edges, which flip in
23564
+ * no writing mode this library draws for, so the plain word is the honest one
23565
+ * and `block-start` would be jargon standing in for it.
23138
23566
  *
23139
- * **The sides of the content, not positions along a bar**, and logical names
23140
- * rather than `top`/`left`: an `inline-start` carousel should put its dots on
23141
- * the right in Arabic without being told.
23567
+ * **`Drawer` and `Toast` say it in exactly these four words**, and one
23568
+ * vocabulary across the three is worth more than each family's own: a
23569
+ * consumer who has placed a drawer knows where a carousel's dots go.
23142
23570
  *
23143
- * Independent of `controlsPlacement`. Both default to the block end, where
23144
- * they share the row and split it, dots to the start and arrows to the end,
23571
+ * Independent of `controlsPlacement`. Both default to the bottom, where they
23572
+ * share the row and split it, dots to the start and arrows to the end,
23145
23573
  * arrived at by two defaults rather than by a rule about the pair, so moving
23146
23574
  * one leaves the other alone.
23147
23575
  * - `autoplay`: Whether the carousel advances on its own.
@@ -23901,18 +24329,30 @@ export type CustomElements = {
23901
24329
  *
23902
24330
  * Component attributes and properties that can be applied to the element or by using JavaScript.
23903
24331
  *
23904
- * - `variant`: How the choice presents itself.
24332
+ * - `separation`: Where the choice's own surface ends.
23905
24333
  *
23906
- * - `plain` is the default and is never written: a box beside its words,
24334
+ * The question `separation` asks everywhere else, asked of one option, so it
24335
+ * is that word: what these values pick is a surface, and `plain` is already
24336
+ * the registry's own word for the answer this family used it for. `Radio`
24337
+ * takes the same three for the same reason.
24338
+ *
24339
+ * - `plain` is the resting one and is never written: a box beside its words,
23907
24340
  * which is what a list of choices should be almost always.
23908
- * - `card` puts it in a bounded surface, for options that need room to
24341
+ * - `outlined` puts it in a bounded surface, for options that need room to
23909
24342
  * explain themselves: a description, an icon, a price. It is the half a
23910
24343
  * `data-card` link cannot do, because a link reports no value and belongs
23911
24344
  * to no group, so a card that is genuinely an answer has to be this.
24345
+ * - `filled` is that same card on a ground of its own with no edge, which is
24346
+ * what a column of options wants where a hairline around every one of them
24347
+ * is a grid of lines rather than a set of answers.
24348
+ *
24349
+ * **`elevated` is the one value of the axis this family does not take.** A
24350
+ * raised choice competes with a dialog: the top layer is where a thing that
24351
+ * interrupts you lives, and an option in a form is not one of those.
23912
24352
  *
23913
- * The box stays in both. A card whose only marker was its own border would
23914
- * ask a reader to compare surfaces across a row to find the answer, and would
23915
- * leave nothing for a high-contrast display.
24353
+ * The box stays in all of them. A card whose only marker was its own border
24354
+ * would ask a reader to compare surfaces across a row to find the answer, and
24355
+ * would leave nothing for a high-contrast display.
23916
24356
  * - `checked`: Whether the control is checked.
23917
24357
  *
23918
24358
  * One property rather than two. Writing always applies;
@@ -26430,9 +26870,12 @@ export type CustomElements = {
26430
26870
  * width so a column of numbers lines up by its digits. Only with
26431
26871
  * `direction="row"`: stacked, a label and its value share one edge already.
26432
26872
  *
26433
- * Flex's word for the same thing, and a grid rather than a flex row
26434
- * underneath, so the labels still share one column while the values share an
26435
- * end.
26873
+ * Flex's value for the same idea, under a shorter name than Flex's own:
26874
+ * there it is `justify-content`, the CSS property it sets, and here the
26875
+ * underlying layout is a grid handing an edge down to each item as a custom
26876
+ * property, so the labels still share one column while the values share an
26877
+ * end. Naming a property this does not set after it would be the wrong kind
26878
+ * of precision.
26436
26879
  * - `width`: How wide the list is.
26437
26880
  *
26438
26881
  * Absent, it fills the row it is in. `auto` is as wide as its widest pair,
@@ -26514,16 +26957,6 @@ export type CustomElements = {
26514
26957
  *
26515
26958
  * Component attributes and properties that can be applied to the element or by using JavaScript.
26516
26959
  *
26517
- * - `align`: Which way the panel's contents read.
26518
- *
26519
- * One property for the whole panel rather than one per region. The regions are
26520
- * never mixed in practice: a dialog that asks a short question centers its
26521
- * mark, its title, its sentence and its buttons together, and a dialog holding
26522
- * a form runs all four from the start. Three properties would be three ways to
26523
- * write the same two arrangements, and a fourth way to get one of them wrong.
26524
- *
26525
- * Unset is `start` and stays unset, so a reflected default cannot appear on a
26526
- * host whose server output never had it.
26527
26960
  * - `size`: How wide the panel is allowed to be.
26528
26961
  *
26529
26962
  * Steps rather than a number, because a dialog's width is a fact about what is
@@ -26540,9 +26973,27 @@ export type CustomElements = {
26540
26973
  * rule's own test is whether two of them sitting together could legitimately
26541
26974
  * differ, and it is answering "a ragged row is unwritable". Two dialogs never
26542
26975
  * sit together. One is on screen at a time, in the top layer, and it is the
26543
- * region rather than a control in one, which is the same reason `Avatar` and
26544
- * `Spinner` keep theirs. Not `appearance`, which says how a thing reads
26545
- * rather than how wide it is.
26976
+ * region rather than a control in one, which is the other half of the axis's
26977
+ * domain: the rest of it is pictures, which are not controls either. Not
26978
+ * `appearance`, which says how a thing reads rather than how wide it is.
26979
+ * - `text-align`/`textAlign`: Which way the panel's contents read.
26980
+ *
26981
+ * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
26982
+ * box-alignment question, where things sit in a container, and they are named
26983
+ * for the properties they mirror; this one is `text-align` on a panel of
26984
+ * prose, and `Table.Column` answers the same question under the same name.
26985
+ * One word for both questions is how a consumer who learned it on a layout
26986
+ * writes it here and gets no error, a value a component does not have leaving
26987
+ * the default in place and looking deliberate.
26988
+ *
26989
+ * One property for the whole panel rather than one per region. The regions are
26990
+ * never mixed in practice: a dialog that asks a short question centers its
26991
+ * mark, its title, its sentence and its buttons together, and a dialog holding
26992
+ * a form runs all four from the start. Three properties would be three ways to
26993
+ * write the same two arrangements, and a fourth way to get one of them wrong.
26994
+ *
26995
+ * Unset is `start` and stays unset, so a reflected default cannot appear on a
26996
+ * host whose server output never had it.
26546
26997
  * - `open`: Whether the element is open.
26547
26998
  *
26548
26999
  * One property, not two, so `dialog.open` answers the question anyone
@@ -28328,11 +28779,30 @@ export type CustomElements = {
28328
28779
  *
28329
28780
  * Component attributes and properties that can be applied to the element or by using JavaScript.
28330
28781
  *
28331
- * - `align`: Alignment across the direction.
28782
+ * - `align-items`/`alignItems`: Alignment across the direction, which is `align-items`.
28783
+ *
28784
+ * **Named for the CSS property it sets, because it is that property.** A flex
28785
+ * container is the one place where the box-alignment words are already the
28786
+ * reader's, so a shorter name would be a second vocabulary for something they
28787
+ * can already say, and `align` alone is the word four other families use for
28788
+ * four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
28789
+ *
28790
+ * **It also keeps the name out of the browser's way.** `align` is a legacy
28791
+ * HTML presentational attribute mapped to `text-align` on any element that
28792
+ * carries one, this one included: measured, an invented tag with
28793
+ * `align="center"` computes centered text too, so it is nothing to do with
28794
+ * being a known element. A row that carried it therefore centered the text
28795
+ * inside every field in it, through a hint no rule here declares and none can
28796
+ * see, and the fix is a name the platform has no opinion about rather than a
28797
+ * guard against the hint.
28332
28798
  * - `direction`: Whether items run across or down.
28333
28799
  * - `gap`: Space between items, named on the space scale.
28334
28800
  * - `inline`: Flows with surrounding text instead of taking the full width.
28335
- * - `justify`: Distribution along the direction.
28801
+ * - `justify-content`/`justifyContent`: Distribution along the direction, which is `justify-content`.
28802
+ *
28803
+ * Named for the property it sets, the way `alignItems` is. `between` and
28804
+ * `around` drop the `space-` prefix and nothing else does, because those two
28805
+ * are the only values whose CSS spelling is two words.
28336
28806
  * - `wrap`: Whether items wrap onto more lines.
28337
28807
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
28338
28808
  *
@@ -28465,7 +28935,19 @@ export type CustomElements = {
28465
28935
  *
28466
28936
  * Component attributes and properties that can be applied to the element or by using JavaScript.
28467
28937
  *
28468
- * - `align`: Alignment of each cell within its row.
28938
+ * - `align-items`/`alignItems`: Alignment of each cell within its row, which is `align-items`.
28939
+ *
28940
+ * **Named for the CSS property it sets**, the way `Flex` is, and the same
28941
+ * property on a grid: it places every cell in its row's track rather than
28942
+ * placing the tracks. No `baseline`, which `Flex` offers, because cells in a
28943
+ * row of a grid are boxes of unrelated content and lining their first lines
28944
+ * up is a thing a reader asks for between siblings in a row, not between
28945
+ * cells in a table of them.
28946
+ *
28947
+ * There is no `justifyContent` here for the same reason: the tracks are
28948
+ * `1fr`, so they already fill the row and there is nothing left over to
28949
+ * distribute. `columns`, `min` and `--grid-columns` are how a grid says how
28950
+ * wide its tracks are.
28469
28951
  * - `columns`: Fixed number of equal columns.
28470
28952
  * - `gap`: Space between cells, named on the space scale.
28471
28953
  * - `min`: Minimum column width, filling as many as fit.
@@ -29084,12 +29566,13 @@ export type CustomElements = {
29084
29566
  *
29085
29567
  * Component attributes and properties that can be applied to the element or by using JavaScript.
29086
29568
  *
29087
- * - `rounded`: Whether the corners are cut.
29569
+ * - `shape`: Whether the corners are cut.
29088
29570
  *
29089
- * A boolean rather than a radius, because the radius is a token and the
29090
- * question a consumer is answering is whether this picture is a card's
29091
- * surface or a page's. `--image-radius` moves it for the case that is
29092
- * neither.
29571
+ * The axis and not a boolean, because `rounded` is a registered word and a
29572
+ * private spelling of a registry question is what `appearance` was retired
29573
+ * for. Not a radius either: the radius is a token and the question a consumer
29574
+ * is answering is whether this picture is a card's surface or a page's.
29575
+ * `--image-radius` moves it for the case that is neither.
29093
29576
  * - `alt`: What it shows, for a reader who cannot see it.
29094
29577
  *
29095
29578
  * Empty is a real answer and means decoration. Omitting the attribute is not
@@ -29182,7 +29665,7 @@ export type CustomElements = {
29182
29665
  * - `--image-fit`: How the picture fills it. (default: `undefined`)
29183
29666
  * - `--image-placeholder-color`: The resting surface behind both stand-ins. (default: `undefined`)
29184
29667
  * - `--image-position`: Which part survives a crop. (default: `undefined`)
29185
- * - `--image-radius`: Corner radius, under `rounded`. (default: `undefined`)
29668
+ * - `--image-radius`: Corner radius, under `shape="rounded"`. (default: `undefined`)
29186
29669
  *
29187
29670
  * ## CSS Parts
29188
29671
  *
@@ -30500,7 +30983,7 @@ export type CustomElements = {
30500
30983
  * last reader did rather than what the author wrote. `:state(open)` carries
30501
30984
  * the resolved state for stylesheets, which is what the mirror is for.
30502
30985
  * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
30503
- * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
30986
+ * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
30504
30987
  *
30505
30988
  * A card is a panel hung off one word, and there is no room to hang anything
30506
30989
  * off a word on a phone: the columns do not shrink past
@@ -30533,16 +31016,23 @@ export type CustomElements = {
30533
31016
  * - `variant`: Whether the panel is a card under the trigger or a band across the page.
30534
31017
  *
30535
31018
  * The resting one is the card, hanging off the trigger and as wide as it
30536
- * needs to be. `full` is the other shape navigations use: a band from edge to
31019
+ * needs to be. `band` is the other shape navigations use: a run from edge to
30537
31020
  * edge under the header, with its contents held to the page's own measure, so
30538
31021
  * a set of destinations too wide to sit under one word gets the whole width
30539
31022
  * to lay out in.
30540
31023
  *
30541
- * It changes where the panel goes as well as how it looks, which is why this
30542
- * tier knows about it at all: a band spans the viewport, so there is nothing
30543
- * to measure it against and nothing to flip or shift to, and the placing pass
30544
- * is told not to run. Everything else the popover gives, the top layer and
30545
- * the dismissal, is exactly what such a band needs.
31024
+ * **A band and not a width, which is why the word is not `full`.** It changes
31025
+ * where the panel goes as well as how wide it is, which is why this tier
31026
+ * knows about it at all: a band spans the viewport, so there is nothing to
31027
+ * measure it against and nothing to flip or shift to, and the placing pass is
31028
+ * told not to run. Everything else the popover gives, the top layer and the
31029
+ * dismissal, is exactly what such a band needs. `full` is the registry's word
31030
+ * for a width, and `Button` and `Dialog` are the two families answering that
31031
+ * question; borrowing it here would put a third meaning on it.
31032
+ *
31033
+ * `variant` and not an axis, for the reason the registry gives: a card under
31034
+ * a word and a band under a header are two arrangements this family has, and
31035
+ * no other family is being asked the same question.
30546
31036
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
30547
31037
  *
30548
31038
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -30616,7 +31106,7 @@ export type CustomElements = {
30616
31106
  *
30617
31107
  * These can be used to apply styling when a component is in a given state.
30618
31108
  *
30619
- * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
31109
+ * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
30620
31110
  * - `open`: While the panel is open, which is when the trigger reads as current.
30621
31111
  * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
30622
31112
  */
@@ -32251,6 +32741,13 @@ export type CustomElements = {
32251
32741
  * the name of the tool being run, or the file being read.
32252
32742
  * - `size`: Diameter relative to the surrounding text.
32253
32743
  *
32744
+ * **`Loader`'s three steps, because the two are swapped for each other.** An
32745
+ * orb and a spinner are the same job drawn differently, a wait a reader is
32746
+ * looking at, and a product that replaces one with the other should not find
32747
+ * that a step it was writing has stopped existing. `md` is the resting one
32748
+ * and selects nothing, landing on the base rule the way a written resting
32749
+ * value does everywhere else.
32750
+ *
32254
32751
  * Reflected because the stylesheet selects on it. The mesh is chosen from the
32255
32752
  * rendered box rather than from this, so `--orb-size` and a consumer's own
32256
32753
  * `inline-size` get the same treatment as the named steps.
@@ -33194,6 +33691,8 @@ export type CustomElements = {
33194
33691
  * - `--progress-color`: Fill of the part that is done. (default: `undefined`)
33195
33692
  * - `--progress-ring-size`: Diameter of the ring appearance. (default: `undefined`)
33196
33693
  * - `--progress-ring-width`: Thickness of its stroke. (default: `undefined`)
33694
+ * - `--progress-size`: Thickness of the bar. (default: `undefined`)
33695
+ * - `--progress-track-color`: Fill of the part that is not. (default: `undefined`)
33197
33696
  * - `--progress-fraction`: The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. (default: `undefined`)
33198
33697
  *
33199
33698
  * ## CSS Parts
@@ -33561,9 +34060,9 @@ export type CustomElements = {
33561
34060
  * Unnecessary under `chip`, which has no room for a circle beside its mark
33562
34061
  * and hides it already.
33563
34062
  *
33564
- * `card` only, and it is a graphic that goes rather than a radio: the control
33565
- * in the shadow root is untouched, so the row is still focusable, still
33566
- * reported to a screen reader, and still the thing a form submits.
34063
+ * A separated choice only, and it is a graphic that goes rather than a radio:
34064
+ * the control in the shadow root is untouched, so the row is still focusable,
34065
+ * still reported to a screen reader, and still the thing a form submits.
33567
34066
  *
33568
34067
  * Safe because the card already carries the answer in its surface, a raised
33569
34068
  * fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -33572,21 +34071,40 @@ export type CustomElements = {
33572
34071
  * Not on `Checkbox`, deliberately. A radio card with no circle is still
33573
34072
  * unmistakably one-of-many because its siblings behave that way; a checkbox
33574
34073
  * card with no box loses the only thing that says you may pick several.
33575
- * - `variant`: How the choice presents itself.
34074
+ * - `separation`: Where the choice's own surface ends.
33576
34075
  *
33577
- * - `plain` is the default and is never written: a circle beside its words,
33578
- * which is what a list of choices should be almost always.
33579
- * - `card` puts it in a bounded surface, for options that need room to
34076
+ * The question `separation` asks everywhere else, asked of one option, so it
34077
+ * is that word: what these values pick is a surface, and `plain` is already
34078
+ * the registry's own word for the answer this family used it for.
34079
+ *
34080
+ * - `plain` is the resting one and is never written: a circle beside its
34081
+ * words, which is what a list of choices should be almost always.
34082
+ * - `outlined` puts it in a bounded surface, for options that need room to
33580
34083
  * explain themselves: a description, an icon, a price. It is the half a
33581
34084
  * `data-card` link cannot do, because a link reports no value and belongs
33582
34085
  * to no group, so a card that is genuinely an answer has to be this.
33583
- * - `chip` is the answer as its own small surface, for a row of short
33584
- * choices read at a glance. It hides the circle, the surface being the
33585
- * whole mark, which is why `hide-control` says it is unnecessary here.
33586
- *
33587
- * The circle stays in both. A card whose only marker was its own border would
33588
- * ask a reader to compare surfaces across a row to find the answer, and would
33589
- * leave nothing for a high-contrast display.
34086
+ * - `filled` is that same card on a ground of its own with no edge, which is
34087
+ * what a column of choices wants where a hairline around every one of them
34088
+ * is a grid of lines rather than a set of answers.
34089
+ *
34090
+ * **`elevated` is the one value of the axis this family does not take.** A
34091
+ * raised choice competes with a dialog: the top layer is where a thing that
34092
+ * interrupts you lives, and an option in a form is not one of those, so a
34093
+ * column of lifted cards reads as a stack of floating things none of which is
34094
+ * settled.
34095
+ *
34096
+ * The circle stays in all of them. A card whose only marker was its own
34097
+ * border would ask a reader to compare surfaces across a row to find the
34098
+ * answer, and would leave nothing for a high-contrast display.
34099
+ * - `variant`: The answer as its own small surface, for a row of short choices read at a
34100
+ * glance.
34101
+ *
34102
+ * **Not a separation, which is why it is still `variant`.** The other values
34103
+ * pick where a surface ends around a row that keeps its circle and its words;
34104
+ * a chip has neither. It hides the circle, the surface being the whole mark,
34105
+ * which is why `hide-control` says it is unnecessary here, and it takes the
34106
+ * words out of the flow to be the accessible name. That removes the
34107
+ * distinction `separation` exists to make rather than answering it.
33590
34108
  * - `disabled`: Whether this one can be chosen.
33591
34109
  * - `selected`: Whether this is the current one.
33592
34110
  *
@@ -33716,22 +34234,27 @@ export type CustomElements = {
33716
34234
  *
33717
34235
  * Component attributes and properties that can be applied to the element or by using JavaScript.
33718
34236
  *
33719
- * - `variant`: Which mark the row is drawn with.
34237
+ * - `shape`: The geometry one mark is drawn to.
33720
34238
  *
33721
- * `marks` is the star, and is what a rating means to most readers. `dots`
33722
- * drops the glyph for a plain circle, which says how much rather than how
33723
- * good: a star carries a judgment that a level of spice, a difficulty or a
33724
- * confidence has not earned.
34239
+ * The registry's word, because the question is the registry's: `Avatar`,
34240
+ * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
34241
+ * their own thing is cut to under this name, and `dots` is already a value
34242
+ * the axis holds. What is picked here is the outline of one mark and nothing
34243
+ * else, which is a shape and not a component-specific choice.
33725
34244
  *
33726
- * Both are one shape repeated and clipped to the score, so halves work in
33727
- * either, and both are only a choice of drawing. A scale whose marks are
34245
+ * `dots` drops the glyph for a plain circle, which says how much rather than
34246
+ * how good: a star carries a judgment that a level of spice, a difficulty or
34247
+ * a confidence has not earned. Either way it is one shape repeated and
34248
+ * clipped to the score, so halves work in both. A scale whose marks are
33728
34249
  * *different* drawings is a set of choices rather than a quantity: that is
33729
34250
  * `Radio.Group`, whose options already carry a value and a name each.
33730
34251
  *
33731
- * **Undefaulted, because it reflects.** A default of `marks` writes
33732
- * `variant="marks"` onto every server-rendered rating, which React holds no
33733
- * prop for and reports as a hydration mismatch. The stylesheet names only
33734
- * `dots`, so an unset one draws marks anyway.
34252
+ * **The star is the resting one and has no word**, which is the rule every
34253
+ * axis follows and is also what this family needed anyway: it reflects, so a
34254
+ * default would write the resting value onto every server-rendered rating,
34255
+ * an attribute React holds no prop for and so a hydration mismatch for each
34256
+ * one. The stylesheet names only `dots`, so an unset one draws the star by
34257
+ * landing on the base rule.
33735
34258
  * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
33736
34259
  * - `value`: What the control holds now, and what its form submits.
33737
34260
  *
@@ -34830,11 +35353,11 @@ export type CustomElements = {
34830
35353
  * `outlined` is what the unset frame already draws, so writing it would be
34831
35354
  * writing the resting state out.
34832
35355
  *
34833
- * **The other three fields want this too and do not have it yet.** `Input`,
34834
- * `Textarea` and `Combobox` wear the same frame from the same shared
34835
- * stylesheet, and an inline one of each is as reasonable as an inline select.
34836
- * They are left alone rather than swept, because each has a different thing
34837
- * inside the frame and guessing at three is how an axis ends up meaning four
35356
+ * **Every field wearing `field-frame.css` wants this too and does not have it
35357
+ * yet**, which this trigger is not one of: it draws its own frame below. An
35358
+ * inline number input in a toolbar is as reasonable as an inline select. They
35359
+ * are left alone rather than swept, because each has a different thing inside
35360
+ * the frame and guessing at a set of them is how an axis ends up meaning four
34838
35361
  * things, which is the fault `appearance` was retired for.
34839
35362
  * - `open`: Whether the element is open.
34840
35363
  *
@@ -36582,25 +37105,6 @@ export type CustomElements = {
36582
37105
  *
36583
37106
  * Component attributes and properties that can be applied to the element or by using JavaScript.
36584
37107
  *
36585
- * - `align`: Which edge the values line up against.
36586
- *
36587
- * `end` is what a column of numbers wants, so digits of the same magnitude
36588
- * sit above each other. Left unset the cell inherits the table's own
36589
- * alignment, which is `start` for text in either writing direction.
36590
- * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
36591
- * consumer wrote, so the table writes nothing onto them: it publishes the
36592
- * edge to each cell under this column as `--table-cell-align`, which
36593
- * `@fusion.dev/helix` reads. The heading is this element's own, and
36594
- * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
36595
- * inline end, so in a right-to-left table it is the left.
36596
- *
36597
- * **Reflected, because the heading is drawn by a stylesheet and has no other
36598
- * way to learn it.** Set as a property, which is how React sets it, an
36599
- * unreflected `align` left no attribute to select on, so the heading stayed at
36600
- * the start over a column of digits set to the end. It is the author's
36601
- * declaration and nothing moves it afterwards, so an attribute cannot come to
36602
- * disagree with the element, which is the reason `open` records a custom
36603
- * state instead. No default, so an unset column writes nothing onto its host.
36604
37108
  * - `field`: The key this column reads out of a row.
36605
37109
  *
36606
37110
  * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -36632,6 +37136,33 @@ export type CustomElements = {
36632
37136
  * how React sets it, an unreflected `sortable` left no attribute to match.
36633
37137
  * `false` reflects as no attribute at all, so an unset column writes nothing
36634
37138
  * onto its host.
37139
+ * - `text-align`/`textAlign`: Which edge the values line up against.
37140
+ *
37141
+ * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
37142
+ * box-alignment question, where a thing sits in a container, and they are
37143
+ * named for the properties they mirror; this is `text-align` down a column of
37144
+ * values, and `Dialog` answers the same question under the same name. One
37145
+ * word for both questions is how a consumer who learned it on a layout writes
37146
+ * it here and gets no error, a value a component does not have leaving the
37147
+ * default in place and looking deliberate.
37148
+ *
37149
+ * `end` is what a column of numbers wants, so digits of the same magnitude
37150
+ * sit above each other. Left unset the cell inherits the table's own
37151
+ * alignment, which is `start` for text in either writing direction.
37152
+ * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
37153
+ * consumer wrote, so the table writes nothing onto them: it publishes the
37154
+ * edge to each cell under this column as `--table-cell-align`, which
37155
+ * `@fusion.dev/helix` reads. The heading is this element's own, and
37156
+ * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
37157
+ * inline end, so in a right-to-left table it is the left.
37158
+ *
37159
+ * **Reflected, because the heading is drawn by a stylesheet and has no other
37160
+ * way to learn it.** Set as a property, which is how React sets it, an
37161
+ * unreflected edge left no attribute to select on, so the heading stayed at
37162
+ * the start over a column of digits set to the end. It is the author's
37163
+ * declaration and nothing moves it afterwards, so an attribute cannot come to
37164
+ * disagree with the element, which is the reason `open` records a custom
37165
+ * state instead. No default, so an unset column writes nothing onto its host.
36635
37166
  * - `width`: The track this column takes, as CSS.
36636
37167
  *
36637
37168
  * A single track value, so anything valid in `grid-template-columns` works:
@@ -41305,6 +41836,10 @@ export type CustomElementsSolidJs = {
41305
41836
  * Component attributes and properties that can be applied to the element or by using JavaScript.
41306
41837
  *
41307
41838
  * - `shape`: Whether the avatar is a circle or a rounded square.
41839
+ *
41840
+ * `rounded` and not `square`, which is the sharp-cornered pole of the same
41841
+ * axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
41842
+ * for it is the one the registry already has.
41308
41843
  * - `size`: Edge length of the avatar.
41309
41844
  * - `name`: Name of the person or entity.
41310
41845
  *
@@ -41597,18 +42132,12 @@ export type CustomElementsSolidJs = {
41597
42132
  *
41598
42133
  * Absent falls back to the table's own caption, which is usually the right
41599
42134
  * words and is already written.
41600
- * - `direction`: Whether the categories run down the side rather than along the bottom.
41601
- *
41602
- * Absent is columns. `horizontal` is the one to reach for when the category
41603
- * names are words rather than dates: a row of long names either overlaps or
41604
- * turns on its side, and neither is as readable as putting them down the left
41605
- * where they read normally.
41606
42135
  * - `gridlines`: Which rules are drawn across the plot, if any.
41607
42136
  *
41608
42137
  * Absent draws none. `value` rules the axis the columns are *measured* on,
41609
42138
  * `category` rules the axis they are *arranged* on with one through each
41610
42139
  * group, and `both` draws both. Which of those is horizontal turns with
41611
- * `direction`, because a rule belongs to an axis and not to a screen edge.
42140
+ * `orientation`, because a rule belongs to an axis and not to a screen edge.
41612
42141
  *
41613
42142
  * **A bare `gridlines` means `value`**, and so does anything unrecognized: an
41614
42143
  * unrecognized value that draws nothing is indistinguishable from the
@@ -41642,6 +42171,15 @@ export type CustomElementsSolidJs = {
41642
42171
  * A line among columns measures from zero, because the columns do and they
41643
42172
  * share the axis. So does a line on the second scale, which is that scale's
41644
42173
  * own rule rather than this one's.
42174
+ * - `orientation`: Whether the categories run down the side rather than along the bottom.
42175
+ *
42176
+ * Absent is columns. `horizontal` is the one to reach for when the category
42177
+ * names are words rather than dates: a row of long names either overlaps or
42178
+ * turns on its side, and neither is as readable as putting them down the left
42179
+ * where they read normally.
42180
+ *
42181
+ * `orientation` and not `orientation`, which `Trend` uses in the same group for
42182
+ * which way a number moved.
41645
42183
  * - `secondary`: Which series are measured against a scale of their own, by name.
41646
42184
  *
41647
42185
  * Separated and matched the way `lines` is, against the column headings the
@@ -42633,9 +43171,9 @@ export type CustomElementsSolidJs = {
42633
43171
  * - `controls-placement`/`controlsPlacement`: Which side of the slides the arrows sit on.
42634
43172
  *
42635
43173
  * The same four sides as `indicatorPlacement` and the same default, so a
42636
- * carousel that moves only one of them keeps the other where it was.
42637
- * `inline-start` or `inline-end` stacks the arrows into a column, which is
42638
- * what a vertical track usually wants.
43174
+ * carousel that moves only one of them keeps the other where it was. `start`
43175
+ * or `end` stacks the arrows into a column, which is what a vertical track
43176
+ * usually wants.
42639
43177
  *
42640
43178
  * `overlay` puts them on the slides, at the track's own edges, which is what a
42641
43179
  * full-bleed carousel wants: the slide is the page and the controls are on it
@@ -42662,8 +43200,9 @@ export type CustomElementsSolidJs = {
42662
43200
  * is a column and the same question is `align-self`. A consumer should not
42663
43201
  * have to know which of those two words their edge wanted.
42664
43202
  *
42665
- * Logical, like the placement: `start` is the left in English and the right in
42666
- * Arabic on a horizontal run, and the top on a vertical one.
43203
+ * Logical, like the placement's own `start` and `end`: `start` is the left in
43204
+ * English and the right in Arabic on a horizontal run, and the top on a
43205
+ * vertical one.
42667
43206
  *
42668
43207
  * Unset splits the row, dots to the start and arrows to the end, which is
42669
43208
  * what keeps two items in one grid cell from landing on each other. Beside the
@@ -42673,16 +43212,22 @@ export type CustomElementsSolidJs = {
42673
43212
  * exist to avoid.
42674
43213
  * - `indicator-placement`/`indicatorPlacement`: Which side of the slides the dots sit on.
42675
43214
  *
42676
- * Unset is `block-end`, under them. `block-start` puts them above,
42677
- * `inline-start` and `inline-end` beside, where a run of dots becomes a
42678
- * column.
43215
+ * Unset is `bottom`, under them. `top` puts them above, `start` and `end`
43216
+ * beside, where a run of dots becomes a column.
43217
+ *
43218
+ * **The sides of the content, not positions along a bar.** `start` and `end`
43219
+ * are the logical ones and they are logical because that axis flips: a
43220
+ * carousel with its dots at the start should put them on the right in Arabic
43221
+ * without being told. `top` and `bottom` are the block edges, which flip in
43222
+ * no writing mode this library draws for, so the plain word is the honest one
43223
+ * and `block-start` would be jargon standing in for it.
42679
43224
  *
42680
- * **The sides of the content, not positions along a bar**, and logical names
42681
- * rather than `top`/`left`: an `inline-start` carousel should put its dots on
42682
- * the right in Arabic without being told.
43225
+ * **`Drawer` and `Toast` say it in exactly these four words**, and one
43226
+ * vocabulary across the three is worth more than each family's own: a
43227
+ * consumer who has placed a drawer knows where a carousel's dots go.
42683
43228
  *
42684
- * Independent of `controlsPlacement`. Both default to the block end, where
42685
- * they share the row and split it, dots to the start and arrows to the end,
43229
+ * Independent of `controlsPlacement`. Both default to the bottom, where they
43230
+ * share the row and split it, dots to the start and arrows to the end,
42686
43231
  * arrived at by two defaults rather than by a rule about the pair, so moving
42687
43232
  * one leaves the other alone.
42688
43233
  * - `autoplay`: Whether the carousel advances on its own.
@@ -43456,18 +44001,30 @@ export type CustomElementsSolidJs = {
43456
44001
  *
43457
44002
  * Component attributes and properties that can be applied to the element or by using JavaScript.
43458
44003
  *
43459
- * - `variant`: How the choice presents itself.
44004
+ * - `separation`: Where the choice's own surface ends.
44005
+ *
44006
+ * The question `separation` asks everywhere else, asked of one option, so it
44007
+ * is that word: what these values pick is a surface, and `plain` is already
44008
+ * the registry's own word for the answer this family used it for. `Radio`
44009
+ * takes the same three for the same reason.
43460
44010
  *
43461
- * - `plain` is the default and is never written: a box beside its words,
44011
+ * - `plain` is the resting one and is never written: a box beside its words,
43462
44012
  * which is what a list of choices should be almost always.
43463
- * - `card` puts it in a bounded surface, for options that need room to
44013
+ * - `outlined` puts it in a bounded surface, for options that need room to
43464
44014
  * explain themselves: a description, an icon, a price. It is the half a
43465
44015
  * `data-card` link cannot do, because a link reports no value and belongs
43466
44016
  * to no group, so a card that is genuinely an answer has to be this.
44017
+ * - `filled` is that same card on a ground of its own with no edge, which is
44018
+ * what a column of options wants where a hairline around every one of them
44019
+ * is a grid of lines rather than a set of answers.
43467
44020
  *
43468
- * The box stays in both. A card whose only marker was its own border would
43469
- * ask a reader to compare surfaces across a row to find the answer, and would
43470
- * leave nothing for a high-contrast display.
44021
+ * **`elevated` is the one value of the axis this family does not take.** A
44022
+ * raised choice competes with a dialog: the top layer is where a thing that
44023
+ * interrupts you lives, and an option in a form is not one of those.
44024
+ *
44025
+ * The box stays in all of them. A card whose only marker was its own border
44026
+ * would ask a reader to compare surfaces across a row to find the answer, and
44027
+ * would leave nothing for a high-contrast display.
43471
44028
  * - `checked`: Whether the control is checked.
43472
44029
  *
43473
44030
  * One property rather than two. Writing always applies;
@@ -46018,9 +46575,12 @@ export type CustomElementsSolidJs = {
46018
46575
  * width so a column of numbers lines up by its digits. Only with
46019
46576
  * `direction="row"`: stacked, a label and its value share one edge already.
46020
46577
  *
46021
- * Flex's word for the same thing, and a grid rather than a flex row
46022
- * underneath, so the labels still share one column while the values share an
46023
- * end.
46578
+ * Flex's value for the same idea, under a shorter name than Flex's own:
46579
+ * there it is `justify-content`, the CSS property it sets, and here the
46580
+ * underlying layout is a grid handing an edge down to each item as a custom
46581
+ * property, so the labels still share one column while the values share an
46582
+ * end. Naming a property this does not set after it would be the wrong kind
46583
+ * of precision.
46024
46584
  * - `width`: How wide the list is.
46025
46585
  *
46026
46586
  * Absent, it fills the row it is in. `auto` is as wide as its widest pair,
@@ -46105,16 +46665,6 @@ export type CustomElementsSolidJs = {
46105
46665
  *
46106
46666
  * Component attributes and properties that can be applied to the element or by using JavaScript.
46107
46667
  *
46108
- * - `align`: Which way the panel's contents read.
46109
- *
46110
- * One property for the whole panel rather than one per region. The regions are
46111
- * never mixed in practice: a dialog that asks a short question centers its
46112
- * mark, its title, its sentence and its buttons together, and a dialog holding
46113
- * a form runs all four from the start. Three properties would be three ways to
46114
- * write the same two arrangements, and a fourth way to get one of them wrong.
46115
- *
46116
- * Unset is `start` and stays unset, so a reflected default cannot appear on a
46117
- * host whose server output never had it.
46118
46668
  * - `size`: How wide the panel is allowed to be.
46119
46669
  *
46120
46670
  * Steps rather than a number, because a dialog's width is a fact about what is
@@ -46131,9 +46681,27 @@ export type CustomElementsSolidJs = {
46131
46681
  * rule's own test is whether two of them sitting together could legitimately
46132
46682
  * differ, and it is answering "a ragged row is unwritable". Two dialogs never
46133
46683
  * sit together. One is on screen at a time, in the top layer, and it is the
46134
- * region rather than a control in one, which is the same reason `Avatar` and
46135
- * `Spinner` keep theirs. Not `appearance`, which says how a thing reads
46136
- * rather than how wide it is.
46684
+ * region rather than a control in one, which is the other half of the axis's
46685
+ * domain: the rest of it is pictures, which are not controls either. Not
46686
+ * `appearance`, which says how a thing reads rather than how wide it is.
46687
+ * - `text-align`/`textAlign`: Which way the panel's contents read.
46688
+ *
46689
+ * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
46690
+ * box-alignment question, where things sit in a container, and they are named
46691
+ * for the properties they mirror; this one is `text-align` on a panel of
46692
+ * prose, and `Table.Column` answers the same question under the same name.
46693
+ * One word for both questions is how a consumer who learned it on a layout
46694
+ * writes it here and gets no error, a value a component does not have leaving
46695
+ * the default in place and looking deliberate.
46696
+ *
46697
+ * One property for the whole panel rather than one per region. The regions are
46698
+ * never mixed in practice: a dialog that asks a short question centers its
46699
+ * mark, its title, its sentence and its buttons together, and a dialog holding
46700
+ * a form runs all four from the start. Three properties would be three ways to
46701
+ * write the same two arrangements, and a fourth way to get one of them wrong.
46702
+ *
46703
+ * Unset is `start` and stays unset, so a reflected default cannot appear on a
46704
+ * host whose server output never had it.
46137
46705
  * - `open`: Whether the element is open.
46138
46706
  *
46139
46707
  * One property, not two, so `dialog.open` answers the question anyone
@@ -47960,11 +48528,30 @@ export type CustomElementsSolidJs = {
47960
48528
  *
47961
48529
  * Component attributes and properties that can be applied to the element or by using JavaScript.
47962
48530
  *
47963
- * - `align`: Alignment across the direction.
48531
+ * - `align-items`/`alignItems`: Alignment across the direction, which is `align-items`.
48532
+ *
48533
+ * **Named for the CSS property it sets, because it is that property.** A flex
48534
+ * container is the one place where the box-alignment words are already the
48535
+ * reader's, so a shorter name would be a second vocabulary for something they
48536
+ * can already say, and `align` alone is the word four other families use for
48537
+ * four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
48538
+ *
48539
+ * **It also keeps the name out of the browser's way.** `align` is a legacy
48540
+ * HTML presentational attribute mapped to `text-align` on any element that
48541
+ * carries one, this one included: measured, an invented tag with
48542
+ * `align="center"` computes centered text too, so it is nothing to do with
48543
+ * being a known element. A row that carried it therefore centered the text
48544
+ * inside every field in it, through a hint no rule here declares and none can
48545
+ * see, and the fix is a name the platform has no opinion about rather than a
48546
+ * guard against the hint.
47964
48547
  * - `direction`: Whether items run across or down.
47965
48548
  * - `gap`: Space between items, named on the space scale.
47966
48549
  * - `inline`: Flows with surrounding text instead of taking the full width.
47967
- * - `justify`: Distribution along the direction.
48550
+ * - `justify-content`/`justifyContent`: Distribution along the direction, which is `justify-content`.
48551
+ *
48552
+ * Named for the property it sets, the way `alignItems` is. `between` and
48553
+ * `around` drop the `space-` prefix and nothing else does, because those two
48554
+ * are the only values whose CSS spelling is two words.
47968
48555
  * - `wrap`: Whether items wrap onto more lines.
47969
48556
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
47970
48557
  *
@@ -48102,7 +48689,19 @@ export type CustomElementsSolidJs = {
48102
48689
  *
48103
48690
  * Component attributes and properties that can be applied to the element or by using JavaScript.
48104
48691
  *
48105
- * - `align`: Alignment of each cell within its row.
48692
+ * - `align-items`/`alignItems`: Alignment of each cell within its row, which is `align-items`.
48693
+ *
48694
+ * **Named for the CSS property it sets**, the way `Flex` is, and the same
48695
+ * property on a grid: it places every cell in its row's track rather than
48696
+ * placing the tracks. No `baseline`, which `Flex` offers, because cells in a
48697
+ * row of a grid are boxes of unrelated content and lining their first lines
48698
+ * up is a thing a reader asks for between siblings in a row, not between
48699
+ * cells in a table of them.
48700
+ *
48701
+ * There is no `justifyContent` here for the same reason: the tracks are
48702
+ * `1fr`, so they already fill the row and there is nothing left over to
48703
+ * distribute. `columns`, `min` and `--grid-columns` are how a grid says how
48704
+ * wide its tracks are.
48106
48705
  * - `columns`: Fixed number of equal columns.
48107
48706
  * - `gap`: Space between cells, named on the space scale.
48108
48707
  * - `min`: Minimum column width, filling as many as fit.
@@ -48731,12 +49330,13 @@ export type CustomElementsSolidJs = {
48731
49330
  *
48732
49331
  * Component attributes and properties that can be applied to the element or by using JavaScript.
48733
49332
  *
48734
- * - `rounded`: Whether the corners are cut.
49333
+ * - `shape`: Whether the corners are cut.
48735
49334
  *
48736
- * A boolean rather than a radius, because the radius is a token and the
48737
- * question a consumer is answering is whether this picture is a card's
48738
- * surface or a page's. `--image-radius` moves it for the case that is
48739
- * neither.
49335
+ * The axis and not a boolean, because `rounded` is a registered word and a
49336
+ * private spelling of a registry question is what `appearance` was retired
49337
+ * for. Not a radius either: the radius is a token and the question a consumer
49338
+ * is answering is whether this picture is a card's surface or a page's.
49339
+ * `--image-radius` moves it for the case that is neither.
48740
49340
  * - `alt`: What it shows, for a reader who cannot see it.
48741
49341
  *
48742
49342
  * Empty is a real answer and means decoration. Omitting the attribute is not
@@ -48829,7 +49429,7 @@ export type CustomElementsSolidJs = {
48829
49429
  * - `--image-fit`: How the picture fills it. (default: `undefined`)
48830
49430
  * - `--image-placeholder-color`: The resting surface behind both stand-ins. (default: `undefined`)
48831
49431
  * - `--image-position`: Which part survives a crop. (default: `undefined`)
48832
- * - `--image-radius`: Corner radius, under `rounded`. (default: `undefined`)
49432
+ * - `--image-radius`: Corner radius, under `shape="rounded"`. (default: `undefined`)
48833
49433
  *
48834
49434
  * ## CSS Parts
48835
49435
  *
@@ -50176,7 +50776,7 @@ export type CustomElementsSolidJs = {
50176
50776
  * last reader did rather than what the author wrote. `:state(open)` carries
50177
50777
  * the resolved state for stylesheets, which is what the mirror is for.
50178
50778
  * - `default-open`/`defaultOpen`: Whether the markup declared it open. Ignored once `open` is written.
50179
- * - `full-below`/`fullBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
50779
+ * - `band-below`/`bandBelow`: The width, in pixels, under which a card becomes a band. Zero never does.
50180
50780
  *
50181
50781
  * A card is a panel hung off one word, and there is no room to hang anything
50182
50782
  * off a word on a phone: the columns do not shrink past
@@ -50209,16 +50809,23 @@ export type CustomElementsSolidJs = {
50209
50809
  * - `variant`: Whether the panel is a card under the trigger or a band across the page.
50210
50810
  *
50211
50811
  * The resting one is the card, hanging off the trigger and as wide as it
50212
- * needs to be. `full` is the other shape navigations use: a band from edge to
50812
+ * needs to be. `band` is the other shape navigations use: a run from edge to
50213
50813
  * edge under the header, with its contents held to the page's own measure, so
50214
50814
  * a set of destinations too wide to sit under one word gets the whole width
50215
50815
  * to lay out in.
50216
50816
  *
50217
- * It changes where the panel goes as well as how it looks, which is why this
50218
- * tier knows about it at all: a band spans the viewport, so there is nothing
50219
- * to measure it against and nothing to flip or shift to, and the placing pass
50220
- * is told not to run. Everything else the popover gives, the top layer and
50221
- * the dismissal, is exactly what such a band needs.
50817
+ * **A band and not a width, which is why the word is not `full`.** It changes
50818
+ * where the panel goes as well as how wide it is, which is why this tier
50819
+ * knows about it at all: a band spans the viewport, so there is nothing to
50820
+ * measure it against and nothing to flip or shift to, and the placing pass is
50821
+ * told not to run. Everything else the popover gives, the top layer and the
50822
+ * dismissal, is exactly what such a band needs. `full` is the registry's word
50823
+ * for a width, and `Button` and `Dialog` are the two families answering that
50824
+ * question; borrowing it here would put a third meaning on it.
50825
+ *
50826
+ * `variant` and not an axis, for the reason the registry gives: a card under
50827
+ * a word and a band under a header are two arrangements this family has, and
50828
+ * no other family is being asked the same question.
50222
50829
  * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
50223
50830
  *
50224
50831
  * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -50292,7 +50899,7 @@ export type CustomElementsSolidJs = {
50292
50899
  *
50293
50900
  * These can be used to apply styling when a component is in a given state.
50294
50901
  *
50295
- * - `narrow`: While the page is under `full-below`, so the panel is a band whether or not one was asked for.
50902
+ * - `narrow`: While the page is under `band-below`, so the panel is a band whether or not one was asked for.
50296
50903
  * - `open`: While the panel is open, which is when the trigger reads as current.
50297
50904
  * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
50298
50905
  */
@@ -51964,6 +52571,13 @@ export type CustomElementsSolidJs = {
51964
52571
  * the name of the tool being run, or the file being read.
51965
52572
  * - `size`: Diameter relative to the surrounding text.
51966
52573
  *
52574
+ * **`Loader`'s three steps, because the two are swapped for each other.** An
52575
+ * orb and a spinner are the same job drawn differently, a wait a reader is
52576
+ * looking at, and a product that replaces one with the other should not find
52577
+ * that a step it was writing has stopped existing. `md` is the resting one
52578
+ * and selects nothing, landing on the base rule the way a written resting
52579
+ * value does everywhere else.
52580
+ *
51967
52581
  * Reflected because the stylesheet selects on it. The mesh is chosen from the
51968
52582
  * rendered box rather than from this, so `--orb-size` and a consumer's own
51969
52583
  * `inline-size` get the same treatment as the named steps.
@@ -52927,6 +53541,8 @@ export type CustomElementsSolidJs = {
52927
53541
  * - `--progress-color`: Fill of the part that is done. (default: `undefined`)
52928
53542
  * - `--progress-ring-size`: Diameter of the ring appearance. (default: `undefined`)
52929
53543
  * - `--progress-ring-width`: Thickness of its stroke. (default: `undefined`)
53544
+ * - `--progress-size`: Thickness of the bar. (default: `undefined`)
53545
+ * - `--progress-track-color`: Fill of the part that is not. (default: `undefined`)
52930
53546
  * - `--progress-fraction`: The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. (default: `undefined`)
52931
53547
  *
52932
53548
  * ## CSS Parts
@@ -53308,9 +53924,9 @@ export type CustomElementsSolidJs = {
53308
53924
  * Unnecessary under `chip`, which has no room for a circle beside its mark
53309
53925
  * and hides it already.
53310
53926
  *
53311
- * `card` only, and it is a graphic that goes rather than a radio: the control
53312
- * in the shadow root is untouched, so the row is still focusable, still
53313
- * reported to a screen reader, and still the thing a form submits.
53927
+ * A separated choice only, and it is a graphic that goes rather than a radio:
53928
+ * the control in the shadow root is untouched, so the row is still focusable,
53929
+ * still reported to a screen reader, and still the thing a form submits.
53314
53930
  *
53315
53931
  * Safe because the card already carries the answer in its surface, a raised
53316
53932
  * fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -53319,21 +53935,40 @@ export type CustomElementsSolidJs = {
53319
53935
  * Not on `Checkbox`, deliberately. A radio card with no circle is still
53320
53936
  * unmistakably one-of-many because its siblings behave that way; a checkbox
53321
53937
  * card with no box loses the only thing that says you may pick several.
53322
- * - `variant`: How the choice presents itself.
53938
+ * - `separation`: Where the choice's own surface ends.
53323
53939
  *
53324
- * - `plain` is the default and is never written: a circle beside its words,
53325
- * which is what a list of choices should be almost always.
53326
- * - `card` puts it in a bounded surface, for options that need room to
53940
+ * The question `separation` asks everywhere else, asked of one option, so it
53941
+ * is that word: what these values pick is a surface, and `plain` is already
53942
+ * the registry's own word for the answer this family used it for.
53943
+ *
53944
+ * - `plain` is the resting one and is never written: a circle beside its
53945
+ * words, which is what a list of choices should be almost always.
53946
+ * - `outlined` puts it in a bounded surface, for options that need room to
53327
53947
  * explain themselves: a description, an icon, a price. It is the half a
53328
53948
  * `data-card` link cannot do, because a link reports no value and belongs
53329
53949
  * to no group, so a card that is genuinely an answer has to be this.
53330
- * - `chip` is the answer as its own small surface, for a row of short
53331
- * choices read at a glance. It hides the circle, the surface being the
53332
- * whole mark, which is why `hide-control` says it is unnecessary here.
53333
- *
53334
- * The circle stays in both. A card whose only marker was its own border would
53335
- * ask a reader to compare surfaces across a row to find the answer, and would
53336
- * leave nothing for a high-contrast display.
53950
+ * - `filled` is that same card on a ground of its own with no edge, which is
53951
+ * what a column of choices wants where a hairline around every one of them
53952
+ * is a grid of lines rather than a set of answers.
53953
+ *
53954
+ * **`elevated` is the one value of the axis this family does not take.** A
53955
+ * raised choice competes with a dialog: the top layer is where a thing that
53956
+ * interrupts you lives, and an option in a form is not one of those, so a
53957
+ * column of lifted cards reads as a stack of floating things none of which is
53958
+ * settled.
53959
+ *
53960
+ * The circle stays in all of them. A card whose only marker was its own
53961
+ * border would ask a reader to compare surfaces across a row to find the
53962
+ * answer, and would leave nothing for a high-contrast display.
53963
+ * - `variant`: The answer as its own small surface, for a row of short choices read at a
53964
+ * glance.
53965
+ *
53966
+ * **Not a separation, which is why it is still `variant`.** The other values
53967
+ * pick where a surface ends around a row that keeps its circle and its words;
53968
+ * a chip has neither. It hides the circle, the surface being the whole mark,
53969
+ * which is why `hide-control` says it is unnecessary here, and it takes the
53970
+ * words out of the flow to be the accessible name. That removes the
53971
+ * distinction `separation` exists to make rather than answering it.
53337
53972
  * - `disabled`: Whether this one can be chosen.
53338
53973
  * - `selected`: Whether this is the current one.
53339
53974
  *
@@ -53468,22 +54103,27 @@ export type CustomElementsSolidJs = {
53468
54103
  *
53469
54104
  * Component attributes and properties that can be applied to the element or by using JavaScript.
53470
54105
  *
53471
- * - `variant`: Which mark the row is drawn with.
54106
+ * - `shape`: The geometry one mark is drawn to.
53472
54107
  *
53473
- * `marks` is the star, and is what a rating means to most readers. `dots`
53474
- * drops the glyph for a plain circle, which says how much rather than how
53475
- * good: a star carries a judgment that a level of spice, a difficulty or a
53476
- * confidence has not earned.
54108
+ * The registry's word, because the question is the registry's: `Avatar`,
54109
+ * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
54110
+ * their own thing is cut to under this name, and `dots` is already a value
54111
+ * the axis holds. What is picked here is the outline of one mark and nothing
54112
+ * else, which is a shape and not a component-specific choice.
53477
54113
  *
53478
- * Both are one shape repeated and clipped to the score, so halves work in
53479
- * either, and both are only a choice of drawing. A scale whose marks are
54114
+ * `dots` drops the glyph for a plain circle, which says how much rather than
54115
+ * how good: a star carries a judgment that a level of spice, a difficulty or
54116
+ * a confidence has not earned. Either way it is one shape repeated and
54117
+ * clipped to the score, so halves work in both. A scale whose marks are
53480
54118
  * *different* drawings is a set of choices rather than a quantity: that is
53481
54119
  * `Radio.Group`, whose options already carry a value and a name each.
53482
54120
  *
53483
- * **Undefaulted, because it reflects.** A default of `marks` writes
53484
- * `variant="marks"` onto every server-rendered rating, which React holds no
53485
- * prop for and reports as a hydration mismatch. The stylesheet names only
53486
- * `dots`, so an unset one draws marks anyway.
54121
+ * **The star is the resting one and has no word**, which is the rule every
54122
+ * axis follows and is also what this family needed anyway: it reflects, so a
54123
+ * default would write the resting value onto every server-rendered rating,
54124
+ * an attribute React holds no prop for and so a hydration mismatch for each
54125
+ * one. The stylesheet names only `dots`, so an unset one draws the star by
54126
+ * landing on the base rule.
53487
54127
  * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
53488
54128
  * - `value`: What the control holds now, and what its form submits.
53489
54129
  *
@@ -54609,11 +55249,11 @@ export type CustomElementsSolidJs = {
54609
55249
  * `outlined` is what the unset frame already draws, so writing it would be
54610
55250
  * writing the resting state out.
54611
55251
  *
54612
- * **The other three fields want this too and do not have it yet.** `Input`,
54613
- * `Textarea` and `Combobox` wear the same frame from the same shared
54614
- * stylesheet, and an inline one of each is as reasonable as an inline select.
54615
- * They are left alone rather than swept, because each has a different thing
54616
- * inside the frame and guessing at three is how an axis ends up meaning four
55252
+ * **Every field wearing `field-frame.css` wants this too and does not have it
55253
+ * yet**, which this trigger is not one of: it draws its own frame below. An
55254
+ * inline number input in a toolbar is as reasonable as an inline select. They
55255
+ * are left alone rather than swept, because each has a different thing inside
55256
+ * the frame and guessing at a set of them is how an axis ends up meaning four
54617
55257
  * things, which is the fault `appearance` was retired for.
54618
55258
  * - `open`: Whether the element is open.
54619
55259
  *
@@ -56403,25 +57043,6 @@ export type CustomElementsSolidJs = {
56403
57043
  *
56404
57044
  * Component attributes and properties that can be applied to the element or by using JavaScript.
56405
57045
  *
56406
- * - `align`: Which edge the values line up against.
56407
- *
56408
- * `end` is what a column of numbers wants, so digits of the same magnitude
56409
- * sit above each other. Left unset the cell inherits the table's own
56410
- * alignment, which is `start` for text in either writing direction.
56411
- * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
56412
- * consumer wrote, so the table writes nothing onto them: it publishes the
56413
- * edge to each cell under this column as `--table-cell-align`, which
56414
- * `@fusion.dev/helix` reads. The heading is this element's own, and
56415
- * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
56416
- * inline end, so in a right-to-left table it is the left.
56417
- *
56418
- * **Reflected, because the heading is drawn by a stylesheet and has no other
56419
- * way to learn it.** Set as a property, which is how React sets it, an
56420
- * unreflected `align` left no attribute to select on, so the heading stayed at
56421
- * the start over a column of digits set to the end. It is the author's
56422
- * declaration and nothing moves it afterwards, so an attribute cannot come to
56423
- * disagree with the element, which is the reason `open` records a custom
56424
- * state instead. No default, so an unset column writes nothing onto its host.
56425
57046
  * - `field`: The key this column reads out of a row.
56426
57047
  *
56427
57048
  * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -56453,6 +57074,33 @@ export type CustomElementsSolidJs = {
56453
57074
  * how React sets it, an unreflected `sortable` left no attribute to match.
56454
57075
  * `false` reflects as no attribute at all, so an unset column writes nothing
56455
57076
  * onto its host.
57077
+ * - `text-align`/`textAlign`: Which edge the values line up against.
57078
+ *
57079
+ * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
57080
+ * box-alignment question, where a thing sits in a container, and they are
57081
+ * named for the properties they mirror; this is `text-align` down a column of
57082
+ * values, and `Dialog` answers the same question under the same name. One
57083
+ * word for both questions is how a consumer who learned it on a layout writes
57084
+ * it here and gets no error, a value a component does not have leaving the
57085
+ * default in place and looking deliberate.
57086
+ *
57087
+ * `end` is what a column of numbers wants, so digits of the same magnitude
57088
+ * sit above each other. Left unset the cell inherits the table's own
57089
+ * alignment, which is `start` for text in either writing direction.
57090
+ * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
57091
+ * consumer wrote, so the table writes nothing onto them: it publishes the
57092
+ * edge to each cell under this column as `--table-cell-align`, which
57093
+ * `@fusion.dev/helix` reads. The heading is this element's own, and
57094
+ * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
57095
+ * inline end, so in a right-to-left table it is the left.
57096
+ *
57097
+ * **Reflected, because the heading is drawn by a stylesheet and has no other
57098
+ * way to learn it.** Set as a property, which is how React sets it, an
57099
+ * unreflected edge left no attribute to select on, so the heading stayed at
57100
+ * the start over a column of digits set to the end. It is the author's
57101
+ * declaration and nothing moves it afterwards, so an attribute cannot come to
57102
+ * disagree with the element, which is the reason `open` records a custom
57103
+ * state instead. No default, so an unset column writes nothing onto its host.
56456
57104
  * - `width`: The track this column takes, as CSS.
56457
57105
  *
56458
57106
  * A single track value, so anything valid in `grid-template-columns` works:
@@ -60718,7 +61366,7 @@ export type CustomCssProperties = {
60718
61366
  "--image-placeholder-color"?: (string) | undefined;
60719
61367
  /** Which part survives a crop. */
60720
61368
  "--image-position"?: (string) | undefined;
60721
- /** Corner radius, under `rounded`. */
61369
+ /** Corner radius, under `shape="rounded"`. */
60722
61370
  "--image-radius"?: (string) | undefined;
60723
61371
  /** Fill behind the text. */
60724
61372
  "--input-background-color"?: (string) | undefined;
@@ -60936,6 +61584,10 @@ export type CustomCssProperties = {
60936
61584
  "--progress-ring-size"?: (string) | undefined;
60937
61585
  /** Thickness of its stroke. */
60938
61586
  "--progress-ring-width"?: (string) | undefined;
61587
+ /** Thickness of the bar. */
61588
+ "--progress-size"?: (string) | undefined;
61589
+ /** Fill of the part that is not. */
61590
+ "--progress-track-color"?: (string) | undefined;
60939
61591
  /** The value as a fraction of the range, 0 to 1. Pinned to 1 while indeterminate. */
60940
61592
  "--progress-fraction"?: (string) | undefined;
60941
61593
  /** Behind them, including the quiet zone. */