@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.
- package/custom-elements.json +180 -156
- package/dist/avatar/root/avatar-root.css.js +1 -1
- package/dist/avatar/root/avatar-root.d.ts +5 -1
- package/dist/bar-chart/root/bar-chart-root.css.js +19 -19
- package/dist/carousel/root/carousel-root.css.js +18 -18
- package/dist/carousel/root/carousel-root.d.ts +22 -15
- package/dist/checkbox/root/checkbox-root.css.js +20 -11
- package/dist/checkbox/root/checkbox-root.d.ts +19 -7
- package/dist/checkbox/root/checkbox-root.js +1 -1
- package/dist/description-list/root/description-list-root.d.ts +6 -3
- package/dist/dialog/root/dialog-root.css.js +3 -3
- package/dist/dialog/root/dialog-root.d.ts +24 -16
- package/dist/dialog/root/dialog-root.js +3 -3
- package/dist/flex/root/flex-root.css.js +8 -12
- package/dist/flex/root/flex-root.d.ts +23 -4
- package/dist/flex/root/flex-root.js +4 -4
- package/dist/grid/root/grid-root.css.js +3 -7
- package/dist/grid/root/grid-root.d.ts +14 -2
- package/dist/grid/root/grid-root.js +2 -2
- package/dist/image/root/image-root.css.js +1 -1
- package/dist/image/root/image-root.d.ts +7 -6
- package/dist/image/root/image-root.js +2 -6
- package/dist/megamenu/root/megamenu-root.css.js +6 -6
- package/dist/orb/root/orb-root.d.ts +8 -1
- package/dist/progress/root/progress-root.d.ts +2 -2
- package/dist/radio/root/radio-root.css.js +22 -12
- package/dist/radio/root/radio-root.d.ts +36 -14
- package/dist/radio/root/radio-root.js +3 -0
- package/dist/rating/root/rating-root.css.js +2 -2
- package/dist/rating/root/rating-root.d.ts +17 -12
- package/dist/rating/root/rating-root.js +1 -1
- package/dist/select/root/select-root.d.ts +5 -5
- package/dist/table/column/table-column.css.js +4 -4
- package/package.json +6 -6
- package/types/jsx.d.ts +1139 -487
- 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
|
-
`
|
|
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
|
-
`
|
|
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
|
-
|
|
2647
|
-
|
|
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
|
-
|
|
2666
|
-
|
|
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
|
|
2695
|
-
Arabic on a horizontal run, and the top on a
|
|
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
|
|
2719
|
-
Arabic on a horizontal run, and the top on a
|
|
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 `
|
|
2731
|
-
|
|
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
|
|
2735
|
-
|
|
2736
|
-
the right in Arabic
|
|
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
|
-
|
|
2739
|
-
|
|
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 `
|
|
2746
|
-
|
|
2747
|
-
|
|
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
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
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
|
|
2754
|
-
|
|
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
|
-
|
|
2965
|
-
|
|
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
|
-
|
|
2984
|
-
|
|
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
|
|
3013
|
-
Arabic on a horizontal run, and the top on a
|
|
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
|
|
3037
|
-
Arabic on a horizontal run, and the top on a
|
|
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 `
|
|
3049
|
-
|
|
3050
|
-
|
|
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
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
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
|
|
3057
|
-
|
|
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 `
|
|
3064
|
-
|
|
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
|
|
3068
|
-
|
|
3069
|
-
the right in Arabic
|
|
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
|
-
|
|
3072
|
-
|
|
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
|
-
/**
|
|
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
|
|
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
|
-
- `
|
|
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
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
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
|
-
/**
|
|
3907
|
+
/** Where the choice's own surface ends.
|
|
3854
3908
|
|
|
3855
|
-
|
|
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
|
-
- `
|
|
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
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
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
|
|
6900
|
-
|
|
6901
|
-
|
|
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
|
|
6938
|
-
|
|
6939
|
-
|
|
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
|
|
7010
|
-
|
|
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
|
|
7115
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
9406
|
-
|
|
9407
|
-
|
|
9408
|
-
|
|
9409
|
-
|
|
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
|
-
|
|
9489
|
-
|
|
9490
|
-
|
|
9491
|
-
|
|
9492
|
-
|
|
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
|
-
"
|
|
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
|
-
|
|
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. `
|
|
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
|
-
|
|
10982
|
-
|
|
10983
|
-
|
|
10984
|
-
|
|
10985
|
-
|
|
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:
|
|
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:
|
|
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. `
|
|
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
|
-
|
|
11089
|
-
|
|
11090
|
-
|
|
11091
|
-
|
|
11092
|
-
|
|
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
|
-
|
|
13954
|
-
in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
|
|
13971
|
-
in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
/**
|
|
14274
|
+
/** Where the choice's own surface ends.
|
|
13983
14275
|
|
|
13984
|
-
|
|
13985
|
-
|
|
13986
|
-
|
|
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
|
-
- `
|
|
13991
|
-
|
|
13992
|
-
|
|
13993
|
-
|
|
13994
|
-
|
|
13995
|
-
|
|
13996
|
-
|
|
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
|
-
|
|
14061
|
-
in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
|
|
14078
|
-
in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
/**
|
|
14401
|
+
/** Where the choice's own surface ends.
|
|
14090
14402
|
|
|
14091
|
-
|
|
14092
|
-
|
|
14093
|
-
|
|
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
|
-
- `
|
|
14098
|
-
|
|
14099
|
-
|
|
14100
|
-
|
|
14101
|
-
|
|
14102
|
-
|
|
14103
|
-
|
|
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
|
-
/**
|
|
14173
|
-
|
|
14174
|
-
|
|
14175
|
-
|
|
14176
|
-
|
|
14177
|
-
|
|
14178
|
-
|
|
14179
|
-
|
|
14180
|
-
|
|
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
|
-
**
|
|
14185
|
-
|
|
14186
|
-
|
|
14187
|
-
|
|
14188
|
-
|
|
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
|
-
/**
|
|
14347
|
-
|
|
14348
|
-
|
|
14349
|
-
|
|
14350
|
-
|
|
14351
|
-
|
|
14352
|
-
|
|
14353
|
-
|
|
14354
|
-
|
|
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
|
-
**
|
|
14359
|
-
|
|
14360
|
-
|
|
14361
|
-
|
|
14362
|
-
|
|
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
|
-
**
|
|
15189
|
-
|
|
15190
|
-
|
|
15191
|
-
|
|
15192
|
-
|
|
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
|
-
**
|
|
15332
|
-
|
|
15333
|
-
|
|
15334
|
-
|
|
15335
|
-
|
|
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
|
-
* `
|
|
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
|
-
*
|
|
23097
|
-
*
|
|
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
|
|
23125
|
-
* Arabic on a horizontal run, and the top on a
|
|
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 `
|
|
23136
|
-
*
|
|
23137
|
-
*
|
|
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
|
-
*
|
|
23140
|
-
*
|
|
23141
|
-
*
|
|
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
|
|
23144
|
-
*
|
|
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
|
-
* - `
|
|
24332
|
+
* - `separation`: Where the choice's own surface ends.
|
|
23905
24333
|
*
|
|
23906
|
-
*
|
|
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
|
-
* - `
|
|
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
|
|
23914
|
-
* ask a reader to compare surfaces across a row to find the answer, and
|
|
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
|
|
26434
|
-
*
|
|
26435
|
-
*
|
|
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
|
|
26544
|
-
*
|
|
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
|
-
* - `
|
|
29569
|
+
* - `shape`: Whether the corners are cut.
|
|
29088
29570
|
*
|
|
29089
|
-
*
|
|
29090
|
-
*
|
|
29091
|
-
*
|
|
29092
|
-
*
|
|
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
|
-
* - `
|
|
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. `
|
|
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
|
-
*
|
|
30542
|
-
*
|
|
30543
|
-
*
|
|
30544
|
-
*
|
|
30545
|
-
* the
|
|
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 `
|
|
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
|
-
*
|
|
33565
|
-
* in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
* - `
|
|
34074
|
+
* - `separation`: Where the choice's own surface ends.
|
|
33576
34075
|
*
|
|
33577
|
-
*
|
|
33578
|
-
*
|
|
33579
|
-
*
|
|
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
|
-
* - `
|
|
33584
|
-
*
|
|
33585
|
-
*
|
|
33586
|
-
*
|
|
33587
|
-
*
|
|
33588
|
-
*
|
|
33589
|
-
*
|
|
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
|
-
* - `
|
|
34237
|
+
* - `shape`: The geometry one mark is drawn to.
|
|
33720
34238
|
*
|
|
33721
|
-
*
|
|
33722
|
-
*
|
|
33723
|
-
*
|
|
33724
|
-
*
|
|
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
|
-
*
|
|
33727
|
-
*
|
|
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
|
-
* **
|
|
33732
|
-
*
|
|
33733
|
-
*
|
|
33734
|
-
*
|
|
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
|
-
* **
|
|
34834
|
-
*
|
|
34835
|
-
*
|
|
34836
|
-
*
|
|
34837
|
-
*
|
|
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
|
-
* `
|
|
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
|
-
*
|
|
42638
|
-
*
|
|
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
|
|
42666
|
-
* Arabic on a horizontal run, and the top on a
|
|
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 `
|
|
42677
|
-
*
|
|
42678
|
-
*
|
|
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
|
-
*
|
|
42681
|
-
*
|
|
42682
|
-
*
|
|
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
|
|
42685
|
-
*
|
|
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
|
-
* - `
|
|
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
|
|
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
|
-
* - `
|
|
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
|
-
*
|
|
43469
|
-
*
|
|
43470
|
-
*
|
|
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
|
|
46022
|
-
*
|
|
46023
|
-
*
|
|
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
|
|
46135
|
-
*
|
|
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
|
-
* - `
|
|
49333
|
+
* - `shape`: Whether the corners are cut.
|
|
48735
49334
|
*
|
|
48736
|
-
*
|
|
48737
|
-
*
|
|
48738
|
-
*
|
|
48739
|
-
*
|
|
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
|
-
* - `
|
|
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. `
|
|
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
|
-
*
|
|
50218
|
-
*
|
|
50219
|
-
*
|
|
50220
|
-
*
|
|
50221
|
-
* the
|
|
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 `
|
|
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
|
-
*
|
|
53312
|
-
* in the shadow root is untouched, so the row is still focusable,
|
|
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
|
-
* - `
|
|
53938
|
+
* - `separation`: Where the choice's own surface ends.
|
|
53323
53939
|
*
|
|
53324
|
-
*
|
|
53325
|
-
*
|
|
53326
|
-
*
|
|
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
|
-
* - `
|
|
53331
|
-
*
|
|
53332
|
-
*
|
|
53333
|
-
*
|
|
53334
|
-
*
|
|
53335
|
-
*
|
|
53336
|
-
*
|
|
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
|
-
* - `
|
|
54106
|
+
* - `shape`: The geometry one mark is drawn to.
|
|
53472
54107
|
*
|
|
53473
|
-
*
|
|
53474
|
-
*
|
|
53475
|
-
*
|
|
53476
|
-
*
|
|
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
|
-
*
|
|
53479
|
-
*
|
|
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
|
-
* **
|
|
53484
|
-
*
|
|
53485
|
-
*
|
|
53486
|
-
*
|
|
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
|
-
* **
|
|
54613
|
-
*
|
|
54614
|
-
*
|
|
54615
|
-
*
|
|
54616
|
-
*
|
|
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. */
|