@fusion.dev/helix-headless 0.53.6 → 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 +61 -97
- package/dist/bar-chart/root/bar-chart-root.d.ts +15 -12
- package/dist/bar-chart/root/bar-chart-root.js +8 -8
- package/dist/color-picker/root/color-picker-root.d.ts +5 -2
- package/dist/color-picker/root/color-picker-root.js +0 -1
- package/dist/data-table/root/data-table-root.d.ts +2 -2
- package/dist/data-table/root/data-table-root.js +1 -1
- package/dist/legend/root/legend-root.d.ts +4 -2
- package/dist/legend/root/legend-root.js +0 -1
- package/dist/megamenu/root/megamenu-root.d.ts +16 -9
- package/dist/megamenu/root/megamenu-root.js +7 -7
- package/dist/radio/root/radio-root.d.ts +4 -2
- package/dist/radio/root/radio-root.js +1 -1
- package/dist/steps/step/step.d.ts +7 -2
- package/dist/steps/step/step.js +1 -3
- package/dist/switch/root/switch-root.d.ts +5 -2
- package/dist/switch/root/switch-root.js +0 -1
- package/dist/table/column/table-column.d.ts +32 -24
- package/dist/table/column/table-column.js +4 -4
- package/dist/table/root/table-root.d.ts +1 -1
- package/dist/table/root/table-root.js +1 -1
- package/dist/timeline/item/timeline-item.d.ts +5 -2
- package/dist/timeline/item/timeline-item.js +0 -4
- package/dist/toggle/group/toggle-group.d.ts +5 -2
- package/dist/toggle/group/toggle-group.js +1 -1
- package/dist/video/root/video-root.d.ts +4 -1
- package/dist/video/root/video-root.js +0 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +300 -176
- package/types/vue.d.ts +85 -39
package/custom-elements.json
CHANGED
|
@@ -4974,23 +4974,13 @@
|
|
|
4974
4974
|
}
|
|
4975
4975
|
],
|
|
4976
4976
|
"members": [
|
|
4977
|
-
{
|
|
4978
|
-
"kind": "field",
|
|
4979
|
-
"name": "direction",
|
|
4980
|
-
"type": {
|
|
4981
|
-
"text": "'horizontal' | undefined"
|
|
4982
|
-
},
|
|
4983
|
-
"description": "Whether the categories run down the side rather than along the bottom.\n\nAbsent is columns. `horizontal` is the one to reach for when the category\nnames are words rather than dates: a row of long names either overlaps or\nturns on its side, and neither is as readable as putting them down the left\nwhere they read normally.",
|
|
4984
|
-
"attribute": "direction",
|
|
4985
|
-
"reflects": true
|
|
4986
|
-
},
|
|
4987
4977
|
{
|
|
4988
4978
|
"kind": "field",
|
|
4989
4979
|
"name": "gridlines",
|
|
4990
4980
|
"type": {
|
|
4991
4981
|
"text": "'both' | 'category' | 'value' | undefined"
|
|
4992
4982
|
},
|
|
4993
|
-
"description": "Which rules are drawn across the plot, if any.\n\nAbsent draws none. `value` rules the axis the columns are *measured* on,\n`category` rules the axis they are *arranged* on with one through each\ngroup, and `both` draws both. Which of those is horizontal turns with\n`
|
|
4983
|
+
"description": "Which rules are drawn across the plot, if any.\n\nAbsent draws none. `value` rules the axis the columns are *measured* on,\n`category` rules the axis they are *arranged* on with one through each\ngroup, and `both` draws both. Which of those is horizontal turns with\n`orientation`, because a rule belongs to an axis and not to a screen edge.\n\n**A bare `gridlines` means `value`**, and so does anything unrecognized: an\nunrecognized value that draws nothing is indistinguishable from the\nattribute being absent, which is the one thing a reader cannot debug.\n\n`category` is the quieter half of this on a bar chart: columns already\ndivide the categories by being separate columns, and a rule through each\none is a second statement of the same fact. It earns its place on a chart\nof many thin bars, where the eye has stopped counting.\n\nFurniture rather than data, so the rules are inside the `aria-hidden` plot\nand reach no reader through the table.",
|
|
4994
4984
|
"attribute": "gridlines"
|
|
4995
4985
|
},
|
|
4996
4986
|
{
|
|
@@ -5002,6 +4992,16 @@
|
|
|
5002
4992
|
"description": "Which series are drawn as a line instead of as columns, by name.\n\nSeparated by whitespace or commas and matched against the column headings\nthe table gives, so a chart says `lines=\"Margin\"` rather than counting\ncolumns. Names because they are what the table already carries and what the\nlegend already shows: an index is a fourth place the column order is\nwritten down and the first one to go stale when somebody moves a column.\n\n**This says which mark a series takes and nothing about which scale it is\nmeasured on.** Named here alone, a line shares the columns' domain, so it\nsays something comparable to the columns beside it.\n\nThe other half of a combination chart, a count against a percentage on a\nscale of its own, is `secondary`, which is a separate property because it\nis a separate question and because the two compose: `with-a-second-axis`\nships naming one series in both. The argument for why a second scale is opt\nin, and why setting it labels both axes, is written there.\n\nA line among columns measures from zero, because the columns do and they\nshare the axis. So does a line on the second scale, which is that scale's\nown rule rather than this one's.",
|
|
5003
4993
|
"attribute": "lines"
|
|
5004
4994
|
},
|
|
4995
|
+
{
|
|
4996
|
+
"kind": "field",
|
|
4997
|
+
"name": "orientation",
|
|
4998
|
+
"type": {
|
|
4999
|
+
"text": "'horizontal' | undefined"
|
|
5000
|
+
},
|
|
5001
|
+
"description": "Whether the categories run down the side rather than along the bottom.\n\nAbsent is columns. `horizontal` is the one to reach for when the category\nnames are words rather than dates: a row of long names either overlaps or\nturns on its side, and neither is as readable as putting them down the left\nwhere they read normally.\n\n`orientation` and not `orientation`, which `Trend` uses in the same group for\nwhich way a number moved.",
|
|
5002
|
+
"attribute": "orientation",
|
|
5003
|
+
"reflects": true
|
|
5004
|
+
},
|
|
5005
5005
|
{
|
|
5006
5006
|
"kind": "field",
|
|
5007
5007
|
"name": "secondary",
|
|
@@ -5187,7 +5187,7 @@
|
|
|
5187
5187
|
}
|
|
5188
5188
|
}
|
|
5189
5189
|
],
|
|
5190
|
-
"description": "The grid, behind everything, or nothing at all.\n\nAcross the measured axis, which turns with `
|
|
5190
|
+
"description": "The grid, behind everything, or nothing at all.\n\nAcross the measured axis, which turns with `orientation`: a rule belongs to\nthe axis the bars are measured on and not the one they are arranged on, so\ncolumns get horizontal rules and rows get vertical ones. Getting that\nbackwards draws a grid that divides the categories, which are already\ndivided by being separate bars.\n\nDrawn before the baseline, so where a gridline and zero coincide the\nbaseline is what shows: zero is a fact about the data and a gridline is a\nruler."
|
|
5191
5191
|
},
|
|
5192
5192
|
{
|
|
5193
5193
|
"kind": "method",
|
|
@@ -5753,20 +5753,12 @@
|
|
|
5753
5753
|
}
|
|
5754
5754
|
],
|
|
5755
5755
|
"attributes": [
|
|
5756
|
-
{
|
|
5757
|
-
"name": "direction",
|
|
5758
|
-
"type": {
|
|
5759
|
-
"text": "'horizontal' | undefined"
|
|
5760
|
-
},
|
|
5761
|
-
"description": "Whether the categories run down the side rather than along the bottom.\n\nAbsent is columns. `horizontal` is the one to reach for when the category\nnames are words rather than dates: a row of long names either overlaps or\nturns on its side, and neither is as readable as putting them down the left\nwhere they read normally.",
|
|
5762
|
-
"fieldName": "direction"
|
|
5763
|
-
},
|
|
5764
5756
|
{
|
|
5765
5757
|
"name": "gridlines",
|
|
5766
5758
|
"type": {
|
|
5767
5759
|
"text": "'both' | 'category' | 'value' | undefined"
|
|
5768
5760
|
},
|
|
5769
|
-
"description": "Which rules are drawn across the plot, if any.\n\nAbsent draws none. `value` rules the axis the columns are *measured* on,\n`category` rules the axis they are *arranged* on with one through each\ngroup, and `both` draws both. Which of those is horizontal turns with\n`
|
|
5761
|
+
"description": "Which rules are drawn across the plot, if any.\n\nAbsent draws none. `value` rules the axis the columns are *measured* on,\n`category` rules the axis they are *arranged* on with one through each\ngroup, and `both` draws both. Which of those is horizontal turns with\n`orientation`, because a rule belongs to an axis and not to a screen edge.\n\n**A bare `gridlines` means `value`**, and so does anything unrecognized: an\nunrecognized value that draws nothing is indistinguishable from the\nattribute being absent, which is the one thing a reader cannot debug.\n\n`category` is the quieter half of this on a bar chart: columns already\ndivide the categories by being separate columns, and a rule through each\none is a second statement of the same fact. It earns its place on a chart\nof many thin bars, where the eye has stopped counting.\n\nFurniture rather than data, so the rules are inside the `aria-hidden` plot\nand reach no reader through the table.",
|
|
5770
5762
|
"fieldName": "gridlines"
|
|
5771
5763
|
},
|
|
5772
5764
|
{
|
|
@@ -5777,6 +5769,14 @@
|
|
|
5777
5769
|
"description": "Which series are drawn as a line instead of as columns, by name.\n\nSeparated by whitespace or commas and matched against the column headings\nthe table gives, so a chart says `lines=\"Margin\"` rather than counting\ncolumns. Names because they are what the table already carries and what the\nlegend already shows: an index is a fourth place the column order is\nwritten down and the first one to go stale when somebody moves a column.\n\n**This says which mark a series takes and nothing about which scale it is\nmeasured on.** Named here alone, a line shares the columns' domain, so it\nsays something comparable to the columns beside it.\n\nThe other half of a combination chart, a count against a percentage on a\nscale of its own, is `secondary`, which is a separate property because it\nis a separate question and because the two compose: `with-a-second-axis`\nships naming one series in both. The argument for why a second scale is opt\nin, and why setting it labels both axes, is written there.\n\nA line among columns measures from zero, because the columns do and they\nshare the axis. So does a line on the second scale, which is that scale's\nown rule rather than this one's.",
|
|
5778
5770
|
"fieldName": "lines"
|
|
5779
5771
|
},
|
|
5772
|
+
{
|
|
5773
|
+
"name": "orientation",
|
|
5774
|
+
"type": {
|
|
5775
|
+
"text": "'horizontal' | undefined"
|
|
5776
|
+
},
|
|
5777
|
+
"description": "Whether the categories run down the side rather than along the bottom.\n\nAbsent is columns. `horizontal` is the one to reach for when the category\nnames are words rather than dates: a row of long names either overlaps or\nturns on its side, and neither is as readable as putting them down the left\nwhere they read normally.\n\n`orientation` and not `orientation`, which `Trend` uses in the same group for\nwhich way a number moved.",
|
|
5778
|
+
"fieldName": "orientation"
|
|
5779
|
+
},
|
|
5780
5780
|
{
|
|
5781
5781
|
"name": "secondary",
|
|
5782
5782
|
"type": {
|
|
@@ -19169,17 +19169,13 @@
|
|
|
19169
19169
|
"name": "format-button"
|
|
19170
19170
|
},
|
|
19171
19171
|
{
|
|
19172
|
-
"description": "The saturation and brightness square.",
|
|
19172
|
+
"description": "The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.",
|
|
19173
19173
|
"name": "grid"
|
|
19174
19174
|
},
|
|
19175
19175
|
{
|
|
19176
19176
|
"description": "The range input for its vertical axis.",
|
|
19177
19177
|
"name": "grid-brightness"
|
|
19178
19178
|
},
|
|
19179
|
-
{
|
|
19180
|
-
"description": "The mark showing where in the square the color sits.",
|
|
19181
|
-
"name": "grid-handle"
|
|
19182
|
-
},
|
|
19183
19179
|
{
|
|
19184
19180
|
"description": "The range input for the square's horizontal axis.",
|
|
19185
19181
|
"name": "grid-saturation"
|
|
@@ -24745,7 +24741,7 @@
|
|
|
24745
24741
|
"declarations": [
|
|
24746
24742
|
{
|
|
24747
24743
|
"kind": "class",
|
|
24748
|
-
"description": "**The schema is markup and the data is a property.** Columns are declared as\n`TableColumn` children, because a schema is small and something a reader\nshould see in the HTML; rows are handed over as an array, because a table\nthat draws ten thousand elements cannot window them.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n <helix-headless-table-column field=\"size\" align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\n`Table` takes rows as markup and is the right component for a table of twelve\nthings a person wrote out.\n\n**Sort and filter apply to the whole set, never the page.** Sorting the drawn\nwindow is correct on the first screen and wrong on every other one.\n\n**The cell values do not server-render.** The headings do, and the row\nelements do, but reading a cell needs the columns, and the columns are markup\nchildren Lit SSR does not hand this element. So a crawler sees a table of the\nright shape with nothing in it. That is the cost of the first paragraph: use\n`Table` where the served HTML has to carry the values.\n\n**`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is\nselected by its identity rather than its position, so a selection survives a\nsort, a filter and a page. `selected` is the chosen keys, comma separated, the\nshape Listbox uses for a multiple choice, and like `sort` writing it applies\nwhile `default-selected` is what the markup declared. The box in the heading\nselects every row in the result, across pages, and shows a dash while only\nsome are chosen.\nChoosing one of many, rather than several, is opening a row, and that is a\nlink or a button in a cell rather than a selection.\n\n**A reader can size and order the columns.** `resizable` on a column puts a\nseparator on its edge; `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The order lands\nin `order` as fields, and the consumer's own markup is never rewritten: the\ntable assigns the headings to its header in that order instead.\n\n**`csv()` hands back the result as text**: every row the filter lets through,\nin the order on screen, in the columns on screen. Saving it is the page's\nbusiness, the same as any other file.\n\n**There is no `columns` attribute here, and Table has one.** The difference\nis what a column is in each: here it is the schema, so a table without one\nhas nothing to read a row with, and every column is a place to write a\n`width`. A Table holds cells a consumer wrote and can be written with no\ncolumn at all, so its `columns` is where such a table is sized from. Written\non this element the attribute is inert, which is the trap worth knowing when\nmoving between the two.",
|
|
24744
|
+
"description": "**The schema is markup and the data is a property.** Columns are declared as\n`TableColumn` children, because a schema is small and something a reader\nshould see in the HTML; rows are handed over as an array, because a table\nthat draws ten thousand elements cannot window them.\n\n```html\n<helix-headless-data-table .rows=${rows} sort=\"name:asc\" page-size=\"20\">\n <helix-headless-table-column field=\"name\" sortable>Name</helix-headless-table-column>\n <helix-headless-table-column field=\"size\" text-align=\"end\" sortable .cell=${bytes}>Size</helix-headless-table-column>\n</helix-headless-data-table>\n```\n\n`Table` takes rows as markup and is the right component for a table of twelve\nthings a person wrote out.\n\n**Sort and filter apply to the whole set, never the page.** Sorting the drawn\nwindow is correct on the first screen and wrong on every other one.\n\n**The cell values do not server-render.** The headings do, and the row\nelements do, but reading a cell needs the columns, and the columns are markup\nchildren Lit SSR does not hand this element. So a crawler sees a table of the\nright shape with nothing in it. That is the cost of the first paragraph: use\n`Table` where the served HTML has to carry the values.\n\n**`selectable` adds a column of checkboxes, keyed on `row-key`.** A row is\nselected by its identity rather than its position, so a selection survives a\nsort, a filter and a page. `selected` is the chosen keys, comma separated, the\nshape Listbox uses for a multiple choice, and like `sort` writing it applies\nwhile `default-selected` is what the markup declared. The box in the heading\nselects every row in the result, across pages, and shows a dash while only\nsome are chosen.\nChoosing one of many, rather than several, is opening a row, and that is a\nlink or a button in a cell rather than a selection.\n\n**A reader can size and order the columns.** `resizable` on a column puts a\nseparator on its edge; `reorderable` on the table puts a grip on each heading\nthat has a `field`, moved by dragging or with the arrow keys. The order lands\nin `order` as fields, and the consumer's own markup is never rewritten: the\ntable assigns the headings to its header in that order instead.\n\n**`csv()` hands back the result as text**: every row the filter lets through,\nin the order on screen, in the columns on screen. Saving it is the page's\nbusiness, the same as any other file.\n\n**There is no `columns` attribute here, and Table has one.** The difference\nis what a column is in each: here it is the schema, so a table without one\nhas nothing to read a row with, and every column is a place to write a\n`width`. A Table holds cells a consumer wrote and can be written with no\ncolumn at all, so its `columns` is where such a table is sized from. Written\non this element the attribute is inert, which is the trap worth knowing when\nmoving between the two.",
|
|
24749
24745
|
"name": "HelixHeadlessDataTable",
|
|
24750
24746
|
"cssProperties": [
|
|
24751
24747
|
{
|
|
@@ -25790,7 +25786,7 @@
|
|
|
25790
25786
|
}
|
|
25791
25787
|
}
|
|
25792
25788
|
],
|
|
25793
|
-
"description": "One cell, carrying its column's edge as a fact rather than as a decision.\n\n**A fact published rather than a property chosen**, which is what `Table`\ndoes with the same attribute: what lining up *means*, a `justify-content`\nfor a value that fits or a `text-align` for one that wraps, belongs to\nwhoever draws the cell. Written here as an inline `text-align` it was this\ntier choosing, in the tier that ships no CSS, and a consumer could not\noverrule it either, an inline declaration beating any `::part(cell)` rule\nthey wrote.\n\nOnly the three edges reach it, `align` being a string anybody can write and\nthis being a style attribute: `edgeOf` is that guard, and `Table` holds the\nsame value to the same three."
|
|
25789
|
+
"description": "One cell, carrying its column's edge as a fact rather than as a decision.\n\n**A fact published rather than a property chosen**, which is what `Table`\ndoes with the same attribute: what lining up *means*, a `justify-content`\nfor a value that fits or a `text-align` for one that wraps, belongs to\nwhoever draws the cell. Written here as an inline `text-align` it was this\ntier choosing, in the tier that ships no CSS, and a consumer could not\noverrule it either, an inline declaration beating any `::part(cell)` rule\nthey wrote.\n\nOnly the three edges reach it, `text-align` being a string anybody can write and\nthis being a style attribute: `edgeOf` is that guard, and `Table` holds the\nsame value to the same three."
|
|
25794
25790
|
},
|
|
25795
25791
|
{
|
|
25796
25792
|
"kind": "method",
|
|
@@ -49308,7 +49304,7 @@
|
|
|
49308
49304
|
"name": "HelixHeadlessLegend",
|
|
49309
49305
|
"cssParts": [
|
|
49310
49306
|
{
|
|
49311
|
-
"description": "One name and its swatch.",
|
|
49307
|
+
"description": "One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.",
|
|
49312
49308
|
"name": "entry"
|
|
49313
49309
|
},
|
|
49314
49310
|
{
|
|
@@ -49318,10 +49314,6 @@
|
|
|
49318
49314
|
{
|
|
49319
49315
|
"description": "One series name.",
|
|
49320
49316
|
"name": "name"
|
|
49321
|
-
},
|
|
49322
|
-
{
|
|
49323
|
-
"description": "The color a series is drawn in.",
|
|
49324
|
-
"name": "swatch"
|
|
49325
49317
|
}
|
|
49326
49318
|
],
|
|
49327
49319
|
"members": [
|
|
@@ -54072,13 +54064,13 @@
|
|
|
54072
54064
|
"members": [
|
|
54073
54065
|
{
|
|
54074
54066
|
"kind": "field",
|
|
54075
|
-
"name": "
|
|
54067
|
+
"name": "bandBelow",
|
|
54076
54068
|
"type": {
|
|
54077
54069
|
"text": "number"
|
|
54078
54070
|
},
|
|
54079
54071
|
"default": "640",
|
|
54080
54072
|
"description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
|
|
54081
|
-
"attribute": "
|
|
54073
|
+
"attribute": "band-below"
|
|
54082
54074
|
},
|
|
54083
54075
|
{
|
|
54084
54076
|
"kind": "field",
|
|
@@ -54104,9 +54096,9 @@
|
|
|
54104
54096
|
"kind": "field",
|
|
54105
54097
|
"name": "variant",
|
|
54106
54098
|
"type": {
|
|
54107
|
-
"text": "'
|
|
54099
|
+
"text": "'band' | undefined"
|
|
54108
54100
|
},
|
|
54109
|
-
"description": "Whether the panel is a card under the trigger or a band across the page.\n\nThe resting one is the card, hanging off the trigger and as wide as it\nneeds to be. `
|
|
54101
|
+
"description": "Whether the panel is a card under the trigger or a band across the page.\n\nThe resting one is the card, hanging off the trigger and as wide as it\nneeds to be. `band` is the other shape navigations use: a run from edge to\nedge under the header, with its contents held to the page's own measure, so\na set of destinations too wide to sit under one word gets the whole width\nto lay out in.\n\n**A band and not a width, which is why the word is not `full`.** It changes\nwhere the panel goes as well as how wide it is, which is why this tier\nknows about it at all: a band spans the viewport, so there is nothing to\nmeasure it against and nothing to flip or shift to, and the placing pass is\ntold not to run. Everything else the popover gives, the top layer and the\ndismissal, is exactly what such a band needs. `full` is the registry's word\nfor a width, and `Button` and `Dialog` are the two families answering that\nquestion; borrowing it here would put a third meaning on it.\n\n`variant` and not an axis, for the reason the registry gives: a card under\na word and a band under a header are two arrangements this family has, and\nno other family is being asked the same question.",
|
|
54110
54102
|
"attribute": "variant",
|
|
54111
54103
|
"reflects": true
|
|
54112
54104
|
},
|
|
@@ -54805,13 +54797,13 @@
|
|
|
54805
54797
|
],
|
|
54806
54798
|
"attributes": [
|
|
54807
54799
|
{
|
|
54808
|
-
"name": "
|
|
54800
|
+
"name": "band-below",
|
|
54809
54801
|
"type": {
|
|
54810
54802
|
"text": "number"
|
|
54811
54803
|
},
|
|
54812
54804
|
"default": "640",
|
|
54813
54805
|
"description": "The width, in pixels, under which a card becomes a band. Zero never does.\n\nA card is a panel hung off one word, and there is no room to hang anything\noff a word on a phone: the columns do not shrink past\n`--megamenu-column-size`, so four of them stay four of them and the panel\nruns off the side of the screen rather than reflowing. Below this it takes\nthe whole width and its columns stack, which is the only arrangement that\nfits.\n\n**In script rather than a media query, and only once.** Whether the panel is\na band is not a question of paint: a band is not placed against the trigger,\nso the controller has to be told not to measure, and that decision is here\nwhatever the stylesheet says. Writing the width in both places would be one\nnumber in two languages, drifting the first time either moved. This records\n`:state(narrow)` on the host and the stylesheet arranges itself off that.\n\n**A custom state and never `data-narrow`, which is what it was.** The width\nis read in `connectedCallback`, so on a phone this is true on the very first\nupdate: an attribute written there is markup a consumer's server never sent,\nwhich React reports as a mismatch and answers by rebuilding the subtree. The\nnarrow exception the server specs describe covers a mirror that can only\nbecome true long after hydration, and a viewport measured before the first\npaint is the opposite case. See `MixinControllerOpen` on `open`.",
|
|
54814
|
-
"fieldName": "
|
|
54806
|
+
"fieldName": "bandBelow"
|
|
54815
54807
|
},
|
|
54816
54808
|
{
|
|
54817
54809
|
"name": "label",
|
|
@@ -54834,9 +54826,9 @@
|
|
|
54834
54826
|
{
|
|
54835
54827
|
"name": "variant",
|
|
54836
54828
|
"type": {
|
|
54837
|
-
"text": "'
|
|
54829
|
+
"text": "'band' | undefined"
|
|
54838
54830
|
},
|
|
54839
|
-
"description": "Whether the panel is a card under the trigger or a band across the page.\n\nThe resting one is the card, hanging off the trigger and as wide as it\nneeds to be. `
|
|
54831
|
+
"description": "Whether the panel is a card under the trigger or a band across the page.\n\nThe resting one is the card, hanging off the trigger and as wide as it\nneeds to be. `band` is the other shape navigations use: a run from edge to\nedge under the header, with its contents held to the page's own measure, so\na set of destinations too wide to sit under one word gets the whole width\nto lay out in.\n\n**A band and not a width, which is why the word is not `full`.** It changes\nwhere the panel goes as well as how wide it is, which is why this tier\nknows about it at all: a band spans the viewport, so there is nothing to\nmeasure it against and nothing to flip or shift to, and the placing pass is\ntold not to run. Everything else the popover gives, the top layer and the\ndismissal, is exactly what such a band needs. `full` is the registry's word\nfor a width, and `Button` and `Dialog` are the two families answering that\nquestion; borrowing it here would put a third meaning on it.\n\n`variant` and not an axis, for the reason the registry gives: a card under\na word and a band under a header are two arrangements this family has, and\nno other family is being asked the same question.",
|
|
54840
54832
|
"fieldName": "variant"
|
|
54841
54833
|
},
|
|
54842
54834
|
{
|
|
@@ -54867,7 +54859,7 @@
|
|
|
54867
54859
|
],
|
|
54868
54860
|
"cssStates": [
|
|
54869
54861
|
{
|
|
54870
|
-
"description": "While the page is under `
|
|
54862
|
+
"description": "While the page is under `band-below`, so the panel is a band whether or not one was asked for.",
|
|
54871
54863
|
"name": "narrow"
|
|
54872
54864
|
},
|
|
54873
54865
|
{
|
|
@@ -71873,7 +71865,7 @@
|
|
|
71873
71865
|
"name": "HelixHeadlessRadio",
|
|
71874
71866
|
"cssParts": [
|
|
71875
71867
|
{
|
|
71876
|
-
"description": "The circle.",
|
|
71868
|
+
"description": "The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
|
|
71877
71869
|
"name": "box"
|
|
71878
71870
|
},
|
|
71879
71871
|
{
|
|
@@ -71883,10 +71875,6 @@
|
|
|
71883
71875
|
{
|
|
71884
71876
|
"description": "The words beside it.",
|
|
71885
71877
|
"name": "label"
|
|
71886
|
-
},
|
|
71887
|
-
{
|
|
71888
|
-
"description": "The dot inside it.",
|
|
71889
|
-
"name": "mark"
|
|
71890
71878
|
}
|
|
71891
71879
|
],
|
|
71892
71880
|
"slots": [
|
|
@@ -83878,7 +83866,7 @@
|
|
|
83878
83866
|
"declarations": [
|
|
83879
83867
|
{
|
|
83880
83868
|
"kind": "class",
|
|
83881
|
-
"description": "**The name is a button, and only the name.** The marker is `aria-hidden`\ndecoration, so wrapping it would add hit area and no meaning. It is `Button`\nrather than a `<button>` this element resets: the hover wash, the focus ring\nand the disabled treatment are decisions the button carries.\n\n**It says nothing about where a reader may go.** Every step is pressable and\nannounces itself with `helix-select`; refusing the ones ahead is `disabled`,\nwhich the consumer sets, because only they know whether a form can be\nskipped.\n\n**The marker is a slot whose fallback is the state.** A finished stage shows\na check, the current one a target, one not yet reached an empty ring. Exactly\none is rendered, chosen from the step's own two booleans, rather than three\nwith two hidden in CSS: the accessibility tree would otherwise carry marks\nthat are not there.",
|
|
83869
|
+
"description": "**The name is a button, and only the name.** The marker is `aria-hidden`\ndecoration, so wrapping it would add hit area and no meaning. It is `Button`\nrather than a `<button>` this element resets: the hover wash, the focus ring\nand the disabled treatment are decisions the button carries.\n\n**It says nothing about where a reader may go.** Every step is pressable and\nannounces itself with `helix-select`; refusing the ones ahead is `disabled`,\nwhich the consumer sets, because only they know whether a form can be\nskipped.\n\n**The marker is a slot whose fallback is the state.** A finished stage shows\na check, the current one a target, one not yet reached an empty ring. Exactly\none is rendered, chosen from the step's own two booleans, rather than three\nwith two hidden in CSS: the accessibility tree would otherwise carry marks\nthat are not there.\n\n**The two half lines either side of the mark are a sheet's, on `::before` and\n`::after` of the step.** Both are placed entirely from properties the list\nhands down, so there was nothing about them for a box to carry, and this tier\nships no CSS: a box it rendered for one to paint would be an empty child\ncosting whatever the consumer's own layout charges for a child. `ListItem`\nmeasured that.",
|
|
83882
83870
|
"name": "HelixHeadlessStep",
|
|
83883
83871
|
"cssParts": [
|
|
83884
83872
|
{
|
|
@@ -83901,10 +83889,6 @@
|
|
|
83901
83889
|
"description": "The inner control.",
|
|
83902
83890
|
"name": "label-button"
|
|
83903
83891
|
},
|
|
83904
|
-
{
|
|
83905
|
-
"description": "The half line arriving from the step before.",
|
|
83906
|
-
"name": "lead"
|
|
83907
|
-
},
|
|
83908
83892
|
{
|
|
83909
83893
|
"description": "The glyph inside the marker: a tick, a dot, or an empty ring.",
|
|
83910
83894
|
"name": "mark"
|
|
@@ -83912,10 +83896,6 @@
|
|
|
83912
83896
|
{
|
|
83913
83897
|
"description": "The shape carrying the number or the check.",
|
|
83914
83898
|
"name": "marker"
|
|
83915
|
-
},
|
|
83916
|
-
{
|
|
83917
|
-
"description": "The half line running on to the next.",
|
|
83918
|
-
"name": "trail"
|
|
83919
83899
|
}
|
|
83920
83900
|
],
|
|
83921
83901
|
"slots": [
|
|
@@ -84484,11 +84464,7 @@
|
|
|
84484
84464
|
"name": "label"
|
|
84485
84465
|
},
|
|
84486
84466
|
{
|
|
84487
|
-
"description": "The
|
|
84488
|
-
"name": "thumb"
|
|
84489
|
-
},
|
|
84490
|
-
{
|
|
84491
|
-
"description": "The groove the thumb travels in.",
|
|
84467
|
+
"description": "The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
|
|
84492
84468
|
"name": "track"
|
|
84493
84469
|
}
|
|
84494
84470
|
],
|
|
@@ -86087,11 +86063,11 @@
|
|
|
86087
86063
|
}
|
|
86088
86064
|
}
|
|
86089
86065
|
],
|
|
86090
|
-
"description": "The edge a column names, where it names one of the three.\n\n**`align` is a string anybody can write**, the union on the property being a\ncompile-time claim and nothing else, and both tables put the value straight\ninto CSS: `Table` into a rule in each row's shadow root, `DataTable` into the\ncell it draws. One guard, here with the property, rather than one in each\ntable and only one of them written."
|
|
86066
|
+
"description": "The edge a column names, where it names one of the three.\n\n**`text-align` is a string anybody can write**, the union on the property being a\ncompile-time claim and nothing else, and both tables put the value straight\ninto CSS: `Table` into a rule in each row's shadow root, `DataTable` into the\ncell it draws. One guard, here with the property, rather than one in each\ntable and only one of them written."
|
|
86091
86067
|
},
|
|
86092
86068
|
{
|
|
86093
86069
|
"kind": "class",
|
|
86094
|
-
"description": "**The column is the source of both its heading and its track.** Add one and\nthe table has another track; remove one and it does not. That is what ties\nthe two together, and a table-level track list on its own does not: a list\nthat is accidentally the headings is invalid CSS a grid ignores in silence,\ndrawing the whole table as one column. `Table`'s `columns` is dealt out a\ntrack at a time against the columns declared under it, so a heading among the\nwidths costs its own column a width and no more, and a list longer or shorter\nthan the columns is trimmed or shared rather than being a second count of\nthem. A column's own `width` wins over the track in its place.\n\n**It is also where every per-column fact goes**, which is the reason\n`DataTable` needs no column config object. `field` names the key the cell\nreads, `sortable` says a reader may reorder by it, `align` says which edge\nthe values line up against, and `cell` takes a function for anything the\nfield alone cannot express. The schema is markup and the data is a property:\na schema is small, declarative, and something a reader should be able to see\nin the HTML, and data is large and windowed.\n\n**The same element serves both tables**, the markup one and the data one. It\nis identified by a flag rather than by `instanceof`, so a `TableColumn` works\ninside either without the two roots sharing anything else.\n\n**It generates no box of its own**, the same as a row: the heading is a grid\nitem of the table, so it lines up with the cells under it rather than sitting\nin a wrapper that has to be kept the same width.\n\n**`hidden` takes the column out of the grid**, its heading and its track\nboth, so the columns after it keep their own widths and every row keeps its\ncells under their headings. `hidden=\"until-found\"` keeps its track, the\nheading being left drawn, as every Helix element leaves one with that value.\n`DataTable` draws the cells, so it leaves out the ones under a hidden column.\nA `Table`'s cells are markup the consumer wrote, so hide them with the\ncolumn, as removing a column means removing its cells: a row with a cell more\nthan the table has tracks wraps into the next.\n\n**A heading that does something holds a control that does it.** The host is\nthe column header, and a header is not focusable, so a sortable heading is a\n`<button>` inside it: the pattern for a sortable table, and the only way a\nreader on a keyboard reaches the sort at all. A column a reader may resize\ncarries a `separator` on its end edge, moved by dragging it or with the arrow\nkeys, and a column in a table that lets a reader reorder its columns carries\na grip the table moves.",
|
|
86070
|
+
"description": "**The column is the source of both its heading and its track.** Add one and\nthe table has another track; remove one and it does not. That is what ties\nthe two together, and a table-level track list on its own does not: a list\nthat is accidentally the headings is invalid CSS a grid ignores in silence,\ndrawing the whole table as one column. `Table`'s `columns` is dealt out a\ntrack at a time against the columns declared under it, so a heading among the\nwidths costs its own column a width and no more, and a list longer or shorter\nthan the columns is trimmed or shared rather than being a second count of\nthem. A column's own `width` wins over the track in its place.\n\n**It is also where every per-column fact goes**, which is the reason\n`DataTable` needs no column config object. `field` names the key the cell\nreads, `sortable` says a reader may reorder by it, `text-align` says which edge\nthe values line up against, and `cell` takes a function for anything the\nfield alone cannot express. The schema is markup and the data is a property:\na schema is small, declarative, and something a reader should be able to see\nin the HTML, and data is large and windowed.\n\n**The same element serves both tables**, the markup one and the data one. It\nis identified by a flag rather than by `instanceof`, so a `TableColumn` works\ninside either without the two roots sharing anything else.\n\n**It generates no box of its own**, the same as a row: the heading is a grid\nitem of the table, so it lines up with the cells under it rather than sitting\nin a wrapper that has to be kept the same width.\n\n**`hidden` takes the column out of the grid**, its heading and its track\nboth, so the columns after it keep their own widths and every row keeps its\ncells under their headings. `hidden=\"until-found\"` keeps its track, the\nheading being left drawn, as every Helix element leaves one with that value.\n`DataTable` draws the cells, so it leaves out the ones under a hidden column.\nA `Table`'s cells are markup the consumer wrote, so hide them with the\ncolumn, as removing a column means removing its cells: a row with a cell more\nthan the table has tracks wraps into the next.\n\n**A heading that does something holds a control that does it.** The host is\nthe column header, and a header is not focusable, so a sortable heading is a\n`<button>` inside it: the pattern for a sortable table, and the only way a\nreader on a keyboard reaches the sort at all. A column a reader may resize\ncarries a `separator` on its end edge, moved by dragging it or with the arrow\nkeys, and a column in a table that lets a reader reorder its columns carries\na grip the table moves.",
|
|
86095
86071
|
"name": "HelixHeadlessTableColumn",
|
|
86096
86072
|
"cssParts": [
|
|
86097
86073
|
{
|
|
@@ -86122,16 +86098,6 @@
|
|
|
86122
86098
|
}
|
|
86123
86099
|
],
|
|
86124
86100
|
"members": [
|
|
86125
|
-
{
|
|
86126
|
-
"kind": "field",
|
|
86127
|
-
"name": "align",
|
|
86128
|
-
"type": {
|
|
86129
|
-
"text": "'center' | 'end' | 'start' | undefined"
|
|
86130
|
-
},
|
|
86131
|
-
"description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude\nsit above each other. Left unset the cell inherits the table's own\nalignment, which is `start` for text in either writing direction.\n`DataTable` aligns the cells it draws. A `Table`'s cells are markup the\nconsumer wrote, so the table writes nothing onto them: it publishes the\nedge to each cell under this column as `--table-cell-align`, which\n`@fusion.dev/helix` reads. The heading is this element's own, and\n`@fusion.dev/helix` sets it to the same edge in either table. `end` is the\ninline end, so in a right-to-left table it is the left.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected `align` left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
|
|
86132
|
-
"attribute": "align",
|
|
86133
|
-
"reflects": true
|
|
86134
|
-
},
|
|
86135
86101
|
{
|
|
86136
86102
|
"kind": "field",
|
|
86137
86103
|
"name": "cell",
|
|
@@ -86181,6 +86147,16 @@
|
|
|
86181
86147
|
"attribute": "sortable",
|
|
86182
86148
|
"reflects": true
|
|
86183
86149
|
},
|
|
86150
|
+
{
|
|
86151
|
+
"kind": "field",
|
|
86152
|
+
"name": "textAlign",
|
|
86153
|
+
"type": {
|
|
86154
|
+
"text": "'center' | 'end' | 'start' | undefined"
|
|
86155
|
+
},
|
|
86156
|
+
"description": "Which edge the values line up against.\n\n**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS\nbox-alignment question, where a thing sits in a container, and they are\nnamed for the properties they mirror; this is `text-align` down a column of\nvalues, and `Dialog` answers the same question under the same name. One\nword for both questions is how a consumer who learned it on a layout writes\nit here and gets no error, a value a component does not have leaving the\ndefault in place and looking deliberate.\n\n`end` is what a column of numbers wants, so digits of the same magnitude\nsit above each other. Left unset the cell inherits the table's own\nalignment, which is `start` for text in either writing direction.\n`DataTable` aligns the cells it draws. A `Table`'s cells are markup the\nconsumer wrote, so the table writes nothing onto them: it publishes the\nedge to each cell under this column as `--table-cell-align`, which\n`@fusion.dev/helix` reads. The heading is this element's own, and\n`@fusion.dev/helix` sets it to the same edge in either table. `end` is the\ninline end, so in a right-to-left table it is the left.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected edge left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
|
|
86157
|
+
"attribute": "text-align",
|
|
86158
|
+
"reflects": true
|
|
86159
|
+
},
|
|
86184
86160
|
{
|
|
86185
86161
|
"kind": "field",
|
|
86186
86162
|
"name": "width",
|
|
@@ -86731,14 +86707,6 @@
|
|
|
86731
86707
|
}
|
|
86732
86708
|
],
|
|
86733
86709
|
"attributes": [
|
|
86734
|
-
{
|
|
86735
|
-
"name": "align",
|
|
86736
|
-
"type": {
|
|
86737
|
-
"text": "'center' | 'end' | 'start' | undefined"
|
|
86738
|
-
},
|
|
86739
|
-
"description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude\nsit above each other. Left unset the cell inherits the table's own\nalignment, which is `start` for text in either writing direction.\n`DataTable` aligns the cells it draws. A `Table`'s cells are markup the\nconsumer wrote, so the table writes nothing onto them: it publishes the\nedge to each cell under this column as `--table-cell-align`, which\n`@fusion.dev/helix` reads. The heading is this element's own, and\n`@fusion.dev/helix` sets it to the same edge in either table. `end` is the\ninline end, so in a right-to-left table it is the left.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected `align` left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
|
|
86740
|
-
"fieldName": "align"
|
|
86741
|
-
},
|
|
86742
86710
|
{
|
|
86743
86711
|
"name": "field",
|
|
86744
86712
|
"type": {
|
|
@@ -86766,6 +86734,14 @@
|
|
|
86766
86734
|
"description": "Whether a reader may reorder the set by this column.\n\nIgnored without a `field`, and silently: a column with nothing to sort by\nhas no order to offer, and refusing loudly would mean an actions column\ncarrying `sortable` breaks a table rather than doing nothing.\n\n**Reflected, because a stylesheet selects on it.** `@fusion.dev/helix`\ngives a data table's sortable headings a pointer through\n`::slotted(helix-table-column[sortable])`, and set as a property, which is\nhow React sets it, an unreflected `sortable` left no attribute to match.\n`false` reflects as no attribute at all, so an unset column writes nothing\nonto its host.",
|
|
86767
86735
|
"fieldName": "sortable"
|
|
86768
86736
|
},
|
|
86737
|
+
{
|
|
86738
|
+
"name": "text-align",
|
|
86739
|
+
"type": {
|
|
86740
|
+
"text": "'center' | 'end' | 'start' | undefined"
|
|
86741
|
+
},
|
|
86742
|
+
"description": "Which edge the values line up against.\n\n**Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS\nbox-alignment question, where a thing sits in a container, and they are\nnamed for the properties they mirror; this is `text-align` down a column of\nvalues, and `Dialog` answers the same question under the same name. One\nword for both questions is how a consumer who learned it on a layout writes\nit here and gets no error, a value a component does not have leaving the\ndefault in place and looking deliberate.\n\n`end` is what a column of numbers wants, so digits of the same magnitude\nsit above each other. Left unset the cell inherits the table's own\nalignment, which is `start` for text in either writing direction.\n`DataTable` aligns the cells it draws. A `Table`'s cells are markup the\nconsumer wrote, so the table writes nothing onto them: it publishes the\nedge to each cell under this column as `--table-cell-align`, which\n`@fusion.dev/helix` reads. The heading is this element's own, and\n`@fusion.dev/helix` sets it to the same edge in either table. `end` is the\ninline end, so in a right-to-left table it is the left.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected edge left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
|
|
86743
|
+
"fieldName": "textAlign"
|
|
86744
|
+
},
|
|
86769
86745
|
{
|
|
86770
86746
|
"name": "width",
|
|
86771
86747
|
"type": {
|
|
@@ -87027,7 +87003,7 @@
|
|
|
87027
87003
|
},
|
|
87028
87004
|
"privacy": "private",
|
|
87029
87005
|
"default": "undefined",
|
|
87030
|
-
"description": "The rules handing each column's `align` to the cells under it. One sheet for\nevery row this table holds, rewritten in place, so a column changing its\nedge reaches every row in one write."
|
|
87006
|
+
"description": "The rules handing each column's `text-align` to the cells under it. One sheet for\nevery row this table holds, rewritten in place, so a column changing its\nedge reaches every row in one write."
|
|
87031
87007
|
},
|
|
87032
87008
|
{
|
|
87033
87009
|
"kind": "field",
|
|
@@ -95705,10 +95681,6 @@
|
|
|
95705
95681
|
"description": "**The time is a `<time>`, and only when there is a time to put in it.** Given\n`datetime`, the label a consumer wrote is wrapped in the element the platform\nhas for exactly this, so the machine-readable instant travels with the human\none: a crawler, a reader's own tooling and a copy-paste all get \"2026-08-19\",\nwhere \"yesterday\" on its own is a word. Given no `datetime`, it stays a span,\nbecause a `<time>` with nothing to be precise about is markup pretending.\n\n**The connector is this element's, not the list's.** Each entry draws the line\nthat arrives at it and hides it when it is first, which `:host(:first-child)`\nsettles with no index, no counting parent and no script. `Steps` and\n`Breadcrumbs` both do it this way and for the same reason.\n\n`tone` says what kind of event it was, and it is the only thing that colors\nthe mark. It takes `Announcement`'s vocabulary rather than a second one.",
|
|
95706
95682
|
"name": "HelixHeadlessTimelineItem",
|
|
95707
95683
|
"cssParts": [
|
|
95708
|
-
{
|
|
95709
|
-
"description": "The line arriving at this entry.",
|
|
95710
|
-
"name": "connector"
|
|
95711
|
-
},
|
|
95712
95684
|
{
|
|
95713
95685
|
"description": "What happened, and the time above it.",
|
|
95714
95686
|
"name": "content"
|
|
@@ -95722,7 +95694,7 @@
|
|
|
95722
95694
|
"name": "marker"
|
|
95723
95695
|
},
|
|
95724
95696
|
{
|
|
95725
|
-
"description": "The column holding the mark and the line.",
|
|
95697
|
+
"description": "The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
|
|
95726
95698
|
"name": "rail"
|
|
95727
95699
|
},
|
|
95728
95700
|
{
|
|
@@ -97796,10 +97768,6 @@
|
|
|
97796
97768
|
"description": "The indicator is one element that travels, not a background that appears on\nwhichever item is current. A fill that swaps is two things changing at once\nand reads as a flicker; one that moves is a single object the eye follows,\nand it says where the selection came from as well as where it went.\n\nIts box is measured from the selected item and written onto the indicator as\ncustom properties, labels being different lengths. Measurement is client-side\nby necessity, so the server renders the indicator hidden and it fades in once\nit has somewhere to be, which is the harmless direction.",
|
|
97797
97769
|
"name": "HelixHeadlessToggleGroup",
|
|
97798
97770
|
"cssParts": [
|
|
97799
|
-
{
|
|
97800
|
-
"description": "The rule after an inline label, separating it from the items.",
|
|
97801
|
-
"name": "divider"
|
|
97802
|
-
},
|
|
97803
97771
|
{
|
|
97804
97772
|
"description": "What is wrong with it.",
|
|
97805
97773
|
"name": "feedback"
|
|
@@ -97821,7 +97789,7 @@
|
|
|
97821
97789
|
"name": "row"
|
|
97822
97790
|
},
|
|
97823
97791
|
{
|
|
97824
|
-
"description": "The bar the items sit in.",
|
|
97792
|
+
"description": "The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
|
|
97825
97793
|
"name": "track"
|
|
97826
97794
|
}
|
|
97827
97795
|
],
|
|
@@ -107374,13 +107342,9 @@
|
|
|
107374
107342
|
"name": "fullscreen"
|
|
107375
107343
|
},
|
|
107376
107344
|
{
|
|
107377
|
-
"description": "What is said while the picture waits for more of itself.",
|
|
107345
|
+
"description": "What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
|
|
107378
107346
|
"name": "loading"
|
|
107379
107347
|
},
|
|
107380
|
-
{
|
|
107381
|
-
"description": "The part of that which spins.",
|
|
107382
|
-
"name": "loading-mark"
|
|
107383
|
-
},
|
|
107384
107348
|
{
|
|
107385
107349
|
"description": "The button that opens it.",
|
|
107386
107350
|
"name": "more"
|
|
@@ -72,22 +72,13 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
|
|
|
72
72
|
* `wash="gradient"` asks for it.
|
|
73
73
|
*/
|
|
74
74
|
export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
|
|
75
|
-
/**
|
|
76
|
-
* Whether the categories run down the side rather than along the bottom.
|
|
77
|
-
*
|
|
78
|
-
* Absent is columns. `horizontal` is the one to reach for when the category
|
|
79
|
-
* names are words rather than dates: a row of long names either overlaps or
|
|
80
|
-
* turns on its side, and neither is as readable as putting them down the left
|
|
81
|
-
* where they read normally.
|
|
82
|
-
*/
|
|
83
|
-
direction?: 'horizontal';
|
|
84
75
|
/**
|
|
85
76
|
* Which rules are drawn across the plot, if any.
|
|
86
77
|
*
|
|
87
78
|
* Absent draws none. `value` rules the axis the columns are *measured* on,
|
|
88
79
|
* `category` rules the axis they are *arranged* on with one through each
|
|
89
80
|
* group, and `both` draws both. Which of those is horizontal turns with
|
|
90
|
-
* `
|
|
81
|
+
* `orientation`, because a rule belongs to an axis and not to a screen edge.
|
|
91
82
|
*
|
|
92
83
|
* **A bare `gridlines` means `value`**, and so does anything unrecognized: an
|
|
93
84
|
* unrecognized value that draws nothing is indistinguishable from the
|
|
@@ -126,6 +117,18 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
|
|
|
126
117
|
* own rule rather than this one's.
|
|
127
118
|
*/
|
|
128
119
|
lines?: string;
|
|
120
|
+
/**
|
|
121
|
+
* Whether the categories run down the side rather than along the bottom.
|
|
122
|
+
*
|
|
123
|
+
* Absent is columns. `horizontal` is the one to reach for when the category
|
|
124
|
+
* names are words rather than dates: a row of long names either overlaps or
|
|
125
|
+
* turns on its side, and neither is as readable as putting them down the left
|
|
126
|
+
* where they read normally.
|
|
127
|
+
*
|
|
128
|
+
* `orientation` and not `orientation`, which `Trend` uses in the same group for
|
|
129
|
+
* which way a number moved.
|
|
130
|
+
*/
|
|
131
|
+
orientation?: 'horizontal';
|
|
129
132
|
/**
|
|
130
133
|
* Which series are measured against a scale of their own, by name.
|
|
131
134
|
*
|
|
@@ -172,7 +175,7 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
|
|
|
172
175
|
/**
|
|
173
176
|
* Tells the pointer which way the categories run.
|
|
174
177
|
*
|
|
175
|
-
* In `willUpdate` because `
|
|
178
|
+
* In `willUpdate` because `orientation` is a property a consumer can change at
|
|
176
179
|
* any time, and the controller resolves a reading from whichever axis it was
|
|
177
180
|
* last told about: set once at connect, a chart turned sideways after that
|
|
178
181
|
* goes on reading x and answers with the same row wherever the pointer goes.
|
|
@@ -220,7 +223,7 @@ export declare class HelixHeadlessBarChart extends HelixHeadlessBarChart_base {
|
|
|
220
223
|
/**
|
|
221
224
|
* The grid, behind everything, or nothing at all.
|
|
222
225
|
*
|
|
223
|
-
* Across the measured axis, which turns with `
|
|
226
|
+
* Across the measured axis, which turns with `orientation`: a rule belongs to
|
|
224
227
|
* the axis the bars are measured on and not the one they are arranged on, so
|
|
225
228
|
* columns get horizontal rules and rows get vertical ones. Getting that
|
|
226
229
|
* backwards draws a grid that divides the categories, which are already
|
|
@@ -23,7 +23,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
|
|
|
23
23
|
}
|
|
24
24
|
willUpdate(changed) {
|
|
25
25
|
super.willUpdate(changed);
|
|
26
|
-
this.pointer.axis = this.
|
|
26
|
+
this.pointer.axis = this.orientation === 'horizontal' ? 'block' : 'inline';
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
29
|
const series = this.series;
|
|
@@ -40,10 +40,10 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
|
|
|
40
40
|
};
|
|
41
41
|
const [low, high] = extent(scaled.size === 0 ? on(() => true) : on((one) => !own(one)));
|
|
42
42
|
const domain = [Math.min(0, low), Math.max(0, high)];
|
|
43
|
-
const range = this.
|
|
43
|
+
const range = this.orientation === 'horizontal' ? [0, PLOT_HEIGHT] : [PLOT_HEIGHT, 0];
|
|
44
44
|
const y = linear(domain, range);
|
|
45
45
|
const floor = y(0);
|
|
46
|
-
const sideways = this.
|
|
46
|
+
const sideways = this.orientation === 'horizontal';
|
|
47
47
|
const [second, top] = extent(scaled.size > 0 ? on(own) : [0]);
|
|
48
48
|
const other = [Math.min(0, second), Math.max(0, top)];
|
|
49
49
|
const z = scaled.size > 0 ? linear(other, range) : undefined;
|
|
@@ -57,7 +57,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
|
|
|
57
57
|
return html `${z === undefined ? nothing : this.renderAxis(y, domain, 'primary', sideways, widest)}${this.renderPlot(series, categories, y, domain, floor, z)}${z === undefined ? nothing : this.renderAxis(z, other, 'secondary', sideways, widest, tint)}${this.renderLabels(categories)}`;
|
|
58
58
|
}
|
|
59
59
|
renderPlot(series, categories, y, domain, floor, z) {
|
|
60
|
-
const sideways = this.
|
|
60
|
+
const sideways = this.orientation === 'horizontal';
|
|
61
61
|
const slot = 100 / categories.length;
|
|
62
62
|
const lined = this.lined;
|
|
63
63
|
const scaled = this.scaled;
|
|
@@ -206,7 +206,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
|
|
|
206
206
|
const all = series.flatMap((one) => one.points.map((point) => point.value));
|
|
207
207
|
const [low, high] = extent(all.length > 0 ? all : [0]);
|
|
208
208
|
const domain = [Math.min(0, low), Math.max(0, high)];
|
|
209
|
-
const sideways = this.
|
|
209
|
+
const sideways = this.orientation === 'horizontal';
|
|
210
210
|
const scale = sideways ? linear(domain, [0, PLOT_HEIGHT]) : linear(domain, [PLOT_HEIGHT, 0]);
|
|
211
211
|
const ends = values.map((one) => scale(one));
|
|
212
212
|
const far = sideways ? Math.max(...ends) : Math.min(...ends);
|
|
@@ -219,15 +219,15 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
|
|
|
219
219
|
}, (cell) => this.seriesOf(cell));
|
|
220
220
|
}
|
|
221
221
|
};
|
|
222
|
-
__decorate([
|
|
223
|
-
property({ reflect: true })
|
|
224
|
-
], HelixHeadlessBarChart.prototype, "direction", void 0);
|
|
225
222
|
__decorate([
|
|
226
223
|
property()
|
|
227
224
|
], HelixHeadlessBarChart.prototype, "gridlines", void 0);
|
|
228
225
|
__decorate([
|
|
229
226
|
property()
|
|
230
227
|
], HelixHeadlessBarChart.prototype, "lines", void 0);
|
|
228
|
+
__decorate([
|
|
229
|
+
property({ reflect: true })
|
|
230
|
+
], HelixHeadlessBarChart.prototype, "orientation", void 0);
|
|
231
231
|
__decorate([
|
|
232
232
|
property({ reflect: true })
|
|
233
233
|
], HelixHeadlessBarChart.prototype, "secondary", void 0);
|
|
@@ -57,9 +57,12 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
|
|
|
57
57
|
* @csspart footer - The row holding the value and the tools.
|
|
58
58
|
* @csspart format - The control that changes the syntax the value is written in.
|
|
59
59
|
* @csspart format-button - The inner control.
|
|
60
|
-
* @csspart grid - The saturation and brightness square.
|
|
60
|
+
* @csspart grid - The saturation and brightness square. The mark showing where
|
|
61
|
+
* in the square the color sits is drawn on the square itself, which is
|
|
62
|
+
* `::part(grid)::after` from a consumer's sheet: the two channels are already
|
|
63
|
+
* on the square as `--color-picker-saturation` and `--color-picker-brightness`,
|
|
64
|
+
* so a box would have carried nothing, and this tier ships no CSS.
|
|
61
65
|
* @csspart grid-brightness - The range input for its vertical axis.
|
|
62
|
-
* @csspart grid-handle - The mark showing where in the square the color sits.
|
|
63
66
|
* @csspart grid-saturation - The range input for the square's horizontal axis.
|
|
64
67
|
* @csspart sample - The chip of the current color, which copies it when pressed.
|
|
65
68
|
* @csspart swatch - One preset.
|
|
@@ -234,7 +234,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
|
|
|
234
234
|
@pointerdown=${this.handleGridPointer}
|
|
235
235
|
@pointermove=${this.handleGridPointer}
|
|
236
236
|
>
|
|
237
|
-
<span part="grid-handle" aria-hidden="true"></span>
|
|
238
237
|
<input
|
|
239
238
|
part="grid-saturation"
|
|
240
239
|
type="range"
|
|
@@ -17,7 +17,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
|
|
|
17
17
|
* ```html
|
|
18
18
|
* <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">
|
|
19
19
|
* <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>
|
|
20
|
-
* <helix-headless-table-column field="size" align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
20
|
+
* <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column>
|
|
21
21
|
* </helix-headless-data-table>
|
|
22
22
|
* ```
|
|
23
23
|
*
|
|
@@ -622,7 +622,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
|
|
|
622
622
|
* overrule it either, an inline declaration beating any `::part(cell)` rule
|
|
623
623
|
* they wrote.
|
|
624
624
|
*
|
|
625
|
-
* Only the three edges reach it, `align` being a string anybody can write and
|
|
625
|
+
* Only the three edges reach it, `text-align` being a string anybody can write and
|
|
626
626
|
* this being a style attribute: `edgeOf` is that guard, and `Table` holds the
|
|
627
627
|
* same value to the same three.
|
|
628
628
|
*/
|