@fusion.dev/helix-headless 0.153.0 → 0.155.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/custom-elements.json +1885 -140
  2. package/dist/accordion/item/accordion-item.d.ts +15 -0
  3. package/dist/accordion/item/accordion-item.js +12 -1
  4. package/dist/accordion/root/accordion-root.d.ts +2 -1
  5. package/dist/accordion/root/accordion-root.js +1 -0
  6. package/dist/badge/root/badge-root.d.ts +15 -2
  7. package/dist/badge/root/badge-root.js +20 -3
  8. package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts +36 -3
  9. package/dist/breadcrumbs/breadcrumb/breadcrumb.js +42 -2
  10. package/dist/breadcrumbs/root/breadcrumbs-root.d.ts +15 -5
  11. package/dist/breadcrumbs/root/breadcrumbs-root.js +29 -4
  12. package/dist/button-group/root/button-group-root.d.ts +2 -0
  13. package/dist/button-group/root/button-group-root.js +1 -0
  14. package/dist/card/root/card-root.d.ts +31 -11
  15. package/dist/card/root/card-root.js +25 -11
  16. package/dist/code/root/code-root.d.ts +7 -0
  17. package/dist/code/root/code-root.js +1 -1
  18. package/dist/code-block/root/code-block-root.d.ts +37 -1
  19. package/dist/code-block/root/code-block-root.js +38 -5
  20. package/dist/color-input/root/color-input-root.d.ts +9 -3
  21. package/dist/color-input/root/color-input-root.js +3 -1
  22. package/dist/color-picker/channels.d.ts +5 -3
  23. package/dist/color-picker/channels.js +79 -21
  24. package/dist/color-picker/root/color-picker-root.d.ts +58 -5
  25. package/dist/color-picker/root/color-picker-root.js +75 -13
  26. package/dist/date-input/root/date-input-root.d.ts +1 -0
  27. package/dist/date-input/root/date-input-root.js +2 -1
  28. package/dist/date-picker/root/date-picker-root.d.ts +43 -13
  29. package/dist/date-picker/root/date-picker-root.js +54 -31
  30. package/dist/element-events.generated.js +2 -1
  31. package/dist/empty/root/empty-root.d.ts +19 -1
  32. package/dist/empty/root/empty-root.js +13 -4
  33. package/dist/icon/fetch.d.ts +20 -0
  34. package/dist/icon/fetch.js +70 -0
  35. package/dist/icon/root/icon-root.d.ts +27 -5
  36. package/dist/icon/root/icon-root.js +41 -17
  37. package/dist/navigation/root/navigation-root.d.ts +26 -0
  38. package/dist/navigation/root/navigation-root.js +58 -1
  39. package/dist/quote/root/quote-root.d.ts +17 -1
  40. package/dist/quote/root/quote-root.js +15 -2
  41. package/dist/select/root/select-root.d.ts +29 -3
  42. package/dist/select/root/select-root.js +34 -9
  43. package/dist/skeleton/root/skeleton-root.d.ts +7 -0
  44. package/dist/skeleton/root/skeleton-root.js +4 -1
  45. package/dist/slider/root/slider-root.d.ts +71 -9
  46. package/dist/slider/root/slider-root.js +129 -42
  47. package/dist/speed-dial/item/speed-dial-item.d.ts +29 -1
  48. package/dist/speed-dial/item/speed-dial-item.js +48 -7
  49. package/dist/speed-dial/root/speed-dial-root.d.ts +32 -6
  50. package/dist/speed-dial/root/speed-dial-root.js +50 -5
  51. package/dist/splitter/root/splitter-root.d.ts +22 -0
  52. package/dist/splitter/root/splitter-root.js +36 -7
  53. package/dist/stat/group/stat-group.d.ts +23 -4
  54. package/dist/stat/group/stat-group.js +13 -1
  55. package/dist/stat/root/stat-root.d.ts +46 -1
  56. package/dist/stat/root/stat-root.js +29 -5
  57. package/dist/steps/reach.d.ts +5 -1
  58. package/dist/steps/reach.js +2 -2
  59. package/dist/steps/root/steps-root.d.ts +37 -2
  60. package/dist/steps/root/steps-root.js +49 -7
  61. package/dist/steps/step/step.d.ts +6 -0
  62. package/dist/steps/step/step.js +4 -0
  63. package/dist/tabs/root/tabs-root.d.ts +37 -0
  64. package/dist/tabs/root/tabs-root.js +92 -2
  65. package/dist/tabs/tab/tab.d.ts +38 -2
  66. package/dist/tabs/tab/tab.js +45 -4
  67. package/dist/tag/group/tag-group.d.ts +29 -3
  68. package/dist/tag/group/tag-group.js +42 -11
  69. package/dist/toggle/root/toggle-root.d.ts +2 -0
  70. package/dist/toggle/root/toggle-root.js +1 -1
  71. package/dist/tree/item/tree-item.d.ts +10 -0
  72. package/dist/tree/item/tree-item.js +12 -0
  73. package/dist/tree/root/tree-root.d.ts +40 -1
  74. package/dist/tree/root/tree-root.js +120 -4
  75. package/dist/tree/selection.d.ts +6 -0
  76. package/dist/tree/selection.js +11 -0
  77. package/lint.json +1 -1
  78. package/package.json +5 -5
  79. package/types/jsx.d.ts +1412 -207
  80. package/types/vue.d.ts +294 -65
  81. package/types/words.d.ts +49 -1
@@ -31,7 +31,7 @@
31
31
  "declarations": [
32
32
  {
33
33
  "kind": "class",
34
- "description": "Holds its own open state. Used alone, outside an accordion, it works as a\ndisclosure.\n\nThe trigger sits inside a heading, so a screen reader lists the section with\nthe page's headings. The level is the item's `heading-level`, then the\naccordion's, then 3.\n\nContent stays mounted when the item is closed, so it can animate and its text\nis present in server-rendered HTML.\n\nThe browser's find in page searches a closed section, and a match opens it,\nwith `helix-before-open` first, as React Aria's disclosure does. Closed\ncontent is `hidden=\"until-found\"`, which hides it with no stylesheet loaded\nand keeps it out of the tab order and the accessibility tree. A section\nthat closes keeps its content drawn until the content part's animations and\ntransitions end, so a sheet that animates the section closed shows the\ncontent shrinking rather than an empty box. Set `hidden-until-found=\"false\"`\nand a closed section is `hidden` and `inert` instead, and find in page skips\nit.\n\nWhile it is open, the content part carries the content's height as\n`--accordion-content-height`, as Radix's accordion does, for a stylesheet\nthat animates the section open with keyframes of its own.",
34
+ "description": "Holds its own open state. Used alone, outside an accordion, it works as a\ndisclosure.\n\nThe trigger sits inside a heading, so a screen reader lists the section with\nthe page's headings. The level is the item's `heading-level`, then the\naccordion's, then 3.\n\nContent stays mounted when the item is closed, so it can animate and its text\nis present in server-rendered HTML.\n\nThe browser's find in page searches a closed section, and a match opens it,\nwith `helix-before-open` first, as React Aria's disclosure does. Closed\ncontent is `hidden=\"until-found\"`, which hides it with no stylesheet loaded\nand keeps it out of the tab order and the accessibility tree. A section\nthat closes keeps its content drawn until the content part's animations and\ntransitions end, so a sheet that animates the section closed shows the\ncontent shrinking rather than an empty box. Set `hidden-until-found=\"false\"`\nand a closed section is `hidden` and `inert` instead, and find in page skips\nit.\n\nA section whose trigger has no words, with nothing in its `summary` slot,\nis announced as a bare button, and a development build warns once with the\nkind `missing-name`.\n\nWhile it is open, the content part carries the content's height as\n`--accordion-content-height`, as Radix's accordion does, for a stylesheet\nthat animates the section open with keyframes of its own.",
35
35
  "name": "HelixHeadlessAccordionItem",
36
36
  "cssProperties": [
37
37
  {
@@ -804,6 +804,10 @@
804
804
  }
805
805
  ],
806
806
  "cssStates": [
807
+ {
808
+ "description": "While the item has closed and its content is still drawn, until the content part's animations end.",
809
+ "name": "closing"
810
+ },
807
811
  {
808
812
  "description": "While the item is open.",
809
813
  "name": "open"
@@ -872,7 +876,7 @@
872
876
  "declarations": [
873
877
  {
874
878
  "kind": "class",
875
- "description": "Holds the mode. Each item coordinates itself: when you click an item, it\nfinds the nearest accordion, reads the mode, and closes the other items.\n\nThe accordion does not listen for items opening. `helix-before-open` does not\nbubble and is not composed, because overlays nest and an inner overlay's\nevents must stay separate from the outer one's.\n\nItems are found when they are clicked, so there is no registry to keep up to\ndate. An item added after render coordinates on its first click. Items are\nmatched with `instanceof HelixHeadlessAccordionItem`, so the headless tier\ndoes not depend on the styled tier's tag names.\n\nKeys, on a trigger: Up and Down Arrow move to the previous and the next\ntrigger, and so do Left and Right, wrapping at the ends; Home and End go to\nthe first and the last. Enter and Space open and close the section. Disabled\nsections are passed over.\n\nEach trigger is a button with `aria-expanded` and `aria-controls`, inside a\nheading, level 3 unless `heading-level` says otherwise, so the sections are\nin a screen reader's list of headings. An open section is a region named by\nits trigger. Set the level that fits the page's outline.\n\nFind in page searches the closed sections too, and opens the one it matches\nin. `hidden-until-found=\"false\"` turns that off.",
879
+ "description": "Holds the mode. Each item coordinates itself: when you click an item, it\nfinds the nearest accordion, reads the mode, and closes the other items.\n\nThe accordion does not listen for items opening. `helix-before-open` does not\nbubble and is not composed, because overlays nest and an inner overlay's\nevents must stay separate from the outer one's.\n\nItems are found when they are clicked, so there is no registry to keep up to\ndate. An item added after render coordinates on its first click. Items are\nmatched with `instanceof HelixHeadlessAccordionItem`, so the headless tier\ndoes not depend on the styled tier's tag names.\n\nKeys, on a trigger: Up and Down Arrow move to the previous and the next\ntrigger, and so do Left and Right, wrapping at the ends; Home and End go to\nthe first and the last. Enter and Space open and close the section. Disabled\nsections are passed over. Under `single` the open section's trigger is\n`aria-disabled`, because a press cannot close it.\n\nEach trigger is a button with `aria-expanded` and `aria-controls`, inside a\nheading, level 3 unless `heading-level` says otherwise, so the sections are\nin a screen reader's list of headings. An open section is a region named by\nits trigger. Set the level that fits the page's outline.\n\nFind in page searches the closed sections too, and opens the one it matches\nin. `hidden-until-found=\"false\"` turns that off.",
876
880
  "name": "HelixHeadlessAccordion",
877
881
  "slots": [
878
882
  {
@@ -6056,11 +6060,15 @@
6056
6060
  "declarations": [
6057
6061
  {
6058
6062
  "kind": "class",
6059
- "description": "Badge wraps the element it decorates and pins an indicator to its corner, so\nthe wrapped element keeps its place in the layout.\n\nWhat the indicator shows depends on `value`:\n\n- A `value` of zero shows no indicator.\n- No `value` shows a dot.\n- Any other value shows the value. Above `max`, the indicator shows `{max}+`,\n so its width stays the same as the count grows.\n\n`format-options` writes a count with `Intl.NumberFormat`, in `locale`:\n`format-options='{\"notation\":\"compact\"}'` shows 1,200 as `1.2K`. Absent, the\ncount is shown as it was given.\n\nA count is announced from its own text, and `label` replaces that with a\nfuller name, such as `4 unread`. A dot needs a `label`. Without one, the dot\nis a colored circle that screen readers do not announce.\n\n**A badge wrapped around a control describes it.** The control is the first\nelement in the badge that takes focus, and its description is the badge's\nwords, so focusing `<helix-badge value=\"8\" label=\"{count} unread\"><button>Inbox\n</button></helix-badge>` announces \"Inbox, button, 8 unread\", current as the\ncount changes. A control that already has a description keeps its own. The\ncount is also a status of its own, read when it changes.\n\n**Put the badge inside the control to have its count read with the\ncontrol's name**, as Web Awesome and Shoelace do: `<button>Inbox\n<helix-badge value=\"8\" label=\"8 unread\"></helix-badge></button>` is the\nbutton \"Inbox 8 unread\", and stays current as the count changes. The styled\ntier's `placement=\"inline\"` draws the mark in the line for that case.",
6063
+ "description": "Badge wraps the element it decorates and pins an indicator to its corner, so\nthe wrapped element keeps its place in the layout.\n\nWhat the indicator shows depends on `value`:\n\n- A `value` of zero shows no indicator.\n- No `value` shows a dot.\n- Any other value shows the value. Above `max`, the indicator shows `{max}+`,\n so its width stays the same as the count grows.\n\n`format-options` writes a count with `Intl.NumberFormat`, in `locale`:\n`format-options='{\"notation\":\"compact\"}'` shows 1,200 as `1.2K`. Absent, the\ncount is shown as it was given.\n\nA count is announced from its own text, and `label` replaces that with a\nfuller name, such as `4 unread`. A dot needs a `label`. Without one, the dot\nis a colored circle that screen readers do not announce.\n\n**A badge wrapped around a control describes it.** The control is the first\nelement in the badge that takes focus, and its description is the badge's\nwords, so focusing `<helix-badge value=\"8\" label=\"{count} unread\"><button>Inbox\n</button></helix-badge>` announces \"Inbox, button, 8 unread\", current as the\ncount changes. A control that already has a description keeps its own. The\ncount is also a status of its own, read when it changes.\n\n**Put the badge inside the control to have its count read with the\ncontrol's name**, as Web Awesome and Shoelace do: `<button>Inbox\n<helix-badge value=\"8\" label=\"8 unread\"></helix-badge></button>` is the\nbutton \"Inbox 8 unread\", and stays current as the count changes. The styled\ntier's `placement=\"inline\"` draws the mark in the line for that case.\n\n**An icon goes inside the mark** through the `icon` slot, before the count,\nas Web Awesome's badge takes one at its start. With no `value` the icon is\nthe whole mark, such as a check on an avatar, drawn where the dot would be.\nThe icon is hidden from screen readers: the count and `label` are what the\nmark says.",
6060
6064
  "name": "HelixHeadlessBadge",
6061
6065
  "cssParts": [
6062
6066
  {
6063
- "description": "The count, or the dot when there is no value.",
6067
+ "description": "The slot the icon arrives through, inside the indicator. A slot draws no box, so it passes inherited properties, such as color, to the icon.",
6068
+ "name": "icon"
6069
+ },
6070
+ {
6071
+ "description": "The count, or the dot when there is no value. Carries `data-dot` when there is no value, `data-single` when the count is one character, and `data-blank` when the value is zero.",
6064
6072
  "name": "indicator"
6065
6073
  }
6066
6074
  ],
@@ -6068,6 +6076,10 @@
6068
6076
  {
6069
6077
  "description": "The element being decorated.",
6070
6078
  "name": ""
6079
+ },
6080
+ {
6081
+ "description": "An icon inside the mark, before the count, or the whole mark when there is no value. Hidden from screen readers.",
6082
+ "name": "icon"
6071
6083
  }
6072
6084
  ],
6073
6085
  "members": [
@@ -6119,6 +6131,23 @@
6119
6131
  "description": "The count or short text to show.\n\nAbsent shows a dot, zero shows nothing.\n\n**A string, and a number is taken anyway.** What this shows is usually a\ncount, so `value={unread}` is the first thing a React consumer writes, and\na property assignment does not go through the attribute converter that\nwould have made it a string. Read raw it went straight into\n`this.value.trim()`, which threw inside `render` and left the mark showing\nwhatever it had last: measured, a badge set to the number 2 stayed an 8px\ndot with no digit in it, and the console carried\n`TypeError: this.value.trim is not a function`. A component whose whole job\nis showing a count must not lose the count for being handed one.",
6120
6132
  "attribute": "value"
6121
6133
  },
6134
+ {
6135
+ "kind": "field",
6136
+ "name": "hasIcon",
6137
+ "type": {
6138
+ "text": "boolean"
6139
+ },
6140
+ "privacy": "private",
6141
+ "default": "false",
6142
+ "description": "Whether something is slotted into `icon`, read from the children."
6143
+ },
6144
+ {
6145
+ "kind": "field",
6146
+ "name": "readIcon",
6147
+ "privacy": "private",
6148
+ "readonly": true,
6149
+ "description": "Reads whether an icon is slotted, from the children where they can be known."
6150
+ },
6122
6151
  {
6123
6152
  "kind": "field",
6124
6153
  "name": "given",
@@ -6611,9 +6640,13 @@
6611
6640
  "name": "capped"
6612
6641
  },
6613
6642
  {
6614
- "description": "There is no value, so the mark is a dot.",
6643
+ "description": "There is no value and no icon, so the mark is a dot.",
6615
6644
  "name": "dot"
6616
6645
  },
6646
+ {
6647
+ "description": "Something is slotted into `icon`, so it is drawn inside the mark.",
6648
+ "name": "has-icon"
6649
+ },
6617
6650
  {
6618
6651
  "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
6619
6652
  "name": "settled",
@@ -8951,9 +8984,17 @@
8951
8984
  "declarations": [
8952
8985
  {
8953
8986
  "kind": "class",
8954
- "description": "Each crumb renders its separator and sets its list-item role. It hides its\nown separator with `:host(:first-child)`, so the trail needs no index from\nthe parent.\n\nSet `href` to make the whole crumb an anchor, which works with Enter, middle\nclick, and the status bar, and before any JavaScript runs. A router cannot\nreach an anchor inside a shadow root, so intercept the click for client-side\nnavigation, as with `Tree.Item` and `List.Item`. A trail that collapses also\nreads `href` to rebuild its hidden crumbs elsewhere.\n\nWithout `href`, the crumb renders a plain `<span>` around what you slot,\nincluding your own anchor.\n\nThe current page is plain text, and `aria-current=\"page\"` on the host conveys\nthe position. In a trail where no crumb is `current`, the last one is said\nto be the current page, and keeps its link. An `aria-current` you write on\nthe host, such as `aria-current=\"location\"`, replaces the one the crumb\ngives itself.",
8987
+ "description": "Each crumb renders its separator and sets its list-item role. It hides its\nown separator with `:host(:first-child)`, so the trail needs no index from\nthe parent.\n\nSet `href` to make the whole crumb an anchor, which works with Enter, middle\nclick, and the status bar, and before any JavaScript runs. A router cannot\nreach an anchor inside a shadow root, so intercept the click for client-side\nnavigation, as with `Tree.Item` and `List.Item`: a plain press on the link\nsends `helix-select` with the `href` as its value first, and canceling it\nkeeps the browser from following, so a client-side router follows it\ninstead, as React Aria's `onAction` lets a router do. A press with a\nmodifier opens the link where the browser opens it and sends nothing.\n\nWithout `href`, the crumb renders a plain `<span>` around what you slot,\nincluding your own anchor.\n\nThe current page is plain text, and `aria-current=\"page\"` on the host conveys\nthe position. In a trail where no crumb is `current`, the last one is said\nto be the current page, and keeps its link. An `aria-current` you write on\nthe host, such as `aria-current=\"location\"`, replaces the one the crumb\ngives itself.",
8955
8988
  "name": "HelixHeadlessBreadcrumb",
8956
8989
  "cssParts": [
8990
+ {
8991
+ "description": "The button after the first crumb of a folded slotted trail, which shows the folded crumbs.",
8992
+ "name": "expand"
8993
+ },
8994
+ {
8995
+ "description": "The chevron before that button.",
8996
+ "name": "fold-separator"
8997
+ },
8957
8998
  {
8958
8999
  "description": "The crumb itself, which is an `<a>` where `href` is set.",
8959
9000
  "name": "link"
@@ -9027,6 +9068,24 @@
9027
9068
  "description": "Where the link opens. Use it for a crumb that leaves the site.",
9028
9069
  "attribute": "target"
9029
9070
  },
9071
+ {
9072
+ "kind": "field",
9073
+ "name": "handleLinkClick",
9074
+ "privacy": "private",
9075
+ "readonly": true,
9076
+ "description": "Sends `helix-select` for a plain press on the link, and keeps the browser\nfrom following where it was canceled."
9077
+ },
9078
+ {
9079
+ "kind": "method",
9080
+ "name": "renderFold",
9081
+ "privacy": "protected",
9082
+ "return": {
9083
+ "type": {
9084
+ "text": "TemplateResult | typeof nothing"
9085
+ }
9086
+ },
9087
+ "description": "The button that shows the crumbs a slotted trail folded after this one,\nwith a chevron before it, drawn after the crumb's own label."
9088
+ },
9030
9089
  {
9031
9090
  "kind": "method",
9032
9091
  "name": "markEnd",
@@ -9395,6 +9454,16 @@
9395
9454
  }
9396
9455
  }
9397
9456
  ],
9457
+ "events": [
9458
+ {
9459
+ "type": {
9460
+ "text": "HelixSelectEvent"
9461
+ },
9462
+ "description": "A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does.",
9463
+ "name": "helix-select",
9464
+ "reactProp": "onhelix-select"
9465
+ }
9466
+ ],
9398
9467
  "attributes": [
9399
9468
  {
9400
9469
  "name": "current",
@@ -9433,10 +9502,18 @@
9433
9502
  }
9434
9503
  ],
9435
9504
  "cssStates": [
9505
+ {
9506
+ "description": "While the crumb is the current page, marked `current` or the last of a trail with none marked.",
9507
+ "name": "current"
9508
+ },
9436
9509
  {
9437
9510
  "description": "While the `end` slot holds something, so a stylesheet can join the label and what follows it into one control.",
9438
9511
  "name": "end"
9439
9512
  },
9513
+ {
9514
+ "description": "While a trail longer than its `max-items` has folded the crumb away. It takes no room.",
9515
+ "name": "folded"
9516
+ },
9440
9517
  {
9441
9518
  "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
9442
9519
  "name": "settled",
@@ -9516,7 +9593,7 @@
9516
9593
  "declarations": [
9517
9594
  {
9518
9595
  "kind": "class",
9519
- "description": "The host is the navigation landmark, named \"Breadcrumb\" by default. An\n`aria-label` on the host names the trail instead, and so does `label`. When a\npage has more than one navigation landmark, screen reader users choose\nbetween them by name.\n\nThe `<ol>` has an explicit `role=\"list\"`, because Safari removes list\nsemantics from a list with `list-style: none`, and the trail always hides its\nmarkers.\n\nThe items are slotted directly, so they are `<ol>` children in the flat tree,\nand each item sets `role=\"listitem\"` on itself. Where no slotted crumb is\n`current`, the last one is said to be the current page.\n\nThe trail does not measure itself, and you write its overflow in markup: put\nthe crumb that holds the folded items where the gap should appear.\n\nA trail built from data, such as a router's matched routes, takes `items`: an\narray of `{ label, href }`, drawn as crumbs in order, the last one as the\ncurrent page. Slotted crumbs follow them. Use one way or the other in a trail.\n\nWith `max-items`, a trail drawn from `items` that is longer folds its middle\ninto one crumb: the first crumb, a button, then the last `max-items` less one.\nThe button is named by `expand-label` and shows the whole trail, moving focus\nto the first crumb it brought back. A new `items` folds again. Slotted crumbs\ndo not fold; write the folded crumb where the gap should be.\n\n**Keyboard.** Each crumb with an `href` is a link and one tab stop, and\nEnter follows it. The current page and the separators are not in the tab\norder. In a folded trail, Enter or Space on the fold's button shows the\nwhole trail and moves focus to the first crumb it brought back.",
9596
+ "description": "The host is the navigation landmark, named \"Breadcrumb\" by default. An\n`aria-label` on the host names the trail instead, and so does `label`. When a\npage has more than one navigation landmark, screen reader users choose\nbetween them by name.\n\nThe `<ol>` has an explicit `role=\"list\"`, because Safari removes list\nsemantics from a list with `list-style: none`, and the trail always hides its\nmarkers.\n\nThe items are slotted directly, so they are `<ol>` children in the flat tree,\nand each item sets `role=\"listitem\"` on itself. Where no slotted crumb is\n`current`, the last one is said to be the current page.\n\nThe trail does not measure itself, and you write its overflow in markup: put\nthe crumb that holds the folded items where the gap should appear.\n\nA trail built from data, such as a router's matched routes, takes `items`: an\narray of `{ label, href }`, drawn as crumbs in order, the last one as the\ncurrent page. Slotted crumbs follow them. Use one way or the other in a trail.\n\nWith `max-items`, a trail that is longer folds its middle into one place:\nthe first crumb, a button, then the last `max-items` less one. The button is\nnamed by `expand-label` and shows the whole trail, moving focus to the first\ncrumb it brought back. A trail drawn from `items` draws the button as a\ncrumb of its own, and a new `items` folds again. A slotted trail hides the\ncrumbs it folds, which take no room, and its first crumb draws the button\nafter its link; a change to the crumbs folds again.\n\n**Keyboard.** Each crumb with an `href` is a link and one tab stop, and\nEnter follows it. The current page and the separators are not in the tab\norder. In a folded trail, Enter or Space on the fold's button shows the\nwhole trail and moves focus to the first crumb it brought back.",
9520
9597
  "name": "HelixHeadlessBreadcrumbs",
9521
9598
  "cssParts": [
9522
9599
  {
@@ -9531,6 +9608,14 @@
9531
9608
  "description": "The crumb drawn from `items` for the current page.",
9532
9609
  "name": "crumb-current"
9533
9610
  },
9611
+ {
9612
+ "description": "The fold button a crumb draws after the first crumb of a folded slotted trail. A trail drawn from `items` draws its fold as a crumb of its own, `crumb-collapsed`, so this one is never drawn there.",
9613
+ "name": "crumb-expand"
9614
+ },
9615
+ {
9616
+ "description": "The chevron before that button.",
9617
+ "name": "crumb-fold-separator"
9618
+ },
9534
9619
  {
9535
9620
  "description": "The link, or the current page's words, of a crumb drawn from `items`.",
9536
9621
  "name": "crumb-link"
@@ -9623,6 +9708,23 @@
9623
9708
  "default": "false",
9624
9709
  "description": "Whether a reader has asked to see the whole of a folded trail."
9625
9710
  },
9711
+ {
9712
+ "kind": "field",
9713
+ "name": "slotted",
9714
+ "type": {
9715
+ "text": "HelixHeadlessBreadcrumb[]"
9716
+ },
9717
+ "privacy": "private",
9718
+ "description": "The crumbs slotted into the trail, in order.",
9719
+ "readonly": true
9720
+ },
9721
+ {
9722
+ "kind": "field",
9723
+ "name": "unfold",
9724
+ "privacy": "private",
9725
+ "readonly": true,
9726
+ "description": "Shows the whole of a folded slotted trail and moves focus to the first crumb it brought back."
9727
+ },
9626
9728
  {
9627
9729
  "kind": "field",
9628
9730
  "name": "expand",
@@ -9647,6 +9749,13 @@
9647
9749
  "readonly": true,
9648
9750
  "description": "Says the last slotted crumb is the current page where none is marked\n`current`, as React Aria's trail does. Through a property the crumb does\nnot reflect, so nothing is written onto your markup."
9649
9751
  },
9752
+ {
9753
+ "kind": "field",
9754
+ "name": "handleSlotChange",
9755
+ "privacy": "private",
9756
+ "readonly": true,
9757
+ "description": "New crumbs fold again, as a new `items` does."
9758
+ },
9650
9759
  {
9651
9760
  "kind": "method",
9652
9761
  "name": "renderItems",
@@ -10787,6 +10896,20 @@
10787
10896
  "fieldName": "value"
10788
10897
  }
10789
10898
  ],
10899
+ "cssStates": [
10900
+ {
10901
+ "description": "While a group with `selection-mode` has a button pressed.",
10902
+ "name": "pressed"
10903
+ },
10904
+ {
10905
+ "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
10906
+ "name": "settled",
10907
+ "inheritedFrom": {
10908
+ "name": "HelixElement",
10909
+ "module": "src/helix-element/helix-element.ts"
10910
+ }
10911
+ }
10912
+ ],
10790
10913
  "superclass": {
10791
10914
  "name": "HelixElement",
10792
10915
  "package": "@fusion.dev/helix-core"
@@ -10823,16 +10946,6 @@
10823
10946
  },
10824
10947
  "tagName": "helix-headless-button-group",
10825
10948
  "customElement": true,
10826
- "cssStates": [
10827
- {
10828
- "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
10829
- "name": "settled",
10830
- "inheritedFrom": {
10831
- "name": "HelixElement",
10832
- "module": "src/helix-element/helix-element.ts"
10833
- }
10834
- }
10835
- ],
10836
10949
  "modulePath": "src/button-group/root/button-group-root.ts",
10837
10950
  "definitionPath": "src/button-group/root/button-group-root.ts"
10838
10951
  }
@@ -19671,7 +19784,7 @@
19671
19784
  "declarations": [
19672
19785
  {
19673
19786
  "kind": "class",
19674
- "description": "The header, body, and footer regions are slots, because they have no state,\nbehavior, or API of their own. You bring your own markup, so a title can be a\nreal `<h2>`.\n\nThe host is the surface. The element itself takes the border, the radius, and\nthe grid, so you style `Card` directly and there is no wrapper part to reach\nthrough with `::part`.\n\nName the card with `label`, as a Stat Group is named, or with `aria-label`\nor `aria-labelledby`. These are the only names that work with server\nrendering, because reading a title from the light DOM needs a DOM, and the\nserver has none. `label` is set through `ElementInternals`, so it writes no\nattribute onto the card. **A named card is a group**, so a\nreader entering it hears its name; an unnamed one has no role, since a group\nwith no name only adds \"group\" to what a reader says.\n\nEach region's slot is a part of the same name, `body` for the main content,\nas Web Awesome's card names its regions. A slot draws no box, so a part\npasses inherited properties to what is slotted, and a page wanting a box\nthere gives it one with `display`.\n\n`header-actions` and `footer-actions` hold controls at the end of the\nheader's and the footer's line, as Web Awesome's card does. While one holds\nsomething, its line is a `header-row` or `footer-row` part; otherwise there\nis no wrapper and every region is a bare slot. A server cannot see slotted\ncontent, so served actions sit on their own line until the script runs.\n\n**The card says which regions it holds**, as `:state(has-media)`,\n`:state(has-header)` and `:state(has-footer)`, so a sheet can draw a card\nwith a header differently, as Web Awesome's `with-header` does, with no\nattribute written onto the card. Read in the browser, so a served card\ncarries none until the script runs.",
19787
+ "description": "The header, body, and footer regions are slots, because they have no state,\nbehavior, or API of their own. You bring your own markup, so a title can be a\nreal `<h2>`.\n\nThe host is the surface. The element itself takes the border, the radius, and\nthe grid, so you style `Card` directly and there is no wrapper part to reach\nthrough with `::part`.\n\nName the card with `label`, as a Stat Group is named, or with `aria-label`\nor `aria-labelledby`. `label` is set through `ElementInternals`, so it\nwrites no attribute onto the card. **A named card is a group**, so a\nreader entering it hears its name; an unnamed one has no role, since a group\nwith no name only adds \"group\" to what a reader says.\n\n**With none of those, a heading in `header` names the card**, such as the\n`<h2>` of its title, by reference, so the name follows the heading's words.\nReading a heading needs a DOM, so a served card is named by it once the\nscript runs; `label`, `aria-label` and `aria-labelledby` are the names a\nserver writes.\n\nEach region's slot is a part of the same name, `body` for the main content,\nas Web Awesome's card names its regions. A slot draws no box, so a part\npasses inherited properties to what is slotted, and a page wanting a box\nthere gives it one with `display`.\n\n`header-actions` and `footer-actions` hold controls at the end of the\nheader's and the footer's line, as Web Awesome's card does. While one holds\nsomething, its line is a `header-row` or `footer-row` part; otherwise there\nis no wrapper and every region is a bare slot. A server cannot see slotted\ncontent, so a served card has no row; the styled tier sets served actions at\nthe end of their line from the stylesheet alone, so they do not move when\nthe script runs.\n\n**The card says which regions it holds**, as `:state(has-media)`,\n`:state(has-header)` and `:state(has-footer)`, so a sheet can draw a card\nwith a header differently, as Web Awesome's `with-header` does, with no\nattribute written onto the card. Read in the browser, so a served card\ncarries none until the script runs.",
19675
19788
  "name": "HelixHeadlessCard",
19676
19789
  "cssParts": [
19677
19790
  {
@@ -19754,6 +19867,49 @@
19754
19867
  "attribute": "media-placement",
19755
19868
  "reflects": true
19756
19869
  },
19870
+ {
19871
+ "kind": "field",
19872
+ "name": "observedAttributes",
19873
+ "type": {
19874
+ "text": "string[]"
19875
+ },
19876
+ "static": true,
19877
+ "description": "Hears a name written on the card, which no property mirrors.\n\nLit observes the attributes of its own properties only, and `ariaLabel`\nand `ariaLabelledByElements` belong to the platform. Observed here rather\nthan through a property, so the manifest lists no attribute of the card's\nown for them.",
19878
+ "readonly": true
19879
+ },
19880
+ {
19881
+ "kind": "method",
19882
+ "name": "attributeChangedCallback",
19883
+ "return": {
19884
+ "type": {
19885
+ "text": "void"
19886
+ }
19887
+ },
19888
+ "parameters": [
19889
+ {
19890
+ "name": "name",
19891
+ "type": {
19892
+ "text": "string"
19893
+ }
19894
+ },
19895
+ {
19896
+ "name": "old",
19897
+ "type": {
19898
+ "text": "string | null"
19899
+ }
19900
+ },
19901
+ {
19902
+ "name": "value",
19903
+ "type": {
19904
+ "text": "string | null"
19905
+ }
19906
+ }
19907
+ ],
19908
+ "description": "Called by the browser when an observed attribute changes. A name written\nor taken off asks for an update, because it decides whether the card is a\ngroup and whether its heading names it.",
19909
+ "type": {
19910
+ "text": "attributeChangedCallback(name: string, old: string | null, value: string | null) => void"
19911
+ }
19912
+ },
19757
19913
  {
19758
19914
  "kind": "field",
19759
19915
  "name": "footerActions",
@@ -19774,6 +19930,17 @@
19774
19930
  "default": "false",
19775
19931
  "description": "Whether `header-actions` holds something, read from the slot."
19776
19932
  },
19933
+ {
19934
+ "kind": "method",
19935
+ "name": "writeName",
19936
+ "privacy": "private",
19937
+ "return": {
19938
+ "type": {
19939
+ "text": "void"
19940
+ }
19941
+ },
19942
+ "description": "Says what the card is and what names it. On the host, since the host is\nthe box, and from `willUpdate`, which the server calls too.\n\n**A heading in `header` is the name only where nothing else is**, and it\nnames the card by reference, so a renamed heading renames the card. An\nengine without element references hears its words."
19943
+ },
19777
19944
  {
19778
19945
  "kind": "field",
19779
19946
  "name": "readRegions",
@@ -20137,20 +20304,6 @@
20137
20304
  },
20138
20305
  "description": "Places the media after the content. By default it comes before.\n\n**A figure that concludes a card is the same region as one that opens it**,\nand the only thing that differs is which edge it is flush against. Media is\nthe one region that escapes the inset, so a chart wanting to span the card\nhas nowhere else to be: slotted into the content it keeps the padding on\nboth sides, and there is no second bleeding region to add without saying\ntwice what this says once.\n\nReflected and undefaulted, so a card that has not asked reads as a card\nwith no attribute on it and the stylesheet only describes the departure.",
20139
20306
  "fieldName": "mediaPlacement"
20140
- },
20141
- {
20142
- "name": "aria-labelledby",
20143
- "type": {
20144
- "text": "string | null"
20145
- },
20146
- "default": "null"
20147
- },
20148
- {
20149
- "name": "aria-label",
20150
- "type": {
20151
- "text": "string | null"
20152
- },
20153
- "default": "null"
20154
20307
  }
20155
20308
  ],
20156
20309
  "cssStates": [
@@ -29693,7 +29846,7 @@
29693
29846
  "declarations": [
29694
29847
  {
29695
29848
  "kind": "class",
29696
- "description": "Renders a `<pre><code>` pair: `pre` keeps the whitespace, and `code` marks it\nas code. Long lines scroll inside the block and do not wrap, because a line\nbreak can be significant in code.\n\nA copy button is on by default. Set `no-copy` to remove it. The button copies\nthe slotted text, so there is no second copy of the code to keep in sync.\n\nFor a fragment of code inside a sentence, use `Code`.\n\nSet `line-numbers` to number the lines in a gutter beside the code, hidden\nfrom the accessibility tree and left out of a copy. Set `highlight` to a\nfunction that turns the code into highlighted markup, such as one wrapping\nShiki or Prism, and the block draws what it returns; it is handed the\nblock's `language`, so one function serves every block. The code stays in\nthe slot, so the copy button and the page's own text are the code as\nwritten.\n\nSet `expandable` on a block whose height is capped, such as by\n`--code-block-max-block-size`, and a button under it shows every line and\nthen fewer again, as a docs site's long example does. The button is drawn\nonly while the cap hides something, says whether the block is expanded with\n`aria-expanded`, names the block it opens with `aria-controls`, and the block\ncarries `:state(expanded)` while it is.\n\nSet `diff` to show a change. Put a unified diff, the output of `git diff` or\n`diff -u`, in the same slot, and the block draws the lines it added and\nremoved. The block never computes a diff itself. Line numbers come from the\nhunk headers and are hidden from the accessibility tree. Changed lines are\n`<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not\ndepend on color. Each file in the patch is its own block under its own name,\nand its copy button copies the new version of the file. `variant=\"split\"`\nshows the old version beside the new, each removal opposite its replacement.\n\nOn the server, the slot renders as ordinary code, so a diff first appears as\nthe patch text in a `<pre>`. The client makes the same first render, which\nkeeps hydration clean, and draws the diff once it can read the content. Diff\nmode is experimental. The rest of the family is stable.",
29849
+ "description": "Renders a `<pre><code>` pair: `pre` keeps the whitespace, and `code` marks it\nas code. Long lines scroll inside the block and do not wrap, because a line\nbreak can be significant in code.\n\nA copy button is on by default. Set `no-copy` to remove it. The button copies\nthe slotted text, so there is no second copy of the code to keep in sync.\n\nFor a fragment of code inside a sentence, use `Code`.\n\nSet `line-numbers` to number the lines in a gutter beside the code, hidden\nfrom the accessibility tree and left out of a copy. Set `highlight` to a\nfunction that turns the code into highlighted markup, such as one wrapping\nShiki or Prism, and the block draws what it returns; it is handed the\nblock's `language`, so one function serves every block. The code stays in\nthe slot, so the copy button and the page's own text are the code as\nwritten.\n\nSet `expandable` on a block whose height is capped, such as by\n`--code-block-max-block-size`, and a button under it shows every line and\nthen fewer again, as a docs site's long example does. The button is drawn\nonly while the cap hides something, says whether the block is expanded with\n`aria-expanded`, names the block it opens with `aria-controls`, and the block\ncarries `:state(expanded)` while it is.\n\nSet `diff` to show a change. Put a unified diff, the output of `git diff` or\n`diff -u`, in the same slot, and the block draws the lines it added and\nremoved. The block never computes a diff itself. Line numbers come from the\nhunk headers and are hidden from the accessibility tree. Changed lines are\n`<ins>` and `<del>` with the `+` and `-` kept as text, so the change does not\ndepend on color. Each file in the patch is its own block under its own name,\nand its copy button copies the new version of the file. `variant=\"split\"`\nshows the old version beside the new, each removal opposite its replacement.\n\n**A block that scrolls is a tab stop.** While its lines run past its width or\nits cap, the scroller is a region named for the block, such as \"Code,\napp.ts\", that Tab reaches, so a keyboard scrolls it with the arrow keys in\nevery browser. Chromium and Firefox make a scrolling box focusable on their\nown, and Safari does not. A block that fits is no stop at all.\n\n**The code the block draws is marked untranslated**, `translate=\"no\"` on\nits `<pre>`, so a page translator leaves highlighted lines and a diff as\nwritten. Code in the slot takes its translation mode from the element, which\nwrites nothing onto itself, so set `translate=\"no\"` on the element to keep a\ntranslator off plain code too.\n\nOn the server, the slot renders as ordinary code, so a diff first appears as\nthe patch text in a `<pre>`. The client makes the same first render, which\nkeeps hydration clean, and draws the diff once it can read the content. Diff\nmode is experimental. The rest of the family is stable.",
29697
29850
  "name": "HelixHeadlessCodeBlock",
29698
29851
  "cssParts": [
29699
29852
  {
@@ -29854,6 +30007,32 @@
29854
30007
  "default": "'helix-code-block'",
29855
30008
  "description": "The key this family's words are registered under, its styled tag:\n`registerWords('de', { 'helix-code-block': { copyLabel: 'Code kopieren' } })`."
29856
30009
  },
30010
+ {
30011
+ "kind": "field",
30012
+ "name": "codeLabel",
30013
+ "type": {
30014
+ "text": "string"
30015
+ },
30016
+ "default": "'Code'",
30017
+ "description": "The name of a block that scrolls, which is a tab stop while it does.\n\nWhere the block has a name, the scroller says it too, such as \"Code,\napp.ts\", as `code-name-label` puts it.",
30018
+ "attribute": "code-label",
30019
+ "helix": {
30020
+ "words": true
30021
+ }
30022
+ },
30023
+ {
30024
+ "kind": "field",
30025
+ "name": "codeNameLabel",
30026
+ "type": {
30027
+ "text": "string"
30028
+ },
30029
+ "default": "'{code}, {name}'",
30030
+ "description": "The name of a block that scrolls, where the block has a name. `{code}` is\n`code-label` and `{name}` the block's name.",
30031
+ "attribute": "code-name-label",
30032
+ "helix": {
30033
+ "words": true
30034
+ }
30035
+ },
29857
30036
  {
29858
30037
  "kind": "field",
29859
30038
  "name": "collapseLabel",
@@ -30066,7 +30245,7 @@
30066
30245
  "text": "ResizeObserver | undefined"
30067
30246
  },
30068
30247
  "privacy": "private",
30069
- "description": "Watches the block's size, while it is expandable."
30248
+ "description": "Watches the block's size."
30070
30249
  },
30071
30250
  {
30072
30251
  "kind": "field",
@@ -30075,6 +30254,17 @@
30075
30254
  "readonly": true,
30076
30255
  "description": "Reads whether the cap hides lines: the scroller is taller inside than it\nis drawn. The styled tier caps the `<code>`, and a page may cap the\n`<pre>`, so both are asked. Left as it was while expanded, which shows\neverything."
30077
30256
  },
30257
+ {
30258
+ "kind": "method",
30259
+ "name": "markScrollers",
30260
+ "privacy": "private",
30261
+ "return": {
30262
+ "type": {
30263
+ "text": "void"
30264
+ }
30265
+ },
30266
+ "description": "Makes each box that scrolls a tab stop and a region named for its block,\nand takes both away from a box that fits.\n\n**A reader on a keyboard scrolls the code from the box itself.** Chromium\nand Firefox make a scrolling box focusable on their own, and Safari does\nnot, so there the arrow keys could not reach the end of a long line. A\nbox counts while its sheet lets it scroll and its content is wider or\ntaller than it is drawn: an unstyled `<pre>` overflows without scrolling,\nand a stop on it would scroll nothing."
30267
+ },
30078
30268
  {
30079
30269
  "kind": "method",
30080
30270
  "name": "renderExpand",
@@ -30627,6 +30817,24 @@
30627
30817
  }
30628
30818
  ],
30629
30819
  "attributes": [
30820
+ {
30821
+ "name": "code-label",
30822
+ "type": {
30823
+ "text": "string"
30824
+ },
30825
+ "default": "'Code'",
30826
+ "description": "The name of a block that scrolls, which is a tab stop while it does.\n\nWhere the block has a name, the scroller says it too, such as \"Code,\napp.ts\", as `code-name-label` puts it.",
30827
+ "fieldName": "codeLabel"
30828
+ },
30829
+ {
30830
+ "name": "code-name-label",
30831
+ "type": {
30832
+ "text": "string"
30833
+ },
30834
+ "default": "'{code}, {name}'",
30835
+ "description": "The name of a block that scrolls, where the block has a name. `{code}` is\n`code-label` and `{name}` the block's name.",
30836
+ "fieldName": "codeNameLabel"
30837
+ },
30630
30838
  {
30631
30839
  "name": "collapse-label",
30632
30840
  "type": {
@@ -30824,7 +31032,7 @@
30824
31032
  "declarations": [
30825
31033
  {
30826
31034
  "kind": "class",
30827
- "description": "Renders a real `<code>` element, which marks the text as code for translation\ntools and document search. A styled span carries no such meaning, and a\nscreen reader announces nothing about it.\n\n`Code` is inline only and never scrolls. For a block of code with its own\nbox, its own overflow, and copying, use `CodeBlock`, which is a separate\nfamily.",
31035
+ "description": "Renders a real `<code>` element, which marks the text as code for translation\ntools and document search. A styled span carries no such meaning, and a\nscreen reader announces nothing about it.\n\n**Set `translate=\"no\"` on the element to keep a page translator off the\ncode.** A translator that rewrites prose would also rewrite an identifier.\nThe slotted text takes its translation mode from the element, its parent in\nthe page, and the element writes nothing onto itself, so the attribute is\nyours to set. The `<code>` inside carries `translate=\"no\"` for anything the\nelement draws itself.\n\n`Code` is inline only and never scrolls. For a block of code with its own\nbox, its own overflow, and copying, use `CodeBlock`, which is a separate\nfamily.",
30828
31036
  "name": "HelixHeadlessCode",
30829
31037
  "cssParts": [
30830
31038
  {
@@ -31259,7 +31467,7 @@
31259
31467
  "declarations": [
31260
31468
  {
31261
31469
  "kind": "class",
31262
- "description": "A text field with a button that opens `ColorPicker` in an overlay.\n`ColorPicker` provides the square, the ramps, the eyedropper, and the syntax\ntoggle, and you can also use it on its own, flat on the page. Color Input\nadds the field, the overlay, and the form value, the same arrangement Date\nInput has with `DatePicker`.\n\nYou can type or paste a color into the field without opening the picker.\nColor Input is a custom control, unlike `<input type=\"color\">`, so you can\nstyle the panel to match your interface.\n\nThe field reads every color syntax, including `#f00`, `#ff0000`,\n`rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`, and\n`hsl(0 100% 50%)`. It writes colors in the syntax that `format` names. The\nfield shows the value without reformatting it, because half-typed input does\nnot survive a round trip through a formatter. Date Input does the same with\ndates.\n\nTyping sends `input` on each keystroke and `change` when you leave the\nfield, as a text field does, so the message about a color it cannot read\nwaits until you are done. Dragging in the panel sends `input` as the color\nmoves and `change` when it settles.\n\nThe trigger and ArrowDown open the panel with focus in the square. Tab moves\nbetween the panel's controls without leaving it, and Escape closes it and\nreturns focus to the field.\n\nThe component sets `--color-input-swatch`, so do not set it yourself. It\nholds the resolved color, so the styled tier can paint the swatch without\nparsing the value.",
31470
+ "description": "A text field with a button that opens `ColorPicker` in an overlay.\n`ColorPicker` provides the square, the ramps, the eyedropper, and the syntax\ntoggle, and you can also use it on its own, flat on the page. Color Input\nadds the field, the overlay, and the form value, the same arrangement Date\nInput has with `DatePicker`.\n\nYou can type or paste a color into the field without opening the picker.\nColor Input is a custom control, unlike `<input type=\"color\">`, so you can\nstyle the panel to match your interface.\n\nThe field reads every color syntax, including `#f00`, `#ff0000`,\n`rgb(255 0 0)`, `rgba(255,0,0,.5)`, `rgb(255 0 0 / 50%)`,\n`hsl(0 100% 50%)`, `oklch(62.8% 0.258 29.2)`, and `hsb(0, 100%, 100%)`. It\nwrites colors in the syntax that `format` names. The\nfield shows the value without reformatting it, because half-typed input does\nnot survive a round trip through a formatter. Date Input does the same with\ndates.\n\nTyping sends `input` on each keystroke and `change` when you leave the\nfield, as a text field does, so the message about a color it cannot read\nwaits until you are done. Dragging in the panel sends `input` as the color\nmoves and `change` when it settles.\n\nThe trigger and ArrowDown open the panel with focus in the square. Tab moves\nbetween the panel's controls without leaving it, and Escape closes it and\nreturns focus to the field.\n\nThe component sets `--color-input-swatch`, so do not set it yourself. It\nholds the resolved color, so the styled tier can paint the swatch without\nparsing the value.",
31263
31471
  "name": "HelixHeadlessColorInput",
31264
31472
  "cssProperties": [
31265
31473
  {
@@ -31336,6 +31544,14 @@
31336
31544
  "description": "The current value, shown beside the track.",
31337
31545
  "name": "picker-channel-output"
31338
31546
  },
31547
+ {
31548
+ "description": "A ramp's thumb box, which holds no content in a picker.",
31549
+ "name": "picker-channel-thumb"
31550
+ },
31551
+ {
31552
+ "description": "The layer over a ramp's track that holds its thumb box.",
31553
+ "name": "picker-channel-thumbs"
31554
+ },
31339
31555
  {
31340
31556
  "description": "A ramp's value in a bubble, where a ramp shows one.",
31341
31557
  "name": "picker-channel-tooltip"
@@ -31432,10 +31648,18 @@
31432
31648
  "description": "The range input for the square's horizontal axis.",
31433
31649
  "name": "picker-grid-saturation"
31434
31650
  },
31651
+ {
31652
+ "description": "The picker's own help, which the field's `hint` stands in for here, so it stays hidden.",
31653
+ "name": "picker-hint"
31654
+ },
31435
31655
  {
31436
31656
  "description": "An icon drawn by the picker.",
31437
31657
  "name": "picker-icon"
31438
31658
  },
31659
+ {
31660
+ "description": "The picker's own name, which the field's `label` stands in for here, so it stays hidden.",
31661
+ "name": "picker-label"
31662
+ },
31439
31663
  {
31440
31664
  "description": "A chip of the current color. Pressing it copies the value.",
31441
31665
  "name": "picker-sample"
@@ -31570,9 +31794,9 @@
31570
31794
  "kind": "field",
31571
31795
  "name": "format",
31572
31796
  "type": {
31573
- "text": "'hex' | 'hsl' | 'rgb' | undefined"
31797
+ "text": "'hex' | 'hsb' | 'hsl' | 'oklch' | 'rgb' | undefined"
31574
31798
  },
31575
- "description": "The syntax the value is written in: `hex`, `rgb`, or `hsl`.\n\n**Undefaulted, because it reflects.** The two together stamp an attribute\nonto every host anybody renders, including the ones nobody configured: the\nserver writes `format=\"hex\"` on every color input on the page, and React,\nholding no such prop, reports a hydration mismatch for each one.\n`helix component`'s `reflected-defaults` holds it. Hex is still what an unset one\nwrites; the resting arrangement is the attribute's absence rather than a\nvalue spelled out.",
31799
+ "description": "The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or\n`hsb`, as Color Picker's `format`.\n\n**Undefaulted, because it reflects.** The two together stamp an attribute\nonto every host anybody renders, including the ones nobody configured: the\nserver writes `format=\"hex\"` on every color input on the page, and React,\nholding no such prop, reports a hydration mismatch for each one.\n`helix component`'s `reflected-defaults` holds it. Hex is still what an unset one\nwrites; the resting arrangement is the attribute's absence rather than a\nvalue spelled out.",
31576
31800
  "attribute": "format",
31577
31801
  "reflects": true
31578
31802
  },
@@ -33541,9 +33765,9 @@
33541
33765
  {
33542
33766
  "name": "format",
33543
33767
  "type": {
33544
- "text": "'hex' | 'hsl' | 'rgb' | undefined"
33768
+ "text": "'hex' | 'hsb' | 'hsl' | 'oklch' | 'rgb' | undefined"
33545
33769
  },
33546
- "description": "The syntax the value is written in: `hex`, `rgb`, or `hsl`.\n\n**Undefaulted, because it reflects.** The two together stamp an attribute\nonto every host anybody renders, including the ones nobody configured: the\nserver writes `format=\"hex\"` on every color input on the page, and React,\nholding no such prop, reports a hydration mismatch for each one.\n`helix component`'s `reflected-defaults` holds it. Hex is still what an unset one\nwrites; the resting arrangement is the attribute's absence rather than a\nvalue spelled out.",
33770
+ "description": "The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or\n`hsb`, as Color Picker's `format`.\n\n**Undefaulted, because it reflects.** The two together stamp an attribute\nonto every host anybody renders, including the ones nobody configured: the\nserver writes `format=\"hex\"` on every color input on the page, and React,\nholding no such prop, reports a hydration mismatch for each one.\n`helix component`'s `reflected-defaults` holds it. Hex is still what an unset one\nwrites; the resting arrangement is the attribute's absence rather than a\nvalue spelled out.",
33547
33771
  "fieldName": "format"
33548
33772
  },
33549
33773
  {
@@ -33909,7 +34133,7 @@
33909
34133
  }
33910
34134
  }
33911
34135
  ],
33912
- "description": "The numbers a color is written with in `format`, for a field each, as React\nAria's ColorField takes a `channel`: red, green and blue for hex and rgb,\nhue, saturation and lightness for hsl, and the opacity where the picker\ncarries one.\n\nHex is written as bytes, so its fields are the bytes: a field of two hex\ndigits would ask a reader to count in base sixteen."
34136
+ "description": "The numbers a color is written with in `format`, for a field each, as React\nAria's ColorField takes a `channel`: red, green and blue for hex and rgb,\nhue, saturation and lightness for hsl, hue, saturation and brightness for\nhsb, lightness, chroma and hue for oklch, and the opacity where the picker\ncarries one.\n\nHex is written as bytes, so its fields are the bytes: a field of two hex\ndigits would ask a reader to count in base sixteen."
33913
34137
  },
33914
34138
  {
33915
34139
  "kind": "function",
@@ -33994,7 +34218,7 @@
33994
34218
  "declarations": [
33995
34219
  {
33996
34220
  "kind": "class",
33997
- "description": "The picker on its own, with no field around it, for a settings pane or a\ntoolbar. Color Input shows this element in a panel behind a text field.\n\nThe saturation and brightness square is two `<input type=\"range\">` elements,\nlaid over the square and made invisible, and the handle is drawn from their\nvalues. The keyboard behavior, the announcements, and the touch targets come\nfrom the platform, and there is no `role=\"application\"`.\n\nThe picker works in HSB and derives the value from it. A value set from\noutside is read into the model once. Black is `brightness: 0`, which has no\nhue or saturation, so a model read back from the value would turn red into\ngray after you drag to the bottom of the square and back.\n\nThe square is one tab stop. In it, the up and down arrows move brightness\nand the left and right arrows move saturation, and PageUp and PageDown move\nbrightness by ten. The picker sends `input` as the color moves and `change`\nwhen a drag, a key, a typed value or a preset settles it, as\n`<input type=\"color\">` does.\n\nA screen reader hears the color's name, such as \"vibrant red\", after the two\nnumbers on the square and after the number on the hue ramp, and each preset\nis named by its color. The opacity ramp is heard as a percentage. Set\n`color-words` to speak the names in another language.\n\nThe presets are a listbox with the current color selected, and one tab\nstop. The arrow keys move between them, Home and End go to the ends, and\nEnter, Space or a press chooses one.",
34221
+ "description": "The picker on its own, with no field around it, for a settings pane or a\ntoolbar. Color Input shows this element in a panel behind a text field.\n\nThe saturation and brightness square is two `<input type=\"range\">` elements,\nlaid over the square and made invisible, and the handle is drawn from their\nvalues. The keyboard behavior, the announcements, and the touch targets come\nfrom the platform, and there is no `role=\"application\"`.\n\nThe picker works in HSB and derives the value from it. A value set from\noutside is read into the model once. Black is `brightness: 0`, which has no\nhue or saturation, so a model read back from the value would turn red into\ngray after you drag to the bottom of the square and back.\n\nThe square is one tab stop. In it, the up and down arrows move brightness\nand the left and right arrows move saturation, and PageUp and PageDown move\nbrightness by ten. The picker sends `input` as the color moves and `change`\nwhen a drag, a key, a typed value or a preset settles it, as\n`<input type=\"color\">` does.\n\nA screen reader hears the color's name, such as \"vibrant red\", after the two\nnumbers on the square and after the number on the hue ramp, and each preset\nis named by its color. The opacity ramp is heard as a percentage. Set\n`color-words` to speak the names in another language.\n\n`label` names the picker, which is then a group with that name, and the\nsquare's ramps say it before their own, as \"Brand, Saturation\". `hint`\nwrites help under the picker, which the square, the ramps and the value\nfield are described by. Inside Color Input the field carries both.\n\nThe presets are a listbox with the current color selected, and one tab\nstop. The arrow keys move between them, Home and End go to the ends, and\nEnter, Space or a press chooses one.",
33998
34222
  "name": "HelixHeadlessColorPicker",
33999
34223
  "cssProperties": [
34000
34224
  {
@@ -34059,6 +34283,14 @@
34059
34283
  "description": "The current value, shown beside the track.",
34060
34284
  "name": "channel-output"
34061
34285
  },
34286
+ {
34287
+ "description": "A ramp's thumb box, which holds no content in a picker.",
34288
+ "name": "channel-thumb"
34289
+ },
34290
+ {
34291
+ "description": "The layer over a ramp's track that holds its thumb box.",
34292
+ "name": "channel-thumbs"
34293
+ },
34062
34294
  {
34063
34295
  "description": "A ramp's value in a bubble, where a ramp shows one.",
34064
34296
  "name": "channel-tooltip"
@@ -34151,6 +34383,14 @@
34151
34383
  "description": "The range input for the square's horizontal axis.",
34152
34384
  "name": "grid-saturation"
34153
34385
  },
34386
+ {
34387
+ "description": "The help under the picker, while `hint` is set or the `hint` slot has content.",
34388
+ "name": "hint"
34389
+ },
34390
+ {
34391
+ "description": "The name above the picker, while `label` is set or the `label` slot has content.",
34392
+ "name": "label"
34393
+ },
34154
34394
  {
34155
34395
  "description": "A chip of the current color. Pressing it copies the value.",
34156
34396
  "name": "sample"
@@ -34180,6 +34420,14 @@
34180
34420
  {
34181
34421
  "description": "The icon on the eyedropper button, usually a dropper.",
34182
34422
  "name": "eyedropper-icon"
34423
+ },
34424
+ {
34425
+ "description": "Help under the picker, for content richer than the `hint` text.",
34426
+ "name": "hint"
34427
+ },
34428
+ {
34429
+ "description": "The name above the picker, for content richer than the `label` text.",
34430
+ "name": "label"
34183
34431
  }
34184
34432
  ],
34185
34433
  "members": [
@@ -34260,9 +34508,22 @@
34260
34508
  "text": "boolean"
34261
34509
  },
34262
34510
  "default": "false",
34263
- "description": "Whether the picker shows a number field for each channel of the color, as\nReact Aria's ColorField does with `channel`: red, green and blue for hex\nand rgb, hue, saturation and lightness for hsl, and the opacity with\n`alpha`.\n\nFor a reader who has the numbers from a brand guide, and for a keyboard,\nwhere typing 128 is quicker than holding an arrow key. The fields follow\nthe syntax the format toggle sets.",
34511
+ "description": "Whether the picker shows a number field for each channel of the color, as\nReact Aria's ColorField does with `channel`: red, green and blue for hex\nand rgb, hue, saturation and lightness for hsl, hue, saturation and\nbrightness for hsb, lightness, chroma and hue for oklch, and the opacity\nwith `alpha`.\n\nFor a reader who has the numbers from a brand guide, and for a keyboard,\nwhere typing 128 is quicker than holding an arrow key. The fields follow\nthe syntax the format toggle sets.",
34264
34512
  "attribute": "channel-fields"
34265
34513
  },
34514
+ {
34515
+ "kind": "field",
34516
+ "name": "chromaLabel",
34517
+ "type": {
34518
+ "text": "string"
34519
+ },
34520
+ "default": "'Chroma'",
34521
+ "description": "What the chroma channel's field is called, in `channel-fields` with\noklch.",
34522
+ "attribute": "chroma-label",
34523
+ "helix": {
34524
+ "words": true
34525
+ }
34526
+ },
34266
34527
  {
34267
34528
  "kind": "field",
34268
34529
  "name": "colorWords",
@@ -34316,9 +34577,9 @@
34316
34577
  "kind": "field",
34317
34578
  "name": "format",
34318
34579
  "type": {
34319
- "text": "'hex' | 'hsl' | 'rgb' | undefined"
34580
+ "text": "'hex' | 'hsb' | 'hsl' | 'oklch' | 'rgb' | undefined"
34320
34581
  },
34321
- "description": "The syntax the value is written in: `hex`, `rgb`, or `hsl`.\n\nOnly what is written. Everything is read whatever this says, so a picker on\n`hex` still takes an `rgb()` handed to it and stores the hex for it.",
34582
+ "description": "The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or\n`hsb`.\n\nOnly what is written. Everything is read whatever this says, so a picker on\n`hex` still takes an `rgb()` or an `oklch()` handed to it and stores the\nhex for it. `oklch` writes the sRGB color the picker holds, such as\n`oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is\nclipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,\nas React Aria's and Zag's color strings do. It is not CSS, so the toggle\nwalks the other four.",
34322
34583
  "attribute": "format",
34323
34584
  "reflects": true
34324
34585
  },
@@ -34348,6 +34609,16 @@
34348
34609
  "words": true
34349
34610
  }
34350
34611
  },
34612
+ {
34613
+ "kind": "field",
34614
+ "name": "hint",
34615
+ "type": {
34616
+ "text": "string"
34617
+ },
34618
+ "default": "''",
34619
+ "description": "Help under the picker, such as what the color is used for. The `hint`\nslot takes richer content.",
34620
+ "attribute": "hint"
34621
+ },
34351
34622
  {
34352
34623
  "kind": "field",
34353
34624
  "name": "hueLabel",
@@ -34361,6 +34632,16 @@
34361
34632
  "words": true
34362
34633
  }
34363
34634
  },
34635
+ {
34636
+ "kind": "field",
34637
+ "name": "label",
34638
+ "type": {
34639
+ "text": "string"
34640
+ },
34641
+ "default": "''",
34642
+ "description": "The name above the picker, such as \"Brand color\". The picker is then a\ngroup with this name. The `label` slot takes richer content.",
34643
+ "attribute": "label"
34644
+ },
34364
34645
  {
34365
34646
  "kind": "field",
34366
34647
  "name": "lightnessLabel",
@@ -34368,7 +34649,7 @@
34368
34649
  "text": "string"
34369
34650
  },
34370
34651
  "default": "'Lightness'",
34371
- "description": "What the lightness channel's field is called, in `channel-fields` with\nhsl.",
34652
+ "description": "What the lightness channel's field is called, in `channel-fields` with\nhsl and oklch.",
34372
34653
  "attribute": "lightness-label",
34373
34654
  "helix": {
34374
34655
  "words": true
@@ -34579,6 +34860,81 @@
34579
34860
  "privacy": "private",
34580
34861
  "description": "The preset the reader was last on, which holds the row's one tab stop."
34581
34862
  },
34863
+ {
34864
+ "kind": "method",
34865
+ "name": "slottedIn",
34866
+ "privacy": "private",
34867
+ "return": {
34868
+ "type": {
34869
+ "text": "Element[]"
34870
+ }
34871
+ },
34872
+ "parameters": [
34873
+ {
34874
+ "name": "name",
34875
+ "type": {
34876
+ "text": "'hint' | 'label'"
34877
+ }
34878
+ }
34879
+ ],
34880
+ "description": "The children in a slot, read off the children rather than heard from\n`slotchange`: a declarative shadow root fires that before anything\nlistens, so a served picker kept its label hidden."
34881
+ },
34882
+ {
34883
+ "kind": "field",
34884
+ "name": "handleNamingSlot",
34885
+ "privacy": "private",
34886
+ "readonly": true
34887
+ },
34888
+ {
34889
+ "kind": "field",
34890
+ "name": "named",
34891
+ "type": {
34892
+ "text": "string"
34893
+ },
34894
+ "privacy": "private",
34895
+ "description": "The picker's own name, from `label` or the `label` slot's words.",
34896
+ "readonly": true
34897
+ },
34898
+ {
34899
+ "kind": "field",
34900
+ "name": "hinted",
34901
+ "type": {
34902
+ "text": "boolean"
34903
+ },
34904
+ "privacy": "private",
34905
+ "description": "Whether help is shown under the picker.",
34906
+ "readonly": true
34907
+ },
34908
+ {
34909
+ "kind": "field",
34910
+ "name": "describedBy",
34911
+ "type": {
34912
+ "text": "string | typeof nothing"
34913
+ },
34914
+ "privacy": "private",
34915
+ "description": "The ids a control in the picker is described by: the help, then the message.",
34916
+ "readonly": true
34917
+ },
34918
+ {
34919
+ "kind": "field",
34920
+ "name": "dragging",
34921
+ "type": {
34922
+ "text": "boolean"
34923
+ },
34924
+ "privacy": "private",
34925
+ "default": "false",
34926
+ "description": "Whether a pointer is dragging the square's handle, said as `:state(dragging)`."
34927
+ },
34928
+ {
34929
+ "kind": "field",
34930
+ "name": "picking",
34931
+ "type": {
34932
+ "text": "boolean"
34933
+ },
34934
+ "privacy": "private",
34935
+ "default": "false",
34936
+ "description": "Whether the eyedropper is open, said as `:state(sampling)`."
34937
+ },
34582
34938
  {
34583
34939
  "kind": "field",
34584
34940
  "name": "owned",
@@ -36059,9 +36415,18 @@
36059
36415
  "text": "boolean"
36060
36416
  },
36061
36417
  "default": "false",
36062
- "description": "Whether the picker shows a number field for each channel of the color, as\nReact Aria's ColorField does with `channel`: red, green and blue for hex\nand rgb, hue, saturation and lightness for hsl, and the opacity with\n`alpha`.\n\nFor a reader who has the numbers from a brand guide, and for a keyboard,\nwhere typing 128 is quicker than holding an arrow key. The fields follow\nthe syntax the format toggle sets.",
36418
+ "description": "Whether the picker shows a number field for each channel of the color, as\nReact Aria's ColorField does with `channel`: red, green and blue for hex\nand rgb, hue, saturation and lightness for hsl, hue, saturation and\nbrightness for hsb, lightness, chroma and hue for oklch, and the opacity\nwith `alpha`.\n\nFor a reader who has the numbers from a brand guide, and for a keyboard,\nwhere typing 128 is quicker than holding an arrow key. The fields follow\nthe syntax the format toggle sets.",
36063
36419
  "fieldName": "channelFields"
36064
36420
  },
36421
+ {
36422
+ "name": "chroma-label",
36423
+ "type": {
36424
+ "text": "string"
36425
+ },
36426
+ "default": "'Chroma'",
36427
+ "description": "What the chroma channel's field is called, in `channel-fields` with\noklch.",
36428
+ "fieldName": "chromaLabel"
36429
+ },
36065
36430
  {
36066
36431
  "name": "color-words",
36067
36432
  "type": {
@@ -36101,9 +36466,9 @@
36101
36466
  {
36102
36467
  "name": "format",
36103
36468
  "type": {
36104
- "text": "'hex' | 'hsl' | 'rgb' | undefined"
36469
+ "text": "'hex' | 'hsb' | 'hsl' | 'oklch' | 'rgb' | undefined"
36105
36470
  },
36106
- "description": "The syntax the value is written in: `hex`, `rgb`, or `hsl`.\n\nOnly what is written. Everything is read whatever this says, so a picker on\n`hex` still takes an `rgb()` handed to it and stores the hex for it.",
36471
+ "description": "The syntax the value is written in: `hex`, `rgb`, `hsl`, `oklch`, or\n`hsb`.\n\nOnly what is written. Everything is read whatever this says, so a picker on\n`hex` still takes an `rgb()` or an `oklch()` handed to it and stores the\nhex for it. `oklch` writes the sRGB color the picker holds, such as\n`oklch(62.8% 0.258 29.2)`; a color outside sRGB that is handed in is\nclipped to it. `hsb` writes the picker's own model, `hsb(0, 100%, 100%)`,\nas React Aria's and Zag's color strings do. It is not CSS, so the toggle\nwalks the other four.",
36107
36472
  "fieldName": "format"
36108
36473
  },
36109
36474
  {
@@ -36124,6 +36489,15 @@
36124
36489
  "description": "What the green channel's field is called, in `channel-fields`.",
36125
36490
  "fieldName": "greenLabel"
36126
36491
  },
36492
+ {
36493
+ "name": "hint",
36494
+ "type": {
36495
+ "text": "string"
36496
+ },
36497
+ "default": "''",
36498
+ "description": "Help under the picker, such as what the color is used for. The `hint`\nslot takes richer content.",
36499
+ "fieldName": "hint"
36500
+ },
36127
36501
  {
36128
36502
  "name": "hue-label",
36129
36503
  "type": {
@@ -36133,13 +36507,22 @@
36133
36507
  "description": "What the hue channel is called.",
36134
36508
  "fieldName": "hueLabel"
36135
36509
  },
36510
+ {
36511
+ "name": "label",
36512
+ "type": {
36513
+ "text": "string"
36514
+ },
36515
+ "default": "''",
36516
+ "description": "The name above the picker, such as \"Brand color\". The picker is then a\ngroup with this name. The `label` slot takes richer content.",
36517
+ "fieldName": "label"
36518
+ },
36136
36519
  {
36137
36520
  "name": "lightness-label",
36138
36521
  "type": {
36139
36522
  "text": "string"
36140
36523
  },
36141
36524
  "default": "'Lightness'",
36142
- "description": "What the lightness channel's field is called, in `channel-fields` with\nhsl.",
36525
+ "description": "What the lightness channel's field is called, in `channel-fields` with\nhsl and oklch.",
36143
36526
  "fieldName": "lightnessLabel"
36144
36527
  },
36145
36528
  {
@@ -36356,10 +36739,22 @@
36356
36739
  }
36357
36740
  ],
36358
36741
  "cssStates": [
36742
+ {
36743
+ "description": "The moment after the sample copies the value, while it says `copied-label`.",
36744
+ "name": "copied"
36745
+ },
36746
+ {
36747
+ "description": "While a pointer drags the square's handle.",
36748
+ "name": "dragging"
36749
+ },
36359
36750
  {
36360
36751
  "description": "While `invalid` is set or `feedback` says what is wrong.",
36361
36752
  "name": "invalid"
36362
36753
  },
36754
+ {
36755
+ "description": "While the eyedropper is open over the screen.",
36756
+ "name": "sampling"
36757
+ },
36363
36758
  {
36364
36759
  "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
36365
36760
  "name": "settled",
@@ -46847,6 +47242,10 @@
46847
47242
  "description": "Today. Applied with `picker-day`.",
46848
47243
  "name": "picker-day-today"
46849
47244
  },
47245
+ {
47246
+ "description": "A day of the weekend where the calendar's language is spoken, beside `picker-day`.",
47247
+ "name": "picker-day-weekend"
47248
+ },
46850
47249
  {
46851
47250
  "description": "The calendar's own message, under it, while the calendar's `feedback` is set.",
46852
47251
  "name": "picker-feedback"
@@ -50779,6 +51178,10 @@
50779
51178
  "description": "Today, beside `day`.",
50780
51179
  "name": "day-today"
50781
51180
  },
51181
+ {
51182
+ "description": "A day of the weekend where the calendar's language is spoken, beside `day`: Saturday and Sunday in `en-US`, Friday and Saturday in `ar-EG`.",
51183
+ "name": "day-weekend"
51184
+ },
50782
51185
  {
50783
51186
  "description": "The message under the calendar, while `feedback` is set.",
50784
51187
  "name": "feedback"
@@ -50852,11 +51255,19 @@
50852
51255
  "name": "week"
50853
51256
  },
50854
51257
  {
50855
- "description": "A column header naming a day of the week.",
51258
+ "description": "A column header naming a day of the week. It shows the short name and says the full one.",
50856
51259
  "name": "weekday"
50857
51260
  }
50858
51261
  ],
50859
51262
  "slots": [
51263
+ {
51264
+ "description": "Content under the calendar, such as buttons for today or a common range.",
51265
+ "name": "footer"
51266
+ },
51267
+ {
51268
+ "description": "Content above the calendar, such as a note on what the date is for.",
51269
+ "name": "header"
51270
+ },
50860
51271
  {
50861
51272
  "description": "The glyph on the control that moves forward a month, usually a caret.",
50862
51273
  "name": "next-icon"
@@ -50894,9 +51305,9 @@
50894
51305
  "kind": "field",
50895
51306
  "name": "calendar",
50896
51307
  "type": {
50897
- "text": "'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'roc' | undefined"
51308
+ "text": "'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'roc' | 'coptic' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic-civil' | 'islamic-umalqura' | 'persian' | undefined"
50898
51309
  },
50899
- "description": "The calendar the heading, the days, and the months are written in:\n`gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose\nmonths are the Gregorian months.\n\nAbsent is the locale's own where it is one of the five, such as\n`buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and\n`gregory` for every other, such as `persian` for `fa-IR`, so the heading\nnames the Gregorian month the grid shows. The value is `YYYY-MM-DD` in\nevery calendar.",
51310
+ "description": "The calendar the heading, the days, and the months are written in.\n\n`gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five\nwhose months are the Gregorian months. Absent is the locale's own where\nit is one of the five, such as `buddhist` for `th-TH` or `japanese` for\n`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`\nfor `fa-IR`.\n\n`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,\n`coptic`, and `indian` draw a calendar with months of its own, as React\nAria's calendars do: each grid is one of that calendar's months, the\nHebrew leap month and Ethiopia's five-day thirteenth month included, and\nPrevious, Next and the page keys move by those months. `month` and\n`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The\nheading stays text, as the months and years views are drawn in Gregorian\nmonths only. The value is `YYYY-MM-DD` in every calendar.",
50900
51311
  "attribute": "calendar"
50901
51312
  },
50902
51313
  {
@@ -51042,7 +51453,7 @@
51042
51453
  "type": {
51043
51454
  "text": "string"
51044
51455
  },
51045
- "description": "The month shown, as `YYYY-MM`. When it is not set, it follows `value`,\nthen the current month.\n\nSeparate from `value` on purpose, so paging selects nothing and a consumer\ncan drive the view. Reading gives the month on show; writing sets it, and\n`default-month` seeds one the calendar keeps until somebody does.",
51456
+ "description": "The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a\n`calendar` with months of its own. When it is not set, it follows\n`value`, then the current month.\n\nSeparate from `value` on purpose, so paging selects nothing and a consumer\ncan drive the view. Reading gives the month on show; writing sets it, and\n`default-month` seeds one the calendar keeps until somebody does.",
51046
51457
  "attribute": "month"
51047
51458
  },
51048
51459
  {
@@ -51179,6 +51590,16 @@
51179
51590
  "description": "The selected dates, in order.",
51180
51591
  "readonly": true
51181
51592
  },
51593
+ {
51594
+ "kind": "field",
51595
+ "name": "weekend",
51596
+ "type": {
51597
+ "text": "number[]"
51598
+ },
51599
+ "privacy": "private",
51600
+ "description": "The days of the weekend, `0` for Sunday: the locale's, or Saturday and Sunday where none is named.",
51601
+ "readonly": true
51602
+ },
51182
51603
  {
51183
51604
  "kind": "field",
51184
51605
  "name": "weekStart",
@@ -51237,6 +51658,26 @@
51237
51658
  "description": "The month being shown, resolved from `month`, then `value`, then today.",
51238
51659
  "readonly": true
51239
51660
  },
51661
+ {
51662
+ "kind": "field",
51663
+ "name": "system",
51664
+ "type": {
51665
+ "text": "MonthSystem"
51666
+ },
51667
+ "privacy": "private",
51668
+ "description": "The months the calendar pages through: its own under a `calendar` with\nmonths of its own, and the Gregorian months otherwise.",
51669
+ "readonly": true
51670
+ },
51671
+ {
51672
+ "kind": "field",
51673
+ "name": "ownMonths",
51674
+ "type": {
51675
+ "text": "boolean"
51676
+ },
51677
+ "privacy": "private",
51678
+ "description": "Whether `calendar` names a calendar with months of its own.",
51679
+ "readonly": true
51680
+ },
51240
51681
  {
51241
51682
  "kind": "field",
51242
51683
  "name": "derivedMonth",
@@ -51666,6 +52107,16 @@
51666
52107
  "words": true
51667
52108
  }
51668
52109
  },
52110
+ {
52111
+ "kind": "field",
52112
+ "name": "timeZone",
52113
+ "type": {
52114
+ "text": "string"
52115
+ },
52116
+ "default": "''",
52117
+ "description": "The time zone today is read in, such as `America/New_York`, as React\nAria's `today(timeZone)` reads it. Empty is the reader's own.\n\nDates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:\nthe day marked `aria-current` and `day-today`, and the month a picker\nwith no value opens on. A desk in Tokyo booking for an office in New York\nsets `America/New_York`, and today is the office's.",
52118
+ "attribute": "time-zone"
52119
+ },
51669
52120
  {
51670
52121
  "kind": "field",
51671
52122
  "name": "unavailableMessage",
@@ -51789,7 +52240,7 @@
51789
52240
  "kind": "field",
51790
52241
  "name": "cachedFormats",
51791
52242
  "type": {
51792
- "text": "| {\n full: Intl.DateTimeFormat\n heading: Intl.DateTimeFormat\n locale: string\n long: Intl.DateTimeFormat\n monthName: Intl.DateTimeFormat\n monthYear: Intl.DateTimeFormat\n weekday: Intl.DateTimeFormat\n year: Intl.DateTimeFormat\n }\n | undefined"
52243
+ "text": "| {\n full: Intl.DateTimeFormat\n heading: Intl.DateTimeFormat\n locale: string\n long: Intl.DateTimeFormat\n monthName: Intl.DateTimeFormat\n monthYear: Intl.DateTimeFormat\n weekday: Intl.DateTimeFormat\n weekdayName: Intl.DateTimeFormat\n year: Intl.DateTimeFormat\n }\n | undefined"
51793
52244
  },
51794
52245
  "privacy": "private",
51795
52246
  "description": "The three date formatters, built once per locale rather than per render.\n\n`Intl.DateTimeFormat` costs about a quarter of a millisecond to construct\nand these depend on nothing but `locale` and `calendar`, so building them\ninside the per-month render is three constructions for every month on\nshow, on every update: a two-month calendar rebuilds six each time an\narrow key moves the anchor.\n\nKeyed on the locale with its calendar, so a change to either is picked\nup, which a plain lazy field would not do."
@@ -51798,7 +52249,7 @@
51798
52249
  "kind": "field",
51799
52250
  "name": "formats",
51800
52251
  "type": {
51801
- "text": "{\n full: Intl.DateTimeFormat\n heading: Intl.DateTimeFormat\n long: Intl.DateTimeFormat\n monthName: Intl.DateTimeFormat\n monthYear: Intl.DateTimeFormat\n weekday: Intl.DateTimeFormat\n year: Intl.DateTimeFormat\n }"
52252
+ "text": "{\n full: Intl.DateTimeFormat\n heading: Intl.DateTimeFormat\n long: Intl.DateTimeFormat\n monthName: Intl.DateTimeFormat\n monthYear: Intl.DateTimeFormat\n weekday: Intl.DateTimeFormat\n weekdayName: Intl.DateTimeFormat\n year: Intl.DateTimeFormat\n }"
51802
52253
  },
51803
52254
  "privacy": "private",
51804
52255
  "readonly": true
@@ -52918,9 +53369,9 @@
52918
53369
  {
52919
53370
  "name": "calendar",
52920
53371
  "type": {
52921
- "text": "'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'roc' | undefined"
53372
+ "text": "'buddhist' | 'gregory' | 'iso8601' | 'japanese' | 'roc' | 'coptic' | 'ethiopic' | 'hebrew' | 'indian' | 'islamic-civil' | 'islamic-umalqura' | 'persian' | undefined"
52922
53373
  },
52923
- "description": "The calendar the heading, the days, and the months are written in:\n`gregory`, `buddhist`, `japanese`, `roc`, or `iso8601`, the five whose\nmonths are the Gregorian months.\n\nAbsent is the locale's own where it is one of the five, such as\n`buddhist` for `th-TH` or `japanese` for `ja-JP-u-ca-japanese`, and\n`gregory` for every other, such as `persian` for `fa-IR`, so the heading\nnames the Gregorian month the grid shows. The value is `YYYY-MM-DD` in\nevery calendar.",
53374
+ "description": "The calendar the heading, the days, and the months are written in.\n\n`gregory`, `buddhist`, `japanese`, `roc`, and `iso8601` are the five\nwhose months are the Gregorian months. Absent is the locale's own where\nit is one of the five, such as `buddhist` for `th-TH` or `japanese` for\n`ja-JP-u-ca-japanese`, and `gregory` for every other, such as `persian`\nfor `fa-IR`.\n\n`persian`, `hebrew`, `islamic-umalqura`, `islamic-civil`, `ethiopic`,\n`coptic`, and `indian` draw a calendar with months of its own, as React\nAria's calendars do: each grid is one of that calendar's months, the\nHebrew leap month and Ethiopia's five-day thirteenth month included, and\nPrevious, Next and the page keys move by those months. `month` and\n`helix-navigate` then name a month by its first day, `YYYY-MM-DD`. The\nheading stays text, as the months and years views are drawn in Gregorian\nmonths only. The value is `YYYY-MM-DD` in every calendar.",
52924
53375
  "fieldName": "calendar"
52925
53376
  },
52926
53377
  {
@@ -53015,7 +53466,7 @@
53015
53466
  "type": {
53016
53467
  "text": "string"
53017
53468
  },
53018
- "description": "The month shown, as `YYYY-MM`. When it is not set, it follows `value`,\nthen the current month.\n\nSeparate from `value` on purpose, so paging selects nothing and a consumer\ncan drive the view. Reading gives the month on show; writing sets it, and\n`default-month` seeds one the calendar keeps until somebody does.",
53469
+ "description": "The month shown, as `YYYY-MM`, or as its first day, `YYYY-MM-DD`, under a\n`calendar` with months of its own. When it is not set, it follows\n`value`, then the current month.\n\nSeparate from `value` on purpose, so paging selects nothing and a consumer\ncan drive the view. Reading gives the month on show; writing sets it, and\n`default-month` seeds one the calendar keeps until somebody does.",
53019
53470
  "fieldName": "month"
53020
53471
  },
53021
53472
  {
@@ -53144,6 +53595,15 @@
53144
53595
  "description": "The validation message for a date that `step` skips.",
53145
53596
  "fieldName": "stepMismatchMessage"
53146
53597
  },
53598
+ {
53599
+ "name": "time-zone",
53600
+ "type": {
53601
+ "text": "string"
53602
+ },
53603
+ "default": "''",
53604
+ "description": "The time zone today is read in, such as `America/New_York`, as React\nAria's `today(timeZone)` reads it. Empty is the reader's own.\n\nDates are plain `YYYY-MM-DD` and carry no zone, so this moves only today:\nthe day marked `aria-current` and `day-today`, and the month a picker\nwith no value opens on. A desk in Tokyo booking for an office in New York\nsets `America/New_York`, and today is the office's.",
53605
+ "fieldName": "timeZone"
53606
+ },
53147
53607
  {
53148
53608
  "name": "unavailable-message",
53149
53609
  "type": {
@@ -60214,16 +60674,28 @@
60214
60674
  "declarations": [
60215
60675
  {
60216
60676
  "kind": "class",
60217
- "description": "Shows what would be in a region and the one action that would fill it, so an\nempty region does not look like one that failed to load.\n\nThe message is announced, because an empty view often replaces content that\nwas loading, and the announcement tells a screen reader user that the search\nreturned nothing. It is announced from a status region of its own, which is\nrendered empty and filled a frame after the view appears. Screen readers read\na region that arrives with its text already in it inconsistently. For the\nseven seconds the region holds its copy, the heading and the message are\nhidden from screen readers, so the words are in the page once.\n\nEvery region is a bare slot. There is no `empty-state-heading` or\n`empty-state-actions` element: assign your own heading and actions to the\nslots.\n\n**Or give the heading as words.** `heading` draws them in a `heading` part\nthat is a heading at `heading-level`, 3 where it is not set, so a page\nrendering from data or on a server gets a heading a reader finds in the\noutline without writing the element. A heading slotted in replaces it.\n\n**Whatever is slotted into `heading` is read as a heading.** An element that\nis no heading, such as a `<span>` or a `<p>`, is set inside the `heading`\npart at `heading-level`, so a screen reader still finds it in the outline.\nA heading element, or an element holding one, keeps its own level. A server\ncannot see the slotted element, so a served `<span>` becomes a heading once\nthe script runs.",
60677
+ "description": "Shows what would be in a region and the one action that would fill it, so an\nempty region does not look like one that failed to load.\n\nThe message is announced, because an empty view often replaces content that\nwas loading, and the announcement tells a screen reader user that the search\nreturned nothing. It is announced from a status region of its own, which is\nrendered empty and filled a frame after the view appears. Screen readers read\na region that arrives with its text already in it inconsistently. For the\nseven seconds the region holds its copy, the heading and the message are\nhidden from screen readers, so the words are in the page once.\n\nEvery region is a bare slot. There is no `empty-state-heading` or\n`empty-state-actions` element: assign your own heading and actions to the\nslots. The icon, the message and the actions slots are parts of the same\nnames, as Card's regions are. A slot draws no box, so a part passes\ninherited properties, such as color and font, to what is slotted, and a\npage wanting a box there gives it one with `display`, such as a row of\nactions with `display: flex`.\n\n**The view says which regions it holds**, as `:state(has-icon)` and\n`:state(has-actions)`, so a sheet can space a view with no icon or no\nactions differently. Read in the browser, so a served view carries neither\nuntil the script runs.\n\n**Or give the heading as words.** `heading` draws them in a `heading` part\nthat is a heading at `heading-level`, 3 where it is not set, so a page\nrendering from data or on a server gets a heading a reader finds in the\noutline without writing the element. A heading slotted in replaces it.\n\n**Whatever is slotted into `heading` is read as a heading.** An element that\nis no heading, such as a `<span>` or a `<p>`, is set inside the `heading`\npart at `heading-level`, so a screen reader still finds it in the outline.\nA heading element, or an element holding one, keeps its own level. A server\ncannot see the slotted element, so a served `<span>` becomes a heading once\nthe script runs.",
60218
60678
  "name": "HelixHeadlessEmpty",
60219
60679
  "cssParts": [
60680
+ {
60681
+ "description": "The slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; `display: flex` lays them out in a row.",
60682
+ "name": "actions"
60683
+ },
60220
60684
  {
60221
60685
  "description": "The heading at `heading-level`: the one `heading` draws while nothing is slotted into `heading`, or the one around a slotted element that is no heading.",
60222
60686
  "name": "heading"
60223
60687
  },
60688
+ {
60689
+ "description": "The slot the icon arrives through, drawing no box, as `actions` does.",
60690
+ "name": "icon"
60691
+ },
60224
60692
  {
60225
60693
  "description": "A copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.",
60226
60694
  "name": "live"
60695
+ },
60696
+ {
60697
+ "description": "The slot the message arrives through, drawing no box, as `actions` does.",
60698
+ "name": "message"
60227
60699
  }
60228
60700
  ],
60229
60701
  "slots": [
@@ -60285,6 +60757,13 @@
60285
60757
  "default": "false",
60286
60758
  "description": "Whether the `heading` slot holds elements and none of them is or holds a\nheading, read from the children before each render."
60287
60759
  },
60760
+ {
60761
+ "kind": "field",
60762
+ "name": "readRegions",
60763
+ "privacy": "private",
60764
+ "readonly": true,
60765
+ "description": "Says which regions hold something, one call apiece so each pairs with its `@cssstate`."
60766
+ },
60288
60767
  {
60289
60768
  "kind": "field",
60290
60769
  "name": "arrival",
@@ -60680,6 +61159,24 @@
60680
61159
  "fieldName": "noAnnounce"
60681
61160
  }
60682
61161
  ],
61162
+ "cssStates": [
61163
+ {
61164
+ "description": "Something is slotted into `actions`.",
61165
+ "name": "has-actions"
61166
+ },
61167
+ {
61168
+ "description": "Something is slotted into `icon`.",
61169
+ "name": "has-icon"
61170
+ },
61171
+ {
61172
+ "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
61173
+ "name": "settled",
61174
+ "inheritedFrom": {
61175
+ "name": "HelixElement",
61176
+ "module": "src/helix-element/helix-element.ts"
61177
+ }
61178
+ }
61179
+ ],
60683
61180
  "superclass": {
60684
61181
  "name": "HelixElement",
60685
61182
  "package": "@fusion.dev/helix-core"
@@ -60709,16 +61206,6 @@
60709
61206
  },
60710
61207
  "tagName": "helix-headless-empty",
60711
61208
  "customElement": true,
60712
- "cssStates": [
60713
- {
60714
- "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
60715
- "name": "settled",
60716
- "inheritedFrom": {
60717
- "name": "HelixElement",
60718
- "module": "src/helix-element/helix-element.ts"
60719
- }
60720
- }
60721
- ],
60722
61209
  "modulePath": "src/empty/root/empty-root.ts",
60723
61210
  "definitionPath": "src/empty/root/empty-root.ts"
60724
61211
  }
@@ -76368,6 +76855,74 @@
76368
76855
  }
76369
76856
  ]
76370
76857
  },
76858
+ {
76859
+ "kind": "javascript-module",
76860
+ "path": "src/icon/fetch.ts",
76861
+ "declarations": [
76862
+ {
76863
+ "kind": "function",
76864
+ "name": "readIconFile",
76865
+ "return": {
76866
+ "type": {
76867
+ "text": "HelixIcon | undefined"
76868
+ }
76869
+ },
76870
+ "parameters": [
76871
+ {
76872
+ "name": "text",
76873
+ "type": {
76874
+ "text": "string"
76875
+ },
76876
+ "description": "The file's text."
76877
+ },
76878
+ {
76879
+ "name": "name",
76880
+ "type": {
76881
+ "text": "string"
76882
+ },
76883
+ "description": "What the icon is known by, its URL."
76884
+ }
76885
+ ],
76886
+ "description": "Reads an SVG file's text as an icon, or `undefined` where it is no SVG.\n\n**What could run is taken out**, because the markup is drawn as it is: every\n`<script>` and `<foreignObject>`, every `on…` attribute, every link to a\n`javascript:` URL, and every animation that writes a link or a handler. The\nroot's paint attributes are kept on a group around the shapes, and its\n`viewBox`, or its width and height, is the box."
76887
+ },
76888
+ {
76889
+ "kind": "function",
76890
+ "name": "fetchIcon",
76891
+ "return": {
76892
+ "type": {
76893
+ "text": "HelixIcon | Promise<HelixIcon | undefined> | undefined"
76894
+ }
76895
+ },
76896
+ "parameters": [
76897
+ {
76898
+ "name": "src",
76899
+ "type": {
76900
+ "text": "string"
76901
+ }
76902
+ }
76903
+ ],
76904
+ "description": "The icon in the SVG file at `src`: at once where it has been fetched, or a\npromise of it the first time, fetched once a page however many elements ask.\n`undefined` where the file could not be fetched or is no SVG."
76905
+ }
76906
+ ],
76907
+ "exports": [
76908
+ {
76909
+ "kind": "js",
76910
+ "name": "readIconFile",
76911
+ "declaration": {
76912
+ "name": "readIconFile",
76913
+ "module": "src/icon/fetch.ts"
76914
+ }
76915
+ },
76916
+ {
76917
+ "kind": "js",
76918
+ "name": "fetchIcon",
76919
+ "declaration": {
76920
+ "name": "fetchIcon",
76921
+ "module": "src/icon/fetch.ts"
76922
+ }
76923
+ }
76924
+ ]
76925
+ },
76371
76926
  {
76372
76927
  "kind": "javascript-module",
76373
76928
  "path": "src/icon/index.ts",
@@ -76606,7 +77161,7 @@
76606
77161
  "declarations": [
76607
77162
  {
76608
77163
  "kind": "class",
76609
- "description": "The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph\nrenders its full inner markup, because most icons are several elements, each\nwith its own stroke and fill.\n\nThe markup is generated at build time from SVG files in this repository and\nnever comes from user input, so rendering it with `unsafeSVG` is safe.\n\nThe `<svg>` carries `fill=\"currentColor\"`. The generator keeps only the inner\nmarkup, and Phosphor sets its fill on the root tag that the generator\ndiscards. Without it, the 65 solid glyphs fall back to black and disappear on\na dark background. Shapes that set their own `fill` or `stroke` are\nunaffected.\n\n**A name is looked up in a registry.** The family's entry registers the\nwhole set, so any name in it draws. The element's own entry,\n`@fusion.dev/helix-headless/icon/root`, registers none: a page that imports\nit and calls `registerIcons` with the glyphs it names ships those and no\nothers. `registerIconLibrary` resolves names under a prefix of your own,\nsuch as `lucide:camera`, at once or later, and the element fires `load` when\na glyph that came later is drawn. A glyph registered after the element\nrendered is drawn then.\n\nA name with no match renders nothing, and the element fires `error`, so a\ntypo in a name can be heard. It waits until the page has loaded and painted\nfirst, so a library a later module registers is not taken for a typo.\n\nAn icon is decorative by default and hidden from assistive technology. Set\n`label` only when the icon is the only carrier of meaning, such as in a\nbutton with no text. An `aria-label` on the element works too: the element\nis then an image with that name.\n\n**A decorative icon that is all a control holds is reported.** In a\ndevelopment build, a button or a link whose only content is an icon with no\n`label`, and which has no name of its own, warns `missing-name` once,\nthrough the runtime channel every Helix warning uses.",
77164
+ "description": "The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph\nrenders its full inner markup, because most icons are several elements, each\nwith its own stroke and fill.\n\nThe markup is generated at build time from SVG files in this repository and\nnever comes from user input, so rendering it with `unsafeSVG` is safe.\n\nThe `<svg>` carries `fill=\"currentColor\"`. The generator keeps only the inner\nmarkup, and Phosphor sets its fill on the root tag that the generator\ndiscards. Without it, the 65 solid glyphs fall back to black and disappear on\na dark background. Shapes that set their own `fill` or `stroke` are\nunaffected.\n\n**A name is looked up in a registry.** The family's entry registers the\nwhole set, so any name in it draws. The element's own entry,\n`@fusion.dev/helix-headless/icon/root`, registers none: a page that imports\nit and calls `registerIcons` with the glyphs it names ships those and no\nothers. `registerIconLibrary` resolves names under a prefix of your own,\nsuch as `lucide:camera`, at once or later, and the element fires `load` when\na glyph that came later is drawn. A glyph registered after the element\nrendered is drawn then.\n\n**Or point `src` at an SVG file**, such as `src=\"/icons/rocket.svg\"`, and\nthe element fetches it and draws its shapes in `currentColor` where the file\ndoes not color them. A file is fetched once a page, however many icons name\nit, and `load` fires when it is drawn. Scripts, event handlers and\n`javascript:` links in the file are taken out before it is drawn. A server\nfetches nothing, so a served icon with a `src` is drawn once the script\nruns.\n\nA name with no match, or a `src` that is no SVG, renders nothing, and the\nelement fires `error`, so a typo in a name can be heard. It waits until the page has loaded and painted\nfirst, so a library a later module registers is not taken for a typo.\n\nAn icon is decorative by default and hidden from assistive technology. Set\n`label` only when the icon is the only carrier of meaning, such as in a\nbutton with no text. An `aria-label` on the element works too: the element\nis then an image with that name.\n\n**A decorative icon that is all a control holds is reported.** In a\ndevelopment build, a button or a link whose only content is an icon with no\n`label`, and which has no name of its own, warns `missing-name` once,\nthrough the runtime channel every Helix warning uses.",
76610
77165
  "name": "HelixHeadlessIcon",
76611
77166
  "cssParts": [
76612
77167
  {
@@ -76653,6 +77208,16 @@
76653
77208
  "description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index of the\nwhole set that no bundler can shake: 15 kB for a consumer who renders one\nmark. An attribute is the only thing an HTML author can write, and that is\nworth the index; a consumer who would rather not pay it imports the\nelement from `icon/root` and registers the glyphs it names, or hands over\nthe value instead.\n\nA name written `prefix:name` asks the library registered under that\nprefix.",
76654
77209
  "attribute": "name"
76655
77210
  },
77211
+ {
77212
+ "kind": "field",
77213
+ "name": "src",
77214
+ "type": {
77215
+ "text": "string"
77216
+ },
77217
+ "default": "''",
77218
+ "description": "The URL of an SVG file to draw, fetched once a page and drawn in\n`currentColor` where the file does not color its shapes.\n\nWins over `name`; `icon` wins over both. Absent draws `name`.",
77219
+ "attribute": "src"
77220
+ },
76656
77221
  {
76657
77222
  "kind": "field",
76658
77223
  "name": "observedAttributes",
@@ -76744,6 +77309,16 @@
76744
77309
  "privacy": "private",
76745
77310
  "description": "Stops listening to the registry."
76746
77311
  },
77312
+ {
77313
+ "kind": "field",
77314
+ "name": "asked",
77315
+ "type": {
77316
+ "text": "string"
77317
+ },
77318
+ "privacy": "private",
77319
+ "description": "What the glyph is asked for by: `src` where it is set, and `name` otherwise.",
77320
+ "readonly": true
77321
+ },
76747
77322
  {
76748
77323
  "kind": "method",
76749
77324
  "name": "lookup",
@@ -76753,7 +77328,7 @@
76753
77328
  "text": "HelixIcon | undefined"
76754
77329
  }
76755
77330
  },
76756
- "description": "What the registry gives for `name` now, starting the wait for a late glyph."
77331
+ "description": "What `src` or the registry gives now, starting the wait for a late glyph.\nA file is fetched only where the page can be read: a server fetches\nnothing, and a hydrating render draws what the server sent."
76757
77332
  },
76758
77333
  {
76759
77334
  "kind": "method",
@@ -77143,7 +77718,7 @@
77143
77718
  "type": {
77144
77719
  "text": "Event"
77145
77720
  },
77146
- "description": "`name` matches no registered icon and no library answers it, so nothing is drawn.",
77721
+ "description": "`name` matches no registered icon and no library answers it, or `src` is no SVG, so nothing is drawn.",
77147
77722
  "name": "error",
77148
77723
  "reactProp": "onerror"
77149
77724
  },
@@ -77151,7 +77726,7 @@
77151
77726
  "type": {
77152
77727
  "text": "Event"
77153
77728
  },
77154
- "description": "A glyph a library gave later for `name` is drawn.",
77729
+ "description": "A glyph a library gave later for `name`, or the file at `src`, is drawn.",
77155
77730
  "name": "load",
77156
77731
  "reactProp": "onload"
77157
77732
  }
@@ -77183,6 +77758,15 @@
77183
77758
  "default": "''",
77184
77759
  "description": "The name of the icon in the Helix set.\n\n**A lookup, and the reason both this and `icon` exist.** A name is a string,\nso it is what markup can carry, and resolving one means an index of the\nwhole set that no bundler can shake: 15 kB for a consumer who renders one\nmark. An attribute is the only thing an HTML author can write, and that is\nworth the index; a consumer who would rather not pay it imports the\nelement from `icon/root` and registers the glyphs it names, or hands over\nthe value instead.\n\nA name written `prefix:name` asks the library registered under that\nprefix.",
77185
77760
  "fieldName": "name"
77761
+ },
77762
+ {
77763
+ "name": "src",
77764
+ "type": {
77765
+ "text": "string"
77766
+ },
77767
+ "default": "''",
77768
+ "description": "The URL of an SVG file to draw, fetched once a page and drawn in\n`currentColor` where the file does not color its shapes.\n\nWins over `name`; `icon` wins over both. Absent draws `name`.",
77769
+ "fieldName": "src"
77186
77770
  }
77187
77771
  ],
77188
77772
  "superclass": {
@@ -107070,7 +107654,7 @@
107070
107654
  "declarations": [
107071
107655
  {
107072
107656
  "kind": "class",
107073
- "description": "Renders a real `<nav>`, the landmark that screen reader users jump to.\nNavigation is its own component, separate from `AppHeader`, so you can use it\nin a header, a footer, or a sidebar.\n\n**It renders no links.** Bring your own, mark the current one with\n`aria-current=\"page\"`, and style them with the `data-navigation-item` recipe.\nA router renders its own anchors and cannot render them inside the\ncomponent's shadow root.\n\nThe component moves a marker to the current item. It finds the current item\nby reading `aria-current`, so the attribute that screen readers announce also\nplaces the marker. Any value but `false` counts, so a sidebar of sections on\none page can mark the section in view with `aria-current=\"location\"`. Where\nseveral are marked, `page` wins.\n\n**The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`\nelements, each holding a link, and a screen reader says how many there are\nand where each one is, as in Radix's `NavigationMenu.List`. The marker and\nthe arrow keys work on the list items as they do on bare links. Give the\nlist `role=\"list\"` as well, since Safari drops the semantics of a list drawn\nwithout bullets.\n\nSet `orientation=\"vertical\"` to stack the destinations in a column, for a\nsidebar.\n\nSet `arrows` and the arrow keys move focus between the destinations, as\nRadix's navigation menu does: left and right along a row, up and down a\ncolumn, Home and End to the ends. A `Megamenu` among them is reached at its\ntrigger. Tab still stops at every link, since a navigation is a list of\nlinks and not a single control, and the keys across the other axis are\nleft to the page and to an open panel.",
107657
+ "description": "Renders a real `<nav>`, the landmark that screen reader users jump to.\nNavigation is its own component, separate from `AppHeader`, so you can use it\nin a header, a footer, or a sidebar.\n\n**It renders no links.** Bring your own, mark the current one with\n`aria-current=\"page\"`, and style them with the `data-navigation-item` recipe.\nA router renders its own anchors and cannot render them inside the\ncomponent's shadow root.\n\nThe component moves a marker to the current item. It finds the current item\nby reading `aria-current`, so the attribute that screen readers announce also\nplaces the marker. Any value but `false` counts, so a sidebar of sections on\none page can mark the section in view with `aria-current=\"location\"`. Where\nseveral are marked, `page` wins.\n\n**The destinations can be a list.** Slot a `<ul>` or an `<ol>` of `<li>`\nelements, each holding a link, and a screen reader says how many there are\nand where each one is, as in Radix's `NavigationMenu.List`. The marker and\nthe arrow keys work on the list items as they do on bare links. Give the\nlist `role=\"list\"` as well, since Safari drops the semantics of a list drawn\nwithout bullets.\n\nSet `orientation=\"vertical\"` to stack the destinations in a column, for a\nsidebar.\n\nSet `arrows` and the arrow keys move focus between the destinations, as\nRadix's navigation menu does: left and right along a row, up and down a\ncolumn, Home and End to the ends. A `Megamenu` among them is reached at its\ntrigger. Tab still stops at every link, since a navigation is a list of\nlinks and not a single control, and the keys across the other axis are\nleft to the page and to an open panel.\n\nWhile a `Megamenu`, or another disclosure among the destinations, is open,\nthe navigation is `:state(open)`, so a page can dim what lies under the\npanel, as Radix's navigation menu marks its open state.\n\nA screen reader lists the page's navigation landmarks by name, so two named\nalike cannot be told apart. Where another navigation in the same document\nhas the same name, \"Main\" for two with no `label`, the later one warns once\nwith the kind `duplicate-name`.",
107074
107658
  "name": "HelixHeadlessNavigation",
107075
107659
  "cssParts": [
107076
107660
  {
@@ -107166,6 +107750,42 @@
107166
107750
  },
107167
107751
  "privacy": "private"
107168
107752
  },
107753
+ {
107754
+ "kind": "field",
107755
+ "name": "opened",
107756
+ "privacy": "private",
107757
+ "readonly": true,
107758
+ "default": "new Set<EventTarget>()",
107759
+ "description": "The disclosures among the destinations that are open."
107760
+ },
107761
+ {
107762
+ "kind": "field",
107763
+ "name": "handleToggle",
107764
+ "privacy": "private",
107765
+ "readonly": true,
107766
+ "description": "Hears a disclosure among the destinations open or close. In capture,\nbecause `toggle` does not bubble."
107767
+ },
107768
+ {
107769
+ "kind": "field",
107770
+ "name": "landmarkName",
107771
+ "type": {
107772
+ "text": "string"
107773
+ },
107774
+ "privacy": "private",
107775
+ "description": "The landmark's name as a screen reader lists it.",
107776
+ "readonly": true
107777
+ },
107778
+ {
107779
+ "kind": "method",
107780
+ "name": "auditTwin",
107781
+ "privacy": "private",
107782
+ "return": {
107783
+ "type": {
107784
+ "text": "void"
107785
+ }
107786
+ },
107787
+ "description": "Warns once where another navigation in the same document has the same\nname, a task after the first render, so the page's other landmarks have\nrendered too."
107788
+ },
107169
107789
  {
107170
107790
  "kind": "field",
107171
107791
  "name": "items",
@@ -107555,6 +108175,20 @@
107555
108175
  "fieldName": "orientation"
107556
108176
  }
107557
108177
  ],
108178
+ "cssStates": [
108179
+ {
108180
+ "description": "While a megamenu or another disclosure among the destinations is open.",
108181
+ "name": "open"
108182
+ },
108183
+ {
108184
+ "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
108185
+ "name": "settled",
108186
+ "inheritedFrom": {
108187
+ "name": "HelixElement",
108188
+ "module": "src/helix-element/helix-element.ts"
108189
+ }
108190
+ }
108191
+ ],
107558
108192
  "superclass": {
107559
108193
  "name": "HelixElement",
107560
108194
  "package": "@fusion.dev/helix-core"
@@ -107583,16 +108217,6 @@
107583
108217
  },
107584
108218
  "tagName": "helix-headless-navigation",
107585
108219
  "customElement": true,
107586
- "cssStates": [
107587
- {
107588
- "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
107589
- "name": "settled",
107590
- "inheritedFrom": {
107591
- "name": "HelixElement",
107592
- "module": "src/helix-element/helix-element.ts"
107593
- }
107594
- }
107595
- ],
107596
108220
  "modulePath": "src/navigation/root/navigation-root.ts",
107597
108221
  "definitionPath": "src/navigation/root/navigation-root.ts"
107598
108222
  }
@@ -125763,7 +126387,7 @@
125763
126387
  "declarations": [
125764
126388
  {
125765
126389
  "kind": "class",
125766
- "description": "Renders a real `<q>`, so the browser supplies the quotation marks. It inserts\nthe correct marks for the document's language and nests them correctly when\none quotation sits inside another. Do not type quotation marks into the\ncontent: one that starts or ends with a typed mark warns once, with the\nruntime kind `typed-marks`. A quotation in a language other than the page's takes `lang` on the\nelement, and its marks follow it: `lang=\"de\"` sets „…“ and `lang=\"fr\"` «…»\ninside an English page.\n\nFor a passage set off from the surrounding text, use a blockquote.",
126390
+ "description": "Renders a real `<q>`, so the browser supplies the quotation marks. It inserts\nthe correct marks for the document's language and nests them correctly when\none quotation sits inside another. Do not type quotation marks into the\ncontent: one that starts or ends with a typed mark warns once, with the\nruntime kind `typed-marks`. A quotation in a language other than the page's takes `lang` on the\nelement, and its marks follow it: `lang=\"de\"` sets „…“ and `lang=\"fr\"` «…»\ninside an English page.\n\n**`no-marks` leaves the marks off**, for a quotation set where the page draws\nits own, such as a pull quote with a large decorative mark beside it or a\ntable of sayings. The quotation still counts toward nesting, so a quote\ninside it takes the inner marks it would have had. Text with marks typed\ninto it raises no warning under `no-marks`.\n\nFor a passage set off from the surrounding text, use a blockquote.",
125767
126391
  "name": "HelixHeadlessQuote",
125768
126392
  "cssParts": [
125769
126393
  {
@@ -125788,6 +126412,17 @@
125788
126412
  "description": "URL identifying where the quotation came from.",
125789
126413
  "attribute": "cite"
125790
126414
  },
126415
+ {
126416
+ "kind": "field",
126417
+ "name": "noMarks",
126418
+ "type": {
126419
+ "text": "boolean"
126420
+ },
126421
+ "default": "false",
126422
+ "description": "Whether to leave the quotation marks off, for a quotation set where the\npage draws its own.\n\nNegative, because the marks are on by default and a boolean attribute is\ntrue whenever it is present. Reflected, because a stylesheet takes the\nmarks off on it.",
126423
+ "attribute": "no-marks",
126424
+ "reflects": true
126425
+ },
125791
126426
  {
125792
126427
  "kind": "field",
125793
126428
  "name": "warned",
@@ -126154,6 +126789,15 @@
126154
126789
  "default": "''",
126155
126790
  "description": "URL identifying where the quotation came from.",
126156
126791
  "fieldName": "cite"
126792
+ },
126793
+ {
126794
+ "name": "no-marks",
126795
+ "type": {
126796
+ "text": "boolean"
126797
+ },
126798
+ "default": "false",
126799
+ "description": "Whether to leave the quotation marks off, for a quotation set where the\npage draws its own.\n\nNegative, because the marks are on by default and a boolean attribute is\ntrue whenever it is present. Reflected, because a stylesheet takes the\nmarks off on it.",
126800
+ "fieldName": "noMarks"
126157
126801
  }
126158
126802
  ],
126159
126803
  "superclass": {
@@ -133682,7 +134326,7 @@
133682
134326
  "declarations": [
133683
134327
  {
133684
134328
  "kind": "class",
133685
- "description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |\n| A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
134329
+ "description": "A trigger that opens a `Listbox`. The list is the same element you can use on\nits own, with the same keyboard behavior, filtering, and multi-select rules.\nSelect adds a trigger that shows what is chosen, a floating surface, and a\nplace for focus to return to when the list closes.\n\nYour options stay in your light DOM and are slotted through into the listbox,\nso the listbox looks through slots to find them. For a list too long to draw\nwhole, set `items` instead: the list draws only the options in sight, as\nListbox's `items` does, and the trigger, its keys and the form read the\nwhole set.\n\n`Select` owns the value, passes it down to the listbox, and takes changes\nback, so the value lives in one place.\n\nSet `valueContent` to draw the trigger's content from the chosen options,\nand several chosen options are written as a list in the reader's language.\n\n**Keyboard.** On the closed trigger:\n\n| Key | What it does |\n|---|---|\n| Down, Enter, Space | Opens the list on the chosen option, or the first. |\n| Up | Opens the list on the chosen option, or the last. |\n| Home, End | Opens the list on the first or the last option. |\n| Left, Right | Chooses the option before or after the chosen one without opening, as React Aria's Select does, in either direction of text. |\n| A letter or a word | Chooses the option whose words start with what you typed, as a native `<select>` does. With `multiple`, opens the list on it. |\n\nIn the open list, which is a `Listbox`:\n\n| Key | What it does |\n|---|---|\n| Down, Up, Home, End, Page Down, Page Up | Moves the highlight. |\n| A letter or a word | Moves the highlight to the next option whose words start with what you typed. |\n| Enter, Space | Chooses the highlighted option and closes the list. With `multiple`, toggles it and leaves the list open. |\n| Escape | Closes the list and puts focus back on the trigger. |\n| Tab | Closes the list and moves on. |\n\nA choice made on the closed trigger is said aloud on Apple devices, where\nVoiceOver does not read the trigger's new name.\n\n**ARIA.** The trigger is a `button` with `aria-haspopup=\"listbox\"` and\n`aria-expanded`, named by the label and then the chosen words, as a native\n`<select>` is. The list is the listbox `Listbox` describes, named by the\nlabel, or by `list-label` where there is none.\n\nSet `autocomplete` to let a browser's autofill choose, as a native `<select>`\nwith the same attribute would.",
133686
134330
  "name": "HelixHeadlessSelect",
133687
134331
  "cssProperties": [
133688
134332
  {
@@ -133879,6 +134523,15 @@
133879
134523
  "default": "true",
133880
134524
  "description": "Whether the trigger holds its group's tab stop.\n\nA toolbar keeps one tab stop across its controls, and writing `tabindex`\nonto this element would change markup the consumer rendered, which a React\nconsumer's hydration reports. A toolbar sets this property instead, and\nthe stop moves on the trigger inside the shadow root, as Button's does.\n\nNo attribute, because it is coordination between elements rather than\nanything a consumer sets."
133881
134525
  },
134526
+ {
134527
+ "kind": "field",
134528
+ "name": "items",
134529
+ "type": {
134530
+ "text": "readonly DataOptionItem[] | undefined"
134531
+ },
134532
+ "default": "undefined",
134533
+ "description": "The options as data, for a list too long to draw whole: each a value,\nwhich is also its words, or a record with a `value`, a `label` and\n`disabled`. Passed to the list, which draws only the options in sight,\nas Listbox's `items` does. Set, the options you write as children are\nnot read.\n\nThe trigger shows the chosen options' labels, the letters and the Left\nand Right keys on the closed trigger choose over the whole set, and a\nchosen value whose option leaves `items` drops out of `value`.\n`value-content` is not called for `items`. Import the Option family as\nwell, whose elements are drawn."
134534
+ },
133882
134535
  {
133883
134536
  "kind": "field",
133884
134537
  "name": "listLabel",
@@ -134007,7 +134660,7 @@
134007
134660
  "name": "panel",
134008
134661
  "privacy": "protected",
134009
134662
  "readonly": true,
134010
- "default": "new PopoverController(this, { anchor: () => this.partNamed('trigger'), /* The surface *and* the trigger. * * A control is not always one element: the button that opens this panel is * part of it, and a press on it is not a press outside. Scoped to the * surface alone, `pointerdown` on the trigger closes the panel and the * trigger's own `toggleOpen` reopens it on the `click` that follows, so * the panel can never be closed by the button that opened it. * * `DismissController` documents this exact failure and takes a list for * it. */ boundary: (): readonly (Element | null | undefined)[] => [ this.partNamed('surface'), this.partNamed('trigger'), ], offset: () => 4, onDismiss: () => this.close(), open: () => this.open, /* Placed here instead where the list opens over the trigger, which is no side of it. */ place: () => this.position !== 'item-aligned', placement: 'bottom-start', surface: () => this.partNamed('surface'), })"
134663
+ "default": "new PopoverController(this, { anchor: () => this.partNamed('trigger'), /* The surface *and* the trigger. * * A control is not always one element: the button that opens this panel is * part of it, and a press on it is not a press outside. Scoped to the * surface alone, `pointerdown` on the trigger closes the panel and the * trigger's own `toggleOpen` reopens it on the `click` that follows, so * the panel can never be closed by the button that opened it. * * `DismissController` documents this exact failure and takes a list for * it. */ boundary: (): readonly (Element | null | undefined)[] => [ this.partNamed('surface'), this.partNamed('trigger'), ], offset: () => 4, onDismiss: () => this.close(), /* The side the list landed on, for a sheet outside that draws by side, as Popover says it. */ onPlace: (placement) => { const side = sideOf(placement) this.toggleState('placed-bottom', side === 'bottom') this.toggleState('placed-top', side === 'top') }, open: () => this.open, /* Placed here instead where the list opens over the trigger, which is no side of it. */ place: () => this.position !== 'item-aligned', placement: 'bottom-start', surface: () => this.partNamed('surface'), })"
134011
134664
  },
134012
134665
  {
134013
134666
  "kind": "field",
@@ -134026,7 +134679,26 @@
134026
134679
  "text": "HelixHeadlessOption[]"
134027
134680
  },
134028
134681
  "privacy": "private",
134029
- "description": "The chosen options, in the order they appear. None on a server or while hydrating.",
134682
+ "description": "The chosen options, in the order they appear. None on a server or while hydrating, and none for `items`.",
134683
+ "readonly": true
134684
+ },
134685
+ {
134686
+ "kind": "field",
134687
+ "name": "data",
134688
+ "type": {
134689
+ "text": "{ from: readonly DataOptionItem[]; options: DataOption[] } | undefined"
134690
+ },
134691
+ "privacy": "private",
134692
+ "description": "`items` as the list reads them, built once per array."
134693
+ },
134694
+ {
134695
+ "kind": "field",
134696
+ "name": "entries",
134697
+ "type": {
134698
+ "text": "readonly { disabled: boolean; text: string; value: string }[]"
134699
+ },
134700
+ "privacy": "private",
134701
+ "description": "Every option the select reads, in order: the records of `items`, or the\noption elements among its children.",
134030
134702
  "readonly": true
134031
134703
  },
134032
134704
  {
@@ -135942,6 +136614,14 @@
135942
136614
  "description": "While the list is open.",
135943
136615
  "name": "open"
135944
136616
  },
136617
+ {
136618
+ "description": "While the open list sits below the trigger.",
136619
+ "name": "placed-bottom"
136620
+ },
136621
+ {
136622
+ "description": "While the open list sits above the trigger, where there was no room below.",
136623
+ "name": "placed-top"
136624
+ },
135945
136625
  {
135946
136626
  "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
135947
136627
  "name": "settled",
@@ -136093,6 +136773,17 @@
136093
136773
  "description": "Whether the skeleton holds content, read off its children where they can\nbe known. Not on a server, where an unlabeled skeleton is taken for an\nempty one until the page has its children.",
136094
136774
  "readonly": true
136095
136775
  },
136776
+ {
136777
+ "kind": "method",
136778
+ "name": "renderShape",
136779
+ "privacy": "protected",
136780
+ "return": {
136781
+ "type": {
136782
+ "text": "TemplateResult"
136783
+ }
136784
+ },
136785
+ "description": "The placeholder shape and the sheen inside it.\n\nA method, so a tier above can draw the placeholder as several shapes, as\nthe styled tier draws a paragraph of lines."
136786
+ },
136096
136787
  {
136097
136788
  "kind": "field",
136098
136789
  "name": "tier",
@@ -137077,11 +137768,11 @@
137077
137768
  "declarations": [
137078
137769
  {
137079
137770
  "kind": "class",
137080
- "description": "Renders a native `<input type=\"range\">`, so the drag, the arrow keys, Home,\nEnd, the page keys, and the touch target come from the platform. A native\nrange has a hit area larger than its thumb, sized for a finger.\n\nThe value is a string, like every other form control's, and\n`MixinControllerValue` holds text. Use `valueAsNumber` for arithmetic.\n\nMarks are drawn by the component. The ticks of a `<datalist>` cannot be\nstyled, and Firefox does not render them for a range. Marks are decoration.\n`step` sets where the value can land, and the input enforces it whether or\nnot marks are drawn. `markers` is a count, so a slider from zero to a hundred\ndoes not draw a hundred and one marks by accident.\n\nA range with two thumbs is two inputs stacked on one track, because there is\nno native two-thumb range. Each thumb keeps its own value.\n`min-steps-between-thumbs` keeps them that many steps apart, and the readout\njoins the two as `range-text` writes them.\n\n`origin` sets where a single thumb's fill starts: at `min`, at the middle of\nthe track, or at `max`. A balance or an offset from zero fills from the\nmiddle, as Zag's slider `origin` does. The fill's ends are published as\n`--slider-from` and `--slider-to`.\n\n`format-options` writes the value with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, and `formatter` writes it with a function of\nyour own, such as words for a scale. Either one is what a screen reader\nhears, what the readout shows and what the marker labels say. `value-text`\nstill wraps it in a sentence, with the formatted value in its place.\n\n`required` comes with the field mixin and cannot fail. A range is never\nempty: the platform shows its midpoint when no value is set, and `willUpdate`\nseeds that midpoint into `defaultValue`, so the value matches the handle from\nthe first render. HTML does not apply `required` to a range either, so it is\nnot set on the input. It only adds the marker beside the label.\n\n**Keyboard.** Each thumb is one tab stop, and its keys are the native\nrange's.\n\n| Key | What it does |\n|---|---|\n| Right, Up | Moves the thumb up by `step`. |\n| Left, Down | Moves the thumb down by `step`. |\n| Page Up, Page Down | Moves the thumb by a larger step. |\n| Home, End | Moves the thumb to its lowest or highest value. |\n\nEach thumb is an `<input type=\"range\">` with `aria-valuetext` where the value\nis formatted or worded. A range's thumbs say they stop at each other with\n`aria-valuemin` and `aria-valuemax`.",
137771
+ "description": "Renders a native `<input type=\"range\">`, so the drag, the arrow keys, Home,\nEnd, the page keys, and the touch target come from the platform. A native\nrange has a hit area larger than its thumb, sized for a finger.\n\nThe value is a string, like every other form control's, and\n`MixinControllerValue` holds text. Use `valueAsNumber` for arithmetic.\n\nMarks are drawn by the component. The ticks of a `<datalist>` cannot be\nstyled, and Firefox does not render them for a range. Marks are decoration.\n`step` sets where the value can land, and the input enforces it whether or\nnot marks are drawn. `markers` is a count, so a slider from zero to a hundred\ndoes not draw a hundred and one marks by accident.\n\nA range with two thumbs is two inputs stacked on one track, because there is\nno native two-thumb range. Each thumb keeps its own value, and a named range\nsubmits one entry per thumb under its name, the lowest first. A range given\nmore than two values, such as `default-value=\"20,50,80\"`, has a thumb for\neach, as React Aria's slider takes any number of thumbs: each stops at its\nneighbors, and the ones between the first and the last are named by\n`thumb-label`.\n`min-steps-between-thumbs` keeps them that many steps apart, and the readout\njoins the two as `range-text` writes them.\n\n`origin` sets where a single thumb's fill starts: at `min`, at the middle of\nthe track, or at `max`. A balance or an offset from zero fills from the\nmiddle, as Zag's slider `origin` does. The fill's ends are published as\n`--slider-from` and `--slider-to`.\n\n`format-options` writes the value with `Intl.NumberFormat` in `locale`, as a\ncurrency, a percent or a unit, and `formatter` writes it with a function of\nyour own, such as words for a scale. Either one is what a screen reader\nhears, what the readout shows and what the marker labels say. `value-text`\nstill wraps it in a sentence, with the formatted value in its place.\n\n`required` comes with the field mixin and cannot fail. A range is never\nempty: the platform shows its midpoint when no value is set, and `willUpdate`\nseeds that midpoint into `defaultValue`, so the value matches the handle from\nthe first render. HTML does not apply `required` to a range either, so it is\nnot set on the input. It only adds the marker beside the label.\n\n**Keyboard.** Each thumb is one tab stop, and its keys are the native\nrange's.\n\n| Key | What it does |\n|---|---|\n| Right, Up | Moves the thumb up by `step`. |\n| Left, Down | Moves the thumb down by `step`. |\n| Page Up, Page Down | Moves the thumb by a larger step. |\n| Home, End | Moves the thumb to its lowest or highest value. |\n\nUnder `readonly` none of these move the thumb, and Tab still reaches it.\n\nEach thumb is an `<input type=\"range\">` with `aria-valuetext` where the value\nis formatted or worded. A range's thumbs say they stop at each other with\n`aria-valuemin` and `aria-valuemax`.",
137081
137772
  "name": "HelixHeadlessSlider",
137082
137773
  "cssProperties": [
137083
137774
  {
137084
- "description": "Where a bubble's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` part.",
137775
+ "description": "Where a bubble's or a thumb box's thumb is, as a fraction of the track, 0 to 1. Set on each `tooltip` and `thumb` part.",
137085
137776
  "name": "--slider-at"
137086
137777
  },
137087
137778
  {
@@ -137103,7 +137794,7 @@
137103
137794
  ],
137104
137795
  "cssParts": [
137105
137796
  {
137106
- "description": "The range input.",
137797
+ "description": "The range input, one per thumb. On a range each carries `data-thumb`, `start`, `middle`, or `end`, and `data-index`, its place from the lowest.",
137107
137798
  "name": "control"
137108
137799
  },
137109
137800
  {
@@ -137139,7 +137830,15 @@
137139
137830
  "name": "output"
137140
137831
  },
137141
137832
  {
137142
- "description": "One thumb's value in a bubble beside it, under `tooltip`. It carries `data-thumb` on a range, `start` or `end`, and `--slider-at`, where its thumb is as a fraction of the track.",
137833
+ "description": "One thumb's own box over the track, which holds the `thumb` or `thumb-end` slot. It carries `data-thumb` on a range, `start`, `middle`, or `end`, and `--slider-at`, where its thumb is as a fraction of the track. Draw your own thumb here and hide the native one, or leave it empty.",
137834
+ "name": "thumb"
137835
+ },
137836
+ {
137837
+ "description": "The layer over the track that holds each `thumb`. It is `hidden` until a thumb slot has content, and then `[part=\"field\"]` carries `data-thumbs`.",
137838
+ "name": "thumbs"
137839
+ },
137840
+ {
137841
+ "description": "One thumb's value in a bubble beside it, under `tooltip`. It carries `data-thumb` on a range, `start`, `middle`, or `end`, and `--slider-at`, where its thumb is as a fraction of the track.",
137143
137842
  "name": "tooltip"
137144
137843
  },
137145
137844
  {
@@ -137159,6 +137858,14 @@
137159
137858
  {
137160
137859
  "description": "The label, for content richer than the `label` text.",
137161
137860
  "name": "label"
137861
+ },
137862
+ {
137863
+ "description": "Content drawn on the thumb, such as a glyph: a single slider's thumb, or a range's lower one. It is decoration, hidden from a screen reader.",
137864
+ "name": "thumb"
137865
+ },
137866
+ {
137867
+ "description": "Content drawn on a range's upper thumb.",
137868
+ "name": "thumb-end"
137162
137869
  }
137163
137870
  ],
137164
137871
  "members": [
@@ -137325,7 +138032,7 @@
137325
138032
  "text": "boolean"
137326
138033
  },
137327
138034
  "default": "false",
137328
- "description": "Adds a second thumb, so the value is a pair.\n\nThe pair is one string, `\"10,50\"`, which is what a form submits and what\n`MixinControllerValue` already holds. `valueAsNumber` reads the lower of\nthe two, since a range has no single number.",
138035
+ "description": "Adds a second thumb, so the value is a pair.\n\nThe pair is one string, `\"10,50\"`, which is what `value` and\n`MixinControllerValue` hold. A form receives two entries under the name,\n`price=10&price=50`, as React Aria's two thumbs send theirs.\n`valueAsNumber` reads the lower of the two, since a range has no single\nnumber.",
137329
138036
  "attribute": "range",
137330
138037
  "reflects": true
137331
138038
  },
@@ -137342,6 +138049,17 @@
137342
138049
  "words": true
137343
138050
  }
137344
138051
  },
138052
+ {
138053
+ "kind": "field",
138054
+ "name": "readOnly",
138055
+ "type": {
138056
+ "text": "boolean"
138057
+ },
138058
+ "default": "false",
138059
+ "description": "Whether a reader can see and focus the value and cannot change it. A\nread-only slider still submits its value.\n\nReact Aria's `isReadOnly`. Each thumb stays a tab stop and says\n`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag\nleave the value where it is. A script can still set `value`.",
138060
+ "attribute": "readonly",
138061
+ "reflects": true
138062
+ },
137345
138063
  {
137346
138064
  "kind": "field",
137347
138065
  "name": "showValue",
@@ -137363,6 +138081,19 @@
137363
138081
  "description": "How far one press of an arrow key moves the thumb.",
137364
138082
  "attribute": "step"
137365
138083
  },
138084
+ {
138085
+ "kind": "field",
138086
+ "name": "thumbLabel",
138087
+ "type": {
138088
+ "text": "string"
138089
+ },
138090
+ "default": "'thumb {index}'",
138091
+ "description": "The name of a thumb between a range's first and last, read after the\nslider's label, with `{index}` filled in: its place, counted from 1. The\nfirst is `minimum-label` and the last `maximum-label`.",
138092
+ "attribute": "thumb-label",
138093
+ "helix": {
138094
+ "words": true
138095
+ }
138096
+ },
137366
138097
  {
137367
138098
  "kind": "field",
137368
138099
  "name": "tooltip",
@@ -137440,6 +138171,16 @@
137440
138171
  "description": "The pair, as numbers, in order.\n\nFalls back to the whole range rather than to zero, so a range slider given\nno value opens fully wide instead of pinned shut at its own minimum, which\nis what a filter with nothing filtered out looks like.",
137441
138172
  "readonly": true
137442
138173
  },
138174
+ {
138175
+ "kind": "field",
138176
+ "name": "points",
138177
+ "type": {
138178
+ "text": "number[]"
138179
+ },
138180
+ "privacy": "private",
138181
+ "description": "A range's values, one per thumb, as numbers in order.\n\nA lone number is not a range, so it is not read as one. `willUpdate`\nseeds and sanitizes a range to two values or more, and anything else that\narrives between the two opens fully wide, which is what \"nothing filtered\nout\" looks like.",
138182
+ "readonly": true
138183
+ },
137443
138184
  {
137444
138185
  "kind": "method",
137445
138186
  "name": "along",
@@ -137472,6 +138213,13 @@
137472
138213
  "readonly": true,
137473
138214
  "description": "Relayed, because `change` does not cross a shadow boundary on its own."
137474
138215
  },
138216
+ {
138217
+ "kind": "field",
138218
+ "name": "handleKeydown",
138219
+ "privacy": "private",
138220
+ "readonly": true,
138221
+ "description": "Keeps a read-only thumb still under the keys that move it. Tab and every\nother key pass, so focus moves on."
138222
+ },
137475
138223
  {
137476
138224
  "kind": "method",
137477
138225
  "name": "sync",
@@ -137481,7 +138229,7 @@
137481
138229
  "text": "void"
137482
138230
  }
137483
138231
  },
137484
- "description": "Reports the value."
138232
+ "description": "Reports the value: one entry, or for a named range one entry per thumb.\nThe joined pair is the state the browser restores."
137485
138233
  },
137486
138234
  {
137487
138235
  "kind": "field",
@@ -137638,6 +138386,33 @@
137638
138386
  "description": "What a screen reader says for a thumb's value, with `{value}` filled in,\nsuch as `{value} degrees`. Empty announces the number alone.",
137639
138387
  "attribute": "value-text"
137640
138388
  },
138389
+ {
138390
+ "kind": "field",
138391
+ "name": "thumbContent",
138392
+ "type": {
138393
+ "text": "boolean"
138394
+ },
138395
+ "privacy": "private",
138396
+ "description": "Whether a `thumb` or `thumb-end` slot has content, read off the children\nrather than heard from `slotchange`: a declarative shadow root fires that\nbefore anything listens, so a served slider kept its layer hidden.",
138397
+ "readonly": true
138398
+ },
138399
+ {
138400
+ "kind": "field",
138401
+ "name": "handleThumbSlot",
138402
+ "privacy": "private",
138403
+ "readonly": true
138404
+ },
138405
+ {
138406
+ "kind": "method",
138407
+ "name": "renderThumbs",
138408
+ "privacy": "protected",
138409
+ "return": {
138410
+ "type": {
138411
+ "text": "TemplateResult"
138412
+ }
138413
+ },
138414
+ "description": "A box for each thumb, over the track at the thumb's place, holding the\n`thumb` slot: a range's upper thumb holds `thumb-end`. Hidden from the\naccessibility tree, since each thumb is already a range with a name and a\nvalue, and `hidden` while no slot has content, so an empty layer takes no\nroom in the row."
138415
+ },
137641
138416
  {
137642
138417
  "kind": "method",
137643
138418
  "name": "renderTooltips",
@@ -137647,20 +138422,6 @@
137647
138422
  "text": "TemplateResult | typeof nothing"
137648
138423
  }
137649
138424
  },
137650
- "parameters": [
137651
- {
137652
- "name": "start",
137653
- "type": {
137654
- "text": "number"
137655
- }
137656
- },
137657
- {
137658
- "name": "end",
137659
- "type": {
137660
- "text": "number"
137661
- }
137662
- }
137663
- ],
137664
138425
  "description": "A bubble for each thumb, under `tooltip`, saying its value where it is.\nAfter the thumbs, so a stylesheet can reach a bubble from a focused\nthumb, and hidden from the accessibility tree for the reason the readout\nis: each thumb already reports its value."
137665
138426
  },
137666
138427
  {
@@ -139063,7 +139824,7 @@
139063
139824
  "text": "boolean"
139064
139825
  },
139065
139826
  "default": "false",
139066
- "description": "Adds a second thumb, so the value is a pair.\n\nThe pair is one string, `\"10,50\"`, which is what a form submits and what\n`MixinControllerValue` already holds. `valueAsNumber` reads the lower of\nthe two, since a range has no single number.",
139827
+ "description": "Adds a second thumb, so the value is a pair.\n\nThe pair is one string, `\"10,50\"`, which is what `value` and\n`MixinControllerValue` hold. A form receives two entries under the name,\n`price=10&price=50`, as React Aria's two thumbs send theirs.\n`valueAsNumber` reads the lower of the two, since a range has no single\nnumber.",
139067
139828
  "fieldName": "range"
139068
139829
  },
139069
139830
  {
@@ -139075,6 +139836,15 @@
139075
139836
  "description": "How the readout joins a range's two values, with `{start}` and `{end}`\nfilled in. Write it in the page's language, such as `{start} bis {end}`.",
139076
139837
  "fieldName": "rangeText"
139077
139838
  },
139839
+ {
139840
+ "name": "readonly",
139841
+ "type": {
139842
+ "text": "boolean"
139843
+ },
139844
+ "default": "false",
139845
+ "description": "Whether a reader can see and focus the value and cannot change it. A\nread-only slider still submits its value.\n\nReact Aria's `isReadOnly`. Each thumb stays a tab stop and says\n`aria-readonly`. The arrow keys, the page keys, Home, End, and a drag\nleave the value where it is. A script can still set `value`.",
139846
+ "fieldName": "readOnly"
139847
+ },
139078
139848
  {
139079
139849
  "name": "show-value",
139080
139850
  "type": {
@@ -139093,6 +139863,15 @@
139093
139863
  "description": "How far one press of an arrow key moves the thumb.",
139094
139864
  "fieldName": "step"
139095
139865
  },
139866
+ {
139867
+ "name": "thumb-label",
139868
+ "type": {
139869
+ "text": "string"
139870
+ },
139871
+ "default": "'thumb {index}'",
139872
+ "description": "The name of a thumb between a range's first and last, read after the\nslider's label, with `{index}` filled in: its place, counted from 1. The\nfirst is `minimum-label` and the last `maximum-label`.",
139873
+ "fieldName": "thumbLabel"
139874
+ },
139096
139875
  {
139097
139876
  "name": "tooltip",
139098
139877
  "type": {
@@ -140875,7 +141654,7 @@
140875
141654
  "declarations": [
140876
141655
  {
140877
141656
  "kind": "class",
140878
- "description": "Each item is a command, so it has the `menuitem` role. A megamenu holds\ndestinations, so it is a disclosure of links. A speed dial holds actions,\nwhich is what `role=\"menu\"` is for.\n\nThe name is text rendered beside the icon, and it is the accessible name. A\n`title` on an icon shows only on hover. Visible text is read, searched, and\ntranslated like other text.\n\n`shortcut` gives the action's keyboard shortcut as a chord, such as `mod+s`,\nthe grammar Menu's rows use. The action carries it as `aria-keyshortcuts`\nand draws it after the name in the platform's glyphs or words, `⌘S` on an\nApple keyboard and `Ctrl+S` elsewhere, as Menu draws its rows' shortcuts.\nPut a `Kbd` in the `shortcut` slot to draw it as keys instead; the dial\nimports no `Kbd` of its own. Showing a shortcut does not bind it.",
141657
+ "description": "Each item is a command, so it has the `menuitem` role. A megamenu holds\ndestinations, so it is a disclosure of links. A speed dial holds actions,\nwhich is what `role=\"menu\"` is for.\n\nThe name is text rendered beside the icon, and it is the accessible name. A\n`title` on an icon shows only on hover. Visible text is read, searched, and\ntranslated like other text.\n\n`shortcut` gives the action's keyboard shortcut as a chord, such as `mod+s`,\nthe grammar Menu's rows use. The action carries it as `aria-keyshortcuts`\nand draws it after the name in the platform's glyphs or words, `⌘S` on an\nApple keyboard and `Ctrl+S` elsewhere, as Menu draws its rows' shortcuts.\nPut a `Kbd` in the `shortcut` slot to draw it as keys instead; the dial\nimports no `Kbd` of its own. Showing a shortcut does not bind it.\n\n`href` makes the action a link, as Menu's rows take one: the `item` part is\nthen an `<a>` carrying `menuitem`, so the browser follows it, opens it in a\nnew tab on a middle press, and offers its own menu for it. Choosing it still\nsends `helix-select` and closes the dial. A disabled action draws no link.",
140879
141658
  "name": "HelixHeadlessSpeedDialItem",
140880
141659
  "cssParts": [
140881
141660
  {
@@ -140883,7 +141662,7 @@
140883
141662
  "name": "icon"
140884
141663
  },
140885
141664
  {
140886
- "description": "The control for the action.",
141665
+ "description": "The control for the action, which is an `<a>` where `href` is set.",
140887
141666
  "name": "item"
140888
141667
  },
140889
141668
  {
@@ -140921,6 +141700,36 @@
140921
141700
  "attribute": "disabled",
140922
141701
  "reflects": true
140923
141702
  },
141703
+ {
141704
+ "kind": "field",
141705
+ "name": "download",
141706
+ "type": {
141707
+ "text": "boolean"
141708
+ },
141709
+ "default": "false",
141710
+ "description": "Whether the link downloads the file when the action is chosen. Only\nmeaningful beside an `href`, and only for a file served from the page's\norigin.",
141711
+ "attribute": "download"
141712
+ },
141713
+ {
141714
+ "kind": "field",
141715
+ "name": "href",
141716
+ "type": {
141717
+ "text": "string"
141718
+ },
141719
+ "default": "''",
141720
+ "description": "The URL the action links to. Setting it draws the action as a link.",
141721
+ "attribute": "href"
141722
+ },
141723
+ {
141724
+ "kind": "field",
141725
+ "name": "rel",
141726
+ "type": {
141727
+ "text": "string"
141728
+ },
141729
+ "default": "''",
141730
+ "description": "The link's `rel`. Set it whenever you set `target=\"_blank\"`.",
141731
+ "attribute": "rel"
141732
+ },
140924
141733
  {
140925
141734
  "kind": "field",
140926
141735
  "name": "shortcut",
@@ -140931,6 +141740,16 @@
140931
141740
  "description": "The action's keyboard shortcut as a chord, such as `mod+s`, carried as\n`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple\nkeyboard and Control elsewhere. Showing a shortcut does not bind it.",
140932
141741
  "attribute": "shortcut"
140933
141742
  },
141743
+ {
141744
+ "kind": "field",
141745
+ "name": "target",
141746
+ "type": {
141747
+ "text": "string"
141748
+ },
141749
+ "default": "''",
141750
+ "description": "Where the link opens, such as `_blank` for a new tab.",
141751
+ "attribute": "target"
141752
+ },
140934
141753
  {
140935
141754
  "kind": "field",
140936
141755
  "name": "value",
@@ -141039,6 +141858,13 @@
141039
141858
  "privacy": "private",
141040
141859
  "readonly": true
141041
141860
  },
141861
+ {
141862
+ "kind": "field",
141863
+ "name": "handleKeydown",
141864
+ "privacy": "private",
141865
+ "readonly": true,
141866
+ "description": "Space presses a linked action, which an anchor ignores, and the click that\ncomes back both announces and follows the link. Enter is the anchor's own."
141867
+ },
141042
141868
  {
141043
141869
  "kind": "method",
141044
141870
  "name": "renderShortcut",
@@ -141410,6 +142236,33 @@
141410
142236
  "description": "Whether the action is disabled, so it cannot be chosen.",
141411
142237
  "fieldName": "disabled"
141412
142238
  },
142239
+ {
142240
+ "name": "download",
142241
+ "type": {
142242
+ "text": "boolean"
142243
+ },
142244
+ "default": "false",
142245
+ "description": "Whether the link downloads the file when the action is chosen. Only\nmeaningful beside an `href`, and only for a file served from the page's\norigin.",
142246
+ "fieldName": "download"
142247
+ },
142248
+ {
142249
+ "name": "href",
142250
+ "type": {
142251
+ "text": "string"
142252
+ },
142253
+ "default": "''",
142254
+ "description": "The URL the action links to. Setting it draws the action as a link.",
142255
+ "fieldName": "href"
142256
+ },
142257
+ {
142258
+ "name": "rel",
142259
+ "type": {
142260
+ "text": "string"
142261
+ },
142262
+ "default": "''",
142263
+ "description": "The link's `rel`. Set it whenever you set `target=\"_blank\"`.",
142264
+ "fieldName": "rel"
142265
+ },
141413
142266
  {
141414
142267
  "name": "shortcut",
141415
142268
  "type": {
@@ -141419,6 +142272,15 @@
141419
142272
  "description": "The action's keyboard shortcut as a chord, such as `mod+s`, carried as\n`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple\nkeyboard and Control elsewhere. Showing a shortcut does not bind it.",
141420
142273
  "fieldName": "shortcut"
141421
142274
  },
142275
+ {
142276
+ "name": "target",
142277
+ "type": {
142278
+ "text": "string"
142279
+ },
142280
+ "default": "''",
142281
+ "description": "Where the link opens, such as `_blank` for a new tab.",
142282
+ "fieldName": "target"
142283
+ },
141422
142284
  {
141423
142285
  "name": "value",
141424
142286
  "type": {
@@ -141643,7 +142505,7 @@
141643
142505
  "declarations": [
141644
142506
  {
141645
142507
  "kind": "class",
141646
- "description": "A speed dial is a menu. Its items are commands, so it uses `role=\"menu\"` and\n`menuitem`, and it is built from the same pieces as `Menu`:\n- `KeyboardNavigationController` for the arrow keys\n- `PopoverController` for the panel\n- `MixinControllerOpen` for open and closed\n\nIt is a separate component because a speed dial has no submenus, headers, or\ncheckable items.\n\nYou slot the trigger. The usual floating action button is `IconButton` with\n`shape=\"circle\"` and `raised`. There is no `helix-fab`, because `IconButton`\nalready has `emphasis`, `tone`, `label`, and a size. Position the button with\n`data-dock` in the base layer.\n\nAll four arrow keys move through the actions, because a speed dial has no\nnested levels to reserve the horizontal pair for. This is the default\nbehavior of the keyboard controller. Typing a letter moves to the next\naction whose name starts with it. The actions are one tab stop, and Tab\ncloses the dial and moves on.\n\n**Keyboard.** On the trigger, Enter, Space or a press opens the dial on its\nfirst action. With the dial open:\n\n| Key | What it does |\n|---|---|\n| Down, Right | Moves to the next action, from the last back to the first. |\n| Up, Left | Moves to the action before, from the first round to the last. |\n| Home, End | Moves to the first or the last action. |\n| A letter | Moves to the next action whose name starts with it. |\n| Enter, Space | Chooses the action, and the dial closes. |\n| Escape | Closes the dial and puts focus back on the trigger. |\n| Tab | Closes the dial and moves on. |\n\n**Groups.** Put actions in `Speed Dial.Group`, named by its `label`, to set\nthem apart as Menu's sections do: each is a `group` of the menu, and the\narrow keys walk through every group's actions in order.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, such as composing a message, and holding it\nfor half a second opens the dial, as React Aria's menu trigger does with\n`trigger=\"longPress\"`. Alt+Down or Alt+Up opens it from the keyboard, and\nthe trigger says so in its description, `long-press-label`, the drawn one\nand a slotted one alike. A press that has opened the dial does not also do\nthe trigger's action.",
142508
+ "description": "A speed dial is a menu. Its items are commands, so it uses `role=\"menu\"` and\n`menuitem`, and it is built from the same pieces as `Menu`:\n- `KeyboardNavigationController` for the arrow keys\n- `PopoverController` for the panel\n- `MixinControllerOpen` for open and closed\n\nIt is a separate component because a speed dial has no submenus, headers, or\ncheckable items.\n\nYou slot the trigger. The usual floating action button is `IconButton` with\n`shape=\"circle\"` and `raised`. There is no `helix-fab`, because `IconButton`\nalready has `emphasis`, `tone`, `label`, and a size. Position the button with\n`data-dock` in the base layer.\n\nAll four arrow keys move through the actions, because a speed dial has no\nnested levels to reserve the horizontal pair for. This is the default\nbehavior of the keyboard controller. Typing a letter moves to the next\naction whose name starts with it. The actions are one tab stop, and Tab\ncloses the dial and moves on.\n\n**Keyboard.** On the trigger, Enter, Space, Down or a press opens the dial\non its first action, and Up opens it on its last, as an APG menu button\ndoes. With the dial open:\n\n| Key | What it does |\n|---|---|\n| Down, Right | Moves to the next action, from the last back to the first. |\n| Up, Left | Moves to the action before, from the first round to the last. |\n| Home, End | Moves to the first or the last action. |\n| A letter | Moves to the next action whose name starts with it. |\n| Enter, Space | Chooses the action, and the dial closes. |\n| Escape | Closes the dial and puts focus back on the trigger. |\n| Tab | Closes the dial and moves on. |\n\n**Groups.** Put actions in `Speed Dial.Group`, named by its `label`, to set\nthem apart as Menu's sections do: each is a `group` of the menu, and the\narrow keys walk through every group's actions in order.\n\n**A trigger with its own action.** With `open-on=\"long-press\"`, a press on\nthe trigger is the trigger's own, such as composing a message, and holding it\nfor half a second opens the dial, as React Aria's menu trigger does with\n`trigger=\"longPress\"`. Alt+Down or Alt+Up opens it from the keyboard, and\nthe trigger says so in its description, `long-press-label`, the drawn one\nand a slotted one alike. A press that has opened the dial does not also do\nthe trigger's action.\n\n**Open on hover.** With `open-on=\"hover\"`, a mouse resting on the trigger\nopens the dial, as Material's speed dial does, and the dial closes a moment\nafter the mouse leaves both the trigger and the actions. A press, a touch\nand the keyboard open it as under `click`, and a press on the trigger of a\ndial already open moves focus to its first action, so the press a mouse\nmakes after hovering keeps the dial open.",
141647
142509
  "name": "HelixHeadlessSpeedDial",
141648
142510
  "cssParts": [
141649
142511
  {
@@ -141660,6 +142522,10 @@
141660
142522
  "description": "The actions.",
141661
142523
  "name": ""
141662
142524
  },
142525
+ {
142526
+ "description": "Replaces the plus on the button the dial draws when no trigger is slotted, such as with a pencil for a dial of ways to write.",
142527
+ "name": "icon"
142528
+ },
141663
142529
  {
141664
142530
  "description": "The control that opens the actions. Without one, a button named by `label` is drawn.",
141665
142531
  "name": "trigger"
@@ -141716,10 +142582,10 @@
141716
142582
  "kind": "field",
141717
142583
  "name": "openOn",
141718
142584
  "type": {
141719
- "text": "'click' | 'long-press'"
142585
+ "text": "'click' | 'hover' | 'long-press'"
141720
142586
  },
141721
142587
  "default": "'click'",
141722
- "description": "What opens the dial. `click` opens it on a press of the trigger. Under\n`long-press`, a press is the trigger's own action, and the dial opens on a\npress held for half a second, or on Alt+Down or Alt+Up.",
142588
+ "description": "What opens the dial. `click` opens it on a press of the trigger. `hover`\nalso opens it while a mouse rests on the trigger, and closes it once the\nmouse has left. Under `long-press`, a press is the trigger's own action,\nand the dial opens on a press held for half a second, or on Alt+Down or\nAlt+Up.",
141723
142589
  "attribute": "open-on"
141724
142590
  },
141725
142591
  {
@@ -141749,6 +142615,25 @@
141749
142615
  "default": "false",
141750
142616
  "description": "Whether the trigger asked for the open that is under way, which is the one\nopen that moves focus onto the first action.\n\nA dial opened by `default-open` or by a script setting `open` leaves focus\nwhere it is: on load that is wherever `autofocus` put it, and later it is\nwherever the reader is typing."
141751
142617
  },
142618
+ {
142619
+ "kind": "field",
142620
+ "name": "focusLast",
142621
+ "type": {
142622
+ "text": "boolean"
142623
+ },
142624
+ "privacy": "private",
142625
+ "default": "false",
142626
+ "description": "Whether the open under way puts focus on the last action, from Up."
142627
+ },
142628
+ {
142629
+ "kind": "field",
142630
+ "name": "leaving",
142631
+ "type": {
142632
+ "text": "ReturnType<typeof setTimeout> | undefined"
142633
+ },
142634
+ "privacy": "private",
142635
+ "description": "The close a mouse leaving a hover dial has asked for, a moment from now."
142636
+ },
141752
142637
  {
141753
142638
  "kind": "field",
141754
142639
  "name": "panel",
@@ -141793,6 +142678,37 @@
141793
142678
  "privacy": "private",
141794
142679
  "readonly": true
141795
142680
  },
142681
+ {
142682
+ "kind": "field",
142683
+ "name": "handleTriggerPointerOver",
142684
+ "privacy": "private",
142685
+ "readonly": true,
142686
+ "description": "Opens on a mouse coming over the trigger, under `open-on=\"hover\"`."
142687
+ },
142688
+ {
142689
+ "kind": "field",
142690
+ "name": "handlePointerEnter",
142691
+ "privacy": "private",
142692
+ "readonly": true,
142693
+ "description": "Keeps a hover dial open while the mouse is back over it."
142694
+ },
142695
+ {
142696
+ "kind": "field",
142697
+ "name": "handlePointerLeave",
142698
+ "privacy": "private",
142699
+ "readonly": true,
142700
+ "description": "Closes a hover dial a moment after the mouse leaves it, so a mouse\ncrossing the gap between the trigger and the actions keeps it open.\nFocus inside the dial keeps it open too, as a reader is using it."
142701
+ },
142702
+ {
142703
+ "kind": "method",
142704
+ "name": "stay",
142705
+ "privacy": "private",
142706
+ "return": {
142707
+ "type": {
142708
+ "text": "void"
142709
+ }
142710
+ }
142711
+ },
141796
142712
  {
141797
142713
  "kind": "method",
141798
142714
  "name": "focus",
@@ -142466,10 +143382,10 @@
142466
143382
  {
142467
143383
  "name": "open-on",
142468
143384
  "type": {
142469
- "text": "'click' | 'long-press'"
143385
+ "text": "'click' | 'hover' | 'long-press'"
142470
143386
  },
142471
143387
  "default": "'click'",
142472
- "description": "What opens the dial. `click` opens it on a press of the trigger. Under\n`long-press`, a press is the trigger's own action, and the dial opens on a\npress held for half a second, or on Alt+Down or Alt+Up.",
143388
+ "description": "What opens the dial. `click` opens it on a press of the trigger. `hover`\nalso opens it while a mouse rests on the trigger, and closes it once the\nmouse has left. Under `long-press`, a press is the trigger's own action,\nand the dial opens on a press held for half a second, or on Alt+Down or\nAlt+Up.",
142473
143389
  "fieldName": "openOn"
142474
143390
  },
142475
143391
  {
@@ -142600,7 +143516,7 @@
142600
143516
  "declarations": [
142601
143517
  {
142602
143518
  "kind": "class",
142603
- "description": "A splitter has one axis. Nest splitters to get two axes and three-pane or\nfour-pane layouts.\n\nWhen a splitter is slotted into a pane of another at a right angle, a corner\nhandle appears where the dividers cross. It shows the `move` cursor, responds\nto both arrow axes, and a drag moves both dividers at once. The corner is\nadded at `firstUpdated` and is not in the server markup. Before it appears,\nboth dividers work on their own.\n\nThe divider has `role=\"separator\"` and `aria-valuenow`, with\n`aria-valuetext` saying the start pane's share as a percentage in the\nnearest `lang`, or in the reader's locale where no `lang` is set, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,\npress `Home` or `End` to move it to its bounds, and press `Enter` to collapse\nthe start pane and open it again. A drag in progress is tracked as a state, so both dividers a\ncorner moves stay lit for as long as they move.\n\nBy default, `min` and `max` let the divider reach either edge, so you can\ndrag a pane fully closed. Set them to limit the range.\n\nA pane can be collapsed, which is a separate state from a divider at the\nedge. `collapsed` names the shut pane, `start` or `end`, and the pane opens\nback to the position where the collapsing gesture began. A drag records that position\non press, and every other way of collapsing records it in `settle`.\n`collapsed-size` keeps a sliver of the pane visible, such as a tab strip.\nCollapsing overrides `min` and `max`.\n\nSet `primary` to the pane that keeps its size when the splitter's own size\nchanges, such as a sidebar beside a window being resized. The other pane\ntakes all of the change, as Web Awesome's split panel does. Without it,\nboth panes keep their share.\n\n**Keyboard.** The divider is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |\n| Up, Down | Moves a stacked divider by `step`. |\n| Home, End | Moves the divider to its bounds. |\n| Enter | Collapses the start pane, and opens it again. |\n| F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |",
143519
+ "description": "A splitter has one axis. Nest splitters to get two axes and three-pane or\nfour-pane layouts.\n\nWhen a splitter is slotted into a pane of another at a right angle, a corner\nhandle appears where the dividers cross. It shows the `move` cursor, responds\nto both arrow axes, and a drag moves both dividers at once. The corner is\nadded at `firstUpdated` and is not in the server markup. Before it appears,\nboth dividers work on their own.\n\nThe divider has `role=\"separator\"` and `aria-valuenow`, with\n`aria-valuetext` saying the start pane's share as a percentage in the\nnearest `lang`, or in the reader's locale where no `lang` is set, and `aria-controls` names the start pane. Drag it with a pointer or move it with the arrow keys,\npress `Home` or `End` to move it to its bounds, and press `Enter` to collapse\nthe start pane and open it again. A drag in progress is tracked as a state, so both dividers a\ncorner moves stay lit for as long as they move.\n\nBy default, `min` and `max` let the divider reach either edge, so you can\ndrag a pane fully closed. Set them to limit the range.\n\nA pane can be collapsed, which is a separate state from a divider at the\nedge. `collapsed` names the shut pane, `start` or `end`, and the pane opens\nback to the position where the collapsing gesture began. A drag records that position\non press, and every other way of collapsing records it in `settle`.\n`collapsed-size` keeps a sliver of the pane visible, such as a tab strip.\nCollapsing overrides `min` and `max`.\n\nSet `primary` to the pane that keeps its size when the splitter's own size\nchanges, such as a sidebar beside a window being resized. The other pane\ntakes all of the change, as Web Awesome's split panel does. Without it,\nboth panes keep their share.\n\n**Three or more panes along one axis are splitters nested on that axis**, a\nsplitter in the `end` pane of another for three columns. The nested one\nkeeps the pane on its far side the size it was while the outer divider\nmoves, so a divider resizes only the two panes beside it, as Zag's splitter\ndoes with any number of panels. Where the whole row is resized, every pane\nkeeps its share, unless `primary` says otherwise.\n\n**Keyboard.** The divider is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Left, Right | Moves a side-by-side divider by `step`. On a right-to-left page, Left moves it toward the end. |\n| Up, Down | Moves a stacked divider by `step`. |\n| Home, End | Moves the divider to its bounds. |\n| Enter | Collapses the start pane, and opens it again. |\n| F6 | Moves focus from one pane to the first control in the other, and from the divider to the start pane. |",
142604
143520
  "name": "HelixHeadlessSplitter",
142605
143521
  "cssProperties": [
142606
143522
  {
@@ -142842,6 +143758,47 @@
142842
143758
  "privacy": "private",
142843
143759
  "description": "Watches this element's length along its axis while `primary` is set."
142844
143760
  },
143761
+ {
143762
+ "kind": "field",
143763
+ "name": "chain",
143764
+ "type": {
143765
+ "text": "{ by: HelixHeadlessSplitter; side: 'end' | 'start' } | null"
143766
+ },
143767
+ "privacy": "private",
143768
+ "default": "null",
143769
+ "description": "The splitter this one is nested in on the same axis, and the pane of it\nthis one is in, for a row of three or more panes."
143770
+ },
143771
+ {
143772
+ "kind": "field",
143773
+ "name": "chainLength",
143774
+ "type": {
143775
+ "text": "number"
143776
+ },
143777
+ "privacy": "private",
143778
+ "default": "0",
143779
+ "description": "The length of the splitter this one is chained to, last seen."
143780
+ },
143781
+ {
143782
+ "kind": "field",
143783
+ "name": "held",
143784
+ "type": {
143785
+ "text": "'end' | 'start' | undefined"
143786
+ },
143787
+ "privacy": "private",
143788
+ "description": "The pane that keeps its pixels as this splitter's length changes:\n`primary`, or the far pane of one chained into another, whose divider\nwould otherwise drag this one's along with it.",
143789
+ "readonly": true
143790
+ },
143791
+ {
143792
+ "kind": "method",
143793
+ "name": "measureChain",
143794
+ "privacy": "private",
143795
+ "return": {
143796
+ "type": {
143797
+ "text": "number"
143798
+ }
143799
+ },
143800
+ "description": "The chained splitter's length along the shared axis, in pixels."
143801
+ },
142845
143802
  {
142846
143803
  "kind": "field",
142847
143804
  "name": "length",
@@ -143998,7 +144955,7 @@
143998
144955
  "declarations": [
143999
144956
  {
144000
144957
  "kind": "class",
144001
- "description": "Screen readers announce the stats as a group. The figures are read together\nand their order has no meaning, so the group does not announce positions such\nas \"1 of 4\".",
144958
+ "description": "**A named group is a group**, so a screen reader announces the stats\ntogether under its name, such as \"Usage, group\". Name it with `label`,\n`aria-label` or `aria-labelledby`. An unnamed one has no role, since a group\nwith no name only adds \"group\" to what a reader says, as an unnamed Card\nhas none. The figures are read together and their order has no meaning, so\nthe group does not announce positions such as \"1 of 4\".",
144002
144959
  "name": "HelixHeadlessStatGroup",
144003
144960
  "slots": [
144004
144961
  {
@@ -144014,9 +144971,52 @@
144014
144971
  "text": "string"
144015
144972
  },
144016
144973
  "default": "''",
144017
- "description": "Accessible name for the group.",
144974
+ "description": "Accessible name for the group, which makes it a group.\n\nAbsent leaves the stats with no group around them, unless `aria-label` or\n`aria-labelledby` names it.",
144018
144975
  "attribute": "label"
144019
144976
  },
144977
+ {
144978
+ "kind": "field",
144979
+ "name": "observedAttributes",
144980
+ "type": {
144981
+ "text": "string[]"
144982
+ },
144983
+ "static": true,
144984
+ "description": "Hears a name written on the element, which no property mirrors.\n\nLit observes the attributes of its own properties only, and `ariaLabel`\nand `ariaLabelledByElements` belong to the platform.",
144985
+ "readonly": true
144986
+ },
144987
+ {
144988
+ "kind": "method",
144989
+ "name": "attributeChangedCallback",
144990
+ "return": {
144991
+ "type": {
144992
+ "text": "void"
144993
+ }
144994
+ },
144995
+ "parameters": [
144996
+ {
144997
+ "name": "name",
144998
+ "type": {
144999
+ "text": "string"
145000
+ }
145001
+ },
145002
+ {
145003
+ "name": "old",
145004
+ "type": {
145005
+ "text": "string | null"
145006
+ }
145007
+ },
145008
+ {
145009
+ "name": "value",
145010
+ "type": {
145011
+ "text": "string | null"
145012
+ }
145013
+ }
145014
+ ],
145015
+ "description": "Called by the browser when an observed attribute changes. A name written\nor taken off asks for an update, because it decides whether the stats are\na group.",
145016
+ "type": {
145017
+ "text": "attributeChangedCallback(name: string, old: string | null, value: string | null) => void"
145018
+ }
145019
+ },
144020
145020
  {
144021
145021
  "kind": "field",
144022
145022
  "name": "tier",
@@ -144364,7 +145364,7 @@
144364
145364
  "text": "string"
144365
145365
  },
144366
145366
  "default": "''",
144367
- "description": "Accessible name for the group.",
145367
+ "description": "Accessible name for the group, which makes it a group.\n\nAbsent leaves the stats with no group around them, unless `aria-label` or\n`aria-labelledby` names it.",
144368
145368
  "fieldName": "label"
144369
145369
  }
144370
145370
  ],
@@ -144450,11 +145450,23 @@
144450
145450
  "declarations": [
144451
145451
  {
144452
145452
  "kind": "class",
144453
- "description": "The label comes first in the markup and the value after it, so a screen\nreader reads what the figure counts before the number. Visually, the number\nstands out either way.\n\nBoth are bare slots. An element that assigned itself a slot on connect would\nadd an attribute after upgrade, which markup rendered on the server by React\ndoes not have.\n\n**A stat with a label is a group named by it**, so a reader moving through a\ndashboard hears \"Revenue, group\" and then the figure, its unit and its\ntrend as one reading, rather than a run of loose words. The role and the name\nare set through `ElementInternals` once the label is known, which writes no\nattribute; a stat with no label has no role. Put a `Trend` in the `trend`\nslot to have it read inside the group, after the figure it qualifies.",
145453
+ "description": "The label comes first in the markup and the value after it, so a screen\nreader reads what the figure counts before the number. Visually, the number\nstands out either way.\n\nBoth are bare slots. An element that assigned itself a slot on connect would\nadd an attribute after upgrade, which markup rendered on the server by React\ndoes not have.\n\n**A stat with a label is a group named by it**, so a reader moving through a\ndashboard hears \"Revenue, group\" and then the figure, its unit and its\ntrend as one reading, rather than a run of loose words. The role and the name\nare set through `ElementInternals` once the label is known, which writes no\nattribute; a stat with no label has no role. Put a `Trend` in the `trend`\nslot to have it read inside the group, after the figure it qualifies.\n\n**Or give the figure as a number.** `value` is written with\n`Intl.NumberFormat`, in `locale` and with `format-options`, so\n`value=\"1234567\" format-options='{\"notation\":\"compact\"}'` shows `1.2M`, and\na server writes it as the browser does. A number in `value` takes the place\nof a slotted figure.\n\n**Each slot is a part of the same name**, and `value` for the figure, so a\npage reaches the label, the unit and the trend from outside. A slot draws no\nbox, so a part passes inherited properties to what is slotted. **The stat\nsays which pieces it holds**, as `:state(has-label)`, `:state(has-unit)` and\n`:state(has-trend)`, read in the browser, so a served stat carries none\nuntil the script runs.",
144454
145454
  "name": "HelixHeadlessStat",
144455
145455
  "cssParts": [
144456
145456
  {
144457
- "description": "The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.",
145457
+ "description": "The slot the label arrives through, drawing no box, as `value` does.",
145458
+ "name": "label"
145459
+ },
145460
+ {
145461
+ "description": "The slot the trend arrives through, drawing no box, as `value` does.",
145462
+ "name": "trend"
145463
+ },
145464
+ {
145465
+ "description": "The slot the unit arrives through, drawing no box, as `value` does.",
145466
+ "name": "unit"
145467
+ },
145468
+ {
145469
+ "description": "The slot the value is written in, or the figure `value` writes. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.",
144458
145470
  "name": "value"
144459
145471
  }
144460
145472
  ],
@@ -144487,6 +145499,41 @@
144487
145499
  "attribute": "direction",
144488
145500
  "reflects": true
144489
145501
  },
145502
+ {
145503
+ "kind": "field",
145504
+ "name": "formatOptions",
145505
+ "type": {
145506
+ "text": "Intl.NumberFormatOptions | undefined"
145507
+ },
145508
+ "description": "`Intl.NumberFormat` options `value` is written with, such as\n`{\"notation\":\"compact\"}` for `1.2M` or `{\"style\":\"percent\"}` for `98%`,\nwritten as JSON in the attribute.\n\nAbsent writes the number as the locale writes any number.",
145509
+ "attribute": "format-options"
145510
+ },
145511
+ {
145512
+ "kind": "field",
145513
+ "name": "locale",
145514
+ "type": {
145515
+ "text": "string"
145516
+ },
145517
+ "default": "''",
145518
+ "description": "The locale `value` is written in, such as `de` for `1.234.567`.\n\nAbsent reads the nearest `lang`, then the runtime's own. Set it on a page\nrendered on a server, so the server and the browser write the figure\nalike.",
145519
+ "attribute": "locale"
145520
+ },
145521
+ {
145522
+ "kind": "field",
145523
+ "name": "value",
145524
+ "type": {
145525
+ "text": "number | undefined"
145526
+ },
145527
+ "description": "The figure as a number, written with `format-options` in `locale` in\nplace of a slotted value.\n\nAbsent leaves the figure to the slot.",
145528
+ "attribute": "value"
145529
+ },
145530
+ {
145531
+ "kind": "field",
145532
+ "name": "readPieces",
145533
+ "privacy": "private",
145534
+ "readonly": true,
145535
+ "description": "Says which pieces the stat holds, one call apiece so each pairs with its `@cssstate`."
145536
+ },
144490
145537
  {
144491
145538
  "kind": "field",
144492
145539
  "name": "tier",
@@ -144835,6 +145882,53 @@
144835
145882
  },
144836
145883
  "description": "Which way the label and the value are arranged.\n\nAbsent is a column, the label over the number, which is how a figure is read\non a dashboard: the words say what is coming and the number answers.\n`column-reverse` puts the number first, which is right where the number is\nthe headline and the label is a caption under it.\n\nThe row directions set them side by side, for a figure in a line of text or\na narrow strip where a stacked pair would be two lines of almost nothing.\n\nA property rather than a `Flex` around it, because the unit has to stay on\nthe value's baseline whichever way the pair goes, and only this element\nknows which of its children the unit belongs to.\n\nThe name and the values are `Flex`'s, which lays out the same way. Which\nway a number moved is `Trend`'s `movement`. On a Stat, `up`, `down` and\n`neutral` are not layouts, and the pair stays the column.\n\n**Optional rather than defaulted to `column`, which is not a style\npreference.** A reflecting property with a default writes its attribute onto\nthe host the moment the element upgrades, and the host is markup the\nconsumer rendered: React compares what it rendered against what is there and\nreports a hydration mismatch. The absent attribute is the column, which the\nstylesheet reads as the base case, and the server spec asserts the host\ncarries nothing nobody wrote.",
144837
145884
  "fieldName": "direction"
145885
+ },
145886
+ {
145887
+ "name": "format-options",
145888
+ "type": {
145889
+ "text": "Intl.NumberFormatOptions | undefined"
145890
+ },
145891
+ "description": "`Intl.NumberFormat` options `value` is written with, such as\n`{\"notation\":\"compact\"}` for `1.2M` or `{\"style\":\"percent\"}` for `98%`,\nwritten as JSON in the attribute.\n\nAbsent writes the number as the locale writes any number.",
145892
+ "fieldName": "formatOptions"
145893
+ },
145894
+ {
145895
+ "name": "locale",
145896
+ "type": {
145897
+ "text": "string"
145898
+ },
145899
+ "default": "''",
145900
+ "description": "The locale `value` is written in, such as `de` for `1.234.567`.\n\nAbsent reads the nearest `lang`, then the runtime's own. Set it on a page\nrendered on a server, so the server and the browser write the figure\nalike.",
145901
+ "fieldName": "locale"
145902
+ },
145903
+ {
145904
+ "name": "value",
145905
+ "type": {
145906
+ "text": "number | undefined"
145907
+ },
145908
+ "description": "The figure as a number, written with `format-options` in `locale` in\nplace of a slotted value.\n\nAbsent leaves the figure to the slot.",
145909
+ "fieldName": "value"
145910
+ }
145911
+ ],
145912
+ "cssStates": [
145913
+ {
145914
+ "description": "Something is slotted into `label`.",
145915
+ "name": "has-label"
145916
+ },
145917
+ {
145918
+ "description": "Something is slotted into `trend`.",
145919
+ "name": "has-trend"
145920
+ },
145921
+ {
145922
+ "description": "Something is slotted into `unit`.",
145923
+ "name": "has-unit"
145924
+ },
145925
+ {
145926
+ "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
145927
+ "name": "settled",
145928
+ "inheritedFrom": {
145929
+ "name": "HelixElement",
145930
+ "module": "src/helix-element/helix-element.ts"
145931
+ }
144838
145932
  }
144839
145933
  ],
144840
145934
  "superclass": {
@@ -144866,16 +145960,6 @@
144866
145960
  },
144867
145961
  "tagName": "helix-headless-stat",
144868
145962
  "customElement": true,
144869
- "cssStates": [
144870
- {
144871
- "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
144872
- "name": "settled",
144873
- "inheritedFrom": {
144874
- "name": "HelixElement",
144875
- "module": "src/helix-element/helix-element.ts"
144876
- }
144877
- }
144878
- ],
144879
145963
  "modulePath": "src/stat/root/stat-root.ts",
144880
145964
  "definitionPath": "src/stat/root/stat-root.ts"
144881
145965
  }
@@ -144952,9 +146036,13 @@
144952
146036
  "type": {
144953
146037
  "text": "number"
144954
146038
  }
146039
+ },
146040
+ {
146041
+ "name": "passing",
146042
+ "default": "false"
144955
146043
  }
144956
146044
  ],
144957
- "description": "Whether a reader on step `from` may go to step `to`, in a linear sequence.\n\nBack is always allowed, as Ark UI's linear steps allow it. Forward is allowed\nonly where every stage from the one the reader is on up to the target is\ncomplete or optional, so no stage is passed unfinished."
146045
+ "description": "Whether a reader on step `from` may go to step `to`, in a linear sequence.\n\nBack is always allowed, as Ark UI's linear steps allow it. Forward is allowed\nonly where every stage from the one the reader is on up to the target is\ncomplete or optional, so no stage is passed unfinished.\n\n`passing` is a sequence whose stages are complete once a reader moves past\nthem, so the stage the reader is on counts as finished and the next one is\nin reach."
144958
146046
  },
144959
146047
  {
144960
146048
  "kind": "function",
@@ -145000,7 +146088,7 @@
145000
146088
  "declarations": [
145001
146089
  {
145002
146090
  "kind": "class",
145003
- "description": "`active` sets where the user is, and `complete` stays on each step. Returning\nto stage one of three leaves stages one and two finished, so the root sets\n`current` on the steps and never changes `complete`.\n\n`active` is optional. Without it, each step keeps its own `current`, so the\nsequence is correct in the server's markup, where the root cannot count its\nslotted children.\n\n`linear` keeps a reader from passing a stage they have not finished, as Ark\nUI's linear steps do: a stage ahead is out of reach, and its button disabled,\nuntil every stage before it is `complete` or `optional`. Going back is always\nallowed. `next()` and `previous()` move one stage either way, under the\nsame rules, for your own buttons.\n\nTo check a stage before a reader moves on from it, set `validate` to a\nfunction that answers whether the stage is valid, as Ark UI's `isStepValid`\ndoes. Moving forward asks it about the stage the reader is on, and where it\nanswers `false` the reader stays and the stage is `:state(invalid)` until it\nanswers `true`. An `optional` stage is not asked. `helix-before-activate`\nis still sent for every move, for a check of your own.\n\n`progress` is how far through the sequence is, from 0 to 100: the share of\nits stages that are `complete`. The `progress` part carries it as a\n`progressbar` and as `--steps-progress`, and is hidden until a stylesheet\ngives it a `display`, so a bar of your own costs nothing until you draw it.\nA screen reader hears it as `progress-label` says, \"33% complete\" unless\nset, as Ark UI's steps write it. The sequence is `:state(complete)` once\nevery stage is.\n\nThe sequence is a list named by `label`, and each step a list item. The\ncurrent stage's button says `aria-current=\"step\"`, and a finished stage's\nbutton is described by its `complete-label`.",
146091
+ "description": "`active` sets where the user is, and `complete` stays on each step. Returning\nto stage one of three leaves stages one and two finished, so the root sets\n`current` on the steps and never changes `complete`.\n\n`active` is optional. Without it, each step keeps its own `current`, so the\nsequence is correct in the server's markup, where the root cannot count its\nslotted children.\n\n`linear` keeps a reader from passing a stage they have not finished, as Ark\nUI's linear steps do: a stage ahead is out of reach, and its button disabled,\nuntil every stage before it is `complete` or `optional`. Going back is always\nallowed. `next()` and `previous()` move one stage either way, under the\nsame rules, for your own buttons. `reset()` goes back to the first stage and\nclears every stage's `complete`, as Ark UI's `resetStep` does.\n\n`completion=\"passed\"` marks a stage `complete` once a reader moves past it,\nas Ark UI counts a stage before the current one as completed. Going back\nleaves it complete. In a `linear` sequence the next stage is then in reach\nfrom the current one, and `validate` decides whether the reader may go.\n\nTo check a stage before a reader moves on from it, set `validate` to a\nfunction that answers whether the stage is valid, as Ark UI's `isStepValid`\ndoes. Moving forward asks it about the stage the reader is on, and where it\nanswers `false` the reader stays and the stage is `:state(invalid)` until it\nanswers `true`. An `optional` stage is not asked. `helix-before-activate`\nis still sent for every move, for a check of your own.\n\n`progress` is how far through the sequence is, from 0 to 100: the share of\nits stages that are `complete`. The `progress` part carries it as a\n`progressbar` and as `--steps-progress`, and is hidden until a stylesheet\ngives it a `display`, so a bar of your own costs nothing until you draw it.\nA screen reader hears it as `progress-label` says, \"33% complete\" unless\nset, as Ark UI's steps write it. The sequence is `:state(complete)` once\nevery stage is.\n\nThe sequence is a list named by `label`, and each step a list item. The\ncurrent stage's button says `aria-current=\"step\"`, and a finished stage's\nbutton is described by its `complete-label`.\n\n**Keyboard.** Each stage's name is a button and its own tab stop, and Enter\nor Space goes to the stage. Set `arrows` and the arrow keys move focus\nbetween the names as well, as Ark UI's steps do: Left and Right along a row,\nUp and Down a column, Home and End to the first and the last. The arrows\npass over a disabled stage and one a linear sequence holds out of reach,\nand they move focus without going to the stage.",
145004
146092
  "name": "HelixHeadlessSteps",
145005
146093
  "cssProperties": [
145006
146094
  {
@@ -145031,6 +146119,26 @@
145031
146119
  "default": "'helix-steps'",
145032
146120
  "description": "The key this family's words are registered under, its styled tag:\n`registerWords('de', { 'helix-steps': { progressLabel: '{share, number, percent} erledigt' } })`."
145033
146121
  },
146122
+ {
146123
+ "kind": "field",
146124
+ "name": "arrows",
146125
+ "type": {
146126
+ "text": "boolean"
146127
+ },
146128
+ "default": "false",
146129
+ "description": "Whether the arrow keys move focus between the stages' names, along the\nway the steps run. Off by default, so the arrows keep scrolling the page.",
146130
+ "attribute": "arrows"
146131
+ },
146132
+ {
146133
+ "kind": "field",
146134
+ "name": "completion",
146135
+ "type": {
146136
+ "text": "'passed' | undefined"
146137
+ },
146138
+ "description": "What marks a stage `complete`.\n\nAbsent, you do: each step's `complete` is yours, because a reader who\nsteps back has finished more stages than the one they are on. `passed`\nmarks every stage before the one a reader moves to, and leaves the marks\nwhen they go back.",
146139
+ "attribute": "completion",
146140
+ "reflects": true
146141
+ },
145034
146142
  {
145035
146143
  "kind": "field",
145036
146144
  "name": "label",
@@ -145105,6 +146213,13 @@
145105
146213
  "attribute": "variant",
145106
146214
  "reflects": true
145107
146215
  },
146216
+ {
146217
+ "kind": "field",
146218
+ "name": "keys",
146219
+ "privacy": "protected",
146220
+ "readonly": true,
146221
+ "default": "new KeyboardNavigationController(this, { items: () => (this.arrows ? this.steps.map(navigable) : []), origin: 'focus', reserved: () => this.orientation === 'vertical' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowDown', 'ArrowUp'], selects: () => false, wrap: false, })"
146222
+ },
145108
146223
  {
145109
146224
  "kind": "field",
145110
146225
  "name": "steps",
@@ -145151,6 +146266,19 @@
145151
146266
  "text": "previous() => boolean"
145152
146267
  }
145153
146268
  },
146269
+ {
146270
+ "kind": "method",
146271
+ "name": "reset",
146272
+ "return": {
146273
+ "type": {
146274
+ "text": "boolean"
146275
+ }
146276
+ },
146277
+ "description": "Goes back to the first stage that can be gone to, and clears `complete`\nand the invalid mark from every stage, as Ark UI's `resetStep` does.\nReturns whether it moved: a listener can refuse the move with\n`helix-before-activate`, and the stages then keep their marks.",
146278
+ "type": {
146279
+ "text": "reset() => boolean"
146280
+ }
146281
+ },
145154
146282
  {
145155
146283
  "kind": "method",
145156
146284
  "name": "step",
@@ -145746,6 +146874,23 @@
145746
146874
  }
145747
146875
  ],
145748
146876
  "attributes": [
146877
+ {
146878
+ "name": "arrows",
146879
+ "type": {
146880
+ "text": "boolean"
146881
+ },
146882
+ "default": "false",
146883
+ "description": "Whether the arrow keys move focus between the stages' names, along the\nway the steps run. Off by default, so the arrows keep scrolling the page.",
146884
+ "fieldName": "arrows"
146885
+ },
146886
+ {
146887
+ "name": "completion",
146888
+ "type": {
146889
+ "text": "'passed' | undefined"
146890
+ },
146891
+ "description": "What marks a stage `complete`.\n\nAbsent, you do: each step's `complete` is yours, because a reader who\nsteps back has finished more stages than the one they are on. `passed`\nmarks every stage before the one a reader moves to, and leaves the marks\nwhen they go back.",
146892
+ "fieldName": "completion"
146893
+ },
145749
146894
  {
145750
146895
  "name": "label",
145751
146896
  "type": {
@@ -146061,6 +147206,28 @@
146061
147206
  "default": "new StatusController(this)",
146062
147207
  "description": "Says a stage was finished, from the first time one is."
146063
147208
  },
147209
+ {
147210
+ "kind": "method",
147211
+ "name": "focus",
147212
+ "return": {
147213
+ "type": {
147214
+ "text": "void"
147215
+ }
147216
+ },
147217
+ "parameters": [
147218
+ {
147219
+ "name": "options",
147220
+ "optional": true,
147221
+ "type": {
147222
+ "text": "FocusOptions"
147223
+ }
147224
+ }
147225
+ ],
147226
+ "description": "Puts focus on the step's name, the control a reader presses, as a\n`focus()` on a native control would.",
147227
+ "type": {
147228
+ "text": "focus(options?: FocusOptions) => void"
147229
+ }
147230
+ },
146064
147231
  {
146065
147232
  "kind": "method",
146066
147233
  "name": "select",
@@ -146516,6 +147683,10 @@
146516
147683
  "description": "The sequence's `validate` last answered that this stage is not valid.",
146517
147684
  "name": "invalid"
146518
147685
  },
147686
+ {
147687
+ "description": "A `linear` sequence holds this stage out of reach until the stages before it are finished.",
147688
+ "name": "locked"
147689
+ },
146519
147690
  {
146520
147691
  "description": "Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.",
146521
147692
  "name": "settled",
@@ -153145,7 +154316,7 @@
153145
154316
  "declarations": [
153146
154317
  {
153147
154318
  "kind": "class",
153148
- "description": "Selection works through an event, the same as in the accordion and the tree.\nA tab dispatches `helix-select`, and the root pairs it with the panel of the\nsame value. Nothing registers with anything, so tabs added later work with no\nextra setup.\n\nThe tab list is a single tab stop, and the arrow keys move between tabs\nthrough `KeyboardNavigationController`, the same as in the radio and toggle\ngroups. Selection follows focus, which suits a small set where showing a\npanel is cheap. Set `manual` when showing a panel is expensive, so focus can\nmove without selecting.\n\n`orientation=\"vertical\"` sets the tabs in a column beside the panels, and the\ntab list says `aria-orientation=\"vertical\"`. The arrow keys of both axes move\nbetween tabs either way.\n\nA tab with an `href` is a link, for tabs that are pages of a site. Pressing\nit follows the link. Where any tab is a link, the arrow keys move focus\nwithout choosing on every tab of the list, as under `manual`, so arrowing\npast a tab never leaves the page and the list answers the keys one way.\nMark the tab of the page you are on with `selected`, or set `active` to its\nvalue.\n\nEach tab says which panel it controls through `aria-controls`, set as an\nelement reference to the panel's host, where the engine has reflection.\n\nKeys, on the tab list: Left and Right Arrow move between tabs, and so do Up\nand Down; Home and End go to the first and the last. The horizontal arrows\nfollow the reading direction, so on a right-to-left page Left moves on.\nDisabled tabs are passed over. Tab leaves the list for the selected panel,\nwhich is a tab stop only while it holds nothing focusable.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |\n| Left, Up | Moves to the tab before, from the first round to the last. |\n| Home, End | Moves to the first or the last tab. |\n| Enter, Space | Selects the tab with focus, or follows its link. |\n| Tab | Leaves the list for the selected panel. |\n\nRemoving the selected tab selects the first enabled tab that is left, and\n`active` says so, with `helix-activate`. Where the removed tab had focus,\nfocus moves to the tab now selected.\n\nThe `indicator` part moves to the selected tab and carries its place and\nsize, so a mark of your own can be drawn there: style the part, or slot an\nelement into `indicator`, which sits inside the part and reads the same\nproperties.",
154319
+ "description": "Selection works through an event, the same as in the accordion and the tree.\nA tab dispatches `helix-select`, and the root pairs it with the panel of the\nsame value. Nothing registers with anything, so tabs added later work with no\nextra setup.\n\nThe tab list is a single tab stop, and the arrow keys move between tabs\nthrough `KeyboardNavigationController`, the same as in the radio and toggle\ngroups. Selection follows focus, which suits a small set where showing a\npanel is cheap. Set `manual` when showing a panel is expensive, so focus can\nmove without selecting.\n\n`orientation=\"vertical\"` sets the tabs in a column beside the panels, and the\ntab list says `aria-orientation=\"vertical\"`. The arrow keys of both axes move\nbetween tabs either way.\n\nA tab with an `href` is a link, for tabs that are pages of a site. Pressing\nit follows the link. Where any tab is a link, the arrow keys move focus\nwithout choosing on every tab of the list, as under `manual`, so arrowing\npast a tab never leaves the page and the list answers the keys one way.\nMark the tab of the page you are on with `selected`, or set `active` to its\nvalue.\n\nEach tab says which panel it controls through `aria-controls`, set as an\nelement reference to the panel's host, where the engine has reflection.\n\nKeys, on the tab list: Left and Right Arrow move between tabs, and so do Up\nand Down; Home and End go to the first and the last. The horizontal arrows\nfollow the reading direction, so on a right-to-left page Left moves on.\nDisabled tabs are passed over. Tab leaves the list for the selected panel,\nwhich is a tab stop only while it holds nothing focusable.\n\n**Keyboard.**\n\n| Key | What it does |\n|---|---|\n| Right, Down | Moves to the next tab, from the last round to the first. Selects it, unless `manual` is set or a tab is a link. |\n| Left, Up | Moves to the tab before, from the first round to the last. |\n| Home, End | Moves to the first or the last tab. |\n| Enter, Space | Selects the tab with focus, or follows its link. |\n| Tab | Leaves the list for the selected panel. |\n\nRemoving the selected tab selects the first enabled tab that is left, and\n`active` says so, with `helix-activate`. Where the removed tab had focus,\nfocus moves to the tab now selected.\n\n**More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a\nbutton at each end it can scroll toward, as Web Awesome's tab group does,\nand a press scrolls it most of its own length. The buttons are for the\npointer, so they are out of the tab order and hidden from screen readers;\nthe arrow keys already reach every tab, and the strip scrolls the selected\ntab into view. A strip scrolls once a stylesheet gives the `tabs` part an\n`overflow`, as the styled tier does.\n\nA tab with `dismissible` can be closed: see `Tabs.Tab`.\n\nThe `indicator` part moves to the selected tab and carries its place and\nsize, so a mark of your own can be drawn there: style the part, or slot an\nelement into `indicator`, which sits inside the part and reads the same\nproperties.",
153149
154320
  "name": "HelixHeadlessTabs",
153150
154321
  "cssParts": [
153151
154322
  {
@@ -153156,6 +154327,14 @@
153156
154327
  "description": "The panel container.",
153157
154328
  "name": "panels"
153158
154329
  },
154330
+ {
154331
+ "description": "The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.",
154332
+ "name": "scroll-end"
154333
+ },
154334
+ {
154335
+ "description": "The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.",
154336
+ "name": "scroll-start"
154337
+ },
153159
154338
  {
153160
154339
  "description": "The tab list.",
153161
154340
  "name": "tabs"
@@ -153242,6 +154421,17 @@
153242
154421
  "attribute": "orientation",
153243
154422
  "reflects": true
153244
154423
  },
154424
+ {
154425
+ "kind": "field",
154426
+ "name": "scrollControls",
154427
+ "type": {
154428
+ "text": "boolean"
154429
+ },
154430
+ "default": "false",
154431
+ "description": "Whether a strip with more tabs than fit shows a button at each end it can\nscroll toward.",
154432
+ "attribute": "scroll-controls",
154433
+ "reflects": true
154434
+ },
153245
154435
  {
153246
154436
  "kind": "field",
153247
154437
  "name": "variant",
@@ -153286,6 +154476,51 @@
153286
154476
  "privacy": "private",
153287
154477
  "readonly": true
153288
154478
  },
154479
+ {
154480
+ "kind": "field",
154481
+ "name": "more",
154482
+ "type": {
154483
+ "text": "{ end: boolean; start: boolean }"
154484
+ },
154485
+ "privacy": "private",
154486
+ "default": "{ end: false, start: false }",
154487
+ "description": "Which ends the strip can scroll toward, under `scroll-controls`."
154488
+ },
154489
+ {
154490
+ "kind": "field",
154491
+ "name": "resizing",
154492
+ "type": {
154493
+ "text": "ResizeObserver | undefined"
154494
+ },
154495
+ "privacy": "private",
154496
+ "description": "Watches the strip's size for `scroll-controls`."
154497
+ },
154498
+ {
154499
+ "kind": "field",
154500
+ "name": "measure",
154501
+ "privacy": "private",
154502
+ "readonly": true,
154503
+ "description": "Reads which ends of the strip have more tabs past them."
154504
+ },
154505
+ {
154506
+ "kind": "method",
154507
+ "name": "scrollStrip",
154508
+ "privacy": "private",
154509
+ "return": {
154510
+ "type": {
154511
+ "text": "void"
154512
+ }
154513
+ },
154514
+ "parameters": [
154515
+ {
154516
+ "name": "toward",
154517
+ "type": {
154518
+ "text": "1 | -1"
154519
+ }
154520
+ }
154521
+ ],
154522
+ "description": "Scrolls the strip most of its own length toward one end, smoothly unless\nthe reader asked for less motion."
154523
+ },
153289
154524
  {
153290
154525
  "kind": "field",
153291
154526
  "name": "held",
@@ -153333,6 +154568,28 @@
153333
154568
  },
153334
154569
  "description": "Puts focus on the selected tab where the tab that had it was removed and\nfocus fell to the page, which is where removing a focused element leaves\nit."
153335
154570
  },
154571
+ {
154572
+ "kind": "method",
154573
+ "name": "watchStrip",
154574
+ "privacy": "private",
154575
+ "return": {
154576
+ "type": {
154577
+ "text": "void"
154578
+ }
154579
+ },
154580
+ "description": "Watches the strip's size while `scroll-controls` asks, and reads it."
154581
+ },
154582
+ {
154583
+ "kind": "method",
154584
+ "name": "reveal",
154585
+ "privacy": "private",
154586
+ "return": {
154587
+ "type": {
154588
+ "text": "void"
154589
+ }
154590
+ },
154591
+ "description": "Brings the selected tab into the strip's view, and moves nothing else."
154592
+ },
153336
154593
  {
153337
154594
  "kind": "field",
153338
154595
  "name": "handleSlotChange",
@@ -153340,6 +154597,25 @@
153340
154597
  "readonly": true,
153341
154598
  "description": "The set changed: pair it up and measure it.\n\nBoth, and dropping `place()` leaves an indicator unplaced for the life\nof the page. The order of events is what does it: the host renders and\nmeasures before its tabs have upgraded, so there is no selected tab to\nmeasure and `place` refuses; the ResizeObserver's one initial callback\nlands in that same gap; and then the tabs upgrade, `slotchange` pairs them,\nnothing measures, and nothing ever will again, because the host's size\nnever changes.\n\nInvisible in every example, because a tab strip that is only tabs is\nexactly as tall as its tabs, so a mark at the top of the strip is a mark on\nthe tab. It shows only where something gives the strip a height of its own."
153342
154599
  },
154600
+ {
154601
+ "kind": "method",
154602
+ "name": "renderScroll",
154603
+ "privacy": "private",
154604
+ "return": {
154605
+ "type": {
154606
+ "text": "TemplateResult | typeof nothing"
154607
+ }
154608
+ },
154609
+ "parameters": [
154610
+ {
154611
+ "name": "toward",
154612
+ "type": {
154613
+ "text": "1 | -1"
154614
+ }
154615
+ }
154616
+ ],
154617
+ "description": "One of the two scroll buttons, pointing the way it scrolls. A caret along\nthe line is mirrored on a right-to-left page, and one down a column is not."
154618
+ },
153343
154619
  {
153344
154620
  "kind": "field",
153345
154621
  "name": "active",
@@ -153851,6 +155127,15 @@
153851
155127
  "description": "The direction the tabs run. `vertical` sets them in a column beside the\npanels and tells a screen reader the list is vertical.\n\nOptional, so the resting row writes no attribute onto the host.",
153852
155128
  "fieldName": "orientation"
153853
155129
  },
155130
+ {
155131
+ "name": "scroll-controls",
155132
+ "type": {
155133
+ "text": "boolean"
155134
+ },
155135
+ "default": "false",
155136
+ "description": "Whether a strip with more tabs than fit shows a button at each end it can\nscroll toward.",
155137
+ "fieldName": "scrollControls"
155138
+ },
153854
155139
  {
153855
155140
  "name": "variant",
153856
155141
  "type": {
@@ -153957,9 +155242,13 @@
153957
155242
  "declarations": [
153958
155243
  {
153959
155244
  "kind": "class",
153960
- "description": "A tab is an element, because it manages selection and its own tab stop.\n\nWith an `href`, the tab is a link: `role=\"tab\"` on an `<a>`, which a press,\nEnter and the browser's own link gestures follow. `helix-select` is sent\nfirst, and canceling it keeps the browser from following, so a client-side\nrouter follows it instead.",
155245
+ "description": "A tab is an element, because it manages selection and its own tab stop.\n\nWith an `href`, the tab is a link: `role=\"tab\"` on an `<a>`, which a press,\nEnter and the browser's own link gestures follow. `helix-select` is sent\nfirst, and canceling it keeps the browser from following, so a client-side\nrouter follows it instead.\n\nWith `dismissible`, the tab can be closed, as Web Awesome's closable tab\ncan: a press on its `dismiss` mark, or Delete or Backspace while the tab\nhas focus, sends `helix-dismiss`. The tab does not remove itself, because\nyour code owns the set, so remove the tab and its panel in your handler.\nFocus moves to the tab beside it, and the tab set selects a tab that is\nleft.\nThe tab says the key through `aria-keyshortcuts`, and the mark is for the\npointer, hidden from screen readers.",
153961
155246
  "name": "HelixHeadlessTab",
153962
155247
  "cssParts": [
155248
+ {
155249
+ "description": "The mark a pointer presses to close a `dismissible` tab.",
155250
+ "name": "dismiss"
155251
+ },
153963
155252
  {
153964
155253
  "description": "The tab itself.",
153965
155254
  "name": "tab"
@@ -153972,6 +155261,20 @@
153972
155261
  }
153973
155262
  ],
153974
155263
  "members": [
155264
+ {
155265
+ "kind": "field",
155266
+ "name": "words",
155267
+ "type": {
155268
+ "text": "string"
155269
+ },
155270
+ "static": true,
155271
+ "default": "'helix-tab'",
155272
+ "description": "The key this family's words are registered under, its styled tag:\n`registerWords('de', { 'helix-tab': { dismissLabel: 'Schließen' } })`.",
155273
+ "inheritedFrom": {
155274
+ "name": "MixinDismissible",
155275
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155276
+ }
155277
+ },
153975
155278
  {
153976
155279
  "kind": "field",
153977
155280
  "name": "itemPart",
@@ -153986,6 +155289,23 @@
153986
155289
  "module": "src/mixins/mixin-selectable-item/mixin-selectable-item.ts"
153987
155290
  }
153988
155291
  },
155292
+ {
155293
+ "kind": "field",
155294
+ "name": "dismissLabel",
155295
+ "type": {
155296
+ "text": "string"
155297
+ },
155298
+ "default": "'Close'",
155299
+ "description": "The tooltip on the mark that closes a `dismissible` tab. The mark is for\nthe pointer and hidden from screen readers, which hear the Delete key\nthrough `aria-keyshortcuts`.",
155300
+ "attribute": "dismiss-label",
155301
+ "helix": {
155302
+ "words": true
155303
+ },
155304
+ "inheritedFrom": {
155305
+ "name": "MixinDismissible",
155306
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155307
+ }
155308
+ },
153989
155309
  {
153990
155310
  "kind": "field",
153991
155311
  "name": "href",
@@ -154035,6 +155355,61 @@
154035
155355
  "text": "focus(options?: FocusOptions) => void"
154036
155356
  }
154037
155357
  },
155358
+ {
155359
+ "kind": "method",
155360
+ "name": "dismiss",
155361
+ "return": {
155362
+ "type": {
155363
+ "text": "boolean"
155364
+ }
155365
+ },
155366
+ "description": "Sends `helix-dismiss` for a `dismissible` tab, and returns `false` where a\nlistener refused it, or where the tab is not dismissible or is disabled.\nThe tab stays where it is either way: removing it is yours. Where the tab\nhad focus, focus moves to the tab beside it once you remove it.",
155367
+ "inheritedFrom": {
155368
+ "name": "MixinDismissible",
155369
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155370
+ },
155371
+ "type": {
155372
+ "text": "dismiss() => boolean"
155373
+ }
155374
+ },
155375
+ {
155376
+ "kind": "field",
155377
+ "name": "returnFocusTo",
155378
+ "type": {
155379
+ "text": "HTMLElement | null"
155380
+ },
155381
+ "privacy": "protected",
155382
+ "description": "Where focus goes when a tab beside this one that held it is removed: this tab.",
155383
+ "readonly": true,
155384
+ "inheritedFrom": {
155385
+ "name": "MixinDismissible",
155386
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155387
+ }
155388
+ },
155389
+ {
155390
+ "kind": "field",
155391
+ "name": "handleDismissPress",
155392
+ "privacy": "private",
155393
+ "readonly": true,
155394
+ "description": "A press on the mark closes the tab, and neither selects it nor follows its link."
155395
+ },
155396
+ {
155397
+ "kind": "field",
155398
+ "name": "handleKeydown",
155399
+ "privacy": "private",
155400
+ "readonly": true
155401
+ },
155402
+ {
155403
+ "kind": "method",
155404
+ "name": "renderDismiss",
155405
+ "privacy": "protected",
155406
+ "return": {
155407
+ "type": {
155408
+ "text": "TemplateResult | typeof nothing"
155409
+ }
155410
+ },
155411
+ "description": "The mark that closes a `dismissible` tab, inside the control so it shares its box."
155412
+ },
154038
155413
  {
154039
155414
  "kind": "field",
154040
155415
  "name": "handleLinkClick",
@@ -154042,6 +155417,124 @@
154042
155417
  "readonly": true,
154043
155418
  "description": "Chooses the tab before the browser follows its link, and keeps the browser\nfrom following where the choice was refused. A press with a modifier, or\nwith a button other than the main one, opens the link where the browser\nopens it and chooses nothing here."
154044
155419
  },
155420
+ {
155421
+ "kind": "field",
155422
+ "name": "dismissible",
155423
+ "type": {
155424
+ "text": "boolean"
155425
+ },
155426
+ "default": "false",
155427
+ "description": "Whether the element shows a control that dismisses it.",
155428
+ "attribute": "dismissible",
155429
+ "reflects": true,
155430
+ "inheritedFrom": {
155431
+ "name": "MixinDismissible",
155432
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155433
+ }
155434
+ },
155435
+ {
155436
+ "kind": "method",
155437
+ "name": "dismissEvent",
155438
+ "privacy": "protected",
155439
+ "return": {
155440
+ "type": {
155441
+ "text": "HelixDismissEvent"
155442
+ }
155443
+ },
155444
+ "description": "The event, built and not dispatched.\n\nReading text is safe here: nothing calls this on a server, because the\nonly things that do are a press and a timer.",
155445
+ "inheritedFrom": {
155446
+ "name": "MixinDismissible",
155447
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155448
+ }
155449
+ },
155450
+ {
155451
+ "kind": "method",
155452
+ "name": "stopBeside",
155453
+ "privacy": "private",
155454
+ "return": {
155455
+ "type": {
155456
+ "text": "HTMLElement | undefined"
155457
+ }
155458
+ },
155459
+ "description": "The tab stop after this element on the page, or the one before it at the\nend, for a lone element whose removal would drop focus to the body.\n\n**A lone Callout or Announcement had nowhere to hand focus**, so a\nkeyboard reader who dismissed one started again from the top of the\npage. React Aria's Toast hands focus on the same way. Read before the\nevent, in the order Tab reaches the stops, while this element's own are\nstill among them.",
155460
+ "inheritedFrom": {
155461
+ "name": "MixinDismissible",
155462
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155463
+ }
155464
+ },
155465
+ {
155466
+ "kind": "method",
155467
+ "name": "neighbors",
155468
+ "privacy": "private",
155469
+ "return": {
155470
+ "type": {
155471
+ "text": "HTMLElement[]"
155472
+ }
155473
+ },
155474
+ "description": "The elements of the same kind beside this one, where focus goes if this\none is removed: the next ones nearest first, then the previous ones\nnearest first.\n\nRead before the event, while this element is still beside them.",
155475
+ "inheritedFrom": {
155476
+ "name": "MixinDismissible",
155477
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155478
+ }
155479
+ },
155480
+ {
155481
+ "kind": "method",
155482
+ "name": "keepFocus",
155483
+ "privacy": "private",
155484
+ "return": {
155485
+ "type": {
155486
+ "text": "void"
155487
+ }
155488
+ },
155489
+ "parameters": [
155490
+ {
155491
+ "name": "neighbors",
155492
+ "type": {
155493
+ "text": "HTMLElement[]"
155494
+ }
155495
+ },
155496
+ {
155497
+ "name": "beside",
155498
+ "optional": true,
155499
+ "type": {
155500
+ "text": "HTMLElement"
155501
+ }
155502
+ }
155503
+ ],
155504
+ "description": "Moves focus to a neighbor's dismiss control if removing this element\ndropped it, or, with no neighbor, to the tab stop beside where it was.\n\n**The tab stop beside waits a frame.** A container that owns its\nmembers' focus settles it in a microtask after the event: a Tag Group\nwhose last tag goes focuses its `empty` part. Handed on at once, focus\nleft the group before the group could look, and its reader never heard\nthat the set was empty. A neighbor of the same kind is still taken at\nonce, because no container puts focus anywhere better.",
155505
+ "inheritedFrom": {
155506
+ "name": "MixinDismissible",
155507
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155508
+ }
155509
+ },
155510
+ {
155511
+ "kind": "field",
155512
+ "name": "handOff",
155513
+ "type": {
155514
+ "text": "((late: boolean) => void) | undefined"
155515
+ },
155516
+ "privacy": "private",
155517
+ "default": "undefined",
155518
+ "description": "The hand-off waiting for this element to leave, if one is.",
155519
+ "inheritedFrom": {
155520
+ "name": "MixinDismissible",
155521
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155522
+ }
155523
+ },
155524
+ {
155525
+ "kind": "field",
155526
+ "name": "forgetFocus",
155527
+ "type": {
155528
+ "text": "(() => void) | undefined"
155529
+ },
155530
+ "privacy": "private",
155531
+ "default": "undefined",
155532
+ "description": "Stops waiting for the hand-off, once focus has moved anywhere.",
155533
+ "inheritedFrom": {
155534
+ "name": "MixinDismissible",
155535
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155536
+ }
155537
+ },
154045
155538
  {
154046
155539
  "kind": "field",
154047
155540
  "name": "disabled",
@@ -154460,6 +155953,14 @@
154460
155953
  }
154461
155954
  ],
154462
155955
  "events": [
155956
+ {
155957
+ "type": {
155958
+ "text": "HelixDismissEvent"
155959
+ },
155960
+ "description": "A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.",
155961
+ "name": "helix-dismiss",
155962
+ "reactProp": "onhelix-dismiss"
155963
+ },
154463
155964
  {
154464
155965
  "type": {
154465
155966
  "text": "HelixSelectEvent"
@@ -154470,6 +155971,19 @@
154470
155971
  }
154471
155972
  ],
154472
155973
  "attributes": [
155974
+ {
155975
+ "name": "dismiss-label",
155976
+ "type": {
155977
+ "text": "string"
155978
+ },
155979
+ "default": "'Close'",
155980
+ "description": "The tooltip on the mark that closes a `dismissible` tab. The mark is for\nthe pointer and hidden from screen readers, which hear the Delete key\nthrough `aria-keyshortcuts`.",
155981
+ "fieldName": "dismissLabel",
155982
+ "inheritedFrom": {
155983
+ "name": "MixinDismissible",
155984
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
155985
+ }
155986
+ },
154473
155987
  {
154474
155988
  "name": "href",
154475
155989
  "type": {
@@ -154494,6 +156008,19 @@
154494
156008
  "description": "Where the link opens, such as `_blank`, for a tab with an `href`.",
154495
156009
  "fieldName": "target"
154496
156010
  },
156011
+ {
156012
+ "name": "dismissible",
156013
+ "type": {
156014
+ "text": "boolean"
156015
+ },
156016
+ "default": "false",
156017
+ "description": "Whether the element shows a control that dismisses it.",
156018
+ "fieldName": "dismissible",
156019
+ "inheritedFrom": {
156020
+ "name": "MixinDismissible",
156021
+ "module": "src/mixins/mixin-dismissible/mixin-dismissible.ts"
156022
+ }
156023
+ },
154497
156024
  {
154498
156025
  "name": "disabled",
154499
156026
  "type": {
@@ -154549,6 +156076,10 @@
154549
156076
  }
154550
156077
  ],
154551
156078
  "mixins": [
156079
+ {
156080
+ "name": "MixinDismissible",
156081
+ "package": "@fusion.dev/helix-core"
156082
+ },
154552
156083
  {
154553
156084
  "name": "MixinSelectableItem",
154554
156085
  "package": "@fusion.dev/helix-core"
@@ -154601,7 +156132,7 @@
154601
156132
  "declarations": [
154602
156133
  {
154603
156134
  "kind": "class",
154604
- "description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. In `multiple`,\nShift with an arrow, Home or End selects the range from the tag last\npressed to the tag focus moves to, and Control or Command with A selects\nevery tag that is not disabled. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".\nWhere only disabled tags are left, the first of them holds the tab stop and\ntakes focus, so the reader stays in the set.",
156135
+ "description": "A part of `Tag` that holds tags as one control: a grid of rows, one tab stop\nfor the whole set. The arrow keys move between tags, Home and End go to the\nfirst and the last, and a typed letter goes to the next tag starting with\nit. Delete or Backspace removes the focused tag where it is `dismissible`,\nby sending its `helix-dismiss`: remove it from your list in the handler, and\nfocus moves to the next tag, or the previous one after the last.\n\n`selection-mode` lets a reader select tags, with Space, Enter or a press:\n`single` selects one at a time and `multiple` any number. In `multiple`,\nShift with an arrow, Home or End selects the range from the tag last\npressed to the tag focus moves to, Shift with a press or Space selects the\nrange to that tag, and Control or Command with A selects every tag that is\nnot disabled. `selection-behavior=\"replace\"` selects the tag a reader\npresses or moves to alone, as a file list does, and Control or Command\nwith a press or Space adds or takes out one tag. `disallow-empty-selection`\nkeeps one tag selected once one is. `value` holds the\nselected tags' values, separated by commas, and a change asks with\n`helix-before-change` and tells with `change`. Enter on a tag with an\n`href` follows its link. A `disabled` tag is passed over. A selected tag\nthat is removed leaves `value`, which then sends `change`.\n\nName the set with `label`. Each tag is named by its words alone, without\nits remove button. `value` takes an array of values on the property as\nwell, as React sets `value={['Apple']}`; a press writes it back as a\nstring.\n\n**Removing the last tag keeps focus in the group.** With no tags left the\nset is a `group`, and focus moves to its `empty` part,\nwhich holds the `empty` slot: put words there such as \"No filters\" for a\nreader to hear. With nothing slotted it says `empty-label`, \"No tags\".\nWhere only disabled tags are left, the first of them holds the tab stop and\ntakes focus, so the reader stays in the set.",
154605
156136
  "name": "HelixHeadlessTagGroup",
154606
156137
  "cssParts": [
154607
156138
  {
@@ -154630,6 +156161,16 @@
154630
156161
  "default": "'helix-tag-group'",
154631
156162
  "description": "The key this part's words are registered under, its styled tag:\n`registerWords('de', { 'helix-tag-group': { emptyLabel: 'Keine Schlagwörter' } })`."
154632
156163
  },
156164
+ {
156165
+ "kind": "field",
156166
+ "name": "disallowEmptySelection",
156167
+ "type": {
156168
+ "text": "boolean"
156169
+ },
156170
+ "default": "false",
156171
+ "description": "Keeps at least one tag selected once one is, as React Aria's\n`disallowEmptySelection`: a press or a key that would leave none selected\nis refused. Removing the last selected tag still takes it out of `value`.",
156172
+ "attribute": "disallow-empty-selection"
156173
+ },
154633
156174
  {
154634
156175
  "kind": "field",
154635
156176
  "name": "emptyLabel",
@@ -154653,6 +156194,16 @@
154653
156194
  "description": "The name of the set, such as \"Filters\", which a screen reader announces\nbefore its tags.",
154654
156195
  "attribute": "label"
154655
156196
  },
156197
+ {
156198
+ "kind": "field",
156199
+ "name": "selectionBehavior",
156200
+ "type": {
156201
+ "text": "'replace' | 'toggle'"
156202
+ },
156203
+ "default": "'toggle'",
156204
+ "description": "What a press, Space, or a move does to the tags already selected.\n`toggle`, the default, keeps them: a press adds or takes out the tag, and\nthe arrow keys move focus alone. `replace` selects the tag alone, as a\nfile list does, and the arrow keys carry the selection with focus.\nControl or Command with a press or Space adds or takes out one tag in\n`multiple`, and with an arrow moves focus without selecting.",
156205
+ "attribute": "selection-behavior"
156206
+ },
154656
156207
  {
154657
156208
  "kind": "field",
154658
156209
  "name": "selectionMode",
@@ -154818,10 +156369,46 @@
154818
156369
  "type": {
154819
156370
  "text": "HelixHeadlessTag"
154820
156371
  }
156372
+ },
156373
+ {
156374
+ "name": "cause",
156375
+ "optional": true,
156376
+ "type": {
156377
+ "text": "KeyboardEvent | MouseEvent"
156378
+ }
154821
156379
  }
154822
156380
  ],
154823
156381
  "description": "Selects the tag, or lets it go, asking first.\n\n`helix-before-change` carries the `value` the press would leave, and a\nlistener that refuses it keeps the selection. `change` follows once it\nhas moved."
154824
156382
  },
156383
+ {
156384
+ "kind": "field",
156385
+ "name": "replaces",
156386
+ "type": {
156387
+ "text": "boolean"
156388
+ },
156389
+ "privacy": "private",
156390
+ "description": "Whether a press or a move selects the tag alone.",
156391
+ "readonly": true
156392
+ },
156393
+ {
156394
+ "kind": "method",
156395
+ "name": "ask",
156396
+ "privacy": "private",
156397
+ "return": {
156398
+ "type": {
156399
+ "text": "void"
156400
+ }
156401
+ },
156402
+ "parameters": [
156403
+ {
156404
+ "name": "next",
156405
+ "type": {
156406
+ "text": "string"
156407
+ }
156408
+ }
156409
+ ],
156410
+ "description": "Asks for `value` to become `next`, where it changes and where it leaves a\ntag selected under `disallow-empty-selection`."
156411
+ },
154825
156412
  {
154826
156413
  "kind": "method",
154827
156414
  "name": "span",
@@ -155299,6 +156886,15 @@
155299
156886
  }
155300
156887
  ],
155301
156888
  "attributes": [
156889
+ {
156890
+ "name": "disallow-empty-selection",
156891
+ "type": {
156892
+ "text": "boolean"
156893
+ },
156894
+ "default": "false",
156895
+ "description": "Keeps at least one tag selected once one is, as React Aria's\n`disallowEmptySelection`: a press or a key that would leave none selected\nis refused. Removing the last selected tag still takes it out of `value`.",
156896
+ "fieldName": "disallowEmptySelection"
156897
+ },
155302
156898
  {
155303
156899
  "name": "empty-label",
155304
156900
  "type": {
@@ -155317,6 +156913,15 @@
155317
156913
  "description": "The name of the set, such as \"Filters\", which a screen reader announces\nbefore its tags.",
155318
156914
  "fieldName": "label"
155319
156915
  },
156916
+ {
156917
+ "name": "selection-behavior",
156918
+ "type": {
156919
+ "text": "'replace' | 'toggle'"
156920
+ },
156921
+ "default": "'toggle'",
156922
+ "description": "What a press, Space, or a move does to the tags already selected.\n`toggle`, the default, keeps them: a press adds or takes out the tag, and\nthe arrow keys move focus alone. `replace` selects the tag alone, as a\nfile list does, and the arrow keys carry the selection with focus.\nControl or Command with a press or Space adds or takes out one tag in\n`multiple`, and with an arrow moves focus without selecting.",
156923
+ "fieldName": "selectionBehavior"
156924
+ },
155320
156925
  {
155321
156926
  "name": "selection-mode",
155322
156927
  "type": {
@@ -169381,6 +170986,14 @@
169381
170986
  {
169382
170987
  "description": "The item's label.",
169383
170988
  "name": ""
170989
+ },
170990
+ {
170991
+ "description": "Content after the label, such as a count or a shortcut.",
170992
+ "name": "end"
170993
+ },
170994
+ {
170995
+ "description": "Content before the label, such as an icon.",
170996
+ "name": "start"
169384
170997
  }
169385
170998
  ],
169386
170999
  "members": [
@@ -175228,7 +176841,7 @@
175228
176841
  "declarations": [
175229
176842
  {
175230
176843
  "kind": "class",
175231
- "description": "The tree is a single tab stop, and arrow keys move focus between items, as\nthe tree pattern requires, so Tab moves past a long sidebar in one press. The\ntree moves the tab stop to the focused item, so the browser's focus order\nstays intact.\n\nItems are found with `instanceof`, never by tag name, so the headless tier\ndoes not depend on the styled one.\n\nTyping a letter moves to the next visible item whose name starts with it,\nand `*` opens every branch beside the focused item.\n\n`selection-mode=\"multiple\"` draws a check mark on every row and lets a\nreader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking\na branch checks every item under it, and a branch some of whose items are\nchecked is partly checked. Space or a press on the mark checks the focused\nrow, and Enter or a press on a branch's row opens it. `active` then holds the\nchecked values, comma separated, which `values` also gives as a list, and\nthe tree says `aria-multiselectable`.\n\n`selection-mode=\"leaf\"` chooses one item at a time and only the items at the\nends: a press, Enter or Space on a branch opens or closes it and chooses\nnothing, as Web Awesome's `leaf` mode does.\n\nKeys: Up and Down Arrow move between the items a reader can see; Right\nArrow opens a shut branch and then moves into it, and Left Arrow shuts an\nopen one and then moves to its parent, the two swapping on a right-to-left\npage. Home and End go to the first and the last item, Enter and Space choose\nor open, and the tree's one tab stop stays on the item last reached. In a\ntree of check marks, Control+A (Command+A on an Apple keyboard) checks every\nitem or clears them all, and Shift with Up or Down Arrow moves and checks.\n\nRemoving the item that has focus moves focus to the item after it among its\nsiblings, or the one before, or its parent, so focus stays in the tree.\n\n**`reorderable` lets you move items among their siblings.** Alt with Up or\nDown moves the focused item a place, and Alt with Home or End to the first\nor the last place among its siblings, as the APG's rearrangeable listbox\ndoes. Each row gets a grip at its far end: drag it to move the item, and the\ntree scrolls near an edge. A click on a grip picks the item up and a click on\none of its siblings drops it there, which needs no drag. The arrows move an\nitem picked up that way, Enter or Space drops it, and Escape puts it back.\nThe tree says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder`, whose\n`keys` hold the siblings in the new order. **You move the items**: the tree\nmoves no element of yours, and focus follows the moved item once you have.\nMoving an item into another branch is not part of this.",
176844
+ "description": "The tree is a single tab stop, and arrow keys move focus between items, as\nthe tree pattern requires, so Tab moves past a long sidebar in one press. The\ntree moves the tab stop to the focused item, so the browser's focus order\nstays intact.\n\nItems are found with `instanceof`, never by tag name, so the headless tier\ndoes not depend on the styled one.\n\nTyping a letter moves to the next visible item whose name starts with it,\nand `*` opens every branch beside the focused item.\n\n`selection-mode=\"multiple\"` draws a check mark on every row and lets a\nreader check many, as Web Awesome's and Ark UI's checkbox trees do. Checking\na branch checks every item under it, and a branch some of whose items are\nchecked is partly checked. Space or a press on the mark checks the focused\nrow, and Enter or a press on a branch's row opens it. `active` then holds the\nchecked values, comma separated, which `values` also gives as a list, and\nthe tree says `aria-multiselectable`.\n\n`selection-mode=\"leaf\"` chooses one item at a time and only the items at the\nends: a press, Enter or Space on a branch opens or closes it and chooses\nnothing, as Web Awesome's `leaf` mode does.\n\nKeys: Up and Down Arrow move between the items a reader can see; Right\nArrow opens a shut branch and then moves into it, and Left Arrow shuts an\nopen one and then moves to its parent, the two swapping on a right-to-left\npage. Home and End go to the first and the last item, Enter and Space choose\nor open, and the tree's one tab stop stays on the item last reached. In a\ntree of check marks, Control+A (Command+A on an Apple keyboard) checks every\nitem or clears them all, and Shift with Up or Down Arrow moves and checks.\nShift+Space checks every item from the one last checked to the focused one,\nand Control+Shift+Home or End checks every item from the focused one to the\nfirst or the last, then moves there, as the tree pattern's range keys do.\n\nA tree with no name of its own is announced as \"Tree\", which says nothing\nabout what it holds, so a development build warns once with the kind\n`missing-name` where neither `label` nor an `aria-label` names it.\n\nRemoving the item that has focus moves focus to the item after it among its\nsiblings, or the one before, or its parent, so focus stays in the tree.\n\n**`reorderable` lets you move items among their siblings.** Alt with Up or\nDown moves the focused item a place, and Alt with Home or End to the first\nor the last place among its siblings, as the APG's rearrangeable listbox\ndoes. Each row gets a grip at its far end: drag it to move the item, and the\ntree scrolls near an edge. A click on a grip picks the item up and a click on\none of its siblings drops it there, which needs no drag. The arrows move an\nitem picked up that way, Enter or Space drops it, and Escape puts it back.\nThe tree says each step in its `live` region. A drop sends\n`helix-before-reorder`, which you can refuse, and then `helix-reorder`, whose\n`keys` hold the siblings in the new order. **You move the items**: the tree\nmoves no element of yours, and focus follows the moved item once you have.\n\n**Alt with the arrow along the line moves an item into another branch.**\nAlt with the arrow that opens a branch (Right on a left-to-right page) puts\nthe focused item last inside the item before it, and opens that item; Alt\nwith the other arrow puts it after its parent, a level out. The same\n`helix-before-reorder` and `helix-reorder` are sent, with `parent` naming\nthe branch it moves into by its key, `''` for the top level, and `keys`\nholding that branch's items in their new order. The tree says the move with\n`moved-into-label`.",
175232
176845
  "name": "HelixHeadlessTree",
175233
176846
  "cssParts": [
175234
176847
  {
@@ -175312,6 +176925,19 @@
175312
176925
  "words": true
175313
176926
  }
175314
176927
  },
176928
+ {
176929
+ "kind": "field",
176930
+ "name": "movedIntoLabel",
176931
+ "type": {
176932
+ "text": "string"
176933
+ },
176934
+ "default": "'{name} moved into {parent}, position {position} of {count}'",
176935
+ "description": "What screen readers hear when an item moves into another branch, in a\n`reorderable` tree. `{name}` is the item's words, `{parent}` the words of\nthe branch it moved into, or the tree's `label` for the top level,\n`{position}` its place there, counting from 1, and `{count}` the number of\nitems there.",
176936
+ "attribute": "moved-into-label",
176937
+ "helix": {
176938
+ "words": true
176939
+ }
176940
+ },
175315
176941
  {
175316
176942
  "kind": "field",
175317
176943
  "name": "movedLabel",
@@ -175541,6 +177167,15 @@
175541
177167
  "privacy": "private",
175542
177168
  "description": "The item that last had focus, so its removal can hand focus on."
175543
177169
  },
177170
+ {
177171
+ "kind": "field",
177172
+ "name": "anchor",
177173
+ "type": {
177174
+ "text": "HelixHeadlessTreeItem | undefined"
177175
+ },
177176
+ "privacy": "private",
177177
+ "description": "The item last checked or unchecked, where a range Shift+Space checks starts."
177178
+ },
175544
177179
  {
175545
177180
  "kind": "field",
175546
177181
  "name": "handleFocusIn",
@@ -175720,6 +177355,69 @@
175720
177355
  ],
175721
177356
  "description": "The keys of a tree of check marks, as the tree pattern gives them:\nControl+A (Command+A on an Apple keyboard) checks every item, or clears\nthem all where every one is checked, and Shift with Up or Down Arrow moves\nto the item before or after and checks or unchecks it.\n\nReturns whether the press was one of those."
175722
177357
  },
177358
+ {
177359
+ "kind": "method",
177360
+ "name": "checkRange",
177361
+ "privacy": "private",
177362
+ "return": {
177363
+ "type": {
177364
+ "text": "void"
177365
+ }
177366
+ },
177367
+ "parameters": [
177368
+ {
177369
+ "name": "range",
177370
+ "type": {
177371
+ "text": "HelixHeadlessTreeItem[]"
177372
+ }
177373
+ }
177374
+ ],
177375
+ "description": "Checks every item of a range, and keeps the ones already checked."
177376
+ },
177377
+ {
177378
+ "kind": "method",
177379
+ "name": "nest",
177380
+ "privacy": "private",
177381
+ "return": {
177382
+ "type": {
177383
+ "text": "boolean"
177384
+ }
177385
+ },
177386
+ "parameters": [
177387
+ {
177388
+ "name": "current",
177389
+ "type": {
177390
+ "text": "HelixHeadlessTreeItem"
177391
+ }
177392
+ },
177393
+ {
177394
+ "name": "toward",
177395
+ "type": {
177396
+ "text": "number"
177397
+ }
177398
+ }
177399
+ ],
177400
+ "description": "Moves the focused item into another branch, in a `reorderable` tree: last\ninside the item before it, `toward` the line's end, or after its parent,\ntoward its start. Asks the page, which moves the item, and says where it\nwent or that the move was refused. Returns whether the key moved anything."
177401
+ },
177402
+ {
177403
+ "kind": "method",
177404
+ "name": "follow",
177405
+ "privacy": "private",
177406
+ "return": {
177407
+ "type": {
177408
+ "text": "void"
177409
+ }
177410
+ },
177411
+ "parameters": [
177412
+ {
177413
+ "name": "key",
177414
+ "type": {
177415
+ "text": "string"
177416
+ }
177417
+ }
177418
+ ],
177419
+ "description": "Gives focus back to a moved item once the page has moved it, where moving\nit sent focus to the body, as a move among siblings does."
177420
+ },
175723
177421
  {
175724
177422
  "kind": "method",
175725
177423
  "name": "move",
@@ -176511,6 +178209,15 @@
176511
178209
  "description": "Accessible name for the tree.\n\nAn `aria-label` or `aria-labelledby` on the host names the tree too, and\nwins over this.",
176512
178210
  "fieldName": "label"
176513
178211
  },
178212
+ {
178213
+ "name": "moved-into-label",
178214
+ "type": {
178215
+ "text": "string"
178216
+ },
178217
+ "default": "'{name} moved into {parent}, position {position} of {count}'",
178218
+ "description": "What screen readers hear when an item moves into another branch, in a\n`reorderable` tree. `{name}` is the item's words, `{parent}` the words of\nthe branch it moved into, or the tree's `label` for the top level,\n`{position}` its place there, counting from 1, and `{count}` the number of\nitems there.",
178219
+ "fieldName": "movedIntoLabel"
178220
+ },
176514
178221
  {
176515
178222
  "name": "moved-label",
176516
178223
  "type": {
@@ -176721,6 +178428,36 @@
176721
178428
  ],
176722
178429
  "description": "Whether a row is checked in a tree of check marks: a leaf by its value, and\na branch by its leaves, `mixed` where some of them are."
176723
178430
  },
178431
+ {
178432
+ "kind": "function",
178433
+ "name": "checkRows",
178434
+ "return": {
178435
+ "type": {
178436
+ "text": "string[]"
178437
+ }
178438
+ },
178439
+ "parameters": [
178440
+ {
178441
+ "name": "rows",
178442
+ "type": {
178443
+ "text": "readonly CheckableRow[]"
178444
+ }
178445
+ },
178446
+ {
178447
+ "name": "chosen",
178448
+ "type": {
178449
+ "text": "readonly string[]"
178450
+ }
178451
+ },
178452
+ {
178453
+ "name": "order",
178454
+ "type": {
178455
+ "text": "readonly string[]"
178456
+ }
178457
+ }
178458
+ ],
178459
+ "description": "The checked values after checking every row in `rows`, in `order`: a range\nthe reader extends with Shift and Space, or with Control, Shift and Home or\nEnd. Rows already checked stay checked, and disabled rows are passed over."
178460
+ },
176724
178461
  {
176725
178462
  "kind": "function",
176726
178463
  "name": "pressRow",
@@ -176761,6 +178498,14 @@
176761
178498
  "module": "src/tree/selection.ts"
176762
178499
  }
176763
178500
  },
178501
+ {
178502
+ "kind": "js",
178503
+ "name": "checkRows",
178504
+ "declaration": {
178505
+ "name": "checkRows",
178506
+ "module": "src/tree/selection.ts"
178507
+ }
178508
+ },
176764
178509
  {
176765
178510
  "kind": "js",
176766
178511
  "name": "pressRow",
@@ -184425,6 +186170,6 @@
184425
186170
  ],
184426
186171
  "helix": {
184427
186172
  "package": "@fusion.dev/helix-headless",
184428
- "version": "0.153.0"
186173
+ "version": "0.155.0"
184429
186174
  }
184430
186175
  }