@fusion.dev/helix-headless 0.212.1 → 0.213.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 (24) hide show
  1. package/api.json +1 -1
  2. package/custom-elements.json +1 -1
  3. package/dist/chat/root/chat-root.d.ts +38 -2
  4. package/dist/chat/root/chat-root.js +42 -3
  5. package/dist/log/buffer.d.ts +35 -2
  6. package/dist/log/buffer.js +39 -2
  7. package/dist/log/index.d.ts +1 -1
  8. package/dist/log/index.js +1 -0
  9. package/dist/log/line/log-line.d.ts +34 -3
  10. package/dist/log/line/log-line.js +41 -5
  11. package/dist/log/root/log-root.d.ts +27 -3
  12. package/dist/log/root/log-root.js +24 -8
  13. package/dist/log/rows.d.ts +4 -2
  14. package/dist/log/rows.js +11 -7
  15. package/dist/terminal/keys.d.ts +1 -1
  16. package/dist/terminal/keys.js +8 -3
  17. package/dist/terminal/root/terminal-root.d.ts +51 -1
  18. package/dist/terminal/root/terminal-root.js +101 -3
  19. package/examples.json +1 -1
  20. package/lint.json +1 -1
  21. package/package.json +5 -5
  22. package/types/jsx.d.ts +242 -10
  23. package/types/vue.d.ts +62 -2
  24. package/types/words.d.ts +41 -0
package/examples.json CHANGED
@@ -1 +1 @@
1
- {"environment":{"browser":"chromium 153.0.8010.12","fonts":"90 fonts, d93ed8347ae01f6c","os":"ubuntu 24.04","platform":"linux"},"examples":{"accordion":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-accordion {\n display: block;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\nhelix-headless-accordion-item {\n display: block;\n}\n\nhelix-headless-accordion-item + helix-headless-accordion-item {\n border-block-start: 1px solid var(--_gray-line);\n}\n\nhelix-headless-accordion-item::part(trigger) {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font: inherit;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n min-block-size: 2.5rem;\n padding: 0.75rem 1rem;\n text-align: start;\n}\n\nhelix-headless-accordion-item::part(chevron) {\n block-size: 1em;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1em;\n margin-inline-start: auto;\n}\n\nhelix-headless-accordion-item:state(open)::part(chevron) {\n scale: 1 -1;\n}\n\nhelix-headless-accordion-item::part(content-inner) {\n color: var(--_gray-muted);\n padding: 0 1rem 0.75rem;\n}\n\n/* Opening grows the section from nothing to the height it publishes. */\nhelix-headless-accordion-item:state(open)::part(content) {\n animation: accordion-open 200ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-accordion-item:state(open)::part(content) {\n animation: none;\n }\n}\n\n/* Clipped only while it grows, so nothing changes about the open section. */\n@keyframes accordion-open {\n from {\n block-size: 0;\n overflow: clip;\n }\n\n to {\n block-size: var(--accordion-content-height, auto);\n overflow: clip;\n }\n}\n\nhelix-headless-accordion-item::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The accordion on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-accordion>\n <helix-headless-accordion-item default-open>\n <span slot=\"summary\">Shipping</span>\n Orders ship within two business days. You receive a tracking number by email.\n </helix-headless-accordion-item>\n <helix-headless-accordion-item>\n <span slot=\"summary\">Returns</span>\n You can return an item within 30 days.\n </helix-headless-accordion-item>\n</helix-headless-accordion>","imports":["import '@fusion.dev/helix-headless/accordion'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-accordion>\n <helix-headless-accordion-item default-open>\n <span slot=\"summary\">Shipping</span>\n Orders ship within two business days. You receive a tracking number by email.\n </helix-headless-accordion-item>\n <helix-headless-accordion-item>\n <span slot=\"summary\">Returns</span>\n You can return an item within 30 days.\n </helix-headless-accordion-item>\n </helix-headless-accordion>\n )\n}"}],"announcement":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-announcement {\n align-items: center;\n background-color: var(--_gray-subtle);\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n inline-size: 100%;\n line-height: 1.5;\n min-block-size: 3rem;\n padding: 0.5rem 1.5rem;\n position: relative;\n}\n\nhelix-headless-announcement[tone]:not([tone=\"neutral\"]) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-announcement::part(content) {\n flex: 1 1 auto;\n min-inline-size: 0;\n text-align: center;\n}\n\nhelix-headless-announcement[dismissible]::part(content) {\n padding-inline: 2rem;\n}\n\nhelix-headless-announcement::part(actions) {\n align-items: center;\n display: flex;\n flex: none;\n gap: 0.5rem;\n}\n\nhelix-headless-announcement [slot=\"actions\"] {\n margin-inline-start: 1rem;\n}\n\nhelix-headless-announcement::part(dismiss) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.5rem;\n inset-inline-end: 1.5rem;\n justify-content: center;\n position: absolute;\n}\n\nhelix-headless-announcement::part(dismiss):hover {\n background-color: var(--_gray-line);\n color: var(--_gray-strong);\n}\n\nhelix-headless-announcement::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-announcement::part(dismiss-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-announcement::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same announcement on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-announcement\n dismissible\n tone=\"info\"\n>\n Scheduled maintenance begins on Sunday at 10 PM.\n</helix-headless-announcement>","imports":["import '@fusion.dev/helix-headless/announcement'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-announcement\n dismissible\n tone=\"info\"\n >\n Scheduled maintenance begins on Sunday at 10 PM.\n </helix-headless-announcement>\n )\n}"}],"app-header":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-app-header {\n color: var(--_gray-strong);\n container-type: inline-size;\n display: block;\n font-size: 0.875rem;\n inline-size: 100%;\n line-height: 1.5;\n}\n\nhelix-headless-app-header::part(row) {\n align-items: center;\n block-size: 3.5rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);\n margin-inline: auto;\n max-inline-size: 72rem;\n padding-inline: 1.5rem;\n}\n\nhelix-headless-app-header::part(start) {\n align-items: center;\n display: flex;\n min-inline-size: 0;\n}\n\nhelix-headless-app-header [slot=\"start\"] {\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\nhelix-headless-app-header::part(content) {\n align-items: center;\n display: flex;\n justify-content: safe center;\n min-inline-size: 0;\n}\n\n@container (inline-size < 24rem) {\n helix-headless-app-header::part(row) {\n gap: 1rem;\n padding-inline: 1rem;\n }\n}\n\nhelix-headless-app-header::part(end) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n min-inline-size: 0;\n}\n\nhelix-headless-navigation {\n min-inline-size: 0;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n z-index: 0;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n inline-size: 2rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1rem;\n display: inline-flex;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}","description":"The same app header on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-app-header>\n <span slot=\"start\">Logo</span>\n <helix-headless-navigation label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >Overview</a>\n <a href=\"#two\">Projects</a>\n </helix-headless-navigation>\n\n <helix-headless-icon-button\n label=\"Search\"\n slot=\"end\"\n >\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button\n label=\"Settings\"\n slot=\"end\"\n >\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-app-header>","imports":["import '@fusion.dev/helix-headless/app-header'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'","import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-app-header>\n {' '}\n <span slot=\"start\">Logo</span>{' '}\n <helix-headless-navigation label=\"Sections\">\n {' '}\n <a\n aria-current=\"page\"\n href=\"#one\"\n >\n Overview\n </a>{' '}\n <a href=\"#two\">Projects</a>{' '}\n </helix-headless-navigation>{' '}\n <helix-headless-icon-button\n label=\"Search\"\n slot=\"end\"\n >\n {' '}\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n <helix-headless-icon-button\n label=\"Settings\"\n slot=\"end\"\n >\n {' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n </helix-headless-app-header>\n )\n}"}],"area-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-area-chart {\n --chart-series-1: var(--_gray-mark);\n --chart-series-2: var(--_gray-line);\n --chart-series-3: var(--_gray-fill);\n --chart-series-4: var(--_gray-subtle);\n\n display: grid;\n font-size: 0.875rem;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-area-chart::part(plot) {\n block-size: 12em;\n cursor: crosshair;\n position: relative;\n}\n\nhelix-headless-area-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-area-chart::part(area) {\n fill: var(--chart-series);\n stroke: none;\n}\n\nhelix-headless-area-chart::part(line) {\n stroke: var(--_gray-muted);\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(baseline),\nhelix-headless-area-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(guide) {\n stroke: var(--_gray-muted);\n stroke-dasharray: 3 3;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-area-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-area-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-area-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inline-size: max-content;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-area-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-area-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-area-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-area-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series);\n block-size: 0.5em;\n border-radius: 9999px;\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-area-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-area-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-area-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The area chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"visits\"\n >\n <caption>Visits a month by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Search</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Referral</th>\n <th scope=\"col\">Social</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"420\">420</td>\n <td data-value=\"180\">180</td>\n <td data-value=\"90\">90</td>\n <td data-value=\"60\">60</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"460\">460</td>\n <td data-value=\"190\">190</td>\n <td data-value=\"95\">95</td>\n <td data-value=\"70\">70</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"510\">510</td>\n <td data-value=\"200\">200</td>\n <td data-value=\"110\">110</td>\n <td data-value=\"85\">85</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"540\">540</td>\n <td data-value=\"205\">205</td>\n <td data-value=\"120\">120</td>\n <td data-value=\"110\">110</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"600\">600</td>\n <td data-value=\"215\">215</td>\n <td data-value=\"118\">118</td>\n <td data-value=\"140\">140</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"650\">650</td>\n <td data-value=\"220\">220</td>\n <td data-value=\"125\">125</td>\n <td data-value=\"170\">170</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-area-chart for=\"visits\"></helix-headless-area-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/area-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"visits\"\n >\n <caption>Visits a month by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Search</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Referral</th>\n <th scope=\"col\">Social</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"420\">420</td>\n <td data-value=\"180\">180</td>\n <td data-value=\"90\">90</td>\n <td data-value=\"60\">60</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"460\">460</td>\n <td data-value=\"190\">190</td>\n <td data-value=\"95\">95</td>\n <td data-value=\"70\">70</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"510\">510</td>\n <td data-value=\"200\">200</td>\n <td data-value=\"110\">110</td>\n <td data-value=\"85\">85</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"540\">540</td>\n <td data-value=\"205\">205</td>\n <td data-value=\"120\">120</td>\n <td data-value=\"110\">110</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"600\">600</td>\n <td data-value=\"215\">215</td>\n <td data-value=\"118\">118</td>\n <td data-value=\"140\">140</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"650\">650</td>\n <td data-value=\"220\">220</td>\n <td data-value=\"125\">125</td>\n <td data-value=\"170\">170</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-area-chart for=\"visits\"></helix-headless-area-chart>\n </div>\n )\n}"}],"avatar":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-avatar {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2rem;\n border-radius: 9999px;\n color: var(--_gray-strong);\n display: inline-flex;\n flex: none;\n inline-size: 2rem;\n justify-content: center;\n overflow: hidden;\n}\n\nhelix-headless-avatar::part(image) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-avatar::part(initials) {\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n line-height: 1;\n user-select: none;\n}","description":"The avatar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-avatar name=\"Jane Doe\"></helix-headless-avatar>","imports":["import '@fusion.dev/helix-headless/avatar'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-avatar name=\"Jane Doe\"></helix-headless-avatar>\n}"}],"badge":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-badge {\n display: inline-flex;\n position: relative;\n vertical-align: middle;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n inline-size: 2.5rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-badge::part(indicator) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 1rem;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px Canvas;\n box-sizing: border-box;\n color: var(--_gray-surface);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 600;\n inset-block-start: 8px;\n inset-inline-end: 8px;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1rem;\n padding-inline: 0.25rem;\n pointer-events: none;\n position: absolute;\n translate: 50% -50%;\n white-space: nowrap;\n}","description":"The badge on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-badge\n label=\"3 unread\"\n value=\"3\"\n>\n <helix-headless-icon-button label=\"Notifications\">\n <helix-headless-icon name=\"bell\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-badge>","imports":["import '@fusion.dev/helix-headless/badge'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-badge\n label=\"3 unread\"\n value=\"3\"\n >\n <helix-headless-icon-button label=\"Notifications\">\n <helix-headless-icon name=\"bell\"></helix-headless-icon>\n </helix-headless-icon-button>\n </helix-headless-badge>\n )\n}"}],"bar-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-bar-chart {\n --chart-series-1: var(--_gray-mark);\n --chart-series-2: var(--_gray-line);\n --chart-series-3: var(--_gray-fill);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-strong);\n --chart-series-6: var(--_gray-subtle);\n\n display: grid;\n font-size: 0.875rem;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(plot) {\n block-size: 12em;\n cursor: crosshair;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-bar-chart::part(bar) {\n clip-path: inset(0);\n fill: var(--chart-series, var(--chart-series-1));\n}\n\n/* Rounded at the far end only, the end away from zero, so a stack meets square\n at its joins and a bar below zero meets the baseline square. */\nhelix-headless-bar-chart::part(bar-end) {\n clip-path: inset(0 round 2px 2px 0 0);\n}\n\nhelix-headless-bar-chart::part(bar-end-negative) {\n clip-path: inset(0 round 0 0 2px 2px);\n}\n\nhelix-headless-bar-chart::part(baseline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(band) {\n fill: var(--_gray-subtle);\n}\n\nhelix-headless-bar-chart::part(line) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-bar-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(axis) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n pointer-events: none;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(tick) {\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inline-size: max-content;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-bar-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-bar-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-bar-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-bar-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series);\n block-size: 0.5em;\n border-radius: 9999px;\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-bar-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-bar-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-bar-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same bar chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"revenue\"\n >\n <caption>Revenue by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Revenue</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"128000\">$128k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"141000\">$141k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"96000\">$96k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"164000\">$164k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"revenue\"></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by channel</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Partner</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td>84</td>\n <td>36</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td>92</td>\n <td>51</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td>70</td>\n <td>44</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td>101</td>\n <td>63</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart\n for=\"signups\"\n stacked\n ></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"net\"\n >\n <caption>Net cash by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Net</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"12000\">+$12k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"-8000\">-$8k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"5000\">+$5k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"-14000\">-$14k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"net\"></helix-headless-bar-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/bar-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"revenue\"\n >\n <caption>Revenue by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Revenue</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"128000\">$128k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"141000\">$141k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"96000\">$96k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"164000\">$164k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"revenue\"></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by channel</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Partner</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td>84</td>\n <td>36</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td>92</td>\n <td>51</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td>70</td>\n <td>44</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td>101</td>\n <td>63</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart\n for=\"signups\"\n stacked\n ></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"net\"\n >\n <caption>Net cash by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Net</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"12000\">+$12k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"-8000\">-$8k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"5000\">+$5k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"-14000\">-$14k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"net\"></helix-headless-bar-chart>\n </div>\n )\n}"}],"blockquote":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-blockquote {\n color: var(--_gray-muted);\n display: block;\n font-size: 1.5rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 1.2;\n}\n\nhelix-headless-blockquote::part(figure) {\n margin: 0;\n}\n\nhelix-headless-blockquote::part(blockquote) {\n display: block;\n margin: 0;\n}\n\nhelix-headless-blockquote::part(attribution) {\n color: var(--_gray-muted);\n display: block;\n font-size: 0.8125rem;\n font-weight: 400;\n letter-spacing: normal;\n line-height: 1.5;\n margin-block-start: 0.75rem;\n}","description":"The blockquote on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-blockquote cite=\"https://example.com/source\">\n Our team moved every project into the new workspace in one afternoon.\n Weekly reports that took a day to prepare now take a few minutes.\n <span slot=\"attribution\">Maria Lopez, operations manager</span>\n</helix-headless-blockquote>","imports":["import '@fusion.dev/helix-headless/blockquote'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-blockquote cite=\"https://example.com/source\">\n Our team moved every project into the new workspace in one afternoon. Weekly reports that took\n a day to prepare now take a few minutes.\n <span slot=\"attribution\">Maria Lopez, operations manager</span>\n </helix-headless-blockquote>\n )\n}"}],"breadcrumbs":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-breadcrumbs::part(list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-breadcrumb {\n align-items: center;\n display: inline-flex;\n font-weight: 500;\n gap: 0.5rem;\n}\n\nhelix-headless-breadcrumb::part(separator) {\n color: var(--_gray-mark);\n display: block;\n user-select: none;\n}\n\nhelix-headless-breadcrumb:first-child::part(separator) {\n display: none;\n}\n\nhelix-headless-breadcrumb::part(separator-mark) {\n block-size: 1em;\n inline-size: 1em;\n vertical-align: calc(0.5cap - 0.5em);\n}\n\nhelix-headless-breadcrumb::part(link) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n gap: 0.25rem;\n text-decoration: none;\n}\n\nhelix-headless-breadcrumb[current]::part(link) {\n color: var(--_gray-strong);\n padding-inline: 0.5rem;\n}\n\nhelix-headless-breadcrumb a {\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n padding: 0.25rem 0.5rem;\n text-decoration: none;\n}\n\nhelix-headless-breadcrumb:first-child a {\n margin-inline-start: -0.5rem;\n}\n\nhelix-headless-breadcrumb a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-breadcrumb a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The breadcrumbs on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-breadcrumbs aria-label=\"Breadcrumb\">\n <helix-headless-breadcrumb><a\n data-link=\"quiet\"\n href=\"/\"\n >Home</a></helix-headless-breadcrumb>\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/section\"\n >Projects</a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb current>Website redesign</helix-headless-breadcrumb>\n</helix-headless-breadcrumbs>","imports":["import '@fusion.dev/helix-headless/breadcrumbs'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-breadcrumbs aria-label=\"Breadcrumb\">\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/\"\n >\n Home\n </a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/section\"\n >\n Projects\n </a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb current>Website redesign</helix-headless-breadcrumb>\n </helix-headless-breadcrumbs>\n )\n}"}],"button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button {\n display: inline-flex;\n max-inline-size: 100%;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(:disabled)::part(button):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-button:disabled::part(button) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button>Save changes</helix-headless-button>","imports":["import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-button>Save changes</helix-headless-button>\n}"}],"button-group":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group {\n display: inline-flex;\n}\n\nhelix-headless-button-group > helix-headless-button:not(:first-child) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-button-group > helix-headless-button:first-child::part(button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same button group on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group label=\"Calendar view\">\n <helix-headless-button>Day</helix-headless-button>\n <helix-headless-button>Week</helix-headless-button>\n <helix-headless-button>Month</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group label=\"Calendar view\">\n <helix-headless-button>Day</helix-headless-button>\n <helix-headless-button>Week</helix-headless-button>\n <helix-headless-button>Month</helix-headless-button>\n </helix-headless-button-group>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group {\n display: inline-flex;\n}\n\nhelix-headless-button-group > helix-headless-button:not(:first-child) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-button-group > helix-headless-button:first-child::part(button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\n/* The group writes `--button-group-pressed` on each toggle's control: 1 while\n it is pressed and 0 while it is not. */\nhelix-headless-button-group[selection-mode] > helix-headless-button::part(button) {\n background-color: color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-subtle)\n );\n color: color-mix(\n in oklab,\n var(--_gray-surface) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-strong)\n );\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-button-group[selection-mode] > helix-headless-button::part(button):hover {\n background-color: color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-fill)\n );\n}","description":"A calendar view that stays pressed, set with `selection-mode`, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group\n label=\"Calendar view\"\n selection-mode=\"single\"\n value=\"week\"\n>\n <helix-headless-button value=\"day\">Day</helix-headless-button>\n <helix-headless-button value=\"week\">Week</helix-headless-button>\n <helix-headless-button value=\"month\">Month</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Selection","renders":[],"slug":"selection","tier":"headless","tsx":"import './selection.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group\n label=\"Calendar view\"\n selection-mode=\"single\"\n value=\"week\"\n >\n <helix-headless-button value=\"day\">Day</helix-headless-button>\n <helix-headless-button value=\"week\">Week</helix-headless-button>\n <helix-headless-button value=\"month\">Month</helix-headless-button>\n </helix-headless-button-group>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"] {\n align-items: stretch;\n display: inline-flex;\n flex-direction: column;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"] > helix-headless-button:not(:first-child) {\n margin-block-start: -1px;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"]\n > helix-headless-button:first-child::part(button) {\n border-start-end-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group[orientation=\"vertical\"]\n > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-end-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The joined buttons stacked vertically, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group\n label=\"Export\"\n orientation=\"vertical\"\n>\n <helix-headless-button>Download CSV</helix-headless-button>\n <helix-headless-button>Download JSON</helix-headless-button>\n <helix-headless-button>Copy to clipboard</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Vertical","renders":[],"slug":"vertical","tier":"headless","tsx":"import './vertical.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group\n label=\"Export\"\n orientation=\"vertical\"\n >\n <helix-headless-button>Download CSV</helix-headless-button>\n <helix-headless-button>Download JSON</helix-headless-button>\n <helix-headless-button>Copy to clipboard</helix-headless-button>\n </helix-headless-button-group>\n )\n}"}],"callout":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-callout {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.75rem;\n overflow: hidden;\n padding: 1rem;\n padding-inline-start: calc(1rem + 2px);\n position: relative;\n}\n\nhelix-headless-callout::before {\n background-color: var(--_gray-muted);\n content: \"\";\n inline-size: 2px;\n inset-block: 0;\n inset-inline-start: 0;\n position: absolute;\n}\n\nhelix-headless-callout::part(icon) {\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-callout::part(icon-mark) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-callout::part(content) {\n line-height: 1.5;\n min-inline-size: 0;\n}\n\nhelix-headless-callout [slot=\"heading\"] {\n display: block;\n font-weight: 600;\n margin: 0;\n}","description":"The callout on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-callout tone=\"info\">\n Invoices are sent by email on the first day of each month.\n</helix-headless-callout>","imports":["import '@fusion.dev/helix-headless/callout'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-callout tone=\"info\">\n Invoices are sent by email on the first day of each month.\n </helix-headless-callout>\n )\n}"}],"canvas":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n properties, and each card's place in the card's own shadow root, which sets\n them on the card, so positioning is a read. */\nhelix-headless-canvas::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-canvas::part(viewport) {\n cursor: grab;\n min-block-size: 0;\n overflow: hidden;\n position: relative;\n touch-action: none;\n}\n\nhelix-headless-canvas:state(pressing)::part(viewport) {\n user-select: none;\n}\n\nhelix-headless-canvas::part(board) {\n block-size: var(--_canvas-plane-block-size);\n inline-size: var(--_canvas-plane-inline-size);\n inset: 0;\n position: absolute;\n transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));\n transform-origin: 0 0;\n}\n\nhelix-headless-canvas::part(edges) {\n inset: 0;\n overflow: visible;\n position: absolute;\n z-index: -1;\n}\n\nhelix-headless-canvas::part(edge) {\n pointer-events: none;\n stroke: var(--_gray-line);\n stroke-width: 2px;\n}\n\nhelix-headless-canvas::part(edge-target) {\n cursor: pointer;\n pointer-events: stroke;\n stroke: transparent;\n stroke-width: 12px;\n}\n\nhelix-headless-canvas::part(arrow) {\n fill: var(--_gray-line);\n}\n\nhelix-headless-canvas::part(label) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n left: var(--_canvas-label-x);\n line-height: 1;\n padding: 0.25rem;\n pointer-events: none;\n position: absolute;\n top: var(--_canvas-label-y);\n transform: translate(-50%, -50%);\n white-space: nowrap;\n}\n\nhelix-headless-canvas::part(draft) {\n stroke: var(--_gray-mark);\n stroke-dasharray: 6 4;\n stroke-width: 2px;\n}\n\nhelix-headless-canvas::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-canvas::part(controls) {\n display: grid;\n gap: 0.25rem;\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-canvas::part(zoom-in-button),\nhelix-headless-canvas::part(zoom-out-button),\nhelix-headless-canvas::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\n/* A card is placed from the coordinates the board wrote onto it. */\nhelix-headless-canvas-node {\n background-color: var(--_gray-surface);\n block-size: var(--_canvas-card-block-size);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n font-size: 0.875rem;\n inline-size: var(--_canvas-card-inline-size);\n left: var(--_canvas-card-x);\n position: absolute;\n top: var(--_canvas-card-y);\n}\n\nhelix-headless-canvas-node::part(node) {\n block-size: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n padding: 0.75rem;\n}\n\nhelix-headless-canvas-node::part(node):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-canvas-node::part(handle) {\n background-color: var(--_gray-surface);\n block-size: 0.625rem;\n border: 2px solid var(--_gray-mark);\n border-radius: 50%;\n box-sizing: border-box;\n cursor: crosshair;\n inline-size: 0.625rem;\n opacity: 0;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\nhelix-headless-canvas-node:hover::part(handle),\nhelix-headless-canvas-node:focus-within::part(handle) {\n opacity: 1;\n}\n\nhelix-headless-canvas-node::part(handle-top) {\n left: 50%;\n top: 0;\n}\n\nhelix-headless-canvas-node::part(handle-right) {\n left: 100%;\n top: 50%;\n}\n\nhelix-headless-canvas-node::part(handle-bottom) {\n left: 50%;\n top: 100%;\n}\n\nhelix-headless-canvas-node::part(handle-left) {\n left: 0;\n top: 50%;\n}\n\nhelix-headless-canvas::part(label-editor) {\n box-sizing: border-box;\n font: inherit;\n font-size: 0.75rem;\n inline-size: 12rem;\n left: var(--_canvas-editor-x);\n position: absolute;\n top: var(--_canvas-editor-y);\n transform: translate(-50%, -50%);\n z-index: 1;\n}\n\nhelix-headless-canvas-node:state(selected) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same board on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-canvas label=\"Document approval\">\n <helix-headless-canvas-node\n height=\"64\"\n name=\"write\"\n width=\"160\"\n x=\"0\"\n y=\"0\"\n >Write the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height=\"64\"\n name=\"review\"\n width=\"160\"\n x=\"320\"\n y=\"0\"\n >Review the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height=\"64\"\n name=\"ship\"\n width=\"160\"\n x=\"160\"\n y=\"192\"\n >Publish the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-edge\n from=\"write\"\n label=\"when it is complete\"\n to=\"review\"\n ></helix-headless-canvas-edge>\n\n <helix-headless-canvas-edge\n from=\"review\"\n to=\"ship\"\n ></helix-headless-canvas-edge>\n</helix-headless-canvas>","imports":["import '@fusion.dev/helix-headless/canvas'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-canvas label=\"Document approval\">\n <helix-headless-canvas-node\n height={64}\n name=\"write\"\n width={160}\n x={0}\n y={0}\n >\n Write the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height={64}\n name=\"review\"\n width={160}\n x={320}\n y={0}\n >\n Review the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height={64}\n name=\"ship\"\n width={160}\n x={160}\n y={192}\n >\n Publish the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-edge\n from=\"write\"\n label=\"when it is complete\"\n to=\"review\"\n ></helix-headless-canvas-edge>\n\n <helix-headless-canvas-edge\n from=\"review\"\n to=\"ship\"\n ></helix-headless-canvas-edge>\n </helix-headless-canvas>\n )\n}"}],"card":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-card {\n align-content: start;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: grid;\n font-size: 0.875rem;\n gap: 0.75rem;\n grid-template-columns: minmax(0, 1fr);\n line-height: 1.5;\n overflow: hidden;\n padding: 1rem;\n}\n\nhelix-headless-card > [slot=\"header\"] {\n color: var(--_gray-strong);\n margin: 0;\n}\n\nhelix-headless-card > [slot=\"footer\"] {\n justify-self: end;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same card on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-card aria-labelledby=\"card-title\">\n <h3\n id=\"card-title\"\n slot=\"header\"\n >Storage</h3>\n You have used 8 GB of the 10 GB in your plan. Delete old files or upgrade to add space.\n <helix-headless-button slot=\"footer\">Manage storage</helix-headless-button>\n</helix-headless-card>","imports":["import '@fusion.dev/helix-headless/card'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-card aria-labelledby=\"card-title\">\n <h3\n id=\"card-title\"\n slot=\"header\"\n >\n Storage\n </h3>\n You have used 8 GB of the 10 GB in your plan. Delete old files or upgrade to add space.\n <helix-headless-button slot=\"footer\">Manage storage</helix-headless-button>\n </helix-headless-card>\n )\n}"}],"carousel":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-carousel {\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\nhelix-headless-carousel::part(track) {\n display: flex;\n gap: 1rem;\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 0 0 100%;\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same carousel on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel label=\"Folders\">\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel label=\"Folders\">\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n </helix-headless-carousel>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The narrowest a card may be laid out, which is the whole of what this\n carousel is told. Nothing says how many go across: the rule below works that\n out from the room the track was given, which is what `per-view=\"auto\"` means\n and why it needs no script. */\nhelix-headless-carousel {\n --carousel-gap: 1rem;\n --carousel-slide-min: 12rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\n/* The count, which under `auto` the component does not hand over: how many\n boxes of at least the minimum, with a gap between each pair, fit the room the\n track has. A gap belongs to every pane but the last, so a gap added to the\n room and divided by a pane and a gap comes out whole. `max(1, ...)` is the\n clamp: dividing by zero would take the pane's `flex` down with it.\n\n `cqi` rather than `100%`, because a percentage cannot be a divisor, and\n `container-type` is what makes the unit mean this track rather than the\n viewport. The share below is then the same rule a declared count reads,\n unchanged: the count is a `round()` here rather than a digit. */\nhelix-headless-carousel::part(track) {\n --carousel-per-view: max(\n 1,\n round(\n down,\n calc((100cqi + var(--carousel-gap)) / (var(--carousel-slide-min) + var(--carousel-gap))),\n 1\n )\n );\n --_share: calc(\n (100% - (var(--carousel-per-view, 1) - 1) * var(--carousel-gap)) /\n var(--carousel-per-view, 1)\n );\n /* An odd sixty-fourth of a pixel, which is the unit layout keeps: a pane on an\n exact half rests a pixel apart in the two writing directions. */\n --carousel-pane: calc(round(var(--_share) - 0.015625px, 0.03125px) + 0.015625px);\n container-type: inline-size;\n display: flex;\n gap: var(--carousel-gap);\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\n/* The share where the run overflows, and the slack where it does not: a track\n holding fewer cards than it fits would otherwise leave the rest of the row\n empty. A run that overflows has no slack to give, so this moves nothing\n there. */\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 1 0 var(--carousel-pane);\n margin-inline-end: var(--carousel-run-end, 0px);\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"As many slides across as the track holds, set by a minimum slide width with no count.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel\n label=\"Folders\"\n per-view=\"auto\"\n>\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n <helix-headless-card>Templates</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"As Many As Fit","renders":[],"slug":"as-many-as-fit","tier":"headless","tsx":"import './as-many-as-fit.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel\n label=\"Folders\"\n per-view=\"auto\"\n >\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n <helix-headless-card>Templates</helix-headless-card>\n </helix-headless-carousel>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-carousel {\n --carousel-gap: 1rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\nhelix-headless-carousel::part(track) {\n --_share: calc(\n (100% - (var(--carousel-per-view, 1) - 1) * var(--carousel-gap)) /\n var(--carousel-per-view, 1)\n );\n /* An odd sixty-fourth of a pixel, which is the unit layout keeps: a pane on an\n exact half rests a pixel apart in the two writing directions. */\n --carousel-pane: calc(round(var(--_share) - 0.015625px, 0.03125px) + 0.015625px);\n display: flex;\n gap: var(--carousel-gap);\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 0 0 var(--carousel-pane);\n margin-inline-end: var(--carousel-run-end, 0px);\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Three slides across, with the pane, the gap, and the run's end written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel\n label=\"Folders\"\n per-view=\"3\"\n>\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"Several Across","renders":[],"slug":"several-across","tier":"headless","tsx":"import './several-across.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel\n label=\"Folders\"\n per-view=\"3\"\n >\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n </helix-headless-carousel>\n )\n}"}],"chat":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-chat {\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.875rem;\n grid-template-rows: auto minmax(0, 1fr) auto auto auto;\n line-height: 1.5;\n min-block-size: 0;\n}\n\nhelix-headless-chat::part(header) {\n grid-row: 1;\n}\n\nhelix-headless-chat::part(log) {\n grid-row: 2;\n}\n\nhelix-headless-chat::part(resume) {\n grid-row: 3;\n}\n\nhelix-headless-chat::part(status) {\n grid-row: 4;\n}\n\nhelix-headless-chat::part(composer) {\n grid-row: 5;\n}\n\nhelix-headless-chat:has(> [slot=\"header\"], > [slot=\"actions\"])::part(header) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n}\n\nhelix-headless-chat::part(header) {\n border-block-end: 1px solid var(--_gray-edge);\n min-block-size: 2.5rem;\n padding: 0.25rem 1rem;\n}\n\nhelix-headless-chat::part(log) {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n justify-content: safe flex-end;\n overflow-y: auto;\n padding: 1rem;\n}\n\nhelix-headless-chat::part(resume) {\n margin-block-start: -2rem;\n pointer-events: none;\n position: relative;\n text-align: center;\n}\n\nhelix-headless-chat::part(status) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.5rem 1rem 0.25rem;\n}\n\nhelix-headless-chat::part(composer) {\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-chat::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-chat-message {\n display: block;\n}\n\nhelix-headless-chat-message::part(message) {\n align-items: start;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n}\n\nhelix-headless-chat-message::part(avatar) {\n align-items: center;\n display: flex;\n font-size: 0.8125rem;\n grid-column: 1;\n line-height: 1.5;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(avatar) {\n display: none;\n}\n\nhelix-headless-chat-message::part(body) {\n display: grid;\n gap: 0.25rem;\n grid-column: 2;\n justify-items: start;\n max-inline-size: min(42rem, 80%);\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(body) {\n justify-items: end;\n justify-self: end;\n}\n\nhelix-headless-chat-message::part(content) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n inline-size: fit-content;\n line-height: 1.5;\n max-inline-size: 100%;\n min-inline-size: 0;\n overflow-x: auto;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(content) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-chat-message[state=\"sending\"]::part(content) {\n opacity: 0.6;\n}\n\nhelix-headless-chat-message::part(meta) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n gap: 0.25rem;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(meta) {\n justify-content: flex-end;\n}\n\nhelix-headless-chat-message[state=\"failed\"]::part(meta) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-chat-message::part(state) {\n align-items: center;\n display: inline-flex;\n font-weight: 500;\n gap: 0.25rem;\n}\n\nhelix-headless-chat-message::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-chat-message::part(retry) {\n background: none;\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n font: inherit;\n font-weight: 500;\n margin-inline-end: -0.25rem;\n min-block-size: 1.75rem;\n padding: 0.25rem;\n text-decoration: underline;\n text-underline-offset: 0.2em;\n}\n\nhelix-headless-chat-message::part(retry):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-chat-message::part(actions) {\n opacity: 0;\n}\n\nhelix-headless-chat-message:hover::part(actions),\nhelix-headless-chat-message:focus-within::part(actions) {\n opacity: 1;\n}\n\nhelix-headless-chat-message::part(sources) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n}\n\nhelix-headless-chat-composer {\n display: block;\n}\n\nhelix-headless-chat-composer::part(composer) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n display: grid;\n gap: 0.25rem;\n padding: 0.5rem;\n}\n\nhelix-headless-chat-composer::part(composer):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-chat-composer::part(field) {\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n field-sizing: content;\n font: inherit;\n font-size: 0.8125rem;\n line-height: 1.5;\n max-block-size: 12rem;\n padding: 0.25rem calc(0.25rem - 1px);\n resize: none;\n}\n\nhelix-headless-chat-composer::part(field):focus-visible {\n outline: none;\n}\n\nhelix-headless-chat-composer::part(tools) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n justify-content: flex-end;\n}\n\nhelix-headless-chat-composer::part(start) {\n margin-inline-end: auto;\n}\n\nhelix-headless-chat-composer::part(send) {\n align-items: center;\n background-color: transparent;\n block-size: 1.75rem;\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.75rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-chat-composer::part(send):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-chat-composer::part(send):disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-chat-composer::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-chat-message::part(retry):focus-visible,\nhelix-headless-chat-composer::part(send):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"A conversation with the four states a turn can be in, and a composer under it.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-chat\n id=\"raw\"\n label=\"Support\"\n>\n <strong slot=\"header\">Support</strong>\n\n <helix-headless-chat-message\n author=\"them\"\n author-label=\"Support\"\n state=\"sent\"\n >\n How can I help?\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"sent\"\n >\n The deploy is stuck on the migration step.\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"them\"\n author-label=\"Support\"\n state=\"streaming\"\n >\n I am checking the migration now\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"failed\"\n >\n Thanks\n </helix-headless-chat-message>\n\n <span slot=\"status\">Support is typing</span>\n\n <helix-headless-chat-composer\n placeholder=\"Write a message\"\n slot=\"composer\"\n ></helix-headless-chat-composer>\n</helix-headless-chat>\n\n<script>\n const raw = document.getElementById('raw')\n const ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString()\n const turns = raw.querySelectorAll('helix-headless-chat-message')\n turns[0].at = ago(6)\n turns[1].at = ago(4)\n turns[2].at = ago(1)\n\n raw.addEventListener('helix-send', (event) => {\n const turn = document.createElement('helix-headless-chat-message')\n turn.setAttribute('author', 'me')\n turn.setAttribute('state', 'sent')\n turn.at = new Date().toISOString()\n turn.textContent = event.detail.value\n raw.append(turn)\n })\n</script>","imports":["import '@fusion.dev/helix-headless/chat'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import { useEffect, useState } from 'react'\nimport './preview.css'\n\nconst ago = (minutes: number): string => new Date(Date.now() - minutes * 60000).toISOString()\n\ninterface Turn {\n at: string\n body: string\n}\n\nexport function Example() {\n /* The timestamps are set after mount, so they are always a few minutes old\n and the server and the client render the same markup. */\n const [at, setAt] = useState<string[]>([])\n\n /* Each message you send is added to this list and rendered at the end of the\n transcript. */\n const [sent, setSent] = useState<Turn[]>([])\n\n useEffect(() => {\n setAt([6, 4, 1].map(ago))\n }, [])\n\n return (\n <helix-headless-chat\n label=\"Support\"\n onhelix-send={(event) =>\n setSent((all) => [...all, { at: new Date().toISOString(), body: event.detail.value }])\n }\n >\n <strong slot=\"header\">Support</strong>\n\n <helix-headless-chat-message\n at={at[0]}\n author=\"them\"\n author-label=\"Support\"\n state=\"sent\"\n >\n How can I help?\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n at={at[1]}\n author=\"me\"\n state=\"sent\"\n >\n The deploy is stuck on the migration step.\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n at={at[2]}\n author=\"them\"\n author-label=\"Support\"\n state=\"streaming\"\n >\n I am checking the migration now\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"failed\"\n >\n Thanks\n </helix-headless-chat-message>\n\n {sent.map((turn) => (\n <helix-headless-chat-message\n at={turn.at}\n author=\"me\"\n key={turn.at}\n state=\"sent\"\n >\n {turn.body}\n </helix-headless-chat-message>\n ))}\n\n <span slot=\"status\">Support is typing</span>\n\n <helix-headless-chat-composer\n placeholder=\"Write a message\"\n slot=\"composer\"\n />\n </helix-headless-chat>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-chat {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.875rem;\n grid-template-rows: auto minmax(0, 1fr);\n line-height: 1.5;\n max-block-size: 22rem;\n min-block-size: 0;\n}\n\nhelix-headless-chat::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n display: flex;\n grid-row: 1;\n min-block-size: 2.5rem;\n padding: 0.25rem 1rem;\n}\n\nhelix-headless-chat::part(log) {\n display: flex;\n flex-direction: column;\n grid-row: 2;\n justify-content: safe flex-end;\n overflow-y: auto;\n padding: 0 1rem 1rem;\n}\n\nhelix-headless-chat::part(turn) {\n flex: none;\n padding-block-start: 1rem;\n}\n\nhelix-headless-chat::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-chat::part(message) {\n align-items: start;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n}\n\nhelix-headless-chat::part(message-avatar) {\n align-items: center;\n display: flex;\n font-size: 0.8125rem;\n grid-column: 1;\n line-height: 1.5;\n}\n\nhelix-headless-chat::part(message-avatar-mine) {\n display: none;\n}\n\nhelix-headless-chat::part(message-body) {\n display: grid;\n gap: 0.25rem;\n grid-column: 2;\n justify-items: start;\n max-inline-size: min(42rem, 80%);\n}\n\nhelix-headless-chat::part(message-body-mine) {\n justify-items: end;\n justify-self: end;\n}\n\nhelix-headless-chat::part(message-content) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n inline-size: fit-content;\n line-height: 1.5;\n max-inline-size: 100%;\n min-inline-size: 0;\n overflow-x: auto;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-chat::part(message-content-mine) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-chat::part(message-meta) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n gap: 0.25rem;\n}\n\nhelix-headless-chat::part(message-meta-mine) {\n justify-content: flex-end;\n}","description":"Two thousand turns set as data, with your own turns marked by their author.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-chat\n id=\"run\"\n label=\"Build agent\"\n>\n <strong slot=\"header\">Build agent</strong>\n</helix-headless-chat>\n\n<script type=\"module\">\n /* Steps of different lengths, so the turns have different heights. */\n const STEPS = [\n 'Installed 412 packages.',\n 'Compiled the project in 3.1 seconds.',\n 'Ran 1,589 tests. All of them passed, including the 11 that run in a browser.',\n 'Updated three screenshots. Only the settings page changed, because the save button moved to the top of the form.',\n 'Uploaded the build.',\n ]\n\n document.getElementById('run').turns = Array.from({ length: 2000 }, (_, index) => ({\n author: index % 5 === 4 ? 'me' : 'them',\n key: String(index),\n text: index % 5 === 4 ? `Continue from step ${index + 1}.` : `${index + 1}. ${STEPS[index % 5]}`,\n }))\n</script>","imports":["import '@fusion.dev/helix-headless/chat'"],"label":"Transcript","min":420,"renders":[],"slug":"transcript","tier":"headless","tsx":"import './transcript.css'\n\n/* Steps of different lengths, so the turns have different heights. */\nconst STEPS = [\n 'Installed 412 packages.',\n 'Compiled the project in 3.1 seconds.',\n 'Ran 1,589 tests. All of them passed, including the 11 that run in a browser.',\n 'Updated three screenshots. Only the settings page changed, because the save button moved to the top of the form.',\n 'Uploaded the build.',\n]\n\nconst turns = Array.from({ length: 2000 }, (_, index) => ({\n author: index % 5 === 4 ? 'me' : 'them',\n key: String(index),\n text: index % 5 === 4 ? `Continue from step ${index + 1}.` : `${index + 1}. ${STEPS[index % 5]}`,\n}))\n\nexport function Example() {\n return (\n <helix-headless-chat\n label=\"Build agent\"\n turns={turns}\n >\n <strong slot=\"header\">Build agent</strong>\n </helix-headless-chat>\n )\n}"}],"checkbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-checkbox {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox::part(box) {\n display: grid;\n flex: none;\n place-items: center;\n}\n\nhelix-headless-checkbox::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n cursor: inherit;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n margin: 0;\n}\n\nhelix-headless-checkbox:not(:disabled):hover::part(control) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(mark) {\n block-size: 1.25rem;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n pointer-events: none;\n}\n\nhelix-headless-checkbox::part(mark-indeterminate) {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E\");\n}\n\nhelix-headless-checkbox:state(checked)::part(control),\nhelix-headless-checkbox:state(indeterminate)::part(control) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(mark-checked),\nhelix-headless-checkbox::part(mark-indeterminate) {\n background-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-checkbox::part(hint),\nhelix-headless-checkbox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n padding-inline-start: 1.75rem;\n}\n\nhelix-headless-checkbox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-checkbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-checkbox:disabled::part(field) {\n cursor: not-allowed;\n}\n\nhelix-headless-checkbox::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The checkbox on the headless tier, with every style written by hand.","html":"<!-- Keep the closing tag on the same line. A newline inside the element hides the label. -->\n\n<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-checkbox\n default-checked\n hint=\"You can unsubscribe at any time.\"\n label=\"Email me about product updates\"\n name=\"option\"\n value=\"accepted\"\n></helix-headless-checkbox>","imports":["import '@fusion.dev/helix-headless/checkbox'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n {/* Keep the closing tag on the same line. A newline inside the element hides the label. */}\n\n <helix-headless-checkbox\n default-checked\n hint=\"You can unsubscribe at any time.\"\n label=\"Email me about product updates\"\n name=\"option\"\n value=\"accepted\"\n ></helix-headless-checkbox>\n </>\n )\n}"}],"checkbox-group":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-checkbox-group::part(items) {\n align-items: start;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox-group::part(hint),\nhelix-headless-checkbox-group::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-checkbox-group::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox-group::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-checkbox {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox::part(box) {\n display: grid;\n flex: none;\n place-items: center;\n}\n\nhelix-headless-checkbox::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n cursor: inherit;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n margin: 0;\n}\n\nhelix-headless-checkbox:not(:disabled):hover::part(control) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(mark) {\n block-size: 1.25rem;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n pointer-events: none;\n}\n\nhelix-headless-checkbox::part(mark-indeterminate) {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E\");\n}\n\nhelix-headless-checkbox:state(checked)::part(control),\nhelix-headless-checkbox:state(indeterminate)::part(control) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(mark-checked),\nhelix-headless-checkbox::part(mark-indeterminate) {\n background-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-checkbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-checkbox::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same checkbox group on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-checkbox-group\n hint=\"Choose where you receive updates.\"\n label=\"Notifications\"\n name=\"group\"\n value=\"one,two\"\n>\n <helix-headless-checkbox value=\"one\">Email</helix-headless-checkbox>\n <helix-headless-checkbox value=\"two\">Text message</helix-headless-checkbox>\n <helix-headless-checkbox value=\"three\">Mobile app</helix-headless-checkbox>\n <helix-headless-checkbox value=\"four\">Browser</helix-headless-checkbox>\n</helix-headless-checkbox-group>","imports":["import '@fusion.dev/helix-headless/checkbox-group'","import '@fusion.dev/helix-headless/checkbox'"],"label":"Preview","layout":"hug","min":240,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-checkbox-group\n hint=\"Choose where you receive updates.\"\n label=\"Notifications\"\n name=\"group\"\n value=\"one,two\"\n >\n <helix-headless-checkbox value=\"one\">Email</helix-headless-checkbox>\n <helix-headless-checkbox value=\"two\">Text message</helix-headless-checkbox>\n <helix-headless-checkbox value=\"three\">Mobile app</helix-headless-checkbox>\n <helix-headless-checkbox value=\"four\">Browser</helix-headless-checkbox>\n </helix-headless-checkbox-group>\n )\n}"}],"code":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-code {\n display: inline;\n}\n\nhelix-headless-code::part(code) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-control);\n color: color-mix(in oklab, var(--_gray-strong) 30%, var(--_gray-muted));\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9286em;\n padding: 0 0.125rem;\n}","description":"Inline code on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Add <helix-headless-code>data-density</helix-headless-code> to a container to set the spacing\n of every control inside it.\n</p>","imports":["import '@fusion.dev/helix-headless/code'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n Add <helix-headless-code>data-density</helix-headless-code> to a container to set the spacing\n of every control inside it.\n </p>\n )\n}"}],"code-block":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-code-block {\n display: flex;\n flex-direction: column;\n line-height: 1.5;\n}\n\nhelix-headless-code-block::part(header) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel) var(--_radius-panel) 0 0;\n display: flex;\n gap: 0.75rem;\n padding: 0.25rem 0.25rem 0.25rem 1rem;\n}\n\nhelix-headless-code-block::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n}\n\nhelix-headless-code-block::part(frame) {\n flex: 1;\n}\n\nhelix-headless-code-block::part(block) {\n block-size: 100%;\n border: 1px solid var(--_gray-edge);\n border-block-start-width: 0;\n border-radius: 0 0 var(--_radius-panel) var(--_radius-panel);\n box-sizing: border-box;\n margin: 0;\n overflow: auto;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-code-block::part(code) {\n color: var(--_gray-strong);\n display: block;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.8125rem;\n line-height: 1.5;\n overflow-x: auto;\n}\n\nhelix-headless-code-block::part(copy) {\n margin-inline-start: auto;\n}\n\nhelix-headless-code-block::part(copy-button) {\n all: unset;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2rem;\n place-items: center;\n}\n\nhelix-headless-code-block::part(copy-button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-code-block::part(copy-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-code-block::part(copy-tooltip-surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-code-block::part(copy-tooltip-surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-code-block::part(copy-tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-code-block::part(copy-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The code block on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-code-block label=\"index.html\">&lt;helix-button emphasis=\"solid\" tone=\"primary\"&gt;Save&lt;/helix-button&gt;</helix-headless-code-block>","imports":["import '@fusion.dev/helix-headless/code-block'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-code-block label=\"index.html\">\n &lt;helix-button emphasis=\"solid\" tone=\"primary\"&gt;Save&lt;/helix-button&gt;\n </helix-headless-code-block>\n )\n}"}],"color-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-input {\n --_along: to right;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-color-input:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-color-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n overflow: hidden;\n padding-inline-start: 0.5rem;\n}\n\nhelix-headless-color-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-color-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-color-input::part(trigger) {\n all: unset;\n align-self: stretch;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n flex: none;\n}\n\nhelix-headless-color-input::part(preview) {\n background-image:\n linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border-inline-start: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n display: block;\n filter: grayscale(1);\n inline-size: 2.5rem;\n}\n\nhelix-headless-color-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: 16.5rem;\n inset: auto;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-color-input::part(picker) {\n display: block;\n padding: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-grid) {\n aspect-ratio: 1 / 0.7;\n background-image:\n linear-gradient(to top, var(--_gray-strong), transparent),\n linear-gradient(var(--_along), var(--_gray-surface), transparent),\n linear-gradient(var(--_gray-mark), var(--_gray-mark));\n border-radius: var(--_radius-control);\n color-scheme: light;\n cursor: crosshair;\n position: relative;\n touch-action: none;\n}\n\nhelix-headless-color-input::part(picker-grid-handle) {\n block-size: 1rem;\n border: 2px solid var(--_gray-surface);\n border-radius: 9999px;\n box-shadow: 0 0 0 1px var(--_gray-strong);\n box-sizing: border-box;\n inline-size: 1rem;\n inset-block-start: calc(100% - var(--color-picker-brightness, 100%));\n inset-inline-start: var(--color-picker-saturation, 100%);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-color-input:dir(rtl)::part(picker-grid-handle) {\n translate: 50% -50%;\n}\n\nhelix-headless-color-input::part(picker-grid-saturation),\nhelix-headless-color-input::part(picker-grid-brightness) {\n appearance: none;\n background: none;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-color-input::part(picker-controls) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-sample),\nhelix-headless-color-input::part(picker-swatch) {\n background-image:\n linear-gradient(\n var(--color-picker-swatch, transparent),\n var(--color-picker-swatch, transparent)\n ),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n filter: grayscale(1);\n padding: 0;\n}\n\nhelix-headless-color-input::part(picker-sample) {\n appearance: none;\n block-size: 36px;\n cursor: copy;\n flex: none;\n inline-size: 36px;\n}\n\nhelix-headless-color-input::part(picker-channels) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: 0.75rem;\n min-inline-size: 0;\n}\n\nhelix-headless-color-input::part(picker-channel-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-color-input::part(picker-channel-field) {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-color-input::part(picker-channel-control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background-color: var(--_gray-fill);\n block-size: 0.75rem;\n border-radius: 9999px;\n cursor: pointer;\n inline-size: 100%;\n margin: 0;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-moz-range-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.25rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-color-input::part(picker-footer) {\n display: flex;\n gap: 0.5rem;\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-actions) {\n display: flex;\n flex: 1 1 auto;\n}\n\nhelix-headless-color-input::part(picker-eyedropper),\nhelix-headless-color-input::part(picker-format) {\n display: flex;\n flex: 1 1 0;\n}\n\nhelix-headless-color-input::part(picker-format) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button),\nhelix-headless-color-input::part(picker-format-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 1rem;\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button):hover,\nhelix-headless-color-input::part(picker-format-button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n display: grid;\n grid-template-columns: 1.25rem;\n place-content: center;\n}\n\nhelix-headless-color-input::part(picker-format-button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-variant-caps: all-small-caps;\n}\n\nhelix-headless-color-input::part(picker-swatches) {\n border-block-start: 1px solid var(--_gray-line);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-block-start: 0.75rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-swatch) {\n block-size: 1.5rem;\n cursor: pointer;\n inline-size: 1.5rem;\n}\n\nhelix-headless-color-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-color-input::part(hint),\nhelix-headless-color-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-color-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-color-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-color-input::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-color-input::part(picker-grid):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(picker-channel-control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(picker-sample):focus-visible,\nhelix-headless-color-input::part(picker-eyedropper-button):focus-visible,\nhelix-headless-color-input::part(picker-format-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}","description":"The color input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-color-input\n hint=\"Use hex, rgb(), or hsl().\"\n label=\"Brand color\"\n name=\"brand\"\n></helix-headless-color-input>","imports":["import '@fusion.dev/helix-headless/color-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-color-input\n hint=\"Use hex, rgb(), or hsl().\"\n label=\"Brand color\"\n name=\"brand\"\n ></helix-headless-color-input>\n )\n}"}],"color-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-picker {\n --_along: to right;\n display: block;\n}\n\nhelix-headless-color-picker:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-color-picker::part(grid) {\n aspect-ratio: 1 / 0.7;\n background-image:\n linear-gradient(to top, var(--_gray-strong), transparent),\n linear-gradient(var(--_along), var(--_gray-surface), transparent),\n linear-gradient(var(--_gray-mark), var(--_gray-mark));\n border-radius: var(--_radius-control);\n color-scheme: light;\n cursor: crosshair;\n position: relative;\n touch-action: none;\n}\n\n/* Where the color is, drawn on the square rather than slotted into it. Both\n channels are already properties on the square, so the tier renders no box for\n this: a consumer who wants one writes it, and reads the same two numbers. */\nhelix-headless-color-picker::part(grid)::after {\n block-size: 1rem;\n border: 2px solid var(--_gray-surface);\n border-radius: 9999px;\n box-shadow: 0 0 0 1px var(--_gray-strong);\n box-sizing: border-box;\n content: \"\";\n inline-size: 1rem;\n inset-block-start: calc(100% - var(--color-picker-brightness, 100%));\n inset-inline-start: var(--color-picker-saturation, 100%);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-color-picker:dir(rtl)::part(grid)::after {\n translate: 50% -50%;\n}\n\nhelix-headless-color-picker::part(grid-saturation),\nhelix-headless-color-picker::part(grid-brightness) {\n appearance: none;\n background: none;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-color-picker::part(controls) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(sample),\nhelix-headless-color-picker::part(swatch) {\n background-image:\n linear-gradient(\n var(--color-picker-swatch, transparent),\n var(--color-picker-swatch, transparent)\n ),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n filter: grayscale(1);\n padding: 0;\n}\n\nhelix-headless-color-picker::part(sample) {\n appearance: none;\n block-size: 36px;\n cursor: copy;\n flex: none;\n inline-size: 36px;\n}\n\nhelix-headless-color-picker::part(channels) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: 0.75rem;\n min-inline-size: 0;\n}\n\nhelix-headless-color-picker::part(channel-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-color-picker::part(channel-field) {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-color-picker::part(channel-control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background-color: var(--_gray-fill);\n block-size: 0.75rem;\n border-radius: 9999px;\n cursor: pointer;\n inline-size: 100%;\n margin: 0;\n}\n\nhelix-headless-color-picker::part(channel-control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-moz-range-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.25rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-color-picker::part(footer) {\n display: flex;\n gap: 0.5rem;\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(value) {\n all: unset;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-color-picker::part(value):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-color-picker::part(actions) {\n display: flex;\n flex: 1 1 auto;\n}\n\nhelix-headless-color-picker::part(eyedropper),\nhelix-headless-color-picker::part(format) {\n display: flex;\n flex: 1 1 0;\n}\n\nhelix-headless-color-picker::part(format) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-color-picker::part(eyedropper-button),\nhelix-headless-color-picker::part(format-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 1rem;\n}\n\nhelix-headless-color-picker::part(eyedropper-button):hover,\nhelix-headless-color-picker::part(format-button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-color-picker::part(eyedropper-button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-color-picker::part(format-button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-color-picker::part(eyedropper-button) {\n display: grid;\n grid-template-columns: 1.25rem;\n place-content: center;\n}\n\nhelix-headless-color-picker::part(format-button) {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-variant-caps: all-small-caps;\n}\n\nhelix-headless-color-picker::part(swatches) {\n border-block-start: 1px solid var(--_gray-line);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-block-start: 0.75rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(swatch) {\n block-size: 1.5rem;\n cursor: pointer;\n inline-size: 1.5rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-picker::part(grid):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(channel-control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(sample):focus-visible,\nhelix-headless-color-picker::part(eyedropper-button):focus-visible,\nhelix-headless-color-picker::part(format-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(value):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}","description":"The color picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-color-picker default-value=\"#3366ff\"></helix-headless-color-picker>","imports":["import '@fusion.dev/helix-headless/color-picker'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-color-picker default-value=\"#3366ff\"></helix-headless-color-picker>\n}"}],"combobox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-combobox::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.5rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-combobox:not(:disabled)::part(field):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-combobox::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-combobox::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-combobox::part(indicator) {\n block-size: 1rem;\n fill: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-combobox:state(open)::part(indicator) {\n scale: 1 -1;\n}\n\nhelix-headless-combobox::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n max-block-size: var(--floating-available-block-size, none);\n min-inline-size: max-content;\n overflow: hidden;\n padding: 0;\n}\n\nhelix-headless-combobox::part(listbox) {\n border: 0;\n display: block;\n}\n\nhelix-headless-combobox::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-combobox::part(listbox-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow: auto;\n padding-block: 0.25rem;\n}\n\nhelix-headless-combobox::part(listbox-items):focus-visible {\n outline: none;\n}\n\nhelix-headless-combobox::part(listbox-empty) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-combobox::part(listbox-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox::part(tag-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-combobox::part(hint),\nhelix-headless-combobox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-combobox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-combobox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n background-color: transparent;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option::part(label) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-option::part(item-active),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-fill);\n}\n\n::highlight(helix-filter-match) {\n background-color: var(--_gray-line);\n}\n\nhelix-headless-option::part(item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}","description":"The same combobox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-combobox\n hint=\"Type to narrow the list\"\n label=\"Language\"\n name=\"language\"\n placeholder=\"Search languages\"\n>\n <helix-headless-option value=\"c\">C</helix-headless-option>\n <helix-headless-option value=\"go\">Go</helix-headless-option>\n <helix-headless-option value=\"js\">JavaScript</helix-headless-option>\n <helix-headless-option value=\"py\">Python</helix-headless-option>\n <helix-headless-option value=\"rb\">Ruby</helix-headless-option>\n <helix-headless-option value=\"rs\">Rust</helix-headless-option>\n <helix-headless-option value=\"ts\">TypeScript</helix-headless-option>\n <helix-headless-option value=\"zig\">Zig</helix-headless-option>\n</helix-headless-combobox>","imports":["import '@fusion.dev/helix-headless/combobox'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-combobox\n hint=\"Type to narrow the list\"\n label=\"Language\"\n name=\"language\"\n placeholder=\"Search languages\"\n >\n <helix-headless-option value=\"c\">C</helix-headless-option>\n <helix-headless-option value=\"go\">Go</helix-headless-option>\n <helix-headless-option value=\"js\">JavaScript</helix-headless-option>\n <helix-headless-option value=\"py\">Python</helix-headless-option>\n <helix-headless-option value=\"rb\">Ruby</helix-headless-option>\n <helix-headless-option value=\"rs\">Rust</helix-headless-option>\n <helix-headless-option value=\"ts\">TypeScript</helix-headless-option>\n <helix-headless-option value=\"zig\">Zig</helix-headless-option>\n </helix-headless-combobox>\n )\n}"}],"command":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-command::part(dialog-surface) {\n align-self: start;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n gap: 1rem;\n inline-size: min(40rem, calc(100vw - 4rem));\n margin-block-start: 20vh;\n padding: 0;\n}\n\nhelix-headless-command::part(dialog-surface):modal {\n display: flex;\n}\n\nhelix-headless-command::part(dialog-surface)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-command::part(listbox) {\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n display: block;\n padding: 0;\n}\n\nhelix-headless-command::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-command::part(listbox-search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n padding: 0.75rem;\n}\n\nhelix-headless-command::part(listbox-filter-icon) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-command::part(listbox-filter-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-command::part(listbox-search-field) {\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-command::part(listbox-search-field)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-command::part(listbox-items) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n max-block-size: 22rem;\n overflow-y: auto;\n padding-block: 0.5rem;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n background-color: transparent;\n border: 0;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n min-block-size: 2rem;\n padding: 0.75rem;\n user-select: none;\n}\n\nhelix-headless-option::part(label) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-option::part(item-active),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-fill);\n}\n\n::highlight(helix-filter-match) {\n background-color: var(--_gray-line);\n}\n\nhelix-headless-command::part(footer) {\n border-block-start: 1px solid var(--_gray-line);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-command p {\n margin: 0;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-command::part(listbox-search-field):focus-visible {\n outline: none;\n}\n\nhelix-headless-option::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The command palette on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-command\n default-open\n label=\"Commands\"\n>\n <helix-headless-option value=\"new\">New file</helix-headless-option>\n <helix-headless-option value=\"open\">Open folder</helix-headless-option>\n <helix-headless-option value=\"save\">Save all</helix-headless-option>\n <p slot=\"footer\">\n <helix-headless-kbd>Cmd</helix-headless-kbd>\n <helix-headless-kbd>K</helix-headless-kbd>\n to open,\n <helix-headless-kbd>Esc</helix-headless-kbd>\n to close\n </p>\n</helix-headless-command>","imports":["import '@fusion.dev/helix-headless/command'","import '@fusion.dev/helix-headless/kbd'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","min":320,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-command\n default-open\n label=\"Commands\"\n >\n <helix-headless-option value=\"new\">New file</helix-headless-option>\n <helix-headless-option value=\"open\">Open folder</helix-headless-option>\n <helix-headless-option value=\"save\">Save all</helix-headless-option>\n <p slot=\"footer\">\n <helix-headless-kbd>Cmd</helix-headless-kbd> <helix-headless-kbd>K</helix-headless-kbd> to\n open, <helix-headless-kbd>Esc</helix-headless-kbd> to close\n </p>\n </helix-headless-command>\n )\n}"}],"copy-button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-copy-button::part(button) {\n all: unset;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2.5rem;\n place-items: center;\n}\n\nhelix-headless-copy-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-copy-button::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-copy-button::part(tooltip-surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-copy-button::part(tooltip-surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-copy-button::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-copy-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same copy button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-copy-button value=\"bun add @fusion.dev/helix\"></helix-headless-copy-button>","imports":["import '@fusion.dev/helix-headless/copy-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-copy-button value=\"bun add @fusion.dev/helix\"></helix-headless-copy-button>\n}"}],"data-table":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-data-table {\n --_along: to right;\n /* Chromium 132 finds no keyframes from a ::part() rule and WebKit has no timeline-scope: both drive. */\n animation: data-table-edges linear;\n animation-range: 0% 101%;\n animation-timeline: --_data-table-scroll;\n display: block;\n timeline-scope: --_data-table-scroll;\n}\n\nhelix-headless-data-table:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-data-table::part(table) {\n animation: data-table-edges linear both;\n animation-timeline: scroll(self inline);\n display: grid;\n grid-template-columns: var(--data-table-template, minmax(0, 1fr));\n inline-size: 100%;\n mask-image: linear-gradient(\n var(--_along),\n transparent,\n #000 var(--_fade-start, 0rem),\n #000 calc(100% - var(--_fade-end, 0rem)),\n transparent\n );\n overflow-x: auto;\n scroll-timeline: --_data-table-scroll inline;\n}\n\n@keyframes data-table-edges {\n 0% {\n --_fade-end: 2rem;\n --_fade-start: 0rem;\n }\n\n 5%,\n 95% {\n --_fade-end: 2rem;\n --_fade-start: 2rem;\n }\n\n 100% {\n --_fade-end: 0rem;\n --_fade-start: 2rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-data-table,\n helix-headless-data-table::part(table) {\n animation: none;\n }\n}\n\nhelix-headless-data-table::part(head),\nhelix-headless-data-table::part(row) {\n display: contents;\n}\n\n/* The column's edge, which the element publishes as `--data-table-cell-align` and\n leaves to whoever draws the cell, the same hook a `helix-headless-table`'s\n cells read under `--table-cell-align`, each family under its own name. Unset\n under a column that names no edge, so the declaration drops\n out and the cell keeps the table's own alignment. */\nhelix-headless-data-table::part(cell) {\n border-block-start: 1px solid var(--_gray-line);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n line-height: 1.5;\n padding-block: 0.75rem;\n padding-inline: 0 1rem;\n text-align: var(--data-table-cell-align);\n}\n\nhelix-headless-table-column:not([hidden]) {\n display: contents;\n}\n\nhelix-headless-table-column::part(column) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 600;\n min-block-size: 3rem;\n min-inline-size: 0;\n padding-inline-end: 1rem;\n}\n\nhelix-headless-table-column::part(sort) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n flex: 1;\n gap: 0.25rem;\n min-inline-size: 0;\n}\n\nhelix-headless-table-column[text-align=\"end\"]::part(column),\nhelix-headless-table-column[text-align=\"end\"]::part(sort) {\n justify-content: flex-end;\n}\n\nhelix-headless-data-table::part(empty),\nhelix-headless-data-table::part(loading) {\n grid-column: 1 / -1;\n}\n\nhelix-headless-data-table::part(footer) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-data-table::part(pagination) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.25rem;\n margin-inline-start: auto;\n}\n\nhelix-headless-data-table::part(pagination-list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-data-table::part(pagination-item) {\n display: inline-flex;\n}\n\nhelix-headless-data-table::part(pagination-page),\nhelix-headless-data-table::part(pagination-gap),\nhelix-headless-data-table::part(pagination-previous),\nhelix-headless-data-table::part(pagination-next) {\n align-items: center;\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n justify-content: center;\n min-inline-size: 2rem;\n padding: 0 0.25rem;\n}\n\nhelix-headless-data-table::part(pagination-page):hover,\nhelix-headless-data-table::part(pagination-previous):hover,\nhelix-headless-data-table::part(pagination-next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-data-table::part(pagination-page-current),\nhelix-headless-data-table::part(pagination-page-current):hover {\n background-color: var(--_gray-subtle);\n border-color: var(--_gray-edge);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-data-table::part(pagination-gap) {\n user-select: none;\n}\n\nhelix-headless-data-table::part(pagination-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-data-table::part(pagination-previous):disabled,\nhelix-headless-data-table::part(pagination-next):disabled {\n cursor: default;\n opacity: 0.5;\n}\n\nhelix-headless-table-column::part(sort):focus-visible,\nhelix-headless-data-table::part(pagination-page):focus-visible,\nhelix-headless-data-table::part(pagination-gap):focus-visible,\nhelix-headless-data-table::part(pagination-previous):focus-visible,\nhelix-headless-data-table::part(pagination-next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The data table on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-data-table\n default-sort=\"name:asc\"\n id=\"objects\"\n label=\"Files\"\n page-size=\"4\"\n>\n <helix-headless-table-column\n field=\"name\"\n sortable\n width=\"minmax(9rem, 14rem)\"\n >Name</helix-headless-table-column>\n <helix-headless-table-column\n field=\"region\"\n sortable\n >Region</helix-headless-table-column>\n <helix-headless-table-column\n field=\"size\"\n sortable\n text-align=\"end\"\n width=\"6rem\"\n >Size</helix-headless-table-column>\n</helix-headless-data-table>\n\n<script>\n const objects = document.getElementById('objects')\n\n objects.rows = [\n { name: 'archive.tar.gz', region: 'us-east-1', size: 4_823_100 },\n { name: 'backup.sql', region: 'eu-central-1', size: 918_400 },\n { name: 'index.json', region: 'us-east-1', size: 2_100 },\n { name: 'manifest.yaml', region: 'ap-south-1', size: 812 },\n { name: 'profile.bin', region: 'eu-west-2', size: 61_440 },\n { name: 'report.pdf', region: 'us-west-1', size: 1_204_000 },\n { name: 'snapshot.img', region: 'eu-central-1', size: 9_800_000 },\n { name: 'trace.log', region: 'ap-south-1', size: 44_900 },\n ]\n\n /* The cell shows a readable size, and `compare` sorts the column by the\n number. Each value gets its own unit, so a small file does not read \"0 MB\". */\n const units = ['B', 'kB', 'MB', 'GB']\n\n const bytes = (value) => {\n const step = Math.min(units.length - 1, Math.floor(Math.log10(Math.max(value, 1)) / 3))\n const amount = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: step === 0 ? 0 : 1,\n }).format(value / 1000 ** step)\n return `${amount} ${units[step]}`\n }\n\n const size = objects.querySelector('[field=\"size\"]')\n size.cell = (row) => bytes(row.size)\n size.compare = (row) => row.size\n</script>","imports":["import '@fusion.dev/helix-headless/data-table'","import '@fusion.dev/helix-headless/table'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\n/* The cell shows a readable size, and `compare` sorts the column by the\n number. Each value gets its own unit, so a small file does not read \"0 MB\". */\nconst units = ['B', 'kB', 'MB', 'GB']\n\nconst bytes = (value: number): string => {\n const step = Math.min(units.length - 1, Math.floor(Math.log10(Math.max(value, 1)) / 3))\n const amount = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: step === 0 ? 0 : 1,\n }).format(value / 1000 ** step)\n return `${amount} ${units[step]}`\n}\n\nconst rows = [\n { name: 'archive.tar.gz', region: 'us-east-1', size: 4_823_100 },\n { name: 'backup.sql', region: 'eu-central-1', size: 918_400 },\n { name: 'index.json', region: 'us-east-1', size: 2_100 },\n { name: 'manifest.yaml', region: 'ap-south-1', size: 812 },\n { name: 'profile.bin', region: 'eu-west-2', size: 61_440 },\n { name: 'report.pdf', region: 'us-west-1', size: 1_204_000 },\n { name: 'snapshot.img', region: 'eu-central-1', size: 9_800_000 },\n { name: 'trace.log', region: 'ap-south-1', size: 44_900 },\n]\n\nexport function Example() {\n return (\n <helix-headless-data-table\n default-sort=\"name:asc\"\n label=\"Files\"\n page-size=\"4\"\n rows={rows}\n >\n <helix-headless-table-column\n field=\"name\"\n sortable\n width=\"minmax(9rem, 14rem)\"\n >\n Name\n </helix-headless-table-column>\n <helix-headless-table-column\n field=\"region\"\n sortable\n >\n Region\n </helix-headless-table-column>\n <helix-headless-table-column\n cell={(row) => bytes(row.size as number)}\n compare={(row) => row.size}\n field=\"size\"\n sortable\n text-align=\"end\"\n width=\"6rem\"\n >\n Size\n </helix-headless-table-column>\n </helix-headless-data-table>\n )\n}"}],"date-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-date-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding-block: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-date-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-date-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-date-input::part(trigger) {\n all: unset;\n block-size: 1.25rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-date-input::part(trigger):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-input::part(trigger-icon) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-date-input::part(date) {\n flex: none;\n}\n\nhelix-headless-date-input::part(date-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: max-content;\n inset: auto;\n margin: 0;\n padding: 0.75rem;\n}\n\nhelix-headless-date-input::part(picker) {\n display: inline-block;\n}\n\nhelix-headless-date-input::part(picker-months) {\n align-items: start;\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(var(--date-picker-column-count, 1), max-content);\n justify-content: start;\n}\n\nhelix-headless-date-input::part(picker-header) {\n align-items: center;\n display: grid;\n gap: 0.25rem;\n grid-template-columns: 1.875rem 1fr 1.875rem;\n margin-block-end: 1.5rem;\n}\n\nhelix-headless-date-input::part(picker-heading) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n grid-column: 2;\n text-align: center;\n}\n\nhelix-headless-date-input::part(picker-previous),\nhelix-headless-date-input::part(picker-next) {\n all: unset;\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-previous) {\n grid-column: 1;\n}\n\nhelix-headless-date-input::part(picker-next) {\n grid-column: 3;\n}\n\nhelix-headless-date-input::part(picker-previous):hover,\nhelix-headless-date-input::part(picker-next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-input::part(picker-previous-mark),\nhelix-headless-date-input::part(picker-next-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input::part(picker-week) {\n display: grid;\n grid-template-columns: repeat(7, 2.5rem);\n}\n\nhelix-headless-date-input::part(picker-weekday) {\n align-items: center;\n block-size: 2.5rem;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n padding-block-end: 1.25rem;\n}\n\nhelix-headless-date-input::part(picker-cell) {\n align-items: center;\n block-size: 2.25rem;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-day) {\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.8125rem;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-day):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-date-input::part(picker-day-outside),\nhelix-headless-date-input::part(picker-day-outside):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n}\n\nhelix-headless-date-input::part(picker-day-disabled),\nhelix-headless-date-input::part(picker-day-disabled):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-date-input::part(picker-day-today) {\n box-shadow: inset 0 0 0 1px var(--_gray-line);\n}\n\nhelix-headless-date-input::part(picker-cell-range-start),\nhelix-headless-date-input::part(picker-cell-range-middle),\nhelix-headless-date-input::part(picker-cell-range-end) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-date-input::part(picker-cell-range-start) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-date-input::part(picker-cell-range-end) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-date-input::part(picker-day-selected),\nhelix-headless-date-input::part(picker-day-selected):hover {\n background-color: var(--_gray-strong);\n box-shadow: 0 0 0 0.1875rem var(--_gray-fill);\n color: var(--_gray-surface);\n}\n\nhelix-headless-date-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-date-input::part(hint),\nhelix-headless-date-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-date-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-date-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-date-input::part(trigger):focus-visible,\nhelix-headless-date-input::part(picker-previous):focus-visible,\nhelix-headless-date-input::part(picker-next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-date-input::part(picker-cell):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The date input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-date-input\n hint=\"Any weekday works\"\n label=\"Starts\"\n name=\"starts\"\n></helix-headless-date-input>","imports":["import '@fusion.dev/helix-headless/date-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-date-input\n hint=\"Any weekday works\"\n label=\"Starts\"\n name=\"starts\"\n ></helix-headless-date-input>\n )\n}"}],"date-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker {\n display: inline-block;\n}\n\nhelix-headless-date-picker::part(months) {\n align-items: start;\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(var(--date-picker-column-count, 1), max-content);\n justify-content: start;\n}\n\nhelix-headless-date-picker::part(header) {\n align-items: center;\n display: grid;\n gap: 0.25rem;\n grid-template-columns: 1.875rem 1fr 1.875rem;\n margin-block-end: 1.5rem;\n}\n\nhelix-headless-date-picker::part(heading) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n grid-column: 2;\n text-align: center;\n}\n\nhelix-headless-date-picker::part(previous),\nhelix-headless-date-picker::part(next) {\n all: unset;\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(previous) {\n grid-column: 1;\n}\n\nhelix-headless-date-picker::part(next) {\n grid-column: 3;\n}\n\nhelix-headless-date-picker::part(previous):hover,\nhelix-headless-date-picker::part(next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-picker::part(previous-mark),\nhelix-headless-date-picker::part(next-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker::part(week) {\n display: grid;\n grid-template-columns: repeat(7, 2.5rem);\n}\n\nhelix-headless-date-picker::part(weekday) {\n align-items: center;\n block-size: 2.5rem;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n padding-block-end: 1.25rem;\n}\n\nhelix-headless-date-picker::part(cell) {\n align-items: center;\n block-size: 2.25rem;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(day) {\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.8125rem;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(day):hover {\n background-color: var(--_gray-subtle);\n}\n\n/* The muted ink and not the mark's: a day outside the month is still a number\n a reader reads, and the mark's gray measured 3.25:1 on white. */\nhelix-headless-date-picker::part(day-outside),\nhelix-headless-date-picker::part(day-outside):hover {\n background-color: transparent;\n color: var(--_gray-muted);\n}\n\nhelix-headless-date-picker::part(day-disabled),\nhelix-headless-date-picker::part(day-disabled):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-date-picker::part(day-today) {\n box-shadow: inset 0 0 0 1px var(--_gray-line);\n}\n\nhelix-headless-date-picker::part(cell-range-start),\nhelix-headless-date-picker::part(cell-range-middle),\nhelix-headless-date-picker::part(cell-range-end) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-date-picker::part(cell-range-start) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-date-picker::part(cell-range-end) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-date-picker::part(day-selected),\nhelix-headless-date-picker::part(day-selected):hover {\n background-color: var(--_gray-strong);\n box-shadow: 0 0 0 0.1875rem var(--_gray-fill);\n color: var(--_gray-surface);\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker::part(cell):focus-visible,\nhelix-headless-date-picker::part(previous):focus-visible,\nhelix-headless-date-picker::part(next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The date picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-date-picker\n default-month=\"2026-08\"\n default-value=\"2026-08-14\"\n label=\"Delivery date\"\n></helix-headless-date-picker>","imports":["import '@fusion.dev/helix-headless/date-picker'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-date-picker\n default-month=\"2026-08\"\n default-value=\"2026-08-14\"\n label=\"Delivery date\"\n ></helix-headless-date-picker>\n )\n}"}],"description-list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-description-list {\n container-type: inline-size;\n display: block;\n line-height: 1.5;\n}\n\nhelix-headless-description-list::part(list) {\n column-gap: 1.5rem;\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n margin: 0;\n row-gap: 0.75rem;\n}\n\n@container (inline-size < 22rem) {\n helix-headless-description-list::part(list) {\n grid-template-columns: minmax(0, 1fr);\n row-gap: 1rem;\n }\n}\n\nhelix-headless-description-list-item {\n align-items: baseline;\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n row-gap: 0.25rem;\n}\n\nhelix-headless-description-list-item::part(label) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-weight: 500;\n margin: 0;\n}\n\nhelix-headless-description-list-item::part(value) {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n margin: 0;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n}\n\nhelix-headless-tag {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}","description":"A details panel on the headless tier, with every style written by hand and the labels in one column.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-description-list direction=\"row\">\n <helix-headless-description-list-item label=\"Owner\">Ada Okonjo</helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Status\">\n <helix-headless-tag>Running</helix-headless-tag>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Region\">us-east-1</helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Created\">\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Commit\">4f2a9c1e8b7d6a5f4e3d2c1b0a9f8e7d6c5b4a3f</helix-headless-description-list-item>\n</helix-headless-description-list>","imports":["import '@fusion.dev/helix-headless/description-list'","import '@fusion.dev/helix-headless/format-date'","import '@fusion.dev/helix-headless/tag'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-description-list direction=\"row\">\n <helix-headless-description-list-item label=\"Owner\">\n Ada Okonjo\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Status\">\n <helix-headless-tag>Running</helix-headless-tag>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Region\">\n us-east-1\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Created\">\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Commit\">\n 4f2a9c1e8b7d6a5f4e3d2c1b0a9f8e7d6c5b4a3f\n </helix-headless-description-list-item>\n </helix-headless-description-list>\n )\n}"}],"device-screen":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_radius-control: 0.25rem;\n}\n\nhelix-headless-device-screen::part(region) {\n display: grid;\n gap: 0.5rem;\n justify-items: center;\n}\n\nhelix-headless-device-screen::part(controls) {\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-device-screen::part(home-button),\nhelix-headless-device-screen::part(screenshot-button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-device-screen::part(bezel) {\n background-color: #1c1c1e;\n border-radius: 2.75rem;\n padding: 0.75rem;\n}\n\nhelix-headless-device-screen::part(screen) {\n aspect-ratio: var(--device-screen-ratio);\n background-color: #000;\n border-radius: 2rem;\n inline-size: 15rem;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-device-screen::part(picture) {\n inset: 0;\n position: absolute;\n}\n\nhelix-headless-device-screen::part(touch) {\n border: 2px solid #fff;\n border-radius: 50%;\n inline-size: 2rem;\n aspect-ratio: 1;\n left: var(--device-screen-touch-x);\n position: absolute;\n top: var(--device-screen-touch-y);\n translate: -50% -50%;\n}\n\n.stand-in {\n align-items: center;\n background-image: linear-gradient(165deg, #2d3a8c, #6b2d6e);\n block-size: 100%;\n color: #fff;\n display: flex;\n flex-direction: column;\n padding-block-start: 22%;\n}\n\n.date {\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.time {\n font-size: 3.5rem;\n font-weight: 600;\n line-height: 1;\n}","description":"The device screen on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-device-screen\n label=\"iPhone 17 Pro\"\n screen-height=\"874\"\n screen-width=\"402\"\n>\n <!-- Put your stream here: a video, an image, or a canvas. -->\n <div class=\"stand-in\">\n <span class=\"date\">Saturday, October 10</span>\n <span class=\"time\">9:41</span>\n </div>\n</helix-headless-device-screen>","imports":["import '@fusion.dev/helix-headless/device-screen'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-device-screen\n label=\"iPhone 17 Pro\"\n screen-height=\"874\"\n screen-width=\"402\"\n >\n {/* Put your stream here: a video, an image, or a canvas. */}\n <div className=\"stand-in\">\n <span className=\"date\">Saturday, October 10</span>\n <span className=\"time\">9:41</span>\n </div>\n </helix-headless-device-screen>\n )\n}"}],"dialog":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-dialog::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n gap: 1rem;\n inline-size: min(28rem, calc(100vw - 2rem));\n max-block-size: calc(100dvh - 2rem);\n overflow-y: auto;\n padding: 1.5rem;\n}\n\nhelix-headless-dialog::part(surface):modal {\n display: flex;\n}\n\n@media (width < 30rem) {\n helix-headless-dialog::part(surface) {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n inline-size: 100vw;\n margin-block: auto 0;\n max-block-size: calc(100dvh - 4rem);\n max-inline-size: 100vw;\n }\n}\n\nhelix-headless-dialog::part(surface)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-dialog h2 {\n font-size: 1.5rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.2;\n margin: 0;\n}\n\nhelix-headless-dialog p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-dialog [slot=\"footer\"] {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(helix-headless-dialog *)::part(button),\nhelix-headless-dialog [slot=\"footer\"] > helix-headless-button:first-child::part(button) {\n background-color: var(--_gray-strong);\n border-color: transparent;\n color: var(--_gray-surface);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The dialog on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"base-confirm\"\n>Delete project</helix-headless-button>\n\n<!-- The dialog starts open, so the preview shows it. -->\n<helix-headless-dialog\n id=\"base-confirm\"\n label=\"Delete project\"\n open\n>\n <h2 slot=\"header\">Delete project</h2>\n <p>This removes the project and everything in it. It cannot be undone.</p>\n <div slot=\"footer\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >Delete project</helix-headless-button>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >Cancel</helix-headless-button>\n </div>\n</helix-headless-dialog>","imports":["import '@fusion.dev/helix-headless/dialog'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"base-confirm\"\n >\n Delete project\n </helix-headless-button>\n\n {/* The dialog starts open, so the preview shows it. */}\n <helix-headless-dialog\n id=\"base-confirm\"\n label=\"Delete project\"\n open\n >\n <h2 slot=\"header\">Delete project</h2>\n <p>This removes the project and everything in it. It cannot be undone.</p>\n <div slot=\"footer\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >\n Delete project\n </helix-headless-button>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >\n Cancel\n </helix-headless-button>\n </div>\n </helix-headless-dialog>\n </>\n )\n}"}],"divider":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-divider {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-divider::part(line) {\n background-color: var(--_gray-line);\n block-size: 1px;\n flex: 1 1 0;\n}\n\nhelix-headless-divider::part(content) {\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n font-size: 0.75rem;\n line-height: 1.2;\n white-space: nowrap;\n}\n\nhelix-headless-divider[orientation=\"vertical\"] {\n align-self: stretch;\n display: inline-flex;\n flex-direction: column;\n}\n\nhelix-headless-divider[orientation=\"vertical\"]::part(line) {\n block-size: auto;\n inline-size: 1px;\n min-block-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The same divider on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <p>\n Your workspace has three projects and five members. Each project keeps its\n own files and settings.\n </p>\n <helix-headless-divider></helix-headless-divider>\n <p>\n Members can open every project in the workspace. Only owners can invite\n people or change billing.\n </p>\n</div>","imports":["import '@fusion.dev/helix-headless/divider'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <p>\n Your workspace has three projects and five members. Each project keeps its own files and\n settings.\n </p>\n <helix-headless-divider></helix-headless-divider>\n <p>\n Members can open every project in the workspace. Only owners can invite people or change\n billing.\n </p>\n </div>\n )\n}"}],"donut-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart {\n display: grid;\n inline-size: 14rem;\n place-items: center;\n position: relative;\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-muted);\n --chart-series-3: var(--_gray-mark);\n --chart-series-4: var(--_gray-line);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-donut-chart::part(plot) {\n grid-area: 1 / 1;\n inline-size: 100%;\n position: relative;\n}\n\nhelix-headless-donut-chart::part(track),\nhelix-headless-donut-chart::part(segment) {\n transform: rotate(-90deg);\n transform-box: fill-box;\n transform-origin: center;\n}\n\nhelix-headless-donut-chart::part(track) {\n stroke: var(--_gray-subtle);\n}\n\nhelix-headless-donut-chart::part(segment) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: butt;\n stroke-width: var(--donut-chart-stroke);\n}\n\nhelix-headless-donut-chart::part(center) {\n inset-block-start: 50%;\n inset-inline-start: 50%;\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-donut-chart:dir(rtl)::part(center) {\n translate: 50% -50%;\n}\n\nhelix-headless-donut-chart::part(segment-active) {\n stroke-width: calc(var(--donut-chart-stroke) * 1.18);\n}\n\nhelix-headless-donut-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.5;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-donut-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-donut-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-donut-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-donut-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series, transparent);\n block-size: 0.5em;\n border-radius: 9999px;\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--_gray-surface) 60%, transparent);\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-donut-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-donut-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-donut-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-donut-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-icon::part(svg) {\n display: block;\n inline-size: 100%;\n}\n\nhelix-headless-donut-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same donut chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Sessions by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Source</th>\n <th scope=\"col\">Share</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Direct</th>\n <td data-value=\"4200\">4,200</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"3100\">3,100</td>\n </tr>\n <tr>\n <th scope=\"row\">Referral</th>\n <td data-value=\"1800\">1,800</td>\n </tr>\n <tr>\n <th scope=\"row\">Social</th>\n <td data-value=\"900\">900</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-donut-chart for=\"traffic\"></helix-headless-donut-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/donut-chart'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Sessions by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Source</th>\n <th scope=\"col\">Share</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Direct</th>\n <td data-value=\"4200\">4,200</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"3100\">3,100</td>\n </tr>\n <tr>\n <th scope=\"row\">Referral</th>\n <td data-value=\"1800\">1,800</td>\n </tr>\n <tr>\n <th scope=\"row\">Social</th>\n <td data-value=\"900\">900</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-donut-chart for=\"traffic\"></helix-headless-donut-chart>\n </div>\n )\n}"}],"drawer":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.stack p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-drawer::part(panel) {\n background-color: var(--_gray-surface);\n border: 0;\n border-end-start-radius: var(--_radius-control);\n border-inline-start: 1px solid var(--_gray-edge);\n border-start-start-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n padding: 1.5rem;\n padding-block-start: 3rem;\n}\n\nhelix-headless-drawer::part(panel):modal {\n display: flex;\n}\n\nhelix-headless-drawer[placement=\"end\"]::part(panel) {\n block-size: 100dvh;\n inline-size: min(20rem, 100%);\n margin-block: 0;\n margin-inline: auto 0;\n max-block-size: none;\n}\n\nhelix-headless-drawer::part(panel)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-drawer::part(header) {\n flex: none;\n}\n\nhelix-headless-drawer > [slot=\"header\"] {\n display: block;\n font-size: 1.125rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.2;\n margin-block-end: 1rem;\n}\n\nhelix-headless-drawer::part(content) {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The drawer on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"panel\"\n>\n Open drawer\n</helix-headless-button>\n\n<helix-headless-drawer\n id=\"panel\"\n label=\"Project details\"\n placement=\"end\"\n>\n <span slot=\"header\">Project details</span>\n <div class=\"stack\">\n <p>\n See who owns the project, who can edit it, and when it last changed.\n </p>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"panel\"\n >\n Close\n </helix-headless-button>\n </div>\n</helix-headless-drawer>","imports":["import '@fusion.dev/helix-headless/drawer'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"panel\"\n >\n Open drawer\n </helix-headless-button>\n\n <helix-headless-drawer\n id=\"panel\"\n label=\"Project details\"\n placement=\"end\"\n >\n <span slot=\"header\">Project details</span>\n <div className=\"stack\">\n <p>See who owns the project, who can edit it, and when it last changed.</p>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"panel\"\n >\n Close\n </helix-headless-button>\n </div>\n </helix-headless-drawer>\n </>\n )\n}"}],"drilldown":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.panel {\n max-inline-size: 18rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-drilldown {\n background-color: var(--_gray-surface);\n block-size: fit-content;\n display: block;\n overflow: hidden;\n}\n\nhelix-headless-drilldown::part(header) {\n align-items: center;\n block-size: 2.5rem;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.25rem;\n}\n\nhelix-headless-drilldown::part(back) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-drilldown::part(back):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-drilldown::part(back-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-drilldown::part(title) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-drilldown::part(page) {\n padding-block: 0.25rem;\n}\n\nhelix-headless-drilldown-item {\n display: block;\n}\n\nhelix-headless-drilldown-item::part(item) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inline-size: 100%;\n padding-inline: 0.75rem;\n user-select: none;\n}\n\nhelix-headless-drilldown-item::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-drilldown-item::part(label) {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-drilldown-item::part(mark) {\n block-size: 1rem;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-drilldown-item::part(item):focus-visible,\nhelix-headless-drilldown::part(back):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The same drilldown on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-drilldown\n class=\"panel\"\n label=\"Settings\"\n>\n <helix-headless-drilldown-item value=\"appearance\">\n Appearance\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"theme\"\n >Theme</helix-headless-drilldown-item>\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"density\"\n >Density</helix-headless-drilldown-item>\n </helix-headless-drilldown-item>\n <helix-headless-drilldown-item value=\"editor\">\n Editor\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"tabs\"\n >Tab size</helix-headless-drilldown-item>\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"wrap\"\n >Word wrap</helix-headless-drilldown-item>\n </helix-headless-drilldown-item>\n <helix-headless-drilldown-item value=\"about\">About</helix-headless-drilldown-item>\n</helix-headless-drilldown>","imports":["import '@fusion.dev/helix-headless/drilldown'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-drilldown\n className=\"panel\"\n label=\"Settings\"\n >\n {' '}\n <helix-headless-drilldown-item value=\"appearance\">\n {' '}\n Appearance{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"theme\"\n >\n Theme\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"density\"\n >\n Density\n </helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item value=\"editor\">\n {' '}\n Editor{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"tabs\"\n >\n Tab size\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"wrap\"\n >\n Word wrap\n </helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item value=\"about\">About</helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown>\n )\n}"}],"empty":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-empty {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n gap: 0.75rem;\n line-height: 1.5;\n padding: 3rem;\n text-align: center;\n}\n\nhelix-headless-empty > helix-headless-icon[slot=\"icon\"] {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n inline-size: 1.5rem;\n}\n\nhelix-headless-empty > [slot=\"heading\"] {\n color: var(--_gray-strong);\n font-size: 1.125rem;\n font-weight: 600;\n margin: 0;\n}\n\nhelix-headless-empty > [slot=\"actions\"] {\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-empty > helix-headless-icon[slot=\"icon\"]::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n min-inline-size: 12.5rem;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-empty::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same empty state on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-empty>\n <helix-headless-icon\n name=\"folder-open\"\n slot=\"icon\"\n ></helix-headless-icon>\n <h3 slot=\"heading\">No projects yet</h3>\n Anything you create will show up here.\n <helix-headless-button slot=\"actions\">New project</helix-headless-button>\n</helix-headless-empty>","imports":["import '@fusion.dev/helix-headless/empty'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","min":320,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-empty>\n <helix-headless-icon\n name=\"folder-open\"\n slot=\"icon\"\n ></helix-headless-icon>\n <h3 slot=\"heading\">No projects yet</h3>\n Anything you create will show up here.\n <helix-headless-button slot=\"actions\">New project</helix-headless-button>\n </helix-headless-empty>\n )\n}"}],"file-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px dashed var(--_gray-line);\n border-radius: var(--_radius-control);\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n padding: 1rem;\n position: relative;\n}\n\nhelix-headless-file-input::part(control) {\n cursor: pointer;\n inset: 0;\n opacity: 0;\n position: absolute;\n}\n\nhelix-headless-file-input::part(trigger) {\n align-items: center;\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.25rem;\n pointer-events: none;\n text-align: center;\n}\n\nhelix-headless-file-input > helix-headless-icon[slot=\"trigger\"] {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n inline-size: 1.5rem;\n}\n\nhelix-headless-file-input::part(list) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n list-style: none;\n margin-block: 0.25rem 0;\n padding: 0;\n}\n\nhelix-headless-file-input::part(file) {\n align-items: center;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n gap: 0.75rem;\n padding-block: 0.5rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-file-input::part(detail) {\n align-items: center;\n column-gap: 0.75rem;\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n min-inline-size: 0;\n row-gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(name) {\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n min-inline-size: min(100%, 16ch);\n overflow-wrap: anywhere;\n}\n\nhelix-headless-file-input::part(meta) {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(size),\nhelix-headless-file-input::part(kind) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}\n\nhelix-headless-file-input::part(size) {\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-file-input::part(remove) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n inline-size: 1.5rem;\n justify-content: center;\n padding: 0.25rem;\n}\n\nhelix-headless-file-input::part(remove):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-file-input::part(kind-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input::part(size-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-file-input::part(hint),\nhelix-headless-file-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-file-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-file-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input > helix-headless-icon[slot=\"trigger\"]::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-file-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-file-input::part(remove):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The file input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-file-input\n hint=\"PNG or JPG, up to 10MB each\"\n label=\"Attachments\"\n multiple\n name=\"attachments\"\n>\n <helix-headless-icon\n name=\"upload-simple\"\n slot=\"trigger\"\n ></helix-headless-icon>\n <span slot=\"trigger\">Choose files, or drop them here</span>\n</helix-headless-file-input>","imports":["import '@fusion.dev/helix-headless/file-input'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-file-input\n hint=\"PNG or JPG, up to 10MB each\"\n label=\"Attachments\"\n multiple\n name=\"attachments\"\n >\n <helix-headless-icon\n name=\"upload-simple\"\n slot=\"trigger\"\n ></helix-headless-icon>\n <span slot=\"trigger\">Choose files, or drop them here</span>\n </helix-headless-file-input>\n )\n}"}],"filter-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-filter-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-filter-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-filter-input::part(tags) {\n display: contents;\n}\n\nhelix-headless-filter-input::part(rest) {\n color: var(--_gray-muted);\n flex: none;\n font-size: 0.8125rem;\n}\n\nhelix-headless-filter-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 6ch;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-filter-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-filter-input::part(clear) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-filter-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-filter-input::part(hint),\nhelix-headless-filter-input::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-filter-chip {\n align-items: center;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n flex: none;\n font-size: 0.8125rem;\n line-height: 1.5;\n max-inline-size: 100%;\n min-block-size: 1.75rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-filter-chip::part(field) {\n color: var(--_gray-muted);\n padding-inline-end: 0.25rem;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(operator) {\n color: var(--_gray-muted);\n padding-inline-end: 0.25rem;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(values) {\n font-weight: 500;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(dismiss) {\n all: unset;\n block-size: 1rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: grid;\n inline-size: 1rem;\n margin-inline-start: 0.25rem;\n place-items: center;\n}\n\nhelix-headless-filter-input::part(clear):hover,\nhelix-headless-filter-chip::part(dismiss):hover {\n background-color: var(--_gray-fill);\n color: var(--_gray-strong);\n}\n\nhelix-headless-filter-chip::part(dismiss-mark) {\n block-size: 0.85em;\n inline-size: 0.85em;\n}\n\nhelix-headless-filter-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-filter-input::part(clear):focus-visible,\nhelix-headless-filter-chip::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The filter field on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-filter-input\n label=\"Filter rows\"\n placeholder=\"Add a filter\"\n>\n <helix-headless-filter-chip\n dismissible\n label=\"Owner\"\n name=\"owner\"\n slot=\"tags\"\n >Ada</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Env\"\n name=\"env\"\n slot=\"tags\"\n >Staging</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Status\"\n name=\"status\"\n slot=\"tags\"\n >Open</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Area\"\n name=\"area\"\n slot=\"tags\"\n >Billing</helix-headless-filter-chip>\n</helix-headless-filter-input>","imports":["import '@fusion.dev/helix-headless/filter-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <helix-headless-filter-input\n label=\"Filter rows\"\n placeholder=\"Add a filter\"\n >\n <helix-headless-filter-chip\n dismissible\n label=\"Owner\"\n name=\"owner\"\n slot=\"tags\"\n >\n Ada\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Env\"\n name=\"env\"\n slot=\"tags\"\n >\n Staging\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Status\"\n name=\"status\"\n slot=\"tags\"\n >\n Open\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Area\"\n name=\"area\"\n slot=\"tags\"\n >\n Billing\n </helix-headless-filter-chip>\n </helix-headless-filter-input>\n )\n}"}],"format-date":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\ndl {\n color: var(--_gray-strong);\n column-gap: 0.25rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: max-content minmax(0, 1fr);\n line-height: 1.5;\n margin: 0;\n row-gap: 0.75rem;\n}\n\ndd {\n margin: 0;\n}","description":"The formatted timestamps on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<dl>\n <dt>Elapsed:</dt>\n <dd>\n <helix-headless-format-date\n class=\"stamp\"\n elapsed\n ></helix-headless-format-date>\n </dd>\n\n <dt>Date:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Time:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"UTC\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Weekday:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"long\"\n time-zone=\"UTC\"\n weekday=\"long\"\n ></helix-headless-format-date>\n </dd>\n</dl>\n\n<script>\n /* The elapsed time is set from script to 42 minutes ago, so it always reads\n \"42m\". The other dates are fixed and name a `time-zone`, so they look the\n same wherever the preview renders. */\n const at = new Date(Date.now() - 42 * 60_000).toISOString()\n for (const stamp of document.querySelectorAll('.stamp')) {\n stamp.date = at\n }\n</script>","imports":["import '@fusion.dev/helix-headless/format-date'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import { useEffect, useState } from 'react'\nimport './preview.css'\n\nconst AGO = 42 * 60_000\n\n/* The dates are fixed and name a `time-zone`, so they look the same wherever\n the preview renders. */\nconst FIXED = '2026-03-14T15:09:00.000Z'\n\nexport function Example() {\n const [at, setAt] = useState('')\n\n useEffect(() => {\n setAt(new Date(Date.now() - AGO).toISOString())\n }, [])\n\n return (\n <dl>\n <dt>Elapsed:</dt>\n <dd>\n <helix-headless-format-date\n date={at}\n elapsed\n ></helix-headless-format-date>\n </dd>\n\n <dt>Date:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Time:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"UTC\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Weekday:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n day=\"numeric\"\n month=\"long\"\n time-zone=\"UTC\"\n weekday=\"long\"\n ></helix-headless-format-date>\n </dd>\n </dl>\n )\n}"}],"graph":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_accent-subtle: light-dark(#e6efff, #1d2a44);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n}\n\nhelix-headless-graph::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 24rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n container-type: inline-size;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n}\n\nhelix-headless-graph::part(body) {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 16rem;\n min-block-size: 0;\n}\n\n@container (inline-size < 36rem) {\n helix-headless-graph::part(body) {\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: 3fr 2fr;\n }\n\n helix-headless-graph::part(panel) {\n border-block-start: 1px solid var(--_gray-edge);\n border-inline-start: none;\n }\n}\n\nhelix-headless-graph::part(stage) {\n min-block-size: 0;\n position: relative;\n}\n\nhelix-headless-graph::part(viewport) {\n inset: 0;\n overflow: hidden;\n position: absolute;\n}\n\nhelix-headless-graph::part(controls) {\n display: grid;\n gap: 0.25rem;\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-graph::part(zoom-in-button),\nhelix-headless-graph::part(zoom-out-button),\nhelix-headless-graph::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\nhelix-headless-graph::part(panel) {\n background-color: var(--_gray-surface);\n border-inline-start: 1px solid var(--_gray-edge);\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: auto minmax(0, 1fr);\n min-block-size: 0;\n}\n\nhelix-headless-graph::part(search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n color: var(--_gray-muted);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-graph::part(filter-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-graph::part(search-field) {\n background-color: transparent;\n block-size: 2rem;\n border: none;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n min-inline-size: 0;\n}\n\nhelix-headless-graph::part(count) {\n font-size: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(empty) {\n color: var(--_gray-muted);\n grid-area: 2 / 1;\n padding: 0.5rem;\n}\n\nhelix-headless-graph::part(list) {\n padding-block: 0.25rem;\n}\n\nhelix-headless-graph::part(note) {\n align-items: center;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.875rem;\n gap: 0.75rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-graph::part(note-selected) {\n background-color: var(--_accent-subtle);\n}\n\nhelix-headless-graph:focus-within::part(note-cursor) {\n outline: 2px solid var(--_gray-strong);\n outline-offset: -2px;\n}\n\nhelix-headless-graph::part(note-name) {\n flex: 0 1 auto;\n max-inline-size: 70%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(note-relation) {\n color: var(--_gray-muted);\n flex: 1 1 0;\n font-size: 0.75rem;\n min-inline-size: 0;\n overflow: hidden;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(live) {\n clip-path: inset(50%);\n position: absolute;\n}\n\n.stand-in {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: flex;\n justify-content: center;\n}","description":"The graph frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-graph\n default-active=\"pricing\"\n id=\"notes\"\n label=\"Company notes\"\n>\n <!-- Put your graph here, drawn by Sigma.js, a canvas, or an image. -->\n <div class=\"stand-in\">Graph</div>\n</helix-headless-graph>\n\n<script>\n const notes = document.getElementById('notes')\n\n notes.nodes = [\n { id: 'pricing', label: 'Pricing' },\n { id: 'plans', label: 'Plans and tiers' },\n { id: 'churn', label: 'Churn review' },\n { id: 'onboarding', label: 'Onboarding' },\n { id: 'roadmap', label: 'Roadmap' },\n { id: 'support', label: 'Support playbook' },\n { id: 'hiring', label: 'Hiring plan' },\n { id: 'budget', label: 'Budget' },\n ]\n\n notes.links = [\n { source: 'pricing', target: 'plans' },\n { source: 'churn', target: 'pricing' },\n { source: 'pricing', target: 'budget' },\n { source: 'budget', target: 'pricing' },\n { source: 'onboarding', target: 'churn' },\n { source: 'roadmap', target: 'onboarding' },\n { source: 'support', target: 'churn' },\n { source: 'hiring', target: 'budget' },\n ]\n</script>","imports":["import '@fusion.dev/helix-headless/graph'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nconst nodes = [\n { id: 'pricing', label: 'Pricing' },\n { id: 'plans', label: 'Plans and tiers' },\n { id: 'churn', label: 'Churn review' },\n { id: 'onboarding', label: 'Onboarding' },\n { id: 'roadmap', label: 'Roadmap' },\n { id: 'support', label: 'Support playbook' },\n { id: 'hiring', label: 'Hiring plan' },\n { id: 'budget', label: 'Budget' },\n]\n\nconst links = [\n { source: 'pricing', target: 'plans' },\n { source: 'churn', target: 'pricing' },\n { source: 'pricing', target: 'budget' },\n { source: 'budget', target: 'pricing' },\n { source: 'onboarding', target: 'churn' },\n { source: 'roadmap', target: 'onboarding' },\n { source: 'support', target: 'churn' },\n { source: 'hiring', target: 'budget' },\n]\n\nexport function Example() {\n return (\n <helix-headless-graph\n default-active=\"pricing\"\n label=\"Company notes\"\n links={links}\n nodes={nodes}\n >\n {/* Put your graph here, drawn by Sigma.js, a canvas, or an image. */}\n <div className=\"stand-in\">Graph</div>\n </helix-headless-graph>\n )\n}"}],"heatmap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-heatmap {\n display: grid;\n grid-template-columns: minmax(0, max-content);\n\n --heatmap-tone-danger: var(--_gray-strong);\n --heatmap-tone-success: var(--_gray-line);\n --heatmap-tone-warning: var(--_gray-muted);\n --heatmap-tone-1: var(--_gray-subtle);\n --heatmap-tone-2: var(--_gray-fill);\n --heatmap-tone-3: var(--_gray-line);\n --heatmap-tone-4: var(--_gray-mark);\n --heatmap-tone-5: var(--_gray-strong);\n}\n\nhelix-headless-heatmap::part(strip) {\n display: grid;\n gap: 0.25rem;\n grid-auto-columns: 0.75rem;\n grid-auto-flow: column;\n grid-template-rows: repeat(var(--heatmap-rows, 1), 0.75rem);\n justify-content: start;\n position: relative;\n}\n\nhelix-headless-heatmap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-heatmap::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-heatmap::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-heatmap::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-heatmap::part(tooltip-label) {\n display: block;\n font-weight: 500;\n opacity: 0.72;\n}\n\nhelix-headless-heatmap::part(tooltip-cell) {\n align-items: baseline;\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n}\n\nhelix-headless-heatmap::part(tooltip-name) {\n opacity: 0.72;\n}\n\nhelix-headless-heatmap::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n}\n\nhelix-headless-heatmap::part(cell) {\n background-color: var(--heatmap-tone, var(--_gray-surface));\n border-radius: calc(var(--_radius-control) / 2);\n inline-size: 0.75rem;\n}\n\n@media (hover: hover) {\n helix-headless-heatmap::part(cell):hover {\n outline: 1px solid var(--_gray-strong);\n outline-offset: 1px;\n }\n}\n\nhelix-headless-heatmap::part(footer) {\n align-items: baseline;\n color: var(--_gray-muted);\n display: grid;\n font-size: 0.75rem;\n gap: 0.5rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n padding-block-start: 0.5rem;\n}\n\nhelix-headless-heatmap::part(summary) {\n text-align: center;\n}\n\nhelix-headless-heatmap::part(end) {\n text-align: end;\n}\n\nhelix-headless-heatmap::part(empty) {\n color: var(--_gray-muted);\n margin: 0;\n text-align: center;\n}\n\nhelix-headless-heatmap::part(live),\nhelix-headless-heatmap::part(overview) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-heatmap::part(strip):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"Thirty days of uptime, each cell colored by how that day went.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-heatmap\n for=\"uptime\"\n label=\"Uptime, last 30 days\"\n>\n <table\n data-hidden-visually\n id=\"uptime\"\n >\n <caption>Uptime</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Uptime</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-28\">28 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-29\">29 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-30\">30 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-31\">31 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-01\">1 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-02\">2 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-03\">3 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-04\">4 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-05\">5 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-06\">6 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-07\">7 Aug 2026</time></th>\n <td\n data-tone=\"danger\"\n data-value=\"0.44\"\n >44.0%</td>\n <td>Database failover, 8h13m</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-08\">8 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-09\">9 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-10\">10 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-11\">11 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-12\">12 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-13\">13 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-14\">14 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-15\">15 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-16\">16 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-17\">17 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-18\">18 Aug 2026</time></th>\n <td\n data-tone=\"warning\"\n data-value=\"0.984\"\n >98.4%</td>\n <td>Elevated latency, eu-west</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-19\">19 Aug 2026</time></th>\n <td\n data-tone=\"warning\"\n data-value=\"0.977\"\n >97.7%</td>\n <td>Backfill running</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-20\">20 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-21\">21 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-22\">22 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-23\">23 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-24\">24 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-25\">25 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-26\">26 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">28 Jul</span>\n <span slot=\"summary\">99.6% uptime</span>\n <span slot=\"end\">Today</span>\n</helix-headless-heatmap>","imports":["import '@fusion.dev/helix-headless/heatmap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-heatmap\n for=\"uptime\"\n label=\"Uptime, last 30 days\"\n >\n <table\n data-hidden-visually\n id=\"uptime\"\n >\n <caption>Uptime</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Uptime</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-28\">28 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-29\">29 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-30\">30 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-31\">31 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-01\">1 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-02\">2 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-03\">3 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-04\">4 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-05\">5 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-06\">6 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-07\">7 Aug 2026</time>\n </th>\n <td\n data-tone=\"danger\"\n data-value=\"0.44\"\n >\n 44.0%\n </td>\n <td>Database failover, 8h13m</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-08\">8 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-09\">9 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-10\">10 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-11\">11 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-12\">12 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-13\">13 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-14\">14 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-15\">15 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-16\">16 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-17\">17 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-18\">18 Aug 2026</time>\n </th>\n <td\n data-tone=\"warning\"\n data-value=\"0.984\"\n >\n 98.4%\n </td>\n <td>Elevated latency, eu-west</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-19\">19 Aug 2026</time>\n </th>\n <td\n data-tone=\"warning\"\n data-value=\"0.977\"\n >\n 97.7%\n </td>\n <td>Backfill running</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-20\">20 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-21\">21 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-22\">22 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-23\">23 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-24\">24 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-25\">25 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-26\">26 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">28 Jul</span>\n <span slot=\"summary\">99.6% uptime</span>\n <span slot=\"end\">Today</span>\n </helix-headless-heatmap>\n )\n}"}],"icon":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The icon on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-icon name=\"caret-down\"></helix-headless-icon>\n<helix-headless-icon name=\"check-circle\"></helix-headless-icon>\n<helix-headless-icon name=\"gear\"></helix-headless-icon>\n<helix-headless-icon name=\"lightbulb\"></helix-headless-icon>\n<helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>\n<helix-headless-icon name=\"shield-check\"></helix-headless-icon>\n<helix-headless-icon\n label=\"Warning\"\n name=\"warning\"\n></helix-headless-icon>","imports":["import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-icon name=\"caret-down\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"check-circle\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"lightbulb\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"shield-check\"></helix-headless-icon>{' '}\n <helix-headless-icon\n label=\"Warning\"\n name=\"warning\"\n ></helix-headless-icon>\n </>\n )\n}"}],"icon-button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon-button {\n display: inline-flex;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The same icon button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-icon-button label=\"Settings\">\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n</helix-headless-icon-button>","imports":["import '@fusion.dev/helix-headless/icon-button'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-icon-button label=\"Settings\">\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n )\n}"}],"image":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-image {\n aspect-ratio: 16 / 9;\n border-radius: var(--_radius-surface);\n display: block;\n inline-size: 24rem;\n max-inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-image::part(image) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-image:not([data-status=\"loaded\"])::part(image) {\n visibility: hidden;\n}\n\nhelix-headless-image::part(placeholder),\nhelix-headless-image::part(fallback) {\n background-color: var(--_gray-subtle);\n inset: 0;\n position: absolute;\n}\n\nhelix-headless-image::part(fallback) {\n color: var(--_gray-muted);\n}","description":"The image on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-image\n alt=\"A road winding below highland cliffs at sunset\"\n src=\"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800\"\n></helix-headless-image>","imports":["import '@fusion.dev/helix-headless/image'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-image\n alt=\"A road winding below highland cliffs at sunset\"\n src=\"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800\"\n ></helix-headless-image>\n )\n}"}],"input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-input::part(clear),\nhelix-headless-input::part(reveal) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-input::part(clear):focus-visible,\nhelix-headless-input::part(reveal):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-input::part(hint),\nhelix-headless-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-input:disabled::part(field) {\n cursor: not-allowed;\n opacity: 0.5;\n}","description":"The input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-input\n hint=\"Visible to your team\"\n label=\"Project name\"\n placeholder=\"Website redesign\"\n></helix-headless-input>","imports":["import '@fusion.dev/helix-headless/input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-input\n hint=\"Visible to your team\"\n label=\"Project name\"\n placeholder=\"Website redesign\"\n ></helix-headless-input>\n )\n}"}],"kbd":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\np {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-kbd {\n display: inline-flex;\n font: inherit;\n vertical-align: -0.05em;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-variant-ligatures: none;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n white-space: nowrap;\n}","description":"The key on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Press\n <helix-headless-kbd>Cmd</helix-headless-kbd>\n <helix-headless-kbd>K</helix-headless-kbd>\n to search.\n</p>","imports":["import '@fusion.dev/helix-headless/kbd'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n {' '}\n Press <helix-headless-kbd>Cmd</helix-headless-kbd> <helix-headless-kbd>K</helix-headless-kbd>{' '}\n to search.{' '}\n </p>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.stack p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.stack .caption {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n}\n\nhelix-headless-kbd {\n display: inline-flex;\n font: inherit;\n vertical-align: -0.05em;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-variant-ligatures: none;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n white-space: nowrap;\n}\n\nhelix-headless-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-input[aria-label]:not([label])::part(label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-input::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-input > [slot=\"end\"] {\n flex: none;\n}","description":"The chord on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <p>\n Press\n <helix-headless-kbd keys=\"mod+k\"></helix-headless-kbd>\n to search. The shortcut <code>mod+k</code> shows as ⌘K on a Mac and Ctrl+K on\n other computers.\n </p>\n\n <helix-headless-input\n aria-label=\"Filter\"\n placeholder=\"Filter\"\n >\n <helix-headless-kbd\n id=\"key\"\n keys=\"/\"\n slot=\"end\"\n within=\"control\"\n ></helix-headless-kbd>\n </helix-headless-input>\n\n <p\n class=\"caption\"\n id=\"said\"\n >\n Click the field and press / to filter the list.\n </p>\n</div>\n\n<script type=\"module\">\n const key = document.getElementById('key')\n const said = document.getElementById('said')\n key.addEventListener('helix-shortcut', (event) => {\n said.textContent = `Heard ${event.detail.keys} inside the field.`\n })\n</script>","imports":["import '@fusion.dev/helix-headless/kbd'","import '@fusion.dev/helix-headless/input'"],"label":"Shortcut","renders":[],"slug":"shortcut","tier":"headless","tsx":"import './shortcut.css'\n\nimport { useState } from 'react'\n\nconst RESTING = 'Click the field and press / to filter the list.'\n\nexport function Example() {\n const [said, setSaid] = useState(RESTING)\n\n return (\n <div className=\"stack\">\n <p>\n Press <helix-headless-kbd keys=\"mod+k\" /> to search. The shortcut <code>mod+k</code> shows\n as ⌘K on a Mac and Ctrl+K on other computers.\n </p>\n\n <helix-headless-input\n aria-label=\"Filter\"\n placeholder=\"Filter\"\n >\n <helix-headless-kbd\n keys=\"/\"\n onhelix-shortcut={(event) => setSaid(`Heard ${event.detail.keys} inside the field.`)}\n slot=\"end\"\n within=\"control\"\n />\n </helix-headless-input>\n\n <p className=\"caption\">{said}</p>\n </div>\n )\n}"}],"legend":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-legend {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n\n display: block;\n}\n\nhelix-headless-legend::part(list) {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-legend::part(entry) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.25rem;\n line-height: 1.2;\n}\n\n/* The mark, drawn on the entry rather than slotted into it. The entry already\n carries its series, so the tier renders no box for this: a consumer who wants\n one writes it, and reads the same property. */\nhelix-headless-legend::part(entry)::before {\n background-color: var(--chart-series, var(--chart-series-1));\n block-size: 0.75rem;\n border-radius: var(--_radius-control);\n content: \"\";\n flex: none;\n inline-size: 0.75rem;\n}","description":"The same legend on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Visits by source</caption>\n <thead>\n <tr>\n <th>Week</th>\n <th>Direct</th>\n <th>Search</th>\n <th>Referral</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">W1</th>\n <td>1204</td>\n <td>812</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">W2</th>\n <td>1388</td>\n <td>964</td>\n <td>221</td>\n </tr>\n <tr>\n <th scope=\"row\">W3</th>\n <td>1502</td>\n <td>1030</td>\n <td>287</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-legend for=\"traffic\"></helix-headless-legend>\n</div>","imports":["import '@fusion.dev/helix-headless/legend'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Visits by source</caption>\n <thead>\n <tr>\n <th>Week</th>\n <th>Direct</th>\n <th>Search</th>\n <th>Referral</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">W1</th>\n <td>1204</td>\n <td>812</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">W2</th>\n <td>1388</td>\n <td>964</td>\n <td>221</td>\n </tr>\n <tr>\n <th scope=\"row\">W3</th>\n <td>1502</td>\n <td>1030</td>\n <td>287</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-legend for=\"traffic\"></helix-headless-legend>\n </div>\n )\n}"}],"lightbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n\nhelix-headless-button::part(button) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-line);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n font: inherit;\n padding: 0.375rem 0.75rem;\n}\n\n/* A takeover rather than a panel: the picture wants every pixel, and the\n chrome is drawn over the dark rather than beside it. */\nhelix-headless-lightbox::part(dialog) {\n background-color: transparent;\n block-size: 100dvh;\n border: none;\n box-sizing: border-box;\n color: #e9e9ec;\n color-scheme: dark;\n gap: 0.5rem;\n grid-template-rows: auto 1fr auto;\n inline-size: 100vw;\n max-block-size: 100dvh;\n max-inline-size: 100vw;\n padding: 1rem;\n}\n\nhelix-headless-lightbox::part(dialog):modal {\n display: grid;\n}\n\nhelix-headless-lightbox::part(dialog)::backdrop {\n background-color: #111113;\n}\n\nhelix-headless-lightbox::part(viewport) {\n align-items: center;\n display: flex;\n justify-content: center;\n min-block-size: 0;\n overflow: hidden;\n}\n\nhelix-headless-lightbox::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid #45454b;\n border-radius: var(--_radius-control);\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n inline-size: 1em;\n}\n\nhelix-headless-lightbox [slot=\"header\"] {\n display: flex;\n justify-content: flex-end;\n}\n\nhelix-headless-lightbox-item::part(item) {\n align-items: center;\n block-size: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n min-block-size: 0;\n}\n\n/* The flex above outranks the UA's [hidden], so the items not shown say so. */\nhelix-headless-lightbox-item::part(item)[hidden] {\n display: none;\n}\n\nhelix-headless-lightbox-item img {\n max-block-size: 100%;\n max-inline-size: 100%;\n min-block-size: 0;\n object-fit: contain;\n}\n\nhelix-headless-lightbox-item [slot=\"description\"] {\n color: #a1a1aa;\n font-size: 0.875rem;\n text-align: center;\n}\n\nhelix-headless-lightbox::part(dialog):focus-visible {\n outline: none;\n}","description":"The same lightbox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"base-gallery\"\n>Open gallery</helix-headless-button>\n\n<!-- The lightbox starts open, so the preview shows it. -->\n<helix-headless-lightbox\n id=\"base-gallery\"\n label=\"Beach photos\"\n open\n>\n <div slot=\"header\">\n <helix-headless-icon-button\n command=\"--close\"\n commandfor=\"base-gallery\"\n label=\"Close\"\n >\n <helix-headless-icon name=\"x\"></helix-headless-icon>\n </helix-headless-icon-button>\n </div>\n\n <helix-headless-lightbox-item\n label=\"Seawater over pale sand\"\n value=\"seawater\"\n >\n <img\n alt=\"Seawater over pale sand\"\n src=\"/media/scale/seawater-800.jpg\"\n />\n <span slot=\"description\">Shallow water at the beach in the morning.</span>\n </helix-headless-lightbox-item>\n\n <helix-headless-lightbox-item\n label=\"The sun low over open water\"\n value=\"ocean-sun\"\n >\n <img\n alt=\"The sun low over open water\"\n src=\"/media/scale/ocean-sun.jpg\"\n />\n <span slot=\"description\">Sunset over the ocean the same day.</span>\n </helix-headless-lightbox-item>\n</helix-headless-lightbox>","imports":["import '@fusion.dev/helix-headless/lightbox'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"base-gallery\"\n >\n Open gallery\n </helix-headless-button>\n\n {/* The lightbox starts open, so the preview shows it. */}\n <helix-headless-lightbox\n id=\"base-gallery\"\n label=\"Beach photos\"\n open\n >\n <div slot=\"header\">\n <helix-headless-icon-button\n command=\"--close\"\n commandfor=\"base-gallery\"\n label=\"Close\"\n >\n <helix-headless-icon name=\"x\"></helix-headless-icon>\n </helix-headless-icon-button>\n </div>\n\n <helix-headless-lightbox-item\n label=\"Seawater over pale sand\"\n value=\"seawater\"\n >\n <img\n alt=\"Seawater over pale sand\"\n src=\"/media/scale/seawater-800.jpg\"\n />\n <span slot=\"description\">Shallow water at the beach in the morning.</span>\n </helix-headless-lightbox-item>\n\n <helix-headless-lightbox-item\n label=\"The sun low over open water\"\n value=\"ocean-sun\"\n >\n <img\n alt=\"The sun low over open water\"\n src=\"/media/scale/ocean-sun.jpg\"\n />\n <span slot=\"description\">Sunset over the ocean the same day.</span>\n </helix-headless-lightbox-item>\n </helix-headless-lightbox>\n </>\n )\n}"}],"line-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n\n display: grid;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-line-chart::part(plot) {\n block-size: 10.5rem;\n position: relative;\n}\n\nhelix-headless-line-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-line-chart::part(line) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(area) {\n fill: var(--chart-series, var(--chart-series-1));\n opacity: 0.16;\n stroke: none;\n}\n\nhelix-headless-line-chart::part(baseline),\nhelix-headless-line-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(guide) {\n stroke: var(--_gray-muted);\n stroke-dasharray: 3 3;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(band) {\n fill: var(--_gray-subtle);\n}\n\nhelix-headless-line-chart::part(terminus) {\n background-color: var(--chart-series, var(--chart-series-1));\n block-size: 5px;\n border-radius: 9999px;\n inline-size: 5px;\n inset-block-start: var(--chart-terminus-y);\n inset-inline-start: var(--chart-terminus-x);\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-line-chart:dir(rtl)::part(terminus) {\n translate: 50% -50%;\n}\n\nhelix-headless-line-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-line-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-line-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-line-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: none;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-line-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-line-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-line-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n\nhelix-headless-line-chart::part(tooltip-name) {\n opacity: 0.72;\n}\n\nhelix-headless-line-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-line-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-line-chart::part(marker) {\n fill: none;\n stroke: var(--chart-series);\n stroke-linecap: round;\n stroke-width: 6px;\n vector-effect: non-scaling-stroke;\n}","description":"The line chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"sessions\"\n >\n <caption>Sessions a month</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Sessions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"1180\">1180</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"1240\">1240</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"1190\">1190</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"1320\">1320</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"1410\">1410</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"1380\">1380</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-line-chart for=\"sessions\"></helix-headless-line-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/line-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"sessions\"\n >\n <caption>Sessions a month</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Sessions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"1180\">1180</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"1240\">1240</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"1190\">1190</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"1320\">1320</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"1410\">1410</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"1380\">1380</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-line-chart for=\"sessions\"></helix-headless-line-chart>\n </div>\n )\n}"}],"list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-list {\n display: flex;\n flex-direction: column;\n}\n\nhelix-headless-list-item + helix-headless-list-item {\n border-block-start: 1px solid var(--_gray-line);\n}\n\nhelix-headless-list-item::part(row) {\n align-items: center;\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.8125rem;\n grid-template-columns: auto 1fr auto;\n line-height: 1.5;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-list-item > [slot=\"start\"] {\n color: var(--_gray-muted);\n grid-column: 1;\n grid-row: 1 / span 2;\n margin-inline-end: 0.75rem;\n}\n\nhelix-headless-list-item > [slot=\"description\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-column: 2;\n grid-row: 2;\n}\n\nhelix-headless-list-item > [slot=\"end\"] {\n grid-column: 3;\n grid-row: 1 / span 2;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The list on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-list label=\"Recent files\">\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Quarterly report\n <span slot=\"description\">Edited today</span>\n </helix-headless-list-item>\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Team handbook\n <span slot=\"description\">Edited 3 days ago</span>\n </helix-headless-list-item>\n</helix-headless-list>","imports":["import '@fusion.dev/helix-headless/list'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-list label=\"Recent files\">\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Quarterly report\n <span slot=\"description\">Edited today</span>\n </helix-headless-list-item>\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Team handbook\n <span slot=\"description\">Edited 3 days ago</span>\n </helix-headless-list-item>\n </helix-headless-list>\n )\n}"}],"listbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-listbox {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-listbox::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-listbox::part(items) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n padding-block: 0.25rem;\n}\n\nhelix-headless-listbox::part(items):focus-visible {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-listbox::part(hint),\nhelix-headless-listbox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-listbox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-listbox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-listbox::part(search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.25rem 0.25rem 0.5rem;\n}\n\nhelix-headless-listbox::part(filter-icon) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-listbox::part(filter-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-listbox::part(search-field) {\n all: unset;\n block-size: 2rem;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-listbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-option {\n display: block;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option::part(text) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-inline-size: 0;\n}\n\nhelix-headless-option::part(label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-option[disabled]::part(item) {\n cursor: default;\n opacity: 0.5;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-listbox::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same listbox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-listbox\n default-value=\"two\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"choice\"\n>\n <helix-headless-option value=\"one\">Free</helix-headless-option>\n <helix-headless-option value=\"two\">Pro</helix-headless-option>\n <helix-headless-option value=\"three\">Team</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >Enterprise</helix-headless-option>\n</helix-headless-listbox>","imports":["import '@fusion.dev/helix-headless/listbox'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-listbox\n default-value=\"two\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"choice\"\n >\n <helix-headless-option value=\"one\">Free</helix-headless-option>\n <helix-headless-option value=\"two\">Pro</helix-headless-option>\n <helix-headless-option value=\"three\">Team</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >\n Enterprise\n </helix-headless-option>\n </helix-headless-listbox>\n )\n}"}],"loader":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The host turns and the drawing reads the angle, so a slotted mark stays upright: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_turn {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-loader {\n animation: loader-turn 0.8s linear infinite;\n color: var(--_gray-strong);\n display: inline-grid;\n flex-shrink: 0;\n place-items: center;\n vertical-align: middle;\n}\n\nhelix-headless-loader::part(svg) {\n block-size: 1.5rem;\n grid-area: 1 / 1;\n inline-size: 1.5rem;\n rotate: var(--_turn);\n}\n\n@keyframes loader-turn {\n to {\n --_turn: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-loader {\n animation-duration: 4s;\n }\n}\n\nhelix-headless-loader::part(track) {\n stroke: var(--_gray-fill);\n stroke-width: 2;\n}\n\nhelix-headless-loader::part(indicator) {\n stroke: currentColor;\n stroke-dasharray: 50, 100;\n stroke-linecap: round;\n stroke-width: 2;\n}\n\nhelix-headless-loader::part(mark) {\n align-items: center;\n block-size: 0.6rem;\n display: flex;\n grid-area: 1 / 1;\n inline-size: 0.6rem;\n justify-content: center;\n}","description":"The same loader on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-loader label=\"Loading projects\"></helix-headless-loader>","imports":["import '@fusion.dev/helix-headless/loader'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-loader label=\"Loading projects\"></helix-headless-loader>\n}"}],"log":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_red: light-dark(#b42318, #f97066);\n --_red-wash: light-dark(#fef3f2, #2d1715);\n --_amber: light-dark(#93370d, #fdb022);\n --_green: light-dark(#067647, #47cd89);\n --_radius-surface: 0.5rem;\n}\n\nhelix-headless-log {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.8125rem;\n line-height: 1.5;\n overflow: hidden;\n}\n\nhelix-headless-log::part(log) {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n max-block-size: 24rem;\n padding-block: 0.5rem;\n}\n\nhelix-headless-log::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-log::part(resume) {\n margin-block-start: -2.5rem;\n padding-block-end: 0.5rem;\n pointer-events: none;\n position: relative;\n text-align: center;\n}\n\nhelix-headless-log::part(resume-button) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: 0.25rem;\n color: inherit;\n font: inherit;\n padding: 0.25rem 0.75rem;\n pointer-events: auto;\n}\n\nhelix-headless-log-line {\n display: block;\n}\n\nhelix-headless-log-line::part(line) {\n display: flex;\n gap: 1rem;\n padding-inline: 1rem;\n}\n\nhelix-headless-log-line::part(line-warn) {\n color: var(--_amber);\n}\n\nhelix-headless-log-line::part(line-error) {\n background-color: var(--_red-wash);\n color: var(--_red);\n}\n\nhelix-headless-log-line::part(text) {\n white-space: pre;\n}\n\nhelix-headless-log-line::part(number) {\n color: var(--_gray-muted);\n flex: none;\n min-inline-size: max(0.875rem, calc(var(--log-digits, 2) * 1ch));\n text-align: end;\n user-select: none;\n}\n\nhelix-headless-log-group {\n display: block;\n}\n\nhelix-headless-log-group::part(summary) {\n align-items: center;\n background: none;\n border: 0;\n color: inherit;\n display: flex;\n font: inherit;\n font-family: system-ui, sans-serif;\n font-weight: 600;\n gap: 0.5rem;\n inline-size: 100%;\n padding: 0.375rem 1rem;\n text-align: start;\n}\n\nhelix-headless-log-group::part(summary):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-log-group::part(mark) {\n block-size: 0.875rem;\n flex: none;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n inline-size: 0.875rem;\n margin-inline: calc(max(0.875rem, calc(var(--log-digits, 2) * 1ch)) - 0.875rem) 0.5rem;\n rotate: -90deg;\n}\n\nhelix-headless-log-group:state(open)::part(mark) {\n rotate: none;\n}\n\nhelix-headless-log-group::part(status) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-log-group[status=\"done\"]::part(status) {\n color: var(--_green);\n}\n\nhelix-headless-log-group[status=\"failed\"]::part(status) {\n color: var(--_red);\n}\n\nhelix-headless-log-group[status=\"skipped\"]::part(status) {\n color: var(--_gray-mark);\n}\n\nhelix-headless-log-group::part(duration) {\n color: var(--_gray-muted);\n font-weight: 400;\n margin-inline-start: auto;\n}","description":"A deployment's output with numbered lines, its steps folded, and the step that failed open.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-log\n label=\"Deployment\"\n line-numbers\n>\n <helix-headless-log-line>Cloning github.com/acme/storefront (branch main, commit 4f2a9c1)</helix-headless-log-line>\n <helix-headless-log-group\n duration=\"38s\"\n heading=\"Install dependencies\"\n status=\"done\"\n >\n <helix-headless-log-line>bun install v1.1.43</helix-headless-log-line>\n <helix-headless-log-line>Resolved 1,214 packages in 2.1s</helix-headless-log-line>\n <helix-headless-log-line level=\"warn\">warn: glob@7.2.3 is deprecated</helix-headless-log-line>\n <helix-headless-log-line>Installed 1,214 packages in 36.4s</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n default-open\n duration=\"1m 12s\"\n heading=\"Build\"\n status=\"failed\"\n >\n <helix-headless-log-line>Creating an optimized production build</helix-headless-log-line>\n <helix-headless-log-line>Compiled 214 modules for the browser and 37 for the server</helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Error: Cannot find module './checkout/summary'</helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Build failed with 1 error</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n heading=\"Deploy\"\n status=\"skipped\"\n ></helix-headless-log-group>\n</helix-headless-log>","imports":["import '@fusion.dev/helix-headless/log'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-log\n label=\"Deployment\"\n line-numbers\n >\n <helix-headless-log-line>\n Cloning github.com/acme/storefront (branch main, commit 4f2a9c1)\n </helix-headless-log-line>\n <helix-headless-log-group\n duration=\"38s\"\n heading=\"Install dependencies\"\n status=\"done\"\n >\n <helix-headless-log-line>bun install v1.1.43</helix-headless-log-line>\n <helix-headless-log-line>Resolved 1,214 packages in 2.1s</helix-headless-log-line>\n <helix-headless-log-line level=\"warn\">\n warn: glob@7.2.3 is deprecated\n </helix-headless-log-line>\n <helix-headless-log-line>Installed 1,214 packages in 36.4s</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n default-open\n duration=\"1m 12s\"\n heading=\"Build\"\n status=\"failed\"\n >\n <helix-headless-log-line>Creating an optimized production build</helix-headless-log-line>\n <helix-headless-log-line>\n Compiled 214 modules for the browser and 37 for the server\n </helix-headless-log-line>\n <helix-headless-log-line level=\"error\">\n Error: Cannot find module './checkout/summary'\n </helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Build failed with 1 error</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n heading=\"Deploy\"\n status=\"skipped\"\n />\n </helix-headless-log>\n )\n}"}],"map":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n\n/* The frame, with each region in a row of its own so the map takes what is\n left whichever strips a consumer fills. */\nhelix-headless-map::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: auto 1fr auto auto;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-map::part(viewport) {\n min-block-size: 0;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-map::part(attribution) {\n border-block-start: 1px solid var(--_gray-edge);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-map::part(attribution):empty {\n display: none;\n}\n\n/* The pad in three columns and the zoom and fullscreen in a fourth. */\nhelix-headless-map::part(controls) {\n display: grid;\n gap: 0.25rem;\n grid-template-areas:\n \". up . zoomin\"\n \"start . end zoomout\"\n \". down . full\";\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-map::part(pan-up) {\n grid-area: up;\n}\n\nhelix-headless-map::part(pan-start) {\n grid-area: start;\n}\n\nhelix-headless-map::part(pan-end) {\n grid-area: end;\n}\n\nhelix-headless-map::part(pan-down) {\n grid-area: down;\n}\n\nhelix-headless-map::part(zoom-in) {\n grid-area: zoomin;\n}\n\nhelix-headless-map::part(zoom-out) {\n grid-area: zoomout;\n}\n\nhelix-headless-map::part(fullscreen) {\n grid-area: full;\n}\n\nhelix-headless-map::part(pan-up-button),\nhelix-headless-map::part(pan-start-button),\nhelix-headless-map::part(pan-end-button),\nhelix-headless-map::part(pan-down-button),\nhelix-headless-map::part(zoom-in-button),\nhelix-headless-map::part(zoom-out-button),\nhelix-headless-map::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\n/* What stands in for somebody else's map in a preview. */\n.stand-in {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: flex;\n justify-content: center;\n}","description":"The map frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-map label=\"Edinburgh city center\">\n <!-- Put your map here, drawn by MapLibre, Leaflet, an image, or a canvas. -->\n <div class=\"stand-in\">Map</div>\n\n <span slot=\"attribution\">© OpenStreetMap contributors</span>\n</helix-headless-map>","imports":["import '@fusion.dev/helix-headless/map'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-map label=\"Edinburgh city center\">\n {/* Put your map here, drawn by MapLibre, Leaflet, an image, or a canvas. */}\n <div className=\"stand-in\">Map</div>\n\n <span slot=\"attribution\">© OpenStreetMap contributors</span>\n </helix-headless-map>\n )\n}"}],"megamenu":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-navigation {\n display: block;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-megamenu {\n display: inline-flex;\n}\n\nhelix-headless-megamenu::part(trigger) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n min-block-size: 2rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-megamenu::part(trigger):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-megamenu:state(open)::part(trigger) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-megamenu::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-megamenu::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n gap: 2rem;\n grid-auto-columns: minmax(15rem, 1fr);\n grid-auto-flow: column;\n inline-size: max-content;\n inset: auto;\n line-height: 1.5;\n margin: 0;\n max-inline-size: min(52rem, calc(100% - 4rem));\n padding: 1rem;\n}\n\nhelix-headless-megamenu::part(surface):popover-open {\n display: grid;\n}\n\n/* A panel taking over from another grows or shrinks from that one's size. */\nhelix-headless-megamenu:is(:state(from-start), :state(from-end))::part(surface) {\n animation: megamenu-resize 200ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-megamenu:is(:state(from-start), :state(from-end))::part(surface) {\n animation: none;\n }\n}\n\n/* Clipped only while it resizes, so nothing changes about the open panel. */\n@keyframes megamenu-resize {\n from {\n block-size: var(--megamenu-from-block-size);\n inline-size: var(--megamenu-from-inline-size);\n overflow: clip;\n }\n\n to {\n block-size: var(--megamenu-surface-block-size);\n inline-size: var(--megamenu-surface-inline-size);\n overflow: clip;\n }\n}\n\nhelix-headless-megamenu:state(narrow)::part(surface) {\n border: none;\n border-block-end: 1px solid var(--_gray-edge);\n border-radius: 0;\n box-shadow: 0 4px 12px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.1));\n grid-auto-flow: row;\n grid-template-columns: minmax(0, 1fr);\n inline-size: auto;\n inset-block-start: var(--megamenu-top, 100%);\n inset-inline: 0;\n max-block-size: calc(100dvh - var(--megamenu-top, 0px) - 2rem);\n max-inline-size: none;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 1rem 1rem 2rem;\n position: fixed;\n}\n\n[data-megamenu-group] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n[data-megamenu-heading] {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.5rem;\n margin: 0 0 0.25rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-navigation [data-megamenu-item] {\n align-items: start;\n block-size: auto;\n color: var(--_gray-strong);\n column-gap: 0.75rem;\n display: grid;\n font-weight: 400;\n grid-template-columns: auto minmax(0, 1fr);\n justify-content: stretch;\n min-block-size: 0;\n padding: 0.75rem;\n row-gap: 0.25rem;\n white-space: normal;\n}\n\n[data-megamenu-item] + [data-megamenu-item] {\n margin-block-start: -0.5rem;\n}\n\nhelix-headless-navigation [data-megamenu-item]:hover {\n background-color: transparent;\n}\n\nhelix-headless-icon {\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\n[data-megamenu-item] > helix-headless-icon {\n block-size: 1.5rem;\n grid-column: 1;\n grid-row: 1 / span 2;\n inline-size: 1.5rem;\n}\n\n[data-megamenu-item] > strong {\n font-size: 0.8125rem;\n font-weight: 600;\n grid-column: 2;\n}\n\n[data-megamenu-item] > span {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n grid-column: 2;\n}\n\n[data-megamenu-item]:hover > span {\n color: var(--_gray-strong);\n}","description":"The same megamenu on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-navigation label=\"Main\">\n <a href=\"#overview\">Overview</a>\n <helix-headless-megamenu label=\"Products\">\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Work</h3>\n <a\n data-megamenu-item\n href=\"#helix\"\n >\n <helix-headless-icon name=\"cube\"></helix-headless-icon>\n <strong>Projects</strong>\n <span>Plan and track work across teams.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#icons\"\n >\n <helix-headless-icon name=\"palette\"></helix-headless-icon>\n <strong>Documents</strong>\n <span>Write, edit, and share files.</span>\n </a>\n </div>\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Insights</h3>\n <a\n data-megamenu-item\n href=\"#cortex\"\n >\n <helix-headless-icon name=\"pulse\"></helix-headless-icon>\n <strong>Reports</strong>\n <span>See how your projects are doing.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#trace\"\n >\n <helix-headless-icon name=\"strategy\"></helix-headless-icon>\n <strong>Dashboards</strong>\n <span>Track the numbers you care about.</span>\n </a>\n </div>\n </helix-headless-megamenu>\n <a href=\"#pricing\">Pricing</a>\n</helix-headless-navigation>","imports":["import '@fusion.dev/helix-headless/megamenu'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","layout":"padded","min":360,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-navigation label=\"Main\">\n <a href=\"#overview\">Overview</a>\n <helix-headless-megamenu label=\"Products\">\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Work</h3>\n <a\n data-megamenu-item\n href=\"#helix\"\n >\n <helix-headless-icon name=\"cube\"></helix-headless-icon>\n <strong>Projects</strong>\n <span>Plan and track work across teams.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#icons\"\n >\n <helix-headless-icon name=\"palette\"></helix-headless-icon>\n <strong>Documents</strong>\n <span>Write, edit, and share files.</span>\n </a>\n </div>\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Insights</h3>\n <a\n data-megamenu-item\n href=\"#cortex\"\n >\n <helix-headless-icon name=\"pulse\"></helix-headless-icon>\n <strong>Reports</strong>\n <span>See how your projects are doing.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#trace\"\n >\n <helix-headless-icon name=\"strategy\"></helix-headless-icon>\n <strong>Dashboards</strong>\n <span>Track the numbers you care about.</span>\n </a>\n </div>\n </helix-headless-megamenu>\n <a href=\"#pricing\">Pricing</a>\n </helix-headless-navigation>\n )\n}"}],"menu":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(:disabled)::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-menu::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inset: auto;\n margin: 0;\n min-inline-size: 12rem;\n overflow-y: auto;\n padding: 0.5rem 0;\n}\n\nhelix-headless-menu::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n margin-block-end: 0.25rem;\n padding: 0.25rem 0.5rem 0.5rem;\n}\n\nhelix-headless-menu::part(back) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.5rem;\n justify-content: center;\n}\n\nhelix-headless-menu::part(back):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-menu::part(back):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-menu::part(back-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-menu::part(title) {\n font-size: 0.75rem;\n font-weight: 500;\n}\n\nhelix-headless-menu-item {\n display: block;\n}\n\nhelix-headless-menu-item::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.75rem;\n font-weight: 500;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n text-decoration: none;\n user-select: none;\n}\n\nhelix-headless-menu-item::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-menu-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-menu-item::part(start) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n}\n\nhelix-headless-menu-item > [slot=\"start\"] {\n margin-inline-end: 0.5rem;\n}\n\nhelix-headless-menu-item::part(mark) {\n block-size: 1rem;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1.5rem;\n margin-inline-start: auto;\n padding-inline-start: 0.5rem;\n}\n\nhelix-headless-menu-item:state(checked)::part(mark) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-menu > helix-headless-divider {\n background-color: var(--_gray-line);\n block-size: 1px;\n display: block;\n margin-block: 0.25rem;\n}\n\nhelix-headless-menu:state(drilled) > helix-headless-divider {\n display: none;\n}\n\nhelix-headless-icon {\n block-size: 1rem;\n display: inline-flex;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The menu on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-menu label=\"View options\">\n <helix-headless-button slot=\"trigger\">View options</helix-headless-button>\n\n <helix-headless-menu-item value=\"one\">\n Sort by\n <helix-headless-menu-item\n checkable\n checked\n exclusive\n slot=\"submenu\"\n value=\"one-a\"\n >\n Name\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n exclusive\n slot=\"submenu\"\n value=\"one-b\"\n >\n Date modified\n </helix-headless-menu-item>\n </helix-headless-menu-item>\n\n <helix-headless-divider></helix-headless-divider>\n\n <helix-headless-menu-item\n checkable\n checked\n value=\"two\"\n >Show hidden files</helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n value=\"three\"\n >Show file extensions</helix-headless-menu-item>\n</helix-headless-menu>","imports":["import '@fusion.dev/helix-headless/menu'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/divider'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-menu label=\"View options\">\n <helix-headless-button slot=\"trigger\">View options</helix-headless-button>\n\n <helix-headless-menu-item value=\"one\">\n Sort by\n <helix-headless-menu-item\n checkable\n checked\n exclusive\n slot=\"submenu\"\n value=\"one-a\"\n >\n Name\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n exclusive\n slot=\"submenu\"\n value=\"one-b\"\n >\n Date modified\n </helix-headless-menu-item>\n </helix-headless-menu-item>\n\n <helix-headless-divider></helix-headless-divider>\n\n <helix-headless-menu-item\n checkable\n checked\n value=\"two\"\n >\n Show hidden files\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n value=\"three\"\n >\n Show file extensions\n </helix-headless-menu-item>\n </helix-headless-menu>\n )\n}"}],"meter":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-meter {\n display: block;\n}\n\nhelix-headless-meter[show-value] {\n align-items: center;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 1fr auto;\n}\n\nhelix-headless-meter::part(value) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n min-inline-size: 3ch;\n text-align: end;\n}\n\nhelix-headless-meter::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 1rem;\n border-radius: var(--_radius-control);\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-meter::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: 100%;\n inline-size: 100%;\n scale: var(--meter-fraction, 0) 1;\n transform-origin: left center;\n}\n\nhelix-headless-meter:dir(rtl)::part(indicator) {\n transform-origin: right center;\n}\n\nhelix-headless-meter::part(tick) {\n background-color: var(--_gray-surface);\n block-size: 100%;\n inline-size: 2px;\n inset-block-start: 0;\n inset-inline-start: var(--meter-at, 0%);\n position: absolute;\n translate: -50%;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"]) {\n display: inline-grid;\n place-items: center;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(track) {\n background-color: transparent;\n block-size: 6rem;\n grid-area: 1 / 1;\n inline-size: 6rem;\n}\n\nhelix-headless-meter[shape=\"ring\"]::part(track) {\n rotate: -90deg;\n}\n\nhelix-headless-meter[shape=\"arc\"]::part(track) {\n rotate: 135deg;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(groove),\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(indicator) {\n cx: 50%;\n cy: 50%;\n fill: none;\n r: calc(50% - 0.25rem);\n stroke-width: 0.5rem;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(groove) {\n stroke: var(--_gray-subtle);\n stroke-dasharray: var(--meter-sweep) 100;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(indicator) {\n scale: none;\n stroke: var(--_gray-strong);\n stroke-dasharray: var(--meter-along) 100;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(value) {\n grid-area: 1 / 1;\n}","description":"The same meter on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-meter\n label=\"Disk used\"\n show-value\n value=\"42\"\n></helix-headless-meter>","imports":["import '@fusion.dev/helix-headless/meter'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-meter\n label=\"Disk used\"\n show-value\n value={42}\n ></helix-headless-meter>\n )\n}"}],"motion-toggle":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n.row {\n align-items: center;\n display: flex;\n gap: 1rem;\n}\n\nhelix-headless-motion-toggle::part(button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-line);\n border-radius: 0.375rem;\n color: var(--_gray-strong);\n display: inline-flex;\n gap: 0.25rem;\n min-block-size: 2rem;\n min-inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-motion-toggle::part(icon) {\n display: inline-flex;\n}\n\nhelix-headless-motion-toggle::part(button)[aria-pressed=\"true\"] {\n background-color: var(--_gray-line);\n}","description":"The page's pause, as an icon alone and with words beside it. A press pauses every motion on the page that starts by itself.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-motion-toggle></helix-headless-motion-toggle>\n <helix-headless-motion-toggle>Pause motion</helix-headless-motion-toggle>\n</div>","imports":["import '@fusion.dev/helix-headless/motion-toggle'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-motion-toggle></helix-headless-motion-toggle>\n <helix-headless-motion-toggle>Pause motion</helix-headless-motion-toggle>\n </div>\n )\n}"}],"navigation":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-navigation {\n display: block;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The same navigation on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-navigation label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"/one\"\n >Overview</a>\n <a href=\"/two\">Activity</a>\n <a href=\"/three\">Settings</a>\n</helix-headless-navigation>","imports":["import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-navigation label=\"Sections\">\n {' '}\n <a\n aria-current=\"page\"\n href=\"/one\"\n >\n Overview\n </a>{' '}\n <a href=\"/two\">Activity</a> <a href=\"/three\">Settings</a>{' '}\n </helix-headless-navigation>\n )\n}"}],"notifications":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-notifications {\n color: var(--_gray-strong);\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n max-inline-size: 28rem;\n}\n\nhelix-headless-notifications:state(media) {\n --notifications-media-column: 2.25rem;\n}\n\nhelix-headless-notifications::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-notifications h2 {\n font-size: 1.3125rem;\n margin: 0;\n}\n\nhelix-headless-notifications::part(footer) {\n border-block-start: 1px solid var(--_gray-line);\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-notifications > [slot=\"footer\"] {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n text-decoration: none;\n}\n\nhelix-headless-notifications::part(mark-all),\nhelix-headless-notification::part(dismiss) {\n all: unset;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n}\n\nhelix-headless-notifications::part(mark-all) {\n font-size: 0.8125rem;\n padding: 0.25rem;\n}\n\nhelix-headless-notifications::part(mark-all):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-notifications::part(mark-all):focus-visible,\nhelix-headless-notification::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-notification {\n display: block;\n}\n\nhelix-headless-notification::part(item) {\n align-items: start;\n border-block-end: 1px solid var(--_gray-line);\n display: grid;\n grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;\n padding: 0.5rem 1rem;\n position: relative;\n}\n\nhelix-headless-notification:last-of-type::part(item) {\n border-block-end-color: transparent;\n}\n\nhelix-headless-notification:not(:state(read))::part(item)::before {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n border-radius: 9999px;\n content: \"\";\n inline-size: 0.5rem;\n inset-block-start: calc(0.5rem + (1.21875rem - 0.5rem) / 2);\n inset-inline-start: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-notification::part(media) {\n display: grid;\n grid-template-rows: 1.21875rem;\n place-items: center start;\n}\n\nhelix-headless-notification > helix-headless-avatar {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border-radius: 9999px;\n color: var(--_gray-strong);\n display: inline-flex;\n inline-size: 1.5rem;\n justify-content: center;\n overflow: hidden;\n}\n\nhelix-headless-notification > helix-headless-avatar::part(initials) {\n font-size: 0.6rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n line-height: 1;\n}\n\nhelix-headless-notification > helix-headless-icon {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n display: inline-flex;\n inline-size: 1.5rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-notification::part(body) {\n display: grid;\n gap: 0.25rem;\n}\n\nhelix-headless-notification::part(label) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n line-height: 1.21875rem;\n}\n\nhelix-headless-notification:not(:state(read))::part(label) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-notification code {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n}\n\nhelix-headless-notification::part(actions) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\nhelix-headless-notification:not(:state(actions))::part(actions) {\n display: none;\n}\n\nhelix-headless-notification:state(actions)::part(actions) {\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-notification > button[slot=\"actions\"] {\n all: unset;\n align-items: center;\n background-color: var(--_gray-fill);\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding-inline: 1rem;\n}\n\nhelix-headless-notification > button[slot=\"actions\"]:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-notification::part(trailing) {\n align-items: center;\n align-self: start;\n block-size: 1.21875rem;\n display: flex;\n justify-content: end;\n margin-inline-start: 0.75rem;\n position: relative;\n}\n\nhelix-headless-notification::part(time) {\n color: var(--_gray-muted);\n display: block;\n font-size: 0.75rem;\n line-height: 1.21875rem;\n}\n\nhelix-headless-notification::part(controls) {\n align-items: center;\n display: flex;\n inset-block-start: 50%;\n inset-inline-end: -0.5rem;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n translate: 0 -50%;\n}\n\nhelix-headless-notification:is(:hover, :focus-within):state(controls)::part(time) {\n opacity: 0;\n}\n\nhelix-headless-notification:is(:hover, :focus-within):state(controls)::part(controls) {\n opacity: 1;\n pointer-events: auto;\n}\n\nhelix-headless-notification::part(dismiss) {\n block-size: 2rem;\n display: grid;\n inline-size: 2rem;\n margin-inline-start: 0.25rem;\n place-items: center;\n}\n\nhelix-headless-notification::part(dismiss):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-notification::part(dismiss-mark) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}","description":"A feed with unread items, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-notifications\n id=\"raw\"\n label=\"Notifications\"\n mark-all\n>\n <h2 slot=\"header\">Notifications</h2>\n\n <helix-headless-notification dismissible>\n <helix-headless-avatar\n name=\"Ada Okonjo\"\n slot=\"media\"\n ></helix-headless-avatar>\n <strong>Ada Okonjo</strong> approved your deploy to production.\n <button\n slot=\"actions\"\n type=\"button\"\n >View</button>\n </helix-headless-notification>\n\n <helix-headless-notification dismissible>\n <helix-headless-icon\n name=\"warning\"\n slot=\"media\"\n ></helix-headless-icon>\n Build <strong>#4821</strong> failed on <code>main</code>\n <button\n slot=\"actions\"\n type=\"button\"\n >Logs</button>\n </helix-headless-notification>\n\n <helix-headless-notification\n default-read\n dismissible\n >\n <helix-headless-avatar\n name=\"Platform Team\"\n slot=\"media\"\n ></helix-headless-avatar>\n Your invitation to the <strong>Platform</strong> team was accepted.\n </helix-headless-notification>\n\n <a\n href=\"#all\"\n slot=\"footer\"\n >See everything</a>\n</helix-headless-notifications>\n\n<script>\n const raw = document.getElementById('raw')\n const ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString()\n const items = raw.querySelectorAll('helix-headless-notification')\n items[0].at = ago(3)\n items[1].at = ago(42)\n items[2].at = ago(1500)\n</script>","imports":["import '@fusion.dev/helix-headless/notifications'","import '@fusion.dev/helix-headless/avatar'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\nimport { useEffect, useState } from 'react'\n\nconst ago = (minutes: number): string => new Date(Date.now() - minutes * 60000).toISOString()\n\nconst AGES = [3, 42, 1500]\n\nexport function Example() {\n /* The timestamps are set after mount, relative to now, so the server and the\n client render the same markup. */\n const [at, setAt] = useState<string[]>([])\n\n useEffect(() => {\n setAt(AGES.map(ago))\n }, [])\n\n return (\n <helix-headless-notifications\n id=\"raw\"\n label=\"Notifications\"\n mark-all\n >\n <h2 slot=\"header\">Notifications</h2>\n <helix-headless-notification\n at={at[0]}\n dismissible\n >\n <helix-headless-avatar\n name=\"Ada Okonjo\"\n slot=\"media\"\n ></helix-headless-avatar>\n <strong>Ada Okonjo</strong> approved your deploy to production.\n <button\n slot=\"actions\"\n type=\"button\"\n >\n View\n </button>\n </helix-headless-notification>\n <helix-headless-notification\n at={at[1]}\n dismissible\n >\n <helix-headless-icon\n name=\"warning\"\n slot=\"media\"\n ></helix-headless-icon>\n Build <strong>#4821</strong> failed on <code>main</code>\n <button\n slot=\"actions\"\n type=\"button\"\n >\n Logs\n </button>\n </helix-headless-notification>\n <helix-headless-notification\n at={at[2]}\n default-read\n dismissible\n >\n <helix-headless-avatar\n name=\"Platform Team\"\n slot=\"media\"\n ></helix-headless-avatar>\n Your invitation to the <strong>Platform</strong> team was accepted.\n </helix-headless-notification>\n <a\n href=\"#all\"\n slot=\"footer\"\n >\n See everything\n </a>\n </helix-headless-notifications>\n )\n}"}],"number-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-number-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-number-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-number-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n}\n\nhelix-headless-number-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-number-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-number-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n text-align: center;\n}\n\nhelix-headless-number-input::part(decrement),\nhelix-headless-number-input::part(increment) {\n all: unset;\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-number-input::part(decrement) {\n border-inline-end: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-number-input::part(increment) {\n border-inline-start: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-number-input::part(decrement):hover:not(:disabled),\nhelix-headless-number-input::part(increment):hover:not(:disabled) {\n background-color: var(--_gray-surface);\n color: var(--_gray-strong);\n}\n\nhelix-headless-number-input::part(decrement):focus-visible,\nhelix-headless-number-input::part(increment):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-number-input::part(decrement):disabled,\nhelix-headless-number-input::part(increment):disabled {\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-number-input::part(decrement-mark),\nhelix-headless-number-input::part(increment-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-number-input::part(hint),\nhelix-headless-number-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-number-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-number-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-number-input:disabled::part(field) {\n cursor: not-allowed;\n opacity: 0.5;\n}","description":"The number input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-number-input\n default-value=\"3\"\n label=\"Guests\"\n min=\"1\"\n></helix-headless-number-input>","imports":["import '@fusion.dev/helix-headless/number-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-number-input\n default-value=\"3\"\n label=\"Guests\"\n min={1}\n ></helix-headless-number-input>\n )\n}"}],"object-inspector":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-object-inspector {\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n}\n\nhelix-headless-object-inspector::part(header) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-block-end: none;\n border-start-end-radius: var(--_radius-panel);\n border-start-start-radius: var(--_radius-panel);\n display: flex;\n padding: 0.5rem 1rem;\n}\n\nhelix-headless-object-inspector::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n}\n\nhelix-headless-object-inspector::part(frame) {\n position: relative;\n}\n\nhelix-headless-object-inspector::part(tree) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-strong);\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n line-height: 1.5;\n padding-block: 0.5rem;\n}\n\nhelix-headless-object-inspector[label]::part(tree) {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n}\n\nhelix-headless-object-inspector::part(row):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-object-inspector:focus-within::part(row-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-object-inspector::part(row) {\n overflow: hidden;\n padding-inline-end: 3rem;\n padding-inline-start: calc(var(--object-inspector-level) * 1.5rem + 0.75rem + 1em + 0.25rem);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-object-inspector::part(toggle) {\n block-size: 1em;\n color: var(--_gray-muted);\n inline-size: 1em;\n margin-inline: calc(-1em - 0.25rem) 0.25rem;\n vertical-align: -0.125em;\n}\n\nhelix-headless-object-inspector::part(string),\nhelix-headless-object-inspector::part(number),\nhelix-headless-object-inspector::part(boolean),\nhelix-headless-object-inspector::part(null),\nhelix-headless-object-inspector::part(summary),\nhelix-headless-object-inspector::part(count) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-object-inspector::part(count) {\n font-family: system-ui, sans-serif;\n font-size: 0.75rem;\n margin-inline-start: 0.5rem;\n}\n\nhelix-headless-object-inspector::part(copy) {\n inset-block-start: 0.25rem;\n inset-inline-end: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-object-inspector::part(copy-button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-object-inspector::part(copy-button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-object-inspector::part(copy-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-object-inspector::part(copy-mark) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}\n\nhelix-headless-object-inspector::part(copy-tooltip-surface) {\n background-color: var(--_gray-strong);\n border: none;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-object-inspector::part(copy-tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}","description":"The same API response on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<script\n id=\"response\"\n type=\"application/json\"\n>\n {\n \"build\": { \"cache\": { \"hit\": true, \"size\": 1840211 }, \"duration\": 41.2 },\n \"createdAt\": 1767225600000,\n \"id\": \"dpl_8f2c\",\n \"meta\": { \"author\": \"Ada Okonjo\", \"branch\": \"main\", \"commit\": \"4f2a9c1e\" },\n \"public\": true,\n \"regions\": [\"iad1\", \"sfo1\", \"fra1\"],\n \"state\": \"READY\",\n \"target\": null\n }\n</script>\n\n<helix-headless-object-inspector\n default-depth=\"2\"\n for=\"response\"\n label=\"GET /v1/deployments/dpl_8f2c\"\n></helix-headless-object-inspector>","imports":["import '@fusion.dev/helix-headless/object-inspector'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nconst RESPONSE = {\n build: { cache: { hit: true, size: 1840211 }, duration: 41.2 },\n createdAt: 1767225600000,\n id: 'dpl_8f2c',\n meta: { author: 'Ada Okonjo', branch: 'main', commit: '4f2a9c1e' },\n public: true,\n regions: ['iad1', 'sfo1', 'fra1'],\n state: 'READY',\n target: null,\n}\n\nexport function Example() {\n return (\n <>\n {/* The JSON is written into the page because React hydration drops object\n properties on custom elements. The text survives server rendering. */}\n <script\n id=\"response\"\n type=\"application/json\"\n >\n {JSON.stringify(RESPONSE)}\n </script>\n\n <helix-headless-object-inspector\n default-depth=\"2\"\n for=\"response\"\n label=\"GET /v1/deployments/dpl_8f2c\"\n ></helix-headless-object-inspector>\n </>\n )\n}"}],"option":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.listbox {\n max-inline-size: 20rem;\n}\n\nhelix-headless-option {\n display: block;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option::part(text) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-inline-size: 0;\n}\n\nhelix-headless-option::part(label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-option[disabled]::part(item) {\n cursor: default;\n opacity: 0.5;\n}","description":"The same option on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<!-- An option needs a parent with `role=\"listbox\"`. -->\n<div\n aria-label=\"Assignee\"\n class=\"listbox\"\n role=\"listbox\"\n>\n <helix-headless-option\n selected\n value=\"one\"\n >Alex Kim</helix-headless-option>\n <helix-headless-option\n data-active\n value=\"two\"\n >Sam Patel</helix-headless-option>\n <helix-headless-option value=\"three\">Jordan Lee</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >Priya Shah</helix-headless-option>\n</div>","imports":["import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n {/* An option needs a parent with `role=\"listbox\"`. */}\n <div\n aria-label=\"Assignee\"\n className=\"listbox\"\n role=\"listbox\"\n >\n <helix-headless-option\n selected\n value=\"one\"\n >\n Alex Kim\n </helix-headless-option>\n <helix-headless-option\n data-active\n value=\"two\"\n >\n Sam Patel\n </helix-headless-option>\n <helix-headless-option value=\"three\">Jordan Lee</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >\n Priya Shah\n </helix-headless-option>\n </div>\n </>\n )\n}"}],"outline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.layout {\n container-type: inline-size;\n display: grid;\n gap: 2rem;\n grid-template-columns: 12rem minmax(0, 1fr);\n}\n\n.nav {\n align-self: start;\n position: sticky;\n top: 1rem;\n}\n\n@container (width < 36rem) {\n .nav,\n .prose {\n grid-column: 1 / -1;\n }\n\n .nav {\n position: static;\n }\n}\n\n.prose {\n display: flex;\n flex-direction: column;\n gap: 3rem;\n}\n\n.prose section {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n min-block-size: 60vh;\n}\n\n.prose h2 {\n color: var(--_gray-strong);\n font-size: 1.125rem;\n font-weight: 600;\n line-height: calc(0.99em + 0.5rem);\n margin: 0;\n}\n\n.prose p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-outline {\n display: block;\n}\n\nhelix-headless-outline::part(nav) {\n background-image: linear-gradient(var(--_gray-line), var(--_gray-line));\n background-position: 1.5px 0;\n background-repeat: repeat-y;\n background-size: 1px 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\nhelix-headless-outline::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: var(--indicator-block-size, 0);\n border-radius: 9999px;\n inline-size: 1px;\n inset-block-start: 0;\n inset-inline-start: 1.5px;\n position: absolute;\n translate: 0 var(--indicator-y, 0);\n}\n\nhelix-headless-outline:hover::part(indicator) {\n inline-size: 2px;\n inset-inline-start: 1px;\n}\n\nhelix-headless-outline a {\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.5;\n margin-inline-start: 0.25rem;\n padding: 0.25rem 0.75rem;\n text-decoration: none;\n}\n\nhelix-headless-outline a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-outline a[aria-current] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-outline a[data-level=\"2\"] {\n padding-inline-start: 1.5rem;\n}\n\nhelix-headless-outline a[data-level=\"3\"] {\n padding-inline-start: 2.25rem;\n}\n\nhelix-headless-outline a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The outline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"layout\">\n <helix-headless-outline\n class=\"nav\"\n label=\"On this page\"\n >\n <a href=\"#install\">Install</a>\n <a\n data-level=\"2\"\n href=\"#requirements\"\n >Requirements</a>\n <a href=\"#usage\">Usage</a>\n <a\n data-level=\"2\"\n href=\"#options\"\n >Options</a>\n <a href=\"#api\">API</a>\n </helix-headless-outline>\n\n <div class=\"prose\">\n <section id=\"install\">\n <h2>Install</h2>\n <p>Install the package with your package manager, then import it once in the entry file of your app before you use it.</p>\n </section>\n <section id=\"requirements\">\n <h2>Requirements</h2>\n <p>The package needs a current version of Node.js and a browser that supports custom elements and modern JavaScript.</p>\n </section>\n <section id=\"usage\">\n <h2>Usage</h2>\n <p>Create a client with your API key, then call its methods to read and write the projects, files, and users in your account.</p>\n </section>\n <section id=\"options\">\n <h2>Options</h2>\n <p>Pass options when you create the client to set the request timeout, the number of retries, and the base URL to use.</p>\n </section>\n <section id=\"api\">\n <h2>API</h2>\n <p>Each method returns a promise. Errors include a code and a message that you can show to the people who use your app.</p>\n </section>\n </div>\n</div>","imports":["import '@fusion.dev/helix-headless/outline'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"layout\">\n <helix-headless-outline\n className=\"nav\"\n label=\"On this page\"\n >\n <a href=\"#install\">Install</a>\n <a\n data-level=\"2\"\n href=\"#requirements\"\n >\n Requirements\n </a>\n <a href=\"#usage\">Usage</a>\n <a\n data-level=\"2\"\n href=\"#options\"\n >\n Options\n </a>\n <a href=\"#api\">API</a>\n </helix-headless-outline>\n\n <div className=\"prose\">\n <section id=\"install\">\n <h2>Install</h2>\n <p>\n Install the package with your package manager, then import it once in the entry file of\n your app before you use it.\n </p>\n </section>\n <section id=\"requirements\">\n <h2>Requirements</h2>\n <p>\n The package needs a current version of Node.js and a browser that supports custom\n elements and modern JavaScript.\n </p>\n </section>\n <section id=\"usage\">\n <h2>Usage</h2>\n <p>\n Create a client with your API key, then call its methods to read and write the projects,\n files, and users in your account.\n </p>\n </section>\n <section id=\"options\">\n <h2>Options</h2>\n <p>\n Pass options when you create the client to set the request timeout, the number of\n retries, and the base URL to use.\n </p>\n </section>\n <section id=\"api\">\n <h2>API</h2>\n <p>\n Each method returns a promise. Errors include a code and a message that you can show to\n the people who use your app.\n </p>\n </section>\n </div>\n </div>\n )\n}"}],"pagination":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-pagination {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.25rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-pagination::part(list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-pagination::part(item) {\n display: inline-flex;\n}\n\nhelix-headless-pagination::part(page),\nhelix-headless-pagination::part(gap),\nhelix-headless-pagination::part(previous),\nhelix-headless-pagination::part(next) {\n align-items: center;\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n justify-content: center;\n min-inline-size: 2rem;\n padding: 0 0.25rem;\n}\n\nhelix-headless-pagination::part(page):hover,\nhelix-headless-pagination::part(previous):hover,\nhelix-headless-pagination::part(next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-pagination::part(page-current),\nhelix-headless-pagination::part(page-current):hover {\n background-color: var(--_gray-subtle);\n border-color: var(--_gray-edge);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-pagination::part(gap) {\n cursor: pointer;\n user-select: none;\n}\n\nhelix-headless-pagination::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-pagination::part(previous):disabled,\nhelix-headless-pagination::part(next):disabled {\n cursor: default;\n opacity: 0.5;\n}\n\nhelix-headless-pagination::part(page):focus-visible,\nhelix-headless-pagination::part(gap):focus-visible,\nhelix-headless-pagination::part(previous):focus-visible,\nhelix-headless-pagination::part(next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The pagination on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-pagination\n default-page=\"4\"\n pages=\"12\"\n></helix-headless-pagination>","imports":["import '@fusion.dev/helix-headless/pagination'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-pagination\n default-page=\"4\"\n pages={12}\n ></helix-headless-pagination>\n )\n}"}],"pin-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-pin-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-pin-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-pin-input::part(field) {\n align-self: start;\n display: flex;\n gap: 0.5rem;\n}\n\nhelix-headless-pin-input::part(cell) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: text;\n display: flex;\n font: inherit;\n font-size: 1.125rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-pin-input::part(cell):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-pin-input::part(cell-active) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-pin-input::part(caret) {\n background-color: currentcolor;\n block-size: 1em;\n inline-size: 1px;\n}\n\nhelix-headless-pin-input::part(placeholder) {\n color: var(--_gray-mark);\n}\n\nhelix-headless-pin-input::part(hint),\nhelix-headless-pin-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-pin-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-pin-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}","description":"The same pin input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-pin-input\n hint=\"Sent to your phone\"\n label=\"Verification code\"\n></helix-headless-pin-input>","imports":["import '@fusion.dev/helix-headless/pin-input'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-pin-input\n hint=\"Sent to your phone\"\n label=\"Verification code\"\n ></helix-headless-pin-input>\n )\n}"}],"popover":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n appearance: none;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding: 0 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-popover::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: 20rem;\n inset: auto;\n margin: 0;\n max-inline-size: calc(100vw - 1.5rem);\n padding: 1rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n gap: 1rem;\n line-height: 1.5;\n}\n\n.stack p {\n margin: 0;\n}\n\n.actions {\n display: flex;\n justify-content: flex-end;\n}","description":"The same popover on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-popover\n id=\"details\"\n label=\"Project details\"\n>\n <helix-headless-button slot=\"trigger\">Project details</helix-headless-button>\n <div class=\"stack\">\n <p>\n The project has 12 members and 48 files. It was last updated on\n September 15, 2026.\n </p>\n <div class=\"actions\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"details\"\n >\n Close\n </helix-headless-button>\n </div>\n </div>\n</helix-headless-popover>","imports":["import '@fusion.dev/helix-headless/popover'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":380,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-popover\n id=\"details\"\n label=\"Project details\"\n >\n <helix-headless-button slot=\"trigger\">Project details</helix-headless-button>\n <div className=\"stack\">\n <p>The project has 12 members and 48 files. It was last updated on September 15, 2026.</p>\n <div className=\"actions\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"details\"\n >\n Close\n </helix-headless-button>\n </div>\n </div>\n </helix-headless-popover>\n )\n}"}],"progress":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-progress {\n display: block;\n}\n\nhelix-headless-progress[show-value] {\n align-items: center;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 1fr auto;\n}\n\nhelix-headless-progress::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 0.5rem;\n border-radius: 9999px;\n display: block;\n inline-size: 100%;\n overflow: hidden;\n}\n\nhelix-headless-progress::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: 100%;\n border-radius: inherit;\n display: block;\n inline-size: calc(var(--progress-fraction, 0) * 100%);\n}\n\nhelix-headless-progress::part(value) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n line-height: 1.5;\n min-inline-size: 3ch;\n text-align: end;\n}","description":"The progress bar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-progress\n label=\"Uploading\"\n show-value\n value=\"62\"\n></helix-headless-progress>","imports":["import '@fusion.dev/helix-headless/progress'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-progress\n label=\"Uploading\"\n show-value\n value={62}\n ></helix-headless-progress>\n )\n}"}],"qr-code":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-qr-code {\n background-color: var(--_gray-surface);\n block-size: 12rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n color-scheme: light;\n display: block;\n inline-size: 12rem;\n}\n\nhelix-headless-qr-code::part(code) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n}","description":"The QR code on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-qr-code\n label=\"Documentation website\"\n value=\"https://fusion.dev/helix\"\n></helix-headless-qr-code>","imports":["import '@fusion.dev/helix-headless/qr-code'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-qr-code\n label=\"Documentation website\"\n value=\"https://fusion.dev/helix\"\n ></helix-headless-qr-code>\n )\n}"}],"quote":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-quote::part(quote) {\n color: var(--_gray-muted);\n font-style: italic;\n}","description":"The quote on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Alex said\n <helix-headless-quote cite=\"https://example.com/source\">the report will be ready on Friday</helix-headless-quote>\n during the call.\n</p>","imports":["import '@fusion.dev/helix-headless/quote'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n {' Alex said '}\n <helix-headless-quote cite=\"https://example.com/source\">\n the report will be ready on Friday\n </helix-headless-quote>\n {' during the call. '}\n </p>\n )\n}"}],"radio":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-radio-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-radio-group::part(items) {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-radio-group::part(hint),\nhelix-headless-radio-group::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-radio-group::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-radio-group::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-radio {\n display: block;\n}\n\nhelix-headless-radio::part(item) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-radio::part(box) {\n background-color: var(--_gray-surface);\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n display: grid;\n flex: none;\n inline-size: 1.25rem;\n place-items: center;\n}\n\n/* The dot, drawn on the circle rather than slotted into it. The tier renders no\n box for this: a consumer who wants one writes it, and a pseudo-element is the\n cheapest way to write it. */\nhelix-headless-radio::part(box)::after {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n border-radius: 50%;\n content: \"\";\n inline-size: 0.5rem;\n scale: 0;\n}\n\nhelix-headless-radio:not([disabled]):hover::part(box) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-radio:state(selected)::part(box) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-radio:state(selected)::part(box)::after {\n scale: 1;\n}\n\nhelix-headless-radio::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-radio[disabled] {\n opacity: 0.5;\n}\n\nhelix-headless-radio::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The radio on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-radio-group\n default-value=\"one\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"group\"\n>\n <helix-headless-radio value=\"one\">Free</helix-headless-radio>\n <helix-headless-radio value=\"two\">Pro</helix-headless-radio>\n <helix-headless-radio value=\"three\">Team</helix-headless-radio>\n</helix-headless-radio-group>","imports":["import '@fusion.dev/helix-headless/radio'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-radio-group\n default-value=\"one\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"group\"\n >\n <helix-headless-radio value=\"one\">Free</helix-headless-radio>\n <helix-headless-radio value=\"two\">Pro</helix-headless-radio>\n <helix-headless-radio value=\"three\">Team</helix-headless-radio>\n </helix-headless-radio-group>\n )\n}"}],"rating":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-rating {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-rating::part(field) {\n align-items: center;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-rating::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-rating::part(hint),\nhelix-headless-rating::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n}\n\nhelix-headless-rating::part(marks) {\n display: inline-flex;\n position: relative;\n}\n\nhelix-headless-rating::part(track),\nhelix-headless-rating::part(fill) {\n display: inline-flex;\n gap: 0.25rem;\n}\n\nhelix-headless-rating::part(track) {\n color: var(--_gray-line);\n}\n\nhelix-headless-rating::part(fill) {\n color: var(--_gray-strong);\n inline-size: calc(var(--rating-full, 0) * 1.5rem + var(--rating-part, 0) * 1.25rem);\n inset-block: 0;\n inset-inline-start: 0;\n overflow: hidden;\n position: absolute;\n}\n\nhelix-headless-rating::part(mark) {\n background-color: currentColor;\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.4l6.5-.9z\"/></svg>');\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-rating::part(option) {\n all: unset;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: calc((100% + 0.25rem) / var(--rating-steps, 1));\n inset-block: 0;\n inset-inline-start: calc(\n (var(--rating-step, 1) - 1) *\n (100% + 0.25rem) /\n var(--rating-steps, 1) -\n 0.125rem\n );\n position: absolute;\n}\n\nhelix-headless-rating::part(option):focus-visible {\n border-radius: var(--_radius-control);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-rating::part(value) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n line-height: 1;\n}","description":"The rating on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-rating\n default-value=\"3\"\n label=\"Rate your order\"\n></helix-headless-rating>","imports":["import '@fusion.dev/helix-headless/rating'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-rating\n default-value=\"3\"\n label=\"Rate your order\"\n ></helix-headless-rating>\n )\n}"}],"scatter-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-scatter-chart {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n\n display: block;\n position: relative;\n}\n\nhelix-headless-scatter-chart::part(plane) {\n column-gap: 0.5rem;\n display: grid;\n grid-template-areas:\n \"y-name y-name\"\n \"y-axis plot\"\n \". x-axis\"\n \". x-name\";\n grid-template-columns: auto minmax(0, 1fr);\n row-gap: 0.5rem;\n}\n\nhelix-headless-scatter-chart::part(plot) {\n block-size: 12.25rem;\n grid-area: plot;\n position: relative;\n}\n\nhelix-headless-scatter-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-scatter-chart::part(gridline) {\n stroke: var(--_gray-fill);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-scatter-chart::part(points) {\n opacity: 0.8;\n}\n\nhelix-headless-scatter-chart::part(point),\nhelix-headless-scatter-chart::part(point-ring) {\n fill: none;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-scatter-chart::part(point) {\n stroke: var(--chart-series);\n stroke-width: 8px;\n}\n\nhelix-headless-scatter-chart::part(point-ring) {\n stroke: var(--_gray-surface);\n stroke-width: 10px;\n}\n\nhelix-headless-scatter-chart::part(point-active) {\n background-color: var(--chart-series);\n block-size: 8px;\n border-radius: 50%;\n box-shadow: 0 0 0 1px var(--_gray-surface);\n inline-size: 8px;\n inset-block-start: var(--chart-point-y);\n inset-inline-start: var(--chart-point-x);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-scatter-chart::part(y-axis),\nhelix-headless-scatter-chart::part(x-axis) {\n display: grid;\n}\n\nhelix-headless-scatter-chart::part(y-axis) {\n grid-area: y-axis;\n}\n\nhelix-headless-scatter-chart::part(x-axis) {\n grid-area: x-axis;\n}\n\nhelix-headless-scatter-chart::part(x-tick),\nhelix-headless-scatter-chart::part(y-tick) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n grid-area: 1 / 1;\n line-height: 1;\n position: relative;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(x-tick) {\n inset-inline-start: var(--chart-tick);\n justify-self: start;\n translate: -50% 0;\n}\n\nhelix-headless-scatter-chart::part(y-tick) {\n align-self: start;\n inset-block-start: var(--chart-tick);\n justify-self: end;\n translate: 0 -50%;\n}\n\nhelix-headless-scatter-chart::part(x-name),\nhelix-headless-scatter-chart::part(y-name) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.5;\n}\n\nhelix-headless-scatter-chart::part(x-name) {\n grid-area: x-name;\n justify-self: end;\n}\n\nhelix-headless-scatter-chart::part(y-name) {\n grid-area: y-name;\n justify-self: start;\n}\n\nhelix-headless-scatter-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n}\n\nhelix-headless-scatter-chart::part(tooltip-surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-line);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n padding: 0.5rem;\n}\n\nhelix-headless-scatter-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same scatter chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"pages\"\n >\n <caption>Page weight and load time</caption>\n <thead>\n <tr>\n <th scope=\"col\">Page</th>\n <th scope=\"col\">Weight (KB)</th>\n <th scope=\"col\">Load time (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Home</th>\n <td data-value=\"820\">820</td>\n <td data-value=\"1240\">1,240</td>\n </tr>\n <tr>\n <th scope=\"row\">Pricing</th>\n <td data-value=\"640\">640</td>\n <td data-value=\"980\">980</td>\n </tr>\n <tr>\n <th scope=\"row\">Plans</th>\n <td data-value=\"652\">652</td>\n <td data-value=\"994\">994</td>\n </tr>\n <tr>\n <th scope=\"row\">Compare</th>\n <td data-value=\"631\">631</td>\n <td data-value=\"1012\">1,012</td>\n </tr>\n <tr>\n <th scope=\"row\">Docs</th>\n <td data-value=\"1180\">1,180</td>\n <td data-value=\"1710\">1,710</td>\n </tr>\n <tr>\n <th scope=\"row\">Blog</th>\n <td data-value=\"1450\">1,450</td>\n <td data-value=\"2050\">2,050</td>\n </tr>\n <tr>\n <th scope=\"row\">Changelog</th>\n <td data-value=\"530\">530</td>\n <td data-value=\"860\">860</td>\n </tr>\n <tr>\n <th scope=\"row\">Careers</th>\n <td data-value=\"910\">910</td>\n <td data-value=\"1380\">1,380</td>\n </tr>\n <tr>\n <th scope=\"row\">About</th>\n <td data-value=\"470\">470</td>\n <td data-value=\"790\">790</td>\n </tr>\n <tr>\n <th scope=\"row\">Contact</th>\n <td data-value=\"380\">380</td>\n <td data-value=\"690\">690</td>\n </tr>\n <tr>\n <th scope=\"row\">Status</th>\n <td data-value=\"290\">290</td>\n <td data-value=\"520\">520</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"760\">760</td>\n <td data-value=\"1310\">1,310</td>\n </tr>\n <tr>\n <th scope=\"row\">Account</th>\n <td data-value=\"1020\">1,020</td>\n <td data-value=\"1490\">1,490</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td data-value=\"1320\">1,320</td>\n <td data-value=\"1880\">1,880</td>\n </tr>\n <tr>\n <th scope=\"row\">Support</th>\n <td data-value=\"700\">700</td>\n <td data-value=\"1150\">1,150</td>\n </tr>\n <tr>\n <th scope=\"row\">Legal</th>\n <td data-value=\"350\">350</td>\n <td data-value=\"610\">610</td>\n </tr>\n <tr>\n <th scope=\"row\">Press</th>\n <td data-value=\"980\">980</td>\n <td data-value=\"1600\">1,600</td>\n </tr>\n <tr>\n <th scope=\"row\">Events</th>\n <td data-value=\"1260\">1,260</td>\n <td data-value=\"1740\">1,740</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-scatter-chart\n for=\"pages\"\n gridlines\n ></helix-headless-scatter-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/scatter-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"pages\"\n >\n <caption>Page weight and load time</caption>\n <thead>\n <tr>\n <th scope=\"col\">Page</th>\n <th scope=\"col\">Weight (KB)</th>\n <th scope=\"col\">Load time (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Home</th>\n <td data-value=\"820\">820</td>\n <td data-value=\"1240\">1,240</td>\n </tr>\n <tr>\n <th scope=\"row\">Pricing</th>\n <td data-value=\"640\">640</td>\n <td data-value=\"980\">980</td>\n </tr>\n <tr>\n <th scope=\"row\">Plans</th>\n <td data-value=\"652\">652</td>\n <td data-value=\"994\">994</td>\n </tr>\n <tr>\n <th scope=\"row\">Compare</th>\n <td data-value=\"631\">631</td>\n <td data-value=\"1012\">1,012</td>\n </tr>\n <tr>\n <th scope=\"row\">Docs</th>\n <td data-value=\"1180\">1,180</td>\n <td data-value=\"1710\">1,710</td>\n </tr>\n <tr>\n <th scope=\"row\">Blog</th>\n <td data-value=\"1450\">1,450</td>\n <td data-value=\"2050\">2,050</td>\n </tr>\n <tr>\n <th scope=\"row\">Changelog</th>\n <td data-value=\"530\">530</td>\n <td data-value=\"860\">860</td>\n </tr>\n <tr>\n <th scope=\"row\">Careers</th>\n <td data-value=\"910\">910</td>\n <td data-value=\"1380\">1,380</td>\n </tr>\n <tr>\n <th scope=\"row\">About</th>\n <td data-value=\"470\">470</td>\n <td data-value=\"790\">790</td>\n </tr>\n <tr>\n <th scope=\"row\">Contact</th>\n <td data-value=\"380\">380</td>\n <td data-value=\"690\">690</td>\n </tr>\n <tr>\n <th scope=\"row\">Status</th>\n <td data-value=\"290\">290</td>\n <td data-value=\"520\">520</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"760\">760</td>\n <td data-value=\"1310\">1,310</td>\n </tr>\n <tr>\n <th scope=\"row\">Account</th>\n <td data-value=\"1020\">1,020</td>\n <td data-value=\"1490\">1,490</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td data-value=\"1320\">1,320</td>\n <td data-value=\"1880\">1,880</td>\n </tr>\n <tr>\n <th scope=\"row\">Support</th>\n <td data-value=\"700\">700</td>\n <td data-value=\"1150\">1,150</td>\n </tr>\n <tr>\n <th scope=\"row\">Legal</th>\n <td data-value=\"350\">350</td>\n <td data-value=\"610\">610</td>\n </tr>\n <tr>\n <th scope=\"row\">Press</th>\n <td data-value=\"980\">980</td>\n <td data-value=\"1600\">1,600</td>\n </tr>\n <tr>\n <th scope=\"row\">Events</th>\n <td data-value=\"1260\">1,260</td>\n <td data-value=\"1740\">1,740</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-scatter-chart\n for=\"pages\"\n gridlines=\"both\"\n ></helix-headless-scatter-chart>\n </div>\n )\n}"}],"scroll-area":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-scroll-area {\n --_fade-block-start: 0rem;\n --_fade-block-end: 0rem;\n\n block-size: 12rem;\n display: block;\n inline-size: 20rem;\n position: relative;\n}\n\nhelix-headless-scroll-area:state(more-block-start) {\n --_fade-block-start: 2rem;\n}\n\nhelix-headless-scroll-area:state(more-block-end) {\n --_fade-block-end: 2rem;\n}\n\nhelix-headless-scroll-area::part(viewport) {\n block-size: 100%;\n mask-image: linear-gradient(\n to bottom,\n transparent,\n var(--_gray-strong) var(--_fade-block-start),\n var(--_gray-strong) calc(100% - var(--_fade-block-end)),\n transparent\n );\n overscroll-behavior: contain;\n scrollbar-color: var(--_gray-line) transparent;\n scrollbar-width: thin;\n}\n\nhelix-headless-scroll-area::part(viewport):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-scroll-area p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0 0 0.75rem;\n}","description":"The scroll area on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-scroll-area label=\"Release notes\">\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n</helix-headless-scroll-area>","imports":["import '@fusion.dev/helix-headless/scroll-area'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-scroll-area label=\"Release notes\">\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n </helix-headless-scroll-area>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\nhelix-headless-scroll-area {\n block-size: 12rem;\n display: block;\n inline-size: 20rem;\n position: relative;\n}\n\n/* The browser's own scrollbar goes, since the component draws one. */\nhelix-headless-scroll-area::part(viewport) {\n block-size: 100%;\n overscroll-behavior: contain;\n scrollbar-width: none;\n}\n\nhelix-headless-scroll-area::part(viewport):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\n/* Each scrollbar over the content at its edge, and shown only while the\n component names it visible. */\nhelix-headless-scroll-area::part(scrollbar) {\n opacity: 0;\n position: absolute;\n touch-action: none;\n transition: opacity 150ms;\n user-select: none;\n}\n\nhelix-headless-scroll-area::part(scrollbar-visible) {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-scroll-area::part(scrollbar) {\n transition: none;\n }\n}\n\nhelix-headless-scroll-area::part(scrollbar-vertical) {\n inline-size: 0.625rem;\n inset-block: 0;\n inset-inline-end: 0;\n}\n\nhelix-headless-scroll-area::part(scrollbar-horizontal) {\n block-size: 0.625rem;\n inset-block-end: 0;\n inset-inline: 0;\n}\n\n/* The thumb's length is its share of the track, and its start is how far\n along the content is, times the room the thumb has left. */\nhelix-headless-scroll-area::part(thumb) {\n --_thumb: max(1.5rem, var(--scroll-area-thumb-fraction) * 100%);\n\n background-color: var(--_gray-line);\n border-radius: 9999px;\n position: absolute;\n}\n\nhelix-headless-scroll-area::part(thumb-vertical) {\n block-size: var(--_thumb);\n inset-block-start: calc(var(--scroll-area-scroll-fraction) * (100% - var(--_thumb)));\n inset-inline: 2px;\n}\n\nhelix-headless-scroll-area::part(thumb-horizontal) {\n inline-size: var(--_thumb);\n inset-block: 2px;\n inset-inline-start: calc(var(--scroll-area-scroll-fraction) * (100% - var(--_thumb)));\n}\n\nhelix-headless-scroll-area p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0 0 0.75rem;\n padding-inline-end: 1rem;\n}","description":"Scrollbars drawn by the scroll area, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-scroll-area\n label=\"Release notes\"\n scrollbars=\"auto\"\n>\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n</helix-headless-scroll-area>","imports":["import '@fusion.dev/helix-headless/scroll-area'"],"label":"Scrollbars","renders":[],"slug":"scrollbars","tier":"headless","tsx":"import './scrollbars.css'\n\nexport function Example() {\n return (\n <helix-headless-scroll-area\n label=\"Release notes\"\n scrollbars=\"auto\"\n >\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n </helix-headless-scroll-area>\n )\n}"}],"select":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-select {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-select::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-select::part(trigger) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n justify-content: space-between;\n line-height: 1.5;\n padding: 0 0.5rem;\n}\n\nhelix-headless-select:not(:disabled)::part(trigger):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-select::part(trigger):focus-visible {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-select::part(value) {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-select::part(indicator) {\n block-size: 1rem;\n fill: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-select > helix-headless-icon[slot=\"indicator\"] {\n color: var(--_gray-muted);\n font-size: 1.25rem;\n}\n\nhelix-headless-select:state(open)::part(indicator),\nhelix-headless-select:state(open) > [slot=\"indicator\"] {\n scale: 1 -1;\n}\n\nhelix-headless-select::part(hint),\nhelix-headless-select::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-select::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-select::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-select::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n min-inline-size: max-content;\n padding: 0.5rem 0;\n}\n\nhelix-headless-select::part(listbox-items) {\n max-block-size: 14rem;\n overflow: auto;\n}\n\nhelix-headless-select::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-select::part(listbox-items):focus-visible {\n outline: none;\n}\n\nhelix-headless-select::part(listbox-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}","description":"The same select on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-select\n default-value=\"two\"\n hint=\"Used for emails and notifications\"\n label=\"Language\"\n name=\"choice\"\n>\n <helix-headless-icon\n name=\"caret-down\"\n slot=\"indicator\"\n ></helix-headless-icon>\n <helix-headless-option value=\"one\">English</helix-headless-option>\n <helix-headless-option value=\"two\">Spanish</helix-headless-option>\n <helix-headless-option value=\"three\">French</helix-headless-option>\n</helix-headless-select>","imports":["import '@fusion.dev/helix-headless/select'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-select\n default-value=\"two\"\n hint=\"Used for emails and notifications\"\n label=\"Language\"\n name=\"choice\"\n >\n <helix-headless-icon\n name=\"caret-down\"\n slot=\"indicator\"\n ></helix-headless-icon>\n <helix-headless-option value=\"one\">English</helix-headless-option>\n <helix-headless-option value=\"two\">Spanish</helix-headless-option>\n <helix-headless-option value=\"three\">French</helix-headless-option>\n </helix-headless-select>\n )\n}"}],"skeleton":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-skeleton {\n display: block;\n inline-size: 100%;\n}\n\nhelix-headless-skeleton::part(skeleton) {\n background-color: var(--_gray-fill);\n block-size: 100%;\n border-radius: var(--_radius-control);\n display: block;\n inline-size: 100%;\n}\n\n.row {\n align-items: center;\n display: flex;\n gap: 1rem;\n}\n\n.avatar {\n block-size: 2.5rem;\n flex: none;\n inline-size: 2.5rem;\n}\n\n.avatar::part(skeleton) {\n border-radius: 50%;\n}\n\n.stack {\n display: flex;\n flex: auto;\n inline-size: 16rem;\n flex-direction: column;\n gap: 0.25rem;\n min-inline-size: 0;\n}\n\n.line-name,\n.line-detail {\n block-size: 0.875rem;\n}\n\n.line-name::part(skeleton),\n.line-detail::part(skeleton) {\n border-radius: 9999px;\n}\n\n.line-name {\n inline-size: 40%;\n}\n\n.line-detail {\n inline-size: 70%;\n}","description":"The same skeleton on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-skeleton class=\"avatar\"></helix-headless-skeleton>\n <div class=\"stack\">\n <helix-headless-skeleton class=\"line-name\"></helix-headless-skeleton>\n <helix-headless-skeleton class=\"line-detail\"></helix-headless-skeleton>\n </div>\n</div>","imports":["import '@fusion.dev/helix-headless/skeleton'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-skeleton className=\"avatar\"></helix-headless-skeleton>\n <div className=\"stack\">\n <helix-headless-skeleton className=\"line-name\"></helix-headless-skeleton>\n <helix-headless-skeleton className=\"line-detail\"></helix-headless-skeleton>\n </div>\n </div>\n )\n}"}],"skip-link":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-skip-link:not(:focus-within) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-skip-link:focus-within {\n display: block;\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: fixed;\n z-index: 1;\n}\n\nhelix-headless-skip-link::part(link) {\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: inline-block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.5;\n padding: 0.75rem 1rem;\n text-decoration: none;\n}\n\nhelix-headless-skip-link::part(link):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nheader {\n align-items: center;\n block-size: 3.5rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: 1fr auto 1fr;\n padding: 0 1.5rem;\n}\n\nheader > span {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\nnav {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n}\n\nnav a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding: 0 0.75rem;\n text-decoration: none;\n white-space: nowrap;\n}\n\nnav a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nnav a[aria-current=\"page\"] {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nnav a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nmain {\n padding-inline: 1.5rem;\n}\n\nmain p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}","description":"The skip link on the headless tier, with every style written by hand, focused here so it shows.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-skip-link></helix-headless-skip-link>\n\n<header>\n <span>Logo</span>\n <nav aria-label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >Overview</a>\n <a href=\"#two\">Projects</a>\n </nav>\n</header>\n\n<main id=\"main\">\n <p>Welcome back. You have 3 new messages.</p>\n</main>\n\n<script>\n const skip = document.querySelector('helix-headless-skip-link')\n customElements\n .whenDefined('helix-headless-skip-link')\n .then(() => skip.updateComplete)\n .then(() => skip.focus({ preventScroll: true }))\n</script>","imports":["import '@fusion.dev/helix-headless/skip-link'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\nimport { useEffect } from 'react'\n\nexport function Example() {\n useEffect(() => {\n const skip = document.querySelector('helix-headless-skip-link')\n customElements\n .whenDefined('helix-headless-skip-link')\n .then(() => skip?.updateComplete)\n .then(() => skip?.focus({ preventScroll: true }))\n }, [])\n\n return (\n <>\n <helix-headless-skip-link></helix-headless-skip-link>\n\n <header>\n <span>Logo</span>\n <nav aria-label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >\n Overview\n </a>\n <a href=\"#two\">Projects</a>\n </nav>\n </header>\n\n <main id=\"main\">\n <p>Welcome back. You have 3 new messages.</p>\n </main>\n </>\n )\n}"}],"slider":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-slider {\n --_along: to right;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-slider:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-slider::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-slider::part(field) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n}\n\nhelix-headless-slider::part(control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background: linear-gradient(\n var(--_along),\n var(--_gray-mark) calc(var(--slider-fraction, 0) * 100%),\n var(--_gray-fill) calc(var(--slider-fraction, 0) * 100%)\n );\n block-size: 0.5rem;\n border-radius: 9999px;\n cursor: pointer;\n flex: 1 1 auto;\n font: inherit;\n min-inline-size: 0;\n}\n\nhelix-headless-slider::part(control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.5rem;\n}\n\nhelix-headless-slider::part(control)::-moz-range-track {\n background: none;\n block-size: 0.5rem;\n}\n\nhelix-headless-slider::part(control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.375rem;\n}\n\nhelix-headless-slider::part(control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-slider::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-slider::part(output) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n line-height: 1.5;\n min-inline-size: 3ch;\n text-align: end;\n}\n\nhelix-headless-slider::part(hint),\nhelix-headless-slider::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-slider::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-slider::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}","description":"The slider on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-slider\n default-value=\"40\"\n hint=\"Applies to notification sounds\"\n label=\"Volume\"\n show-value\n></helix-headless-slider>","imports":["import '@fusion.dev/helix-headless/slider'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-slider\n default-value=\"40\"\n hint=\"Applies to notification sounds\"\n label=\"Volume\"\n show-value\n ></helix-headless-slider>\n )\n}"}],"sparkline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n.row {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\nhelix-headless-sparkline {\n block-size: 2.1875rem;\n color: var(--_gray-strong);\n display: inline-block;\n inline-size: 6.125rem;\n position: relative;\n vertical-align: middle;\n}\n\nhelix-headless-sparkline::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-sparkline::part(line) {\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 1.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-sparkline::part(bar) {\n fill: currentColor;\n}\n\nhelix-headless-sparkline::part(area) {\n fill: none;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(area) {\n fill: url(\"#sparkline-wash\");\n}\n\nhelix-headless-sparkline::part(wash-start),\nhelix-headless-sparkline::part(wash-end) {\n stop-color: currentColor;\n stop-opacity: 0;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(wash-start) {\n stop-opacity: 0.45;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(wash-end) {\n stop-opacity: 0.05;\n}\n\nhelix-headless-sparkline::part(terminus) {\n background-color: currentColor;\n block-size: 5px;\n border-radius: 50%;\n inline-size: 5px;\n inset-block-start: var(--chart-terminus-y);\n inset-inline-start: var(--chart-terminus-x);\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-sparkline:dir(rtl)::part(terminus) {\n translate: 50% -50%;\n}\n\nhelix-headless-sparkline::part(svg):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-sparkline::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-sparkline::part(cursor) {\n background-color: currentColor;\n block-size: 5px;\n border-radius: 50%;\n inline-size: 5px;\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-sparkline::part(readout) {\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n padding: 0 0.25rem;\n pointer-events: none;\n position: absolute;\n translate: -50% calc(-100% - 5px);\n white-space: nowrap;\n}","description":"The same sparkline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-sparkline\n label=\"Sessions over seven days, as bars\"\n plot=\"bar\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as a line\"\n plot=\"line\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as an area\"\n plot=\"area\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n</div>","imports":["import '@fusion.dev/helix-headless/sparkline'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-sparkline\n label=\"Sessions over seven days, as bars\"\n plot=\"bar\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as a line\"\n plot=\"line\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as an area\"\n plot=\"area\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n </div>\n )\n}"}],"spatial-bar-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-bar-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-bar-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-bar-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the outline on the bar the pointer or the keys rest on. */\nhelix-headless-spatial-bar-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-bar-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-bar-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-bar-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-bar-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-bar-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The same outline over everything, faint and dashed, where others hide it. */\nhelix-headless-spatial-bar-chart::part(ring-behind) {\n fill: none;\n opacity: 0.6;\n stroke: var(--_gray-strong);\n stroke-dasharray: 3px 2px;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-bar-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-bar-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its series' gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-bar-chart::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-bar-chart-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-bar-chart::part(live),\nhelix-headless-spatial-bar-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Signups for five regions over four quarters, each a bar in its quarter's color, drawn in 3D in SVG. Drag to turn the bars, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"signups\"\n>\n <caption>Signups by region and quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Region</th>\n <th scope=\"col\">Q1</th>\n <th scope=\"col\">Q2</th>\n <th scope=\"col\">Q3</th>\n <th scope=\"col\">Q4</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">North</th>\n <td>420</td>\n <td>465</td>\n <td>510</td>\n <td>580</td>\n </tr>\n <tr>\n <th scope=\"row\">South</th>\n <td>310</td>\n <td>355</td>\n <td>340</td>\n <td>390</td>\n </tr>\n <tr>\n <th scope=\"row\">East</th>\n <td>520</td>\n <td>560</td>\n <td>615</td>\n <td>690</td>\n </tr>\n <tr>\n <th scope=\"row\">West</th>\n <td>260</td>\n <td>300</td>\n <td>345</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Central</th>\n <td>180</td>\n <td>210</td>\n <td>205</td>\n <td>240</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-bar-chart\n for=\"signups\"\n label=\"Signups by region and quarter\"\n></helix-headless-spatial-bar-chart>","imports":["import '@fusion.dev/helix-headless/spatial-bar-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by region and quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Region</th>\n <th scope=\"col\">Q1</th>\n <th scope=\"col\">Q2</th>\n <th scope=\"col\">Q3</th>\n <th scope=\"col\">Q4</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">North</th>\n <td>420</td>\n <td>465</td>\n <td>510</td>\n <td>580</td>\n </tr>\n <tr>\n <th scope=\"row\">South</th>\n <td>310</td>\n <td>355</td>\n <td>340</td>\n <td>390</td>\n </tr>\n <tr>\n <th scope=\"row\">East</th>\n <td>520</td>\n <td>560</td>\n <td>615</td>\n <td>690</td>\n </tr>\n <tr>\n <th scope=\"row\">West</th>\n <td>260</td>\n <td>300</td>\n <td>345</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Central</th>\n <td>180</td>\n <td>210</td>\n <td>205</td>\n <td>240</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-bar-chart\n for=\"signups\"\n label=\"Signups by region and quarter\"\n ></helix-headless-spatial-bar-chart>\n </>\n )\n}"}],"spatial-heatmap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\nhelix-headless-spatial-heatmap {\n display: grid;\n grid-template-columns: minmax(0, max-content);\n\n --heatmap-tone-1: var(--_gray-fill);\n --heatmap-tone-2: var(--_gray-line);\n --heatmap-tone-3: var(--_gray-mark);\n --heatmap-tone-4: var(--_gray-muted);\n --heatmap-tone-5: var(--_gray-strong);\n}\n\n/* The strip is the drawing's span of cells, at 0.866 of a cell each, which is\n the cosine of 30 degrees. */\nhelix-headless-spatial-heatmap::part(strip) {\n inline-size: calc(var(--spatial-heatmap-span) * 0.866 * 1.25rem);\n max-inline-size: 100%;\n position: relative;\n}\n\nhelix-headless-spatial-heatmap::part(drawing) {\n display: block;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\n/* Each side is the face's tone a step less light, and the slab is a step\n darker than an empty tile. */\nhelix-headless-spatial-heatmap::part(top-face) {\n fill: var(--heatmap-tone, var(--_gray-subtle));\n}\n\nhelix-headless-spatial-heatmap::part(left-face) {\n fill: oklch(from var(--heatmap-tone, var(--_gray-subtle)) calc(l - 0.07) c h);\n}\n\nhelix-headless-spatial-heatmap::part(right-face) {\n fill: oklch(from var(--heatmap-tone, var(--_gray-subtle)) calc(l - 0.14) c h);\n}\n\nhelix-headless-spatial-heatmap::part(base-top) {\n fill: var(--_gray-fill);\n}\n\nhelix-headless-spatial-heatmap::part(base-left) {\n fill: oklch(from var(--_gray-fill) calc(l - 0.07) c h);\n}\n\nhelix-headless-spatial-heatmap::part(base-right) {\n fill: oklch(from var(--_gray-fill) calc(l - 0.14) c h);\n}\n\nhelix-headless-spatial-heatmap::part(cell-active) {\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n}\n\nhelix-headless-spatial-heatmap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-spatial-heatmap::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\n/* The first and last labels stand where the component measures them, under\n their ends of the front edge and clear of the drawing. */\nhelix-headless-spatial-heatmap::part(footer) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n min-block-size: 1lh;\n position: relative;\n}\n\nhelix-headless-spatial-heatmap::part(start),\nhelix-headless-spatial-heatmap::part(end) {\n inset-block-start: var(--spatial-heatmap-label-y, 0);\n inset-inline-start: var(--spatial-heatmap-label-x, 0);\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-spatial-heatmap::part(live),\nhelix-headless-spatial-heatmap::part(overview) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-spatial-heatmap::part(strip):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"Sixteen weeks of commits, each day a prism as tall as its count.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-spatial-heatmap\n for=\"commits\"\n label=\"Commits, last sixteen weeks\"\n rows=\"7\"\n thresholds=\"1 3 5 7 9\"\n tones=\"1 2 3 4 5\"\n>\n <table\n data-hidden-visually\n id=\"commits\"\n >\n <caption>Commits</caption>\n <tbody>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-18\">18 May</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-19\">19 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-20\">20 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-21\">21 May</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-22\">22 May</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-23\">23 May</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-24\">24 May</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-25\">25 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-26\">26 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-27\">27 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-28\">28 May</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-29\">29 May</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-30\">30 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-31\">31 May</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-01\">1 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-02\">2 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-03\">3 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-04\">4 Jun</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-05\">5 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-06\">6 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-07\">7 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-08\">8 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-09\">9 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-10\">10 Jun</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-11\">11 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-12\">12 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-13\">13 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-14\">14 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-15\">15 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-16\">16 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-17\">17 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-18\">18 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-19\">19 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-20\">20 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-21\">21 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-22\">22 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-23\">23 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-24\">24 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-25\">25 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-26\">26 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-27\">27 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-28\">28 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-29\">29 Jun</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-30\">30 Jun</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-01\">1 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-02\">2 Jul</time></th>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-03\">3 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-04\">4 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-05\">5 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-06\">6 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-07\">7 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-08\">8 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-09\">9 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-10\">10 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-11\">11 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-12\">12 Jul</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-13\">13 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-14\">14 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-15\">15 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-16\">16 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-17\">17 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-18\">18 Jul</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-19\">19 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-20\">20 Jul</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-21\">21 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-22\">22 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-23\">23 Jul</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-24\">24 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-25\">25 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-26\">26 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-27\">27 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-28\">28 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-29\">29 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-30\">30 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-31\">31 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-01\">1 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-02\">2 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-03\">3 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-04\">4 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-05\">5 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-06\">6 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-07\">7 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-08\">8 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-09\">9 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-10\">10 Aug</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-11\">11 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-12\">12 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-13\">13 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-14\">14 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-15\">15 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-16\">16 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-17\">17 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-18\">18 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-19\">19 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-20\">20 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-21\">21 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-22\">22 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-23\">23 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-24\">24 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-25\">25 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-26\">26 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-27\">27 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-28\">28 Aug</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-29\">29 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-30\">30 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-31\">31 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-01\">1 Sep</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-02\">2 Sep</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-03\">3 Sep</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-04\">4 Sep</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-05\">5 Sep</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-06\">6 Sep</time></th>\n <td>0</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">May</span>\n <span slot=\"end\">Sep</span>\n</helix-headless-spatial-heatmap>","imports":["import '@fusion.dev/helix-headless/spatial-heatmap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-spatial-heatmap\n for=\"commits\"\n label=\"Commits, last sixteen weeks\"\n rows={7}\n thresholds=\"1 3 5 7 9\"\n tones=\"1 2 3 4 5\"\n >\n <table\n data-hidden-visually\n id=\"commits\"\n >\n <caption>Commits</caption>\n <tbody>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-18\">18 May</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-19\">19 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-20\">20 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-21\">21 May</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-22\">22 May</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-23\">23 May</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-24\">24 May</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-25\">25 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-26\">26 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-27\">27 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-28\">28 May</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-29\">29 May</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-30\">30 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-31\">31 May</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-01\">1 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-02\">2 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-03\">3 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-04\">4 Jun</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-05\">5 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-06\">6 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-07\">7 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-08\">8 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-09\">9 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-10\">10 Jun</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-11\">11 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-12\">12 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-13\">13 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-14\">14 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-15\">15 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-16\">16 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-17\">17 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-18\">18 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-19\">19 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-20\">20 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-21\">21 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-22\">22 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-23\">23 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-24\">24 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-25\">25 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-26\">26 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-27\">27 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-28\">28 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-29\">29 Jun</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-30\">30 Jun</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-01\">1 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-02\">2 Jul</time>\n </th>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-03\">3 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-04\">4 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-05\">5 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-06\">6 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-07\">7 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-08\">8 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-09\">9 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-10\">10 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-11\">11 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-12\">12 Jul</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-13\">13 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-14\">14 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-15\">15 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-16\">16 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-17\">17 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-18\">18 Jul</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-19\">19 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-20\">20 Jul</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-21\">21 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-22\">22 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-23\">23 Jul</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-24\">24 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-25\">25 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-26\">26 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-27\">27 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-28\">28 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-29\">29 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-30\">30 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-31\">31 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-01\">1 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-02\">2 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-03\">3 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-04\">4 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-05\">5 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-06\">6 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-07\">7 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-08\">8 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-09\">9 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-10\">10 Aug</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-11\">11 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-12\">12 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-13\">13 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-14\">14 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-15\">15 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-16\">16 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-17\">17 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-18\">18 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-19\">19 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-20\">20 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-21\">21 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-22\">22 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-23\">23 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-24\">24 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-25\">25 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-26\">26 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-27\">27 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-28\">28 Aug</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-29\">29 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-30\">30 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-31\">31 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-01\">1 Sep</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-02\">2 Sep</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-03\">3 Sep</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-04\">4 Sep</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-05\">5 Sep</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-06\">6 Sep</time>\n </th>\n <td>0</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">May</span>\n <span slot=\"end\">Sep</span>\n </helix-headless-spatial-heatmap>\n )\n}"}],"spatial-ribbon-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-ribbon-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-ribbon-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-ribbon-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-ribbon-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-ribbon-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-ribbon-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-ribbon-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-ribbon-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-ribbon-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-ribbon-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-ribbon-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its series' gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-ribbon-chart::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-ribbon-chart-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-ribbon-chart::part(live),\nhelix-headless-spatial-ribbon-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Response time for four regions over two weeks, each region a ribbon in its own color, drawn in 3D in SVG. Drag to turn the ribbons, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"latency\"\n>\n <caption>Response time by region, first two weeks of September</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Frankfurt (ms)</th>\n <th scope=\"col\">Virginia (ms)</th>\n <th scope=\"col\">Singapore (ms)</th>\n <th scope=\"col\">São Paulo (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">1 Sep</th>\n <td>120</td>\n <td>110</td>\n <td>196</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">2 Sep</th>\n <td>128</td>\n <td>113</td>\n <td>191</td>\n <td>204</td>\n </tr>\n <tr>\n <th scope=\"row\">3 Sep</th>\n <td>134</td>\n <td>112</td>\n <td>184</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">4 Sep</th>\n <td>138</td>\n <td>108</td>\n <td>176</td>\n <td>193</td>\n </tr>\n <tr>\n <th scope=\"row\">5 Sep</th>\n <td>137</td>\n <td>101</td>\n <td>169</td>\n <td>192</td>\n </tr>\n <tr>\n <th scope=\"row\">6 Sep</th>\n <td>134</td>\n <td>93</td>\n <td>164</td>\n <td>195</td>\n </tr>\n <tr>\n <th scope=\"row\">7 Sep</th>\n <td>127</td>\n <td>85</td>\n <td>202</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">8 Sep</th>\n <td>119</td>\n <td>79</td>\n <td>204</td>\n <td>208</td>\n </tr>\n <tr>\n <th scope=\"row\">9 Sep</th>\n <td>111</td>\n <td>77</td>\n <td>209</td>\n <td>216</td>\n </tr>\n <tr>\n <th scope=\"row\">10 Sep</th>\n <td>105</td>\n <td>78</td>\n <td>177</td>\n <td>223</td>\n </tr>\n <tr>\n <th scope=\"row\">11 Sep</th>\n <td>102</td>\n <td>83</td>\n <td>185</td>\n <td>252</td>\n </tr>\n <tr>\n <th scope=\"row\">12 Sep</th>\n <td>103</td>\n <td>90</td>\n <td>192</td>\n <td>253</td>\n </tr>\n <tr>\n <th scope=\"row\">13 Sep</th>\n <td>107</td>\n <td>98</td>\n <td>197</td>\n <td>250</td>\n </tr>\n <tr>\n <th scope=\"row\">14 Sep</th>\n <td>113</td>\n <td>106</td>\n <td>198</td>\n <td>244</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-ribbon-chart\n for=\"latency\"\n label=\"Response time by region\"\n></helix-headless-spatial-ribbon-chart>","imports":["import '@fusion.dev/helix-headless/spatial-ribbon-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"latency\"\n >\n <caption>Response time by region, first two weeks of September</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Frankfurt (ms)</th>\n <th scope=\"col\">Virginia (ms)</th>\n <th scope=\"col\">Singapore (ms)</th>\n <th scope=\"col\">São Paulo (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">1 Sep</th>\n <td>120</td>\n <td>110</td>\n <td>196</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">2 Sep</th>\n <td>128</td>\n <td>113</td>\n <td>191</td>\n <td>204</td>\n </tr>\n <tr>\n <th scope=\"row\">3 Sep</th>\n <td>134</td>\n <td>112</td>\n <td>184</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">4 Sep</th>\n <td>138</td>\n <td>108</td>\n <td>176</td>\n <td>193</td>\n </tr>\n <tr>\n <th scope=\"row\">5 Sep</th>\n <td>137</td>\n <td>101</td>\n <td>169</td>\n <td>192</td>\n </tr>\n <tr>\n <th scope=\"row\">6 Sep</th>\n <td>134</td>\n <td>93</td>\n <td>164</td>\n <td>195</td>\n </tr>\n <tr>\n <th scope=\"row\">7 Sep</th>\n <td>127</td>\n <td>85</td>\n <td>202</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">8 Sep</th>\n <td>119</td>\n <td>79</td>\n <td>204</td>\n <td>208</td>\n </tr>\n <tr>\n <th scope=\"row\">9 Sep</th>\n <td>111</td>\n <td>77</td>\n <td>209</td>\n <td>216</td>\n </tr>\n <tr>\n <th scope=\"row\">10 Sep</th>\n <td>105</td>\n <td>78</td>\n <td>177</td>\n <td>223</td>\n </tr>\n <tr>\n <th scope=\"row\">11 Sep</th>\n <td>102</td>\n <td>83</td>\n <td>185</td>\n <td>252</td>\n </tr>\n <tr>\n <th scope=\"row\">12 Sep</th>\n <td>103</td>\n <td>90</td>\n <td>192</td>\n <td>253</td>\n </tr>\n <tr>\n <th scope=\"row\">13 Sep</th>\n <td>107</td>\n <td>98</td>\n <td>197</td>\n <td>250</td>\n </tr>\n <tr>\n <th scope=\"row\">14 Sep</th>\n <td>113</td>\n <td>106</td>\n <td>198</td>\n <td>244</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-ribbon-chart\n for=\"latency\"\n label=\"Response time by region\"\n ></helix-headless-spatial-ribbon-chart>\n </>\n )\n}"}],"spatial-scatter-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-scatter-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n}\n\nhelix-headless-spatial-scatter-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-scatter-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its numbers\n and names, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-scatter-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-scatter-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-scatter-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-scatter-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-scatter-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-scatter-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-scatter-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-scatter-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\nhelix-headless-spatial-scatter-chart::part(point) {\n fill: var(--chart-series);\n stroke: var(--_gray-subtle);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-scatter-chart::part(live),\nhelix-headless-spatial-scatter-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Forty-five customers by age, yearly spend, and visits a month, drawn in 3D in SVG. Press Shift with an arrow to turn the box.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"customers\"\n>\n <caption>Customers</caption>\n <thead>\n <tr>\n <th scope=\"col\">Customer</th>\n <th scope=\"col\">Segment</th>\n <th scope=\"col\">Age</th>\n <th scope=\"col\">Yearly spend</th>\n <th scope=\"col\">Visits a month</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Avery S</th>\n <td>Students</td>\n <td>21</td>\n <td>494</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake S</th>\n <td>Students</td>\n <td>19</td>\n <td>336</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey S</th>\n <td>Students</td>\n <td>24</td>\n <td>531</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew S</th>\n <td>Students</td>\n <td>22</td>\n <td>401</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery S</th>\n <td>Students</td>\n <td>22</td>\n <td>453</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley S</th>\n <td>Students</td>\n <td>24</td>\n <td>387</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray S</th>\n <td>Students</td>\n <td>23</td>\n <td>737</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper S</th>\n <td>Students</td>\n <td>19</td>\n <td>656</td>\n <td>11</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy S</th>\n <td>Students</td>\n <td>25</td>\n <td>406</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules S</th>\n <td>Students</td>\n <td>19</td>\n <td>435</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai S</th>\n <td>Students</td>\n <td>23</td>\n <td>434</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane S</th>\n <td>Students</td>\n <td>21</td>\n <td>532</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan S</th>\n <td>Students</td>\n <td>22</td>\n <td>161</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel S</th>\n <td>Students</td>\n <td>21</td>\n <td>710</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley S</th>\n <td>Students</td>\n <td>24</td>\n <td>507</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery F</th>\n <td>Families</td>\n <td>46</td>\n <td>2527</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake F</th>\n <td>Families</td>\n <td>43</td>\n <td>2155</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey F</th>\n <td>Families</td>\n <td>43</td>\n <td>2291</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew F</th>\n <td>Families</td>\n <td>43</td>\n <td>2645</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery F</th>\n <td>Families</td>\n <td>36</td>\n <td>2421</td>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley F</th>\n <td>Families</td>\n <td>46</td>\n <td>2382</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray F</th>\n <td>Families</td>\n <td>37</td>\n <td>2266</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper F</th>\n <td>Families</td>\n <td>40</td>\n <td>2419</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy F</th>\n <td>Families</td>\n <td>38</td>\n <td>2605</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules F</th>\n <td>Families</td>\n <td>39</td>\n <td>2627</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai F</th>\n <td>Families</td>\n <td>38</td>\n <td>2264</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane F</th>\n <td>Families</td>\n <td>41</td>\n <td>2508</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan F</th>\n <td>Families</td>\n <td>40</td>\n <td>2349</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel F</th>\n <td>Families</td>\n <td>39</td>\n <td>2453</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley F</th>\n <td>Families</td>\n <td>38</td>\n <td>2093</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery R</th>\n <td>Retirees</td>\n <td>70</td>\n <td>1169</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1456</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1887</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1528</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1657</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley R</th>\n <td>Retirees</td>\n <td>66</td>\n <td>1671</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1311</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1266</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1555</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules R</th>\n <td>Retirees</td>\n <td>74</td>\n <td>1574</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai R</th>\n <td>Retirees</td>\n <td>65</td>\n <td>1520</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1428</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1306</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel R</th>\n <td>Retirees</td>\n <td>63</td>\n <td>1458</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1486</td>\n <td>5</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-scatter-chart\n for=\"customers\"\n group-by=\"Segment\"\n label=\"Customers\"\n>\n</helix-headless-spatial-scatter-chart>","imports":["import '@fusion.dev/helix-headless/spatial-scatter-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"customers\"\n >\n <caption>Customers</caption>\n <thead>\n <tr>\n <th scope=\"col\">Customer</th>\n <th scope=\"col\">Segment</th>\n <th scope=\"col\">Age</th>\n <th scope=\"col\">Yearly spend</th>\n <th scope=\"col\">Visits a month</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Avery S</th>\n <td>Students</td>\n <td>21</td>\n <td>494</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake S</th>\n <td>Students</td>\n <td>19</td>\n <td>336</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey S</th>\n <td>Students</td>\n <td>24</td>\n <td>531</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew S</th>\n <td>Students</td>\n <td>22</td>\n <td>401</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery S</th>\n <td>Students</td>\n <td>22</td>\n <td>453</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley S</th>\n <td>Students</td>\n <td>24</td>\n <td>387</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray S</th>\n <td>Students</td>\n <td>23</td>\n <td>737</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper S</th>\n <td>Students</td>\n <td>19</td>\n <td>656</td>\n <td>11</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy S</th>\n <td>Students</td>\n <td>25</td>\n <td>406</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules S</th>\n <td>Students</td>\n <td>19</td>\n <td>435</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai S</th>\n <td>Students</td>\n <td>23</td>\n <td>434</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane S</th>\n <td>Students</td>\n <td>21</td>\n <td>532</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan S</th>\n <td>Students</td>\n <td>22</td>\n <td>161</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel S</th>\n <td>Students</td>\n <td>21</td>\n <td>710</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley S</th>\n <td>Students</td>\n <td>24</td>\n <td>507</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery F</th>\n <td>Families</td>\n <td>46</td>\n <td>2527</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake F</th>\n <td>Families</td>\n <td>43</td>\n <td>2155</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey F</th>\n <td>Families</td>\n <td>43</td>\n <td>2291</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew F</th>\n <td>Families</td>\n <td>43</td>\n <td>2645</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery F</th>\n <td>Families</td>\n <td>36</td>\n <td>2421</td>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley F</th>\n <td>Families</td>\n <td>46</td>\n <td>2382</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray F</th>\n <td>Families</td>\n <td>37</td>\n <td>2266</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper F</th>\n <td>Families</td>\n <td>40</td>\n <td>2419</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy F</th>\n <td>Families</td>\n <td>38</td>\n <td>2605</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules F</th>\n <td>Families</td>\n <td>39</td>\n <td>2627</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai F</th>\n <td>Families</td>\n <td>38</td>\n <td>2264</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane F</th>\n <td>Families</td>\n <td>41</td>\n <td>2508</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan F</th>\n <td>Families</td>\n <td>40</td>\n <td>2349</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel F</th>\n <td>Families</td>\n <td>39</td>\n <td>2453</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley F</th>\n <td>Families</td>\n <td>38</td>\n <td>2093</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery R</th>\n <td>Retirees</td>\n <td>70</td>\n <td>1169</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1456</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1887</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1528</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1657</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley R</th>\n <td>Retirees</td>\n <td>66</td>\n <td>1671</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1311</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1266</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1555</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules R</th>\n <td>Retirees</td>\n <td>74</td>\n <td>1574</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai R</th>\n <td>Retirees</td>\n <td>65</td>\n <td>1520</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1428</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1306</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel R</th>\n <td>Retirees</td>\n <td>63</td>\n <td>1458</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1486</td>\n <td>5</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-scatter-chart\n for=\"customers\"\n group-by=\"Segment\"\n label=\"Customers\"\n ></helix-headless-spatial-scatter-chart>\n </>\n )\n}"}],"spatial-surface-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-low: light-dark(#e2e2e5, #2e2e33);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-surface-chart {\n display: block;\n}\n\nhelix-headless-spatial-surface-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-surface-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its numbers\n and names, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-surface-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-surface-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-surface-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-surface-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-surface-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-surface-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-surface-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-surface-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face by its height, and a step less light as it turns from the\n light, which the chart writes as `--spatial-surface-chart-level` and\n `--spatial-surface-chart-shade`. */\nhelix-headless-spatial-surface-chart::part(face) {\n fill: oklch(\n from\n color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--spatial-surface-chart-level) * 100%),\n var(--_gray-low)\n )\n calc(l - var(--spatial-surface-chart-shade)) c h\n );\n stroke: var(--_gray-mark);\n stroke-opacity: 0.5;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-surface-chart::part(live),\nhelix-headless-spatial-surface-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Requests a minute over a week, every two hours, drawn as a surface in 3D in SVG. Press Shift with an arrow to turn the box.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"load\"\n>\n <caption>Load over a week</caption>\n <thead>\n <tr>\n <th scope=\"col\">Slot</th>\n <th scope=\"col\">Hour</th>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Requests a minute</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Mon 00:00</th>\n <td>0</td>\n <td>1</td>\n <td>129</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 02:00</th>\n <td>2</td>\n <td>1</td>\n <td>104</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 04:00</th>\n <td>4</td>\n <td>1</td>\n <td>142</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 06:00</th>\n <td>6</td>\n <td>1</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 08:00</th>\n <td>8</td>\n <td>1</td>\n <td>1011</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 10:00</th>\n <td>10</td>\n <td>1</td>\n <td>1354</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 12:00</th>\n <td>12</td>\n <td>1</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 14:00</th>\n <td>14</td>\n <td>1</td>\n <td>1106</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 16:00</th>\n <td>16</td>\n <td>1</td>\n <td>1209</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 18:00</th>\n <td>18</td>\n <td>1</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 20:00</th>\n <td>20</td>\n <td>1</td>\n <td>445</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 22:00</th>\n <td>22</td>\n <td>1</td>\n <td>248</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 00:00</th>\n <td>0</td>\n <td>2</td>\n <td>156</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 02:00</th>\n <td>2</td>\n <td>2</td>\n <td>148</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 04:00</th>\n <td>4</td>\n <td>2</td>\n <td>114</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 06:00</th>\n <td>6</td>\n <td>2</td>\n <td>338</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 08:00</th>\n <td>8</td>\n <td>2</td>\n <td>961</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 10:00</th>\n <td>10</td>\n <td>2</td>\n <td>1409</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 12:00</th>\n <td>12</td>\n <td>2</td>\n <td>1153</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 14:00</th>\n <td>14</td>\n <td>2</td>\n <td>1039</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 16:00</th>\n <td>16</td>\n <td>2</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 18:00</th>\n <td>18</td>\n <td>2</td>\n <td>894</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 20:00</th>\n <td>20</td>\n <td>2</td>\n <td>429</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 22:00</th>\n <td>22</td>\n <td>2</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 00:00</th>\n <td>0</td>\n <td>3</td>\n <td>125</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 02:00</th>\n <td>2</td>\n <td>3</td>\n <td>118</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 04:00</th>\n <td>4</td>\n <td>3</td>\n <td>199</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 06:00</th>\n <td>6</td>\n <td>3</td>\n <td>387</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 08:00</th>\n <td>8</td>\n <td>3</td>\n <td>994</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 10:00</th>\n <td>10</td>\n <td>3</td>\n <td>1386</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 12:00</th>\n <td>12</td>\n <td>3</td>\n <td>1139</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 14:00</th>\n <td>14</td>\n <td>3</td>\n <td>1054</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 16:00</th>\n <td>16</td>\n <td>3</td>\n <td>1261</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 18:00</th>\n <td>18</td>\n <td>3</td>\n <td>855</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 20:00</th>\n <td>20</td>\n <td>3</td>\n <td>490</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 22:00</th>\n <td>22</td>\n <td>3</td>\n <td>245</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 00:00</th>\n <td>0</td>\n <td>4</td>\n <td>132</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 02:00</th>\n <td>2</td>\n <td>4</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 04:00</th>\n <td>4</td>\n <td>4</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 06:00</th>\n <td>6</td>\n <td>4</td>\n <td>419</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 08:00</th>\n <td>8</td>\n <td>4</td>\n <td>977</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 10:00</th>\n <td>10</td>\n <td>4</td>\n <td>1382</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 12:00</th>\n <td>12</td>\n <td>4</td>\n <td>1103</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 14:00</th>\n <td>14</td>\n <td>4</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 16:00</th>\n <td>16</td>\n <td>4</td>\n <td>1200</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 18:00</th>\n <td>18</td>\n <td>4</td>\n <td>886</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 20:00</th>\n <td>20</td>\n <td>4</td>\n <td>451</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 22:00</th>\n <td>22</td>\n <td>4</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 00:00</th>\n <td>0</td>\n <td>5</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 02:00</th>\n <td>2</td>\n <td>5</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 04:00</th>\n <td>4</td>\n <td>5</td>\n <td>137</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 06:00</th>\n <td>6</td>\n <td>5</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 08:00</th>\n <td>8</td>\n <td>5</td>\n <td>943</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 10:00</th>\n <td>10</td>\n <td>5</td>\n <td>1397</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 12:00</th>\n <td>12</td>\n <td>5</td>\n <td>1155</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 14:00</th>\n <td>14</td>\n <td>5</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 16:00</th>\n <td>16</td>\n <td>5</td>\n <td>1245</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 18:00</th>\n <td>18</td>\n <td>5</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 20:00</th>\n <td>20</td>\n <td>5</td>\n <td>416</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 22:00</th>\n <td>22</td>\n <td>5</td>\n <td>225</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 00:00</th>\n <td>0</td>\n <td>6</td>\n <td>99</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 02:00</th>\n <td>2</td>\n <td>6</td>\n <td>163</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 04:00</th>\n <td>4</td>\n <td>6</td>\n <td>131</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 06:00</th>\n <td>6</td>\n <td>6</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 08:00</th>\n <td>8</td>\n <td>6</td>\n <td>386</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 10:00</th>\n <td>10</td>\n <td>6</td>\n <td>503</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 12:00</th>\n <td>12</td>\n <td>6</td>\n <td>435</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 14:00</th>\n <td>14</td>\n <td>6</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 16:00</th>\n <td>16</td>\n <td>6</td>\n <td>496</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 18:00</th>\n <td>18</td>\n <td>6</td>\n <td>431</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 20:00</th>\n <td>20</td>\n <td>6</td>\n <td>413</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 22:00</th>\n <td>22</td>\n <td>6</td>\n <td>283</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 00:00</th>\n <td>0</td>\n <td>7</td>\n <td>144</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 02:00</th>\n <td>2</td>\n <td>7</td>\n <td>76</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 04:00</th>\n <td>4</td>\n <td>7</td>\n <td>136</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 06:00</th>\n <td>6</td>\n <td>7</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 08:00</th>\n <td>8</td>\n <td>7</td>\n <td>356</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 10:00</th>\n <td>10</td>\n <td>7</td>\n <td>528</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 12:00</th>\n <td>12</td>\n <td>7</td>\n <td>469</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 14:00</th>\n <td>14</td>\n <td>7</td>\n <td>439</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 16:00</th>\n <td>16</td>\n <td>7</td>\n <td>458</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 18:00</th>\n <td>18</td>\n <td>7</td>\n <td>440</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 20:00</th>\n <td>20</td>\n <td>7</td>\n <td>397</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 22:00</th>\n <td>22</td>\n <td>7</td>\n <td>274</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-surface-chart\n for=\"load\"\n label=\"Load over a week\"\n>\n</helix-headless-spatial-surface-chart>","imports":["import '@fusion.dev/helix-headless/spatial-surface-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"load\"\n >\n <caption>Load over a week</caption>\n <thead>\n <tr>\n <th scope=\"col\">Slot</th>\n <th scope=\"col\">Hour</th>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Requests a minute</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Mon 00:00</th>\n <td>0</td>\n <td>1</td>\n <td>129</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 02:00</th>\n <td>2</td>\n <td>1</td>\n <td>104</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 04:00</th>\n <td>4</td>\n <td>1</td>\n <td>142</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 06:00</th>\n <td>6</td>\n <td>1</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 08:00</th>\n <td>8</td>\n <td>1</td>\n <td>1011</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 10:00</th>\n <td>10</td>\n <td>1</td>\n <td>1354</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 12:00</th>\n <td>12</td>\n <td>1</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 14:00</th>\n <td>14</td>\n <td>1</td>\n <td>1106</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 16:00</th>\n <td>16</td>\n <td>1</td>\n <td>1209</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 18:00</th>\n <td>18</td>\n <td>1</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 20:00</th>\n <td>20</td>\n <td>1</td>\n <td>445</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 22:00</th>\n <td>22</td>\n <td>1</td>\n <td>248</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 00:00</th>\n <td>0</td>\n <td>2</td>\n <td>156</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 02:00</th>\n <td>2</td>\n <td>2</td>\n <td>148</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 04:00</th>\n <td>4</td>\n <td>2</td>\n <td>114</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 06:00</th>\n <td>6</td>\n <td>2</td>\n <td>338</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 08:00</th>\n <td>8</td>\n <td>2</td>\n <td>961</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 10:00</th>\n <td>10</td>\n <td>2</td>\n <td>1409</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 12:00</th>\n <td>12</td>\n <td>2</td>\n <td>1153</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 14:00</th>\n <td>14</td>\n <td>2</td>\n <td>1039</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 16:00</th>\n <td>16</td>\n <td>2</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 18:00</th>\n <td>18</td>\n <td>2</td>\n <td>894</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 20:00</th>\n <td>20</td>\n <td>2</td>\n <td>429</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 22:00</th>\n <td>22</td>\n <td>2</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 00:00</th>\n <td>0</td>\n <td>3</td>\n <td>125</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 02:00</th>\n <td>2</td>\n <td>3</td>\n <td>118</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 04:00</th>\n <td>4</td>\n <td>3</td>\n <td>199</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 06:00</th>\n <td>6</td>\n <td>3</td>\n <td>387</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 08:00</th>\n <td>8</td>\n <td>3</td>\n <td>994</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 10:00</th>\n <td>10</td>\n <td>3</td>\n <td>1386</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 12:00</th>\n <td>12</td>\n <td>3</td>\n <td>1139</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 14:00</th>\n <td>14</td>\n <td>3</td>\n <td>1054</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 16:00</th>\n <td>16</td>\n <td>3</td>\n <td>1261</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 18:00</th>\n <td>18</td>\n <td>3</td>\n <td>855</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 20:00</th>\n <td>20</td>\n <td>3</td>\n <td>490</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 22:00</th>\n <td>22</td>\n <td>3</td>\n <td>245</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 00:00</th>\n <td>0</td>\n <td>4</td>\n <td>132</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 02:00</th>\n <td>2</td>\n <td>4</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 04:00</th>\n <td>4</td>\n <td>4</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 06:00</th>\n <td>6</td>\n <td>4</td>\n <td>419</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 08:00</th>\n <td>8</td>\n <td>4</td>\n <td>977</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 10:00</th>\n <td>10</td>\n <td>4</td>\n <td>1382</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 12:00</th>\n <td>12</td>\n <td>4</td>\n <td>1103</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 14:00</th>\n <td>14</td>\n <td>4</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 16:00</th>\n <td>16</td>\n <td>4</td>\n <td>1200</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 18:00</th>\n <td>18</td>\n <td>4</td>\n <td>886</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 20:00</th>\n <td>20</td>\n <td>4</td>\n <td>451</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 22:00</th>\n <td>22</td>\n <td>4</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 00:00</th>\n <td>0</td>\n <td>5</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 02:00</th>\n <td>2</td>\n <td>5</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 04:00</th>\n <td>4</td>\n <td>5</td>\n <td>137</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 06:00</th>\n <td>6</td>\n <td>5</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 08:00</th>\n <td>8</td>\n <td>5</td>\n <td>943</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 10:00</th>\n <td>10</td>\n <td>5</td>\n <td>1397</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 12:00</th>\n <td>12</td>\n <td>5</td>\n <td>1155</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 14:00</th>\n <td>14</td>\n <td>5</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 16:00</th>\n <td>16</td>\n <td>5</td>\n <td>1245</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 18:00</th>\n <td>18</td>\n <td>5</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 20:00</th>\n <td>20</td>\n <td>5</td>\n <td>416</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 22:00</th>\n <td>22</td>\n <td>5</td>\n <td>225</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 00:00</th>\n <td>0</td>\n <td>6</td>\n <td>99</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 02:00</th>\n <td>2</td>\n <td>6</td>\n <td>163</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 04:00</th>\n <td>4</td>\n <td>6</td>\n <td>131</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 06:00</th>\n <td>6</td>\n <td>6</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 08:00</th>\n <td>8</td>\n <td>6</td>\n <td>386</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 10:00</th>\n <td>10</td>\n <td>6</td>\n <td>503</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 12:00</th>\n <td>12</td>\n <td>6</td>\n <td>435</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 14:00</th>\n <td>14</td>\n <td>6</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 16:00</th>\n <td>16</td>\n <td>6</td>\n <td>496</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 18:00</th>\n <td>18</td>\n <td>6</td>\n <td>431</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 20:00</th>\n <td>20</td>\n <td>6</td>\n <td>413</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 22:00</th>\n <td>22</td>\n <td>6</td>\n <td>283</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 00:00</th>\n <td>0</td>\n <td>7</td>\n <td>144</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 02:00</th>\n <td>2</td>\n <td>7</td>\n <td>76</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 04:00</th>\n <td>4</td>\n <td>7</td>\n <td>136</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 06:00</th>\n <td>6</td>\n <td>7</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 08:00</th>\n <td>8</td>\n <td>7</td>\n <td>356</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 10:00</th>\n <td>10</td>\n <td>7</td>\n <td>528</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 12:00</th>\n <td>12</td>\n <td>7</td>\n <td>469</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 14:00</th>\n <td>14</td>\n <td>7</td>\n <td>439</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 16:00</th>\n <td>16</td>\n <td>7</td>\n <td>458</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 18:00</th>\n <td>18</td>\n <td>7</td>\n <td>440</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 20:00</th>\n <td>20</td>\n <td>7</td>\n <td>397</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 22:00</th>\n <td>22</td>\n <td>7</td>\n <td>274</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-surface-chart\n for=\"load\"\n label=\"Load over a week\"\n ></helix-headless-spatial-surface-chart>\n </>\n )\n}"}],"spatial-treemap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-treemap {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-treemap::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-treemap::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-treemap::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-treemap::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-treemap::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-treemap::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-treemap::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-treemap::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The same outline over everything, faint and dashed, where others hide it. */\nhelix-headless-spatial-treemap::part(ring-behind) {\n fill: none;\n opacity: 0.6;\n stroke: var(--_gray-strong);\n stroke-dasharray: 3px 2px;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-treemap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-treemap::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its group's gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-treemap::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-treemap-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-treemap::part(live),\nhelix-headless-spatial-treemap::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Requests a minute and response time for fifteen services in four teams, drawn in 3D in SVG: each block as large as its requests and as tall as its response time, in its team's gray. Drag to turn the blocks, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"services\"\n>\n <caption>Requests and response time by service</caption>\n <thead>\n <tr>\n <th scope=\"col\">Service</th>\n <th scope=\"col\">Team</th>\n <th scope=\"col\">Requests a minute</th>\n <th scope=\"col\">p95 response (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Gateway</th>\n <td>Platform</td>\n <td>4200</td>\n <td>85</td>\n </tr>\n <tr>\n <th scope=\"row\">Auth</th>\n <td>Platform</td>\n <td>2600</td>\n <td>40</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td>Platform</td>\n <td>1800</td>\n <td>210</td>\n </tr>\n <tr>\n <th scope=\"row\">Config</th>\n <td>Platform</td>\n <td>400</td>\n <td>25</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td>Payments</td>\n <td>1500</td>\n <td>320</td>\n </tr>\n <tr>\n <th scope=\"row\">Billing</th>\n <td>Payments</td>\n <td>900</td>\n <td>180</td>\n </tr>\n <tr>\n <th scope=\"row\">Ledger</th>\n <td>Payments</td>\n <td>600</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Refunds</th>\n <td>Payments</td>\n <td>200</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Recommendations</th>\n <td>Growth</td>\n <td>1300</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">Email</th>\n <td>Growth</td>\n <td>500</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Experiments</th>\n <td>Growth</td>\n <td>350</td>\n <td>60</td>\n </tr>\n <tr>\n <th scope=\"row\">Ingest</th>\n <td>Data</td>\n <td>2100</td>\n <td>120</td>\n </tr>\n <tr>\n <th scope=\"row\">Warehouse</th>\n <td>Data</td>\n <td>800</td>\n <td>190</td>\n </tr>\n <tr>\n <th scope=\"row\">Reports</th>\n <td>Data</td>\n <td>450</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Exports</th>\n <td>Data</td>\n <td>250</td>\n <td>300</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-treemap\n for=\"services\"\n group-by=\"Team\"\n label=\"Requests and response time by service\"\n></helix-headless-spatial-treemap>","imports":["import '@fusion.dev/helix-headless/spatial-treemap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"services\"\n >\n <caption>Requests and response time by service</caption>\n <thead>\n <tr>\n <th scope=\"col\">Service</th>\n <th scope=\"col\">Team</th>\n <th scope=\"col\">Requests a minute</th>\n <th scope=\"col\">p95 response (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Gateway</th>\n <td>Platform</td>\n <td>4200</td>\n <td>85</td>\n </tr>\n <tr>\n <th scope=\"row\">Auth</th>\n <td>Platform</td>\n <td>2600</td>\n <td>40</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td>Platform</td>\n <td>1800</td>\n <td>210</td>\n </tr>\n <tr>\n <th scope=\"row\">Config</th>\n <td>Platform</td>\n <td>400</td>\n <td>25</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td>Payments</td>\n <td>1500</td>\n <td>320</td>\n </tr>\n <tr>\n <th scope=\"row\">Billing</th>\n <td>Payments</td>\n <td>900</td>\n <td>180</td>\n </tr>\n <tr>\n <th scope=\"row\">Ledger</th>\n <td>Payments</td>\n <td>600</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Refunds</th>\n <td>Payments</td>\n <td>200</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Recommendations</th>\n <td>Growth</td>\n <td>1300</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">Email</th>\n <td>Growth</td>\n <td>500</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Experiments</th>\n <td>Growth</td>\n <td>350</td>\n <td>60</td>\n </tr>\n <tr>\n <th scope=\"row\">Ingest</th>\n <td>Data</td>\n <td>2100</td>\n <td>120</td>\n </tr>\n <tr>\n <th scope=\"row\">Warehouse</th>\n <td>Data</td>\n <td>800</td>\n <td>190</td>\n </tr>\n <tr>\n <th scope=\"row\">Reports</th>\n <td>Data</td>\n <td>450</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Exports</th>\n <td>Data</td>\n <td>250</td>\n <td>300</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-treemap\n for=\"services\"\n group-by=\"Team\"\n label=\"Requests and response time by service\"\n ></helix-headless-spatial-treemap>\n </>\n )\n}"}],"speed-dial":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n.page {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: var(--_radius-surface);\n position: relative;\n}\n\nhelix-headless-speed-dial[data-dock-within] {\n display: inline-flex;\n inset-block-end: 1.5rem;\n inset-inline-end: 1.5rem;\n position: absolute;\n}\n\nhelix-headless-icon-button {\n display: inline-flex;\n}\n\nhelix-headless-icon-button[slot=\"trigger\"]::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 3rem;\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-size: 1.25rem;\n inline-size: 3rem;\n justify-content: center;\n}\n\nhelix-headless-speed-dial::part(trigger) {\n all: unset;\n box-sizing: border-box;\n cursor: pointer;\n}\n\nhelix-headless-speed-dial:state(open) > [slot=\"trigger\"] helix-headless-icon {\n rotate: 45deg;\n}\n\nhelix-headless-icon-button[slot=\"trigger\"]::part(button):focus-visible,\nhelix-headless-speed-dial::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-speed-dial::part(actions) {\n align-items: flex-end;\n background-color: transparent;\n border: none;\n flex-direction: column;\n gap: 0.75rem;\n margin: 0;\n overflow: visible;\n padding: 0;\n}\n\nhelix-headless-speed-dial::part(actions):popover-open {\n display: flex;\n}\n\nhelix-headless-speed-dial-item::part(item) {\n align-items: center;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n flex-direction: row-reverse;\n font: inherit;\n gap: 0.75rem;\n padding: 0;\n}\n\nhelix-headless-speed-dial-item::part(item):focus-visible {\n outline: none;\n}\n\nhelix-headless-speed-dial-item:focus-within::part(icon) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-speed-dial-item::part(icon) {\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 1.25rem;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-speed-dial-item::part(label) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n padding: 0.25rem 0.5rem;\n white-space: nowrap;\n}","description":"The speed dial on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"page\">\n <helix-headless-speed-dial\n data-dock=\"bottom-end\"\n data-dock-within\n label=\"Actions\"\n >\n <helix-headless-icon-button\n label=\"Actions\"\n slot=\"trigger\"\n >\n <helix-headless-icon name=\"plus\"></helix-headless-icon>\n </helix-headless-icon-button>\n\n <helix-headless-speed-dial-item value=\"share\">\n Share\n <helix-headless-icon\n name=\"share-network\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"copy\">\n Duplicate\n <helix-headless-icon\n name=\"copy\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"delete\">\n Delete\n <helix-headless-icon\n name=\"trash\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n </helix-headless-speed-dial>\n</div>","imports":["import '@fusion.dev/helix-headless/speed-dial'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"page\">\n <helix-headless-speed-dial\n data-dock=\"bottom-end\"\n data-dock-within\n label=\"Actions\"\n >\n <helix-headless-icon-button\n label=\"Actions\"\n slot=\"trigger\"\n >\n <helix-headless-icon name=\"plus\"></helix-headless-icon>\n </helix-headless-icon-button>\n\n <helix-headless-speed-dial-item value=\"share\">\n Share\n <helix-headless-icon\n name=\"share-network\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"copy\">\n Duplicate\n <helix-headless-icon\n name=\"copy\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"delete\">\n Delete\n <helix-headless-icon\n name=\"trash\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n </helix-headless-speed-dial>\n </div>\n )\n}"}],"splitter":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-splitter {\n block-size: 12rem;\n display: flex;\n min-block-size: 0;\n min-inline-size: 0;\n position: relative;\n}\n\nhelix-headless-splitter::part(start) {\n flex: 0 0 var(--splitter-position, 50%);\n min-block-size: 0;\n min-inline-size: 0;\n overflow: auto;\n}\n\nhelix-headless-splitter::part(end) {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n overflow: auto;\n}\n\nhelix-headless-splitter::part(separator) {\n background-color: transparent;\n box-sizing: border-box;\n cursor: col-resize;\n flex: none;\n inline-size: 0.5rem;\n margin-inline: -0.25rem;\n position: relative;\n touch-action: none;\n user-select: none;\n z-index: 1;\n}\n\nhelix-headless-splitter::part(separator)::before {\n background-color: var(--_gray-line);\n content: \"\";\n inline-size: 1px;\n inset-block: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.5px;\n position: absolute;\n}\n\nhelix-headless-splitter::part(separator):hover::before,\nhelix-headless-splitter::part(separator):focus-visible::before {\n background-color: var(--_gray-muted);\n inline-size: 2px;\n margin-inline-start: -1px;\n}\n\nhelix-headless-splitter::part(separator):focus-visible {\n outline: none;\n}\n\nhelix-headless-card {\n align-content: start;\n color: var(--_gray-muted);\n display: grid;\n gap: 0.75rem;\n line-height: 1.5;\n padding: 1rem;\n}\n\nhelix-headless-card p {\n font-size: 0.875rem;\n margin: 0;\n}","description":"The same splitter on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-splitter default-position=\"40\">\n <helix-headless-card slot=\"start\">\n <p>Files</p>\n </helix-headless-card>\n <helix-headless-card slot=\"end\">\n <p>Editor</p>\n </helix-headless-card>\n</helix-headless-splitter>","imports":["import '@fusion.dev/helix-headless/splitter'","import '@fusion.dev/helix-headless/card'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-splitter default-position=\"40\">\n <helix-headless-card slot=\"start\">\n <p>Files</p>\n </helix-headless-card>\n <helix-headless-card slot=\"end\">\n <p>Editor</p>\n </helix-headless-card>\n </helix-headless-splitter>\n )\n}"}],"stat":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-stat-group {\n column-gap: 6rem;\n display: flex;\n flex-wrap: wrap;\n overflow-x: clip;\n row-gap: 3rem;\n}\n\nhelix-headless-stat-group > * {\n border-inline-start: 1px solid var(--_gray-line);\n margin-inline-start: calc(-3rem - 1px);\n padding-inline-start: 3rem;\n}\n\nhelix-headless-stat {\n align-content: start;\n align-items: baseline;\n color: var(--_gray-strong);\n display: grid;\n font-size: 2.75rem;\n font-weight: 600;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n letter-spacing: -0.01em;\n line-height: 1.2;\n}\n\nhelix-headless-stat [slot=\"label\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n grid-column: 1 / -1;\n letter-spacing: 0.02em;\n line-height: 1.5;\n}\n\nhelix-headless-stat [slot=\"unit\"] {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n font-weight: 500;\n letter-spacing: 0;\n line-height: 1.5;\n}","description":"The stat on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-stat-group>\n <helix-headless-stat>\n 1,284\n <span slot=\"label\">Active users</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 98.2\n <span slot=\"label\">Uptime</span>\n <span slot=\"unit\">%</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 4.7\n <span slot=\"label\">Average rating</span>\n </helix-headless-stat>\n</helix-headless-stat-group>","imports":["import '@fusion.dev/helix-headless/stat'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-stat-group>\n <helix-headless-stat>\n 1,284\n <span slot=\"label\">Active users</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 98.2\n <span slot=\"label\">Uptime</span>\n <span slot=\"unit\">%</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 4.7\n <span slot=\"label\">Average rating</span>\n </helix-headless-stat>\n </helix-headless-stat-group>\n )\n}"}],"steps":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-steps {\n display: flex;\n gap: 1rem;\n}\n\nhelix-headless-step {\n align-items: start;\n display: grid;\n flex: 1 1 0;\n grid-template-columns: minmax(0, 1fr);\n min-inline-size: 0;\n position: relative;\n row-gap: 0.5rem;\n}\n\n/* The two half lines either side of the mark, drawn on the step rather than\n slotted into it. The tier renders no box for these: a consumer who wants them\n writes them, and a pseudo-element is the cheapest way to write them. */\nhelix-headless-step::before,\nhelix-headless-step::after {\n background-color: var(--_gray-line);\n block-size: 1px;\n content: \"\";\n inline-size: calc(50% - 0.375rem);\n inset-block-start: 0.625rem;\n position: absolute;\n}\n\nhelix-headless-step::before {\n inset-inline-start: -0.5rem;\n}\n\nhelix-headless-step::after {\n inset-inline-start: calc(50% + 0.875rem);\n}\n\nhelix-headless-step:first-child::before,\nhelix-headless-step:last-child::after {\n display: none;\n}\n\n/* An upcoming step's mark in the mark's gray: it is the only sign a step is\n there, so it answers to a graphic's 3:1, which the line's gray missed at\n 1.65:1 in light and 2.21:1 in dark. */\nhelix-headless-step::part(marker) {\n align-items: center;\n block-size: 1.25rem;\n color: var(--_gray-mark);\n display: inline-flex;\n grid-column: 1;\n grid-row: 1;\n inline-size: 1.25rem;\n justify-content: center;\n justify-self: center;\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-step[complete]::part(marker),\nhelix-headless-step[current]::part(marker) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-step::part(mark) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-step::part(body) {\n align-items: center;\n display: flex;\n flex-direction: column;\n grid-column: 1;\n grid-row: 2;\n min-inline-size: 0;\n}\n\nhelix-headless-step::part(label) {\n display: inline-flex;\n max-inline-size: 100%;\n}\n\nhelix-headless-step::part(label-button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-step[complete]::part(label-button),\nhelix-headless-step[current]::part(label-button) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-step::part(label-button):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-step::part(label-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-step::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-step::part(content) {\n display: none;\n}","description":"The same steps on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-steps label=\"Checkout\">\n <helix-headless-step complete>Details</helix-headless-step>\n <helix-headless-step current>Payment</helix-headless-step>\n <helix-headless-step>Review</helix-headless-step>\n</helix-headless-steps>","imports":["import '@fusion.dev/helix-headless/steps'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-steps label=\"Checkout\">\n <helix-headless-step complete>Details</helix-headless-step>\n <helix-headless-step current>Payment</helix-headless-step>\n <helix-headless-step>Review</helix-headless-step>\n </helix-headless-steps>\n )\n}"}],"switch":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-switch {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-switch::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-switch::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-switch::part(hint),\nhelix-headless-switch::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n padding-inline-start: 3.125rem;\n}\n\nhelix-headless-switch::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-switch::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 9999px;\n box-sizing: border-box;\n display: inline-block;\n flex: none;\n inline-size: 2.625rem;\n position: relative;\n}\n\nhelix-headless-switch::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 100%;\n border: 0;\n border-radius: 9999px;\n cursor: inherit;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n position: absolute;\n}\n\n/* The thumb, drawn on the groove rather than slotted into it. The tier renders\n no box for this: a consumer who wants one writes it, and a pseudo-element is\n the cheapest way to write it. */\nhelix-headless-switch::part(track)::after {\n background-color: light-dark(var(--_gray-surface), var(--_gray-fill));\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n inline-size: 1.25rem;\n inset-block-start: 50%;\n inset-inline-start: calc(0.125rem - 1px);\n pointer-events: none;\n position: absolute;\n translate: 0 -50%;\n}\n\nhelix-headless-switch::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-switch:state(checked)::part(track) {\n background-color: var(--_gray-strong);\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-switch:state(checked)::part(track)::after {\n border-color: transparent;\n translate: 1.125rem -50%;\n}","description":"The switch on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-switch\n hint=\"Get an email when someone mentions you\"\n label=\"Email notifications\"\n name=\"option\"\n></helix-headless-switch>","imports":["import '@fusion.dev/helix-headless/switch'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-switch\n hint=\"Get an email when someone mentions you\"\n label=\"Email notifications\"\n name=\"option\"\n ></helix-headless-switch>\n )\n}"}],"table":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-table {\n display: block;\n overflow-x: auto;\n}\n\nhelix-headless-table-cell:not([hidden]) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n justify-content: var(--table-cell-align);\n min-block-size: 2.5rem;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n padding-block: 0.5rem;\n padding-inline: 0 1rem;\n text-align: var(--table-cell-align);\n}\n\nhelix-headless-table-cell[header] {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-table::part(table) {\n display: grid;\n grid-template-columns: var(--table-template, minmax(0, 1fr));\n inline-size: 100%;\n}\n\nhelix-headless-table::part(head),\nhelix-headless-table-column:not([hidden]),\nhelix-headless-table-row:not([hidden]) {\n display: contents;\n}\n\nhelix-headless-table-column::part(column) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 600;\n min-block-size: 3rem;\n min-inline-size: 0;\n padding-inline-end: 1rem;\n}\n\nhelix-headless-table-column[text-align=\"center\"]::part(column) {\n justify-content: center;\n}\n\nhelix-headless-table-column[text-align=\"end\"]::part(column) {\n justify-content: flex-end;\n}","description":"The table on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-table label=\"Deployments\">\n <helix-headless-table-column width=\"12rem\">Service</helix-headless-table-column>\n <helix-headless-table-column>Region</helix-headless-table-column>\n <helix-headless-table-column>Status</helix-headless-table-column>\n\n <helix-headless-table-row>\n <helix-headless-table-cell header>web-app</helix-headless-table-cell>\n <helix-headless-table-cell>us-east-1</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n <helix-headless-table-row>\n <helix-headless-table-cell header>billing-api</helix-headless-table-cell>\n <helix-headless-table-cell>eu-west-2</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n</helix-headless-table>","imports":["import '@fusion.dev/helix-headless/table'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-table label=\"Deployments\">\n <helix-headless-table-column width=\"12rem\">Service</helix-headless-table-column>\n <helix-headless-table-column>Region</helix-headless-table-column>\n <helix-headless-table-column>Status</helix-headless-table-column>\n\n <helix-headless-table-row>\n <helix-headless-table-cell header>web-app</helix-headless-table-cell>\n <helix-headless-table-cell>us-east-1</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n <helix-headless-table-row>\n <helix-headless-table-cell header>billing-api</helix-headless-table-cell>\n <helix-headless-table-cell>eu-west-2</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n </helix-headless-table>\n )\n}"}],"tabs":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tabs {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n min-block-size: 0;\n}\n\nhelix-headless-tabs::part(tabs) {\n display: flex;\n gap: 0.25rem;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-tab {\n display: inline-flex;\n position: relative;\n z-index: 10;\n}\n\nhelix-headless-tab::part(tab) {\n align-items: center;\n background-color: transparent;\n block-size: 2.5rem;\n border: 0;\n border-block-end: 2px solid transparent;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-tab:state(selected)::part(tab) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-tab-panel {\n display: contents;\n}\n\nhelix-headless-tab-panel::part(panel) {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n min-inline-size: 0;\n outline: none;\n padding-block-start: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tab::part(tab):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-tabs::part(indicator) {\n background-color: var(--_gray-surface);\n block-size: var(--indicator-block-size, 0);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.08));\n box-sizing: border-box;\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) var(--indicator-y, 0px);\n}","description":"The same tabs on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tabs\n default-active=\"one\"\n label=\"Project\"\n>\n <helix-headless-tab value=\"one\">Overview</helix-headless-tab>\n <helix-headless-tab value=\"two\">Activity</helix-headless-tab>\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"one\"\n >\n A summary of the project and the people on it.\n </helix-headless-tab-panel>\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"two\"\n >\n Recent changes to the project and its files.\n </helix-headless-tab-panel>\n</helix-headless-tabs>","imports":["import '@fusion.dev/helix-headless/tabs'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-tabs\n default-active=\"one\"\n label=\"Project\"\n >\n {' '}\n <helix-headless-tab value=\"one\">Overview</helix-headless-tab>{' '}\n <helix-headless-tab value=\"two\">Activity</helix-headless-tab>{' '}\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"one\"\n >\n {' '}\n A summary of the project and the people on it.{' '}\n </helix-headless-tab-panel>{' '}\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"two\"\n >\n {' '}\n Recent changes to the project and its files.{' '}\n </helix-headless-tab-panel>{' '}\n </helix-headless-tabs>\n )\n}"}],"tag":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tag::part(dismiss) {\n all: unset;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n margin-inline-end: -0.25rem;\n padding: 0.25rem;\n}\n\nhelix-headless-tag::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tag::part(dismiss-mark) {\n block-size: 0.85em;\n flex: none;\n inline-size: 0.85em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tag {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}","description":"The same tag on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tag>Complete</helix-headless-tag>","imports":["import '@fusion.dev/helix-headless/tag'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-tag>Complete</helix-headless-tag>\n}"}],"terminal":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n}\n\n/* The ground and the ink the connector themes the terminal in, so the grid\n and the frame around it are one surface. */\nhelix-headless-terminal {\n --terminal-background-color: var(--_gray-surface);\n --terminal-color: var(--_gray-strong);\n}\n\nhelix-headless-terminal::part(region) {\n background-color: var(--_gray-surface);\n block-size: 18rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;\n overflow: hidden;\n}\n\nhelix-headless-terminal::part(header),\nhelix-headless-terminal::part(find-bar),\nhelix-headless-terminal::part(status) {\n align-items: center;\n background-color: var(--_gray-subtle);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.25rem 0.25rem 0.5rem;\n}\n\n/* The find bar and the status line show only while the host says so: an\n author `display` outranks the browser's own rule for `hidden`. */\nhelix-headless-terminal:not(:state(find-open))::part(find-bar),\nhelix-headless-terminal:not(:state(exited)):not(:state(tab-moves-focus))::part(status) {\n display: none;\n}\n\nhelix-headless-terminal::part(header) {\n grid-row: header;\n border-block-end: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-terminal::part(label) {\n display: block;\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n/* Each toolbar lays its buttons out in the box it draws inside it. */\nhelix-headless-terminal::part(controls-toolbar),\nhelix-headless-terminal::part(find-controls-toolbar) {\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-terminal::part(find-button),\nhelix-headless-terminal::part(copy-button),\nhelix-headless-terminal::part(clear-button),\nhelix-headless-terminal::part(fullscreen-button),\nhelix-headless-terminal::part(find-previous-button),\nhelix-headless-terminal::part(find-next-button),\nhelix-headless-terminal::part(find-close-button),\nhelix-headless-terminal::part(restart-button) {\n align-items: center;\n background-color: var(--_gray-surface);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n gap: 0.25rem;\n justify-content: center;\n line-height: 1rem;\n min-inline-size: 1.75rem;\n padding: 0.3125rem;\n}\n\n/* Restart has words beside its glyph, and a glyph sized by nothing shrinks to\n nothing beside them: a column of its own gives it the size of the text. */\nhelix-headless-terminal::part(restart-button) {\n display: inline-grid;\n grid-template-columns: 1rem auto;\n padding-inline: 0.375rem 0.5rem;\n}\n\nhelix-headless-terminal::part(find-field) {\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n flex: 1 1 auto;\n}\n\nhelix-headless-terminal::part(find-bar) {\n grid-row: find;\n}\n\nhelix-headless-terminal::part(find-count) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n}\n\nhelix-headless-terminal::part(viewport) {\n grid-row: viewport;\n font-family: ui-monospace, monospace;\n min-block-size: 0;\n overflow: hidden;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-terminal::part(status) {\n grid-row: status;\n border-block-start: 1px solid var(--_gray-edge);\n font-size: 0.875rem;\n}\n\nhelix-headless-terminal::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-preview-terminal-canvas] {\n block-size: 100%;\n}","description":"The terminal frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<!-- Preview frame: data-preview-terminal has the frame connect xterm.js; on your page, connectTerminal does. -->\n<helix-headless-terminal\n data-preview-terminal\n id=\"shell\"\n label=\"~/fusion\"\n>\n <div data-preview-terminal-canvas></div>\n</helix-headless-terminal>\n\n<script type=\"module\">\n document\n .getElementById('shell')\n .write('$ echo \"Hello from the headless tier\"\\r\\nHello from the headless tier\\r\\n$ ')\n</script>","imports":["import '@fusion.dev/helix-headless/terminal'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import type { HelixHeadlessTerminal } from '@fusion.dev/helix-headless'\nimport { useEffect, useRef } from 'react'\nimport './preview.css'\n\nexport function Example() {\n const shell = useRef<HelixHeadlessTerminal>(null)\n\n useEffect(() => {\n void shell.current?.write(\n '$ echo \"Hello from the headless tier\"\\r\\nHello from the headless tier\\r\\n$ ',\n )\n }, [])\n\n return (\n <>\n {/* Preview frame: data-preview-terminal has the frame connect xterm.js; on your page, connectTerminal does. */}\n <helix-headless-terminal\n data-preview-terminal\n label=\"~/fusion\"\n ref={shell}\n >\n <div data-preview-terminal-canvas />\n </helix-headless-terminal>\n </>\n )\n}"}],"textarea":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-textarea {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-textarea::part(field) {\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n padding: 0.5rem;\n}\n\nhelix-headless-textarea::part(field):hover {\n border-color: var(--_gray-line);\n}\n\n/* Reset by name: `all: unset` would also undo the height the resize grip writes. */\nhelix-headless-textarea::part(control) {\n appearance: none;\n background: none;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n min-inline-size: 0;\n outline: none;\n overflow-wrap: break-word;\n padding: 0;\n resize: vertical;\n white-space: pre-wrap;\n}\n\nhelix-headless-textarea::part(control)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-textarea::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-textarea::part(hint),\nhelix-headless-textarea::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-textarea::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-textarea::part(field):focus-within {\n outline: 2px solid var(--_gray-mark);\n}","description":"The textarea on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-textarea\n hint=\"Shown to everyone on the project\"\n label=\"Project description\"\n placeholder=\"What is the project about?\"\n></helix-headless-textarea>","imports":["import '@fusion.dev/helix-headless/textarea'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-textarea\n hint=\"Shown to everyone on the project\"\n label=\"Project description\"\n placeholder=\"What is the project about?\"\n ></helix-headless-textarea>\n )\n}"}],"time-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-time-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-time-input::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-time-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-time-input::part(control)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-time-input::part(trigger) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n}\n\nhelix-headless-time-input::part(trigger-icon) {\n block-size: 1.25rem;\n inline-size: 1.25rem;\n}\n\nhelix-headless-time-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n min-inline-size: max-content;\n overflow: hidden;\n padding: 0.25rem 0;\n}\n\nhelix-headless-time-input::part(picker) {\n display: block;\n}\n\nhelix-headless-time-input::part(picker-list-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-time-input::part(picker-list-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n}\n\nhelix-headless-time-input::part(picker-option) {\n display: block;\n}\n\nhelix-headless-time-input::part(picker-option-item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-time-input::part(picker-option-item):hover,\nhelix-headless-time-input::part(picker-option-item-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-time-input::part(picker-option-label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-time-input::part(picker-option-item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-time-input::part(time-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(picker-column-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(picker-list-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-time-input::part(hint),\nhelix-headless-time-input::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-time-input::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(field):focus-within {\n outline: 2px solid var(--_gray-mark);\n}\n\nhelix-headless-time-input::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same time input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-time-input\n hint=\"Choose a time or type one\"\n label=\"Starts\"\n name=\"starts\"\n></helix-headless-time-input>","imports":["import '@fusion.dev/helix-headless/time-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-time-input\n hint=\"Choose a time or type one\"\n label=\"Starts\"\n name=\"starts\"\n ></helix-headless-time-input>\n )\n}"}],"time-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker {\n display: block;\n}\n\nhelix-headless-time-picker::part(list-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-time-picker::part(option) {\n display: block;\n}\n\nhelix-headless-time-picker::part(option-item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-time-picker::part(option-item):hover,\nhelix-headless-time-picker::part(option-item-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-time-picker::part(option-label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-time-picker::part(option-item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-time-picker::part(column-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker::part(list-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker::part(list-items):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-time-picker::part(list-items),\nhelix-headless-time-picker::part(column-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n}","description":"The time picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-time-picker default-value=\"09:30\"></helix-headless-time-picker>","imports":["import '@fusion.dev/helix-headless/time-picker'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-time-picker default-value=\"09:30\"></helix-headless-time-picker>\n}"}],"timeline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-timeline {\n display: flex;\n flex-direction: column;\n}\n\nhelix-headless-timeline-item {\n column-gap: 1rem;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: auto minmax(0, 1fr);\n}\n\nhelix-headless-timeline-item::part(rail) {\n display: grid;\n grid-column: 1;\n grid-row: 1 / -1;\n grid-template-rows: subgrid;\n justify-items: center;\n}\n\n/* The half of the line above the mark, drawn on the rail like the half below it.\n The tier renders no box for either: a consumer who wants them writes them. */\nhelix-headless-timeline-item::part(rail)::before {\n background-color: var(--_gray-line);\n block-size: 100%;\n content: \"\";\n grid-column: 1;\n grid-row: 1;\n inline-size: 1px;\n}\n\nhelix-headless-timeline-item:first-child::part(rail)::before {\n visibility: hidden;\n}\n\nhelix-headless-timeline-item::part(rail)::after {\n align-self: stretch;\n background-color: var(--_gray-line);\n content: \"\";\n grid-column: 1;\n grid-row: 2;\n inline-size: 1px;\n margin-block-start: 1.25rem;\n}\n\nhelix-headless-timeline-item:last-child::part(rail)::after {\n visibility: hidden;\n}\n\nhelix-headless-timeline-item::part(marker) {\n align-items: center;\n align-self: start;\n block-size: 1.25rem;\n color: var(--_gray-mark);\n display: flex;\n grid-column: 1;\n grid-row: 2;\n inline-size: 1.25rem;\n justify-content: center;\n}\n\nhelix-headless-timeline-item[tone]::part(marker) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-timeline-item > [slot=\"marker\"],\nhelix-headless-timeline-item > [slot=\"marker\"]::part(svg) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-timeline-item::part(dot) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}\n\nhelix-headless-timeline-item::part(time) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n grid-column: 2;\n grid-row: 1;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-timeline-item::part(content) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-column: 2;\n grid-row: 2;\n min-inline-size: 0;\n padding-block-end: 1.5rem;\n}\n\nhelix-headless-timeline-item:last-child::part(content) {\n padding-block-end: 0;\n}\n\nhelix-headless-timeline-item > p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-timeline-item > p + p {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-weight: 400;\n}","description":"The timeline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-timeline label=\"Deployment history\">\n <helix-headless-timeline-item\n datetime=\"2026-08-19T09:12\"\n tone=\"success\"\n >\n <helix-headless-icon\n name=\"check\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">09:12</span>\n <p>Deployed to production</p>\n <p>Version 4.2.0, by the release job.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:47\"\n tone=\"danger\"\n >\n <helix-headless-icon\n name=\"x\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">08:47</span>\n <p>Rolled back</p>\n <p>Error rate above the threshold for four minutes.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:30\"\n tone=\"primary\"\n >\n <span slot=\"time\">08:30</span>\n <p>Build passed</p>\n <p>1,089 tests across 75 packages.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item datetime=\"2026-08-19T08:04\">\n <span slot=\"time\">08:04</span>\n <p>Pull request opened</p>\n <p>A new branch with its first commit.</p>\n </helix-headless-timeline-item>\n</helix-headless-timeline>","imports":["import '@fusion.dev/helix-headless/timeline'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-timeline label=\"Deployment history\">\n <helix-headless-timeline-item\n datetime=\"2026-08-19T09:12\"\n tone=\"success\"\n >\n <helix-headless-icon\n name=\"check\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">09:12</span>\n <p>Deployed to production</p>\n <p>Version 4.2.0, by the release job.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:47\"\n tone=\"danger\"\n >\n <helix-headless-icon\n name=\"x\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">08:47</span>\n <p>Rolled back</p>\n <p>Error rate above the threshold for four minutes.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:30\"\n tone=\"primary\"\n >\n <span slot=\"time\">08:30</span>\n <p>Build passed</p>\n <p>1,089 tests across 75 packages.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item datetime=\"2026-08-19T08:04\">\n <span slot=\"time\">08:04</span>\n <p>Pull request opened</p>\n <p>A new branch with its first commit.</p>\n </helix-headless-timeline-item>\n </helix-headless-timeline>\n )\n}"}],"toast":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The region is a popover in the top layer, so it is the box to place, and the\n UA's centered, bordered, fit-content popover box is undone: at fit-content it\n would hug the inline start, where the stack belongs at the end. */\nhelix-headless-toast::part(region) {\n align-items: flex-end;\n background: none;\n border: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n inline-size: auto;\n inset: auto;\n inset-block-end: 1.5rem;\n inset-inline: 1.5rem;\n margin: 0;\n max-inline-size: none;\n overflow: visible;\n padding: 0;\n pointer-events: none;\n position: fixed;\n}\n\n/* The two regions that say each message as it arrives are heard and not\n drawn: clipped, never `display: none`, which would take them out of the\n accessibility tree too. */\nhelix-headless-toast::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-toast-item {\n display: grid;\n inline-size: 22rem;\n margin-block-start: 0.5rem;\n max-inline-size: calc(100vw - 2rem);\n pointer-events: auto;\n}\n\nhelix-headless-toast-item::part(item) {\n align-items: start;\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-surface);\n display: grid;\n font-size: 0.8125rem;\n grid-template-columns: auto 1fr;\n line-height: 1.5;\n min-block-size: 0;\n overflow: hidden;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n position: relative;\n}\n\nhelix-headless-toast-item::part(icon) {\n display: inline-flex;\n grid-area: 1 / 1;\n margin-block-start: calc((1.21875rem - 1rem) / 2);\n margin-inline-end: 0.75rem;\n}\n\nhelix-headless-toast-item::part(icon-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-toast-item::part(content) {\n grid-area: 1 / 2;\n min-inline-size: 0;\n}\n\nhelix-headless-toast-item::part(actions) {\n display: flex;\n gap: 0.25rem;\n grid-area: 2 / 2;\n}\n\nhelix-headless-toast-item > [slot=\"actions\"] {\n margin-block-start: 0.5rem;\n}\n\nhelix-headless-toast-item::part(dismiss) {\n all: unset;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n /* The toast is the inverse of the page, light in dark mode, so its mark\n takes the darker gray there: the page's mark gray read 2.98:1 on it. */\n color: light-dark(#8e8e96, #63636b);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n inset-block-start: calc(0.75rem + (1.21875rem - 2rem) / 2);\n inset-inline-end: 0.75rem;\n place-content: center;\n place-items: center;\n position: absolute;\n}\n\nhelix-headless-toast-item::part(dismiss-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-toast-item::part(timer) {\n background-color: var(--_gray-mark);\n block-size: 0.25rem;\n inset-block-start: 0;\n inset-inline: 0;\n position: absolute;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-surface) 12%, transparent);\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-toast-item::part(dismiss):hover,\nhelix-headless-button::part(button):hover {\n background-color: color-mix(in srgb, var(--_gray-surface) 20%, transparent);\n color: var(--_gray-surface);\n}\n\nhelix-headless-toast-item::part(dismiss):focus-visible,\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toast on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toast\n label=\"Notifications\"\n placement=\"bottom-end\"\n>\n <helix-headless-toast-item\n dismissible\n tone=\"success\"\n >\n Project saved.\n </helix-headless-toast-item>\n <helix-headless-toast-item\n dismissible\n tone=\"danger\"\n >\n Could not reach the server.\n <helix-headless-button slot=\"actions\">Retry</helix-headless-button>\n </helix-headless-toast-item>\n</helix-headless-toast>","imports":["import '@fusion.dev/helix-headless/toast'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toast\n label=\"Notifications\"\n placement=\"bottom-end\"\n >\n <helix-headless-toast-item\n dismissible\n tone=\"success\"\n >\n Project saved.\n </helix-headless-toast-item>\n <helix-headless-toast-item\n dismissible\n tone=\"danger\"\n >\n Could not reach the server.\n <helix-headless-button slot=\"actions\">Retry</helix-headless-button>\n </helix-headless-toast-item>\n </helix-headless-toast>\n )\n}"}],"toggle":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-toggle-group {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-toggle-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-toggle-group::part(hint),\nhelix-headless-toggle-group::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-toggle-group::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-toggle-group::part(row) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n}\n\nhelix-headless-toggle-group::part(track) {\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: inline-flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n min-block-size: 2.5rem;\n padding: 0.25rem;\n position: relative;\n}\n\nhelix-headless-toggle-group::part(indicator) {\n background-color: light-dark(#fff, var(--_gray-fill));\n block-size: var(--indicator-block-size, 0);\n border-radius: calc(var(--_radius-control) - 1px);\n box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3));\n box-sizing: border-box;\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) var(--indicator-y, 0);\n}\n\nhelix-headless-toggle {\n block-size: calc(2rem - 2px);\n display: inline-flex;\n flex: 1 1 auto;\n position: relative;\n z-index: 10;\n}\n\nhelix-headless-toggle::part(item) {\n all: unset;\n align-items: center;\n block-size: calc(2rem - 2px);\n border-radius: calc(var(--_radius-control) - 1px);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-toggle:state(selected)::part(item) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-toggle::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toggle on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toggle-group\n default-value=\"one\"\n hint=\"How the results are laid out\"\n label=\"View\"\n>\n <helix-headless-toggle value=\"one\">List</helix-headless-toggle>\n <helix-headless-toggle value=\"two\">Grid</helix-headless-toggle>\n <helix-headless-toggle value=\"three\">Board</helix-headless-toggle>\n</helix-headless-toggle-group>","imports":["import '@fusion.dev/helix-headless/toggle'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toggle-group\n default-value=\"one\"\n hint=\"How the results are laid out\"\n label=\"View\"\n >\n {' '}\n <helix-headless-toggle value=\"one\">List</helix-headless-toggle>{' '}\n <helix-headless-toggle value=\"two\">Grid</helix-headless-toggle>{' '}\n <helix-headless-toggle value=\"three\">Board</helix-headless-toggle>{' '}\n </helix-headless-toggle-group>\n )\n}"}],"toolbar":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-toolbar {\n display: inline-flex;\n}\n\nhelix-headless-toolbar::part(toolbar) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-toolbar helix-headless-icon {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n flex: none;\n inline-size: 100%;\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toolbar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toolbar label=\"Text formatting\">\n <helix-headless-icon-button label=\"Bold\">\n <helix-headless-icon name=\"text-b\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Italic\">\n <helix-headless-icon name=\"text-italic\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Link\">\n <helix-headless-icon name=\"link\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-toolbar>","imports":["import '@fusion.dev/helix-headless/toolbar'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toolbar label=\"Text formatting\">\n <helix-headless-icon-button label=\"Bold\">\n <helix-headless-icon name=\"text-b\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Italic\">\n <helix-headless-icon name=\"text-italic\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Link\">\n <helix-headless-icon name=\"link\"></helix-headless-icon>\n </helix-headless-icon-button>\n </helix-headless-toolbar>\n )\n}"}],"tooltip":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tooltip::part(surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n font-weight: 400;\n gap: 0.25rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n max-inline-size: 16rem;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-tooltip::part(surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-tooltip::part(arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}","description":"The tooltip on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n aria-describedby=\"save-tip\"\n id=\"save\"\n>Save changes</helix-headless-button>\n<helix-headless-tooltip\n content=\"Save your changes to the file\"\n for=\"save\"\n id=\"save-tip\"\n></helix-headless-tooltip>","imports":["import '@fusion.dev/helix-headless/tooltip'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n aria-describedby=\"save-tip\"\n id=\"save\"\n >\n Save changes\n </helix-headless-button>\n <helix-headless-tooltip\n content=\"Save your changes to the file\"\n for=\"save\"\n id=\"save-tip\"\n ></helix-headless-tooltip>\n </>\n )\n}"}],"tour":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n flex: none;\n inline-size: 100%;\n}\n\nhelix-headless-tour-stop helix-headless-card {\n display: grid;\n gap: 0.75rem;\n padding: 1rem;\n}\n\nhelix-headless-tour-stop h3,\nhelix-headless-tour-stop p {\n margin: 0;\n}\n\nhelix-headless-tour-stop h3 {\n color: var(--_gray-strong);\n font-size: 1.5rem;\n font-weight: 600;\n line-height: calc(0.99em + 0.5rem);\n}\n\nhelix-headless-tour-stop p {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\n.app {\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n display: grid;\n grid-template-columns: 11rem minmax(0, 1fr);\n margin-block-end: 1.5rem;\n overflow: hidden;\n}\n\n.rail {\n background-color: var(--_gray-subtle);\n border-inline-end: 1px solid var(--_gray-edge);\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1rem;\n}\n\n.rail p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.rail p:first-child {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n\n.bar {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n padding: 0.75rem 1rem;\n}\n\n@media (width < 32rem) {\n .app {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .rail {\n border-block-end: 1px solid var(--_gray-edge);\n border-inline-end: 0;\n }\n}\n\n.sheet {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 1.5rem 1rem;\n}\n\n.sheet h2 {\n color: var(--_gray-strong);\n font-size: 2rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: calc(0.99em + 0.5rem);\n margin: 0;\n}\n\n.sheet p {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button),\nhelix-headless-tour-stop::part(back-button),\nhelix-headless-tour-stop::part(next-button),\nhelix-headless-tour-stop::part(skip-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover,\nhelix-headless-tour-stop::part(back-button):hover {\n border-color: var(--_gray-line);\n}\n\n#publish::part(button),\nhelix-headless-tour-stop::part(next-button) {\n background-color: var(--_gray-strong);\n border-color: transparent;\n color: var(--_gray-surface);\n}\n\nhelix-headless-tour-stop::part(skip-button) {\n background-color: transparent;\n border-color: transparent;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button helix-headless-icon {\n block-size: 1.25rem;\n inline-size: 1.25rem;\n}\n\nhelix-headless-button::part(button):focus-visible,\nhelix-headless-icon-button::part(button):focus-visible,\nhelix-headless-tour-stop::part(back-button):focus-visible,\nhelix-headless-tour-stop::part(next-button):focus-visible,\nhelix-headless-tour-stop::part(skip-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tour,\nhelix-headless-tour-stop {\n display: contents;\n}\n\n/* Placed by the box the tour publishes, which is where it also writes it. */\nhelix-headless-tour::part(spotlight) {\n block-size: var(--tour-spotlight-height);\n border-radius: var(--_radius-surface);\n box-shadow: 0 0 0 100vmax light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.64));\n inline-size: var(--tour-spotlight-width);\n left: var(--tour-spotlight-x);\n pointer-events: none;\n position: fixed;\n top: var(--tour-spotlight-y);\n z-index: 1000;\n}\n\nhelix-headless-tour-stop::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n inline-size: max-content;\n margin: 0;\n max-inline-size: 22rem;\n overflow: visible;\n padding: 1rem;\n position: fixed;\n}\n\nhelix-headless-tour-stop::part(surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-tour-stop::part(arrow) {\n background-color: var(--_gray-surface);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-tour-stop::part(arrow-bottom) {\n border-left: 1px solid var(--_gray-edge);\n border-top: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-top) {\n border-bottom: 1px solid var(--_gray-edge);\n border-right: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-right) {\n border-bottom: 1px solid var(--_gray-edge);\n border-left: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-left) {\n border-right: 1px solid var(--_gray-edge);\n border-top: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(content) {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-tour-stop::part(actions) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n}\n\nhelix-headless-tour-stop::part(skip) {\n margin-inline-end: auto;\n}","description":"The tour on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"app\">\n <aside\n class=\"rail\"\n id=\"rail\"\n >\n <p>Project</p>\n <p>Drafts</p>\n <p>Published</p>\n <p>Archive</p>\n </aside>\n\n <div class=\"main\">\n <header class=\"bar\">\n <helix-headless-button id=\"publish\">Publish</helix-headless-button>\n <helix-headless-button id=\"preview\">Preview</helix-headless-button>\n <helix-headless-icon-button\n id=\"settings\"\n label=\"Settings\"\n >\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n </header>\n\n <section\n class=\"sheet\"\n id=\"sheet\"\n >\n <h2>Quarterly review</h2>\n <p>\n A draft of the third quarter report. Add a summary and the results for\n each team before you publish.\n </p>\n </section>\n </div>\n</div>\n\n<helix-headless-button id=\"begin\">Take the tour</helix-headless-button>\n\n<helix-headless-tour\n id=\"tour\"\n label=\"Getting started\"\n>\n <helix-headless-tour-stop\n for=\"rail\"\n placement=\"right-start\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Find your documents</h3>\n <p>\n Drafts, published documents, and archived documents are listed here.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop for=\"sheet\">\n <helix-headless-card>\n <h3 slot=\"header\">Write your document</h3>\n <p>\n Your changes are saved as you type. You can close the page at any time.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop\n for=\"preview\"\n placement=\"bottom\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Preview your document</h3>\n <p>\n See the document as it looks to people with the link.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop\n for=\"publish\"\n placement=\"bottom-start\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Publish when you are ready</h3>\n <p>\n You can unpublish at any time. The archive keeps every earlier version.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n</helix-headless-tour>\n\n<script type=\"module\">\n /* Preview frame: the button opens the tour at its first stop. A real page\n would also remember that the tour was taken. */\n const tour = document.querySelector('#tour')\n document.querySelector('#begin').addEventListener('click', () => {\n tour.index = 0\n tour.open = true\n })\n tour.addEventListener('helix-before-activate', (event) => {\n tour.index = Number(event.detail.value)\n })\n</script>","imports":["import '@fusion.dev/helix-headless/tour'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/card'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nimport { useState } from 'react'\n\nexport function Example() {\n /* Preview frame: the button opens the tour at its first stop. A real page\n would also remember that the tour was taken. */\n const [index, setIndex] = useState(0)\n const [open, setOpen] = useState(false)\n\n return (\n <>\n <div className=\"app\">\n {' '}\n <aside\n className=\"rail\"\n id=\"rail\"\n >\n {' '}\n <p>Project</p> <p>Drafts</p> <p>Published</p> <p>Archive</p>{' '}\n </aside>{' '}\n <div className=\"main\">\n {' '}\n <header className=\"bar\">\n {' '}\n <helix-headless-button id=\"publish\">Publish</helix-headless-button>{' '}\n <helix-headless-button id=\"preview\">Preview</helix-headless-button>{' '}\n <helix-headless-icon-button\n id=\"settings\"\n label=\"Settings\"\n >\n {' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n </header>{' '}\n <section\n className=\"sheet\"\n id=\"sheet\"\n >\n {' '}\n <h2>Quarterly review</h2>{' '}\n <p>\n {' '}\n A draft of the third quarter report. Add a summary and the results for each team\n before you publish.{' '}\n </p>{' '}\n </section>{' '}\n </div>{' '}\n </div>{' '}\n <helix-headless-button\n onClick={() => {\n setIndex(0)\n setOpen(true)\n }}\n >\n Take the tour\n </helix-headless-button>{' '}\n <helix-headless-tour\n index={index}\n label=\"Getting started\"\n onhelix-before-activate={(event) => setIndex(Number(event.detail.value))}\n onhelix-before-close={() => setOpen(false)}\n open={open}\n >\n {' '}\n <helix-headless-tour-stop\n for=\"rail\"\n placement=\"right-start\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Find your documents</h3>{' '}\n <p> Drafts, published documents, and archived documents are listed here. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop for=\"sheet\">\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Write your document</h3>{' '}\n <p> Your changes are saved as you type. You can close the page at any time. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop\n for=\"preview\"\n placement=\"bottom\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Preview your document</h3>{' '}\n <p> See the document as it looks to people with the link. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop\n for=\"publish\"\n placement=\"bottom-start\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Publish when you are ready</h3>{' '}\n <p> You can unpublish at any time. The archive keeps every earlier version. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n </helix-headless-tour>\n </>\n )\n}"}],"tree":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tree,\nhelix-headless-tree-item {\n display: block;\n}\n\nhelix-headless-tree-item::part(item) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item::part(row) {\n align-items: center;\n block-size: max(2rem, calc(1lh + 1rem));\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.5;\n padding: 0.5rem;\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem);\n user-select: none;\n}\n\nhelix-headless-tree-item:not(:has(> [slot=\"children\"]))::part(row) {\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem + 1.25rem);\n}\n\nhelix-headless-tree-item:state(selected)::part(row) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-tree-item::part(label) {\n align-self: stretch;\n flex: 1;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-tree-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tree::part(tree),\nhelix-headless-tree-item::part(group) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item:not(:state(open))::part(group) {\n display: none;\n}\n\nhelix-headless-tree-item::part(toggle) {\n align-self: center;\n block-size: 1rem;\n color: var(--_gray-mark);\n cursor: pointer;\n flex: none;\n inline-size: 1rem;\n rotate: -90deg;\n}\n\nhelix-headless-tree-item:dir(rtl)::part(toggle) {\n rotate: 90deg;\n}\n\nhelix-headless-tree-item:state(open)::part(toggle) {\n rotate: 0deg;\n}","description":"The tree on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tree\n default-active=\"two\"\n label=\"Files\"\n>\n <helix-headless-tree-item\n default-open\n value=\"one\"\n >\n Documents\n <helix-headless-tree-item\n slot=\"children\"\n value=\"two\"\n >Budget.xlsx</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"three\"\n >Notes.txt</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"four\">Invoice-1042.pdf</helix-headless-tree-item>\n</helix-headless-tree>","imports":["import '@fusion.dev/helix-headless/tree'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-tree\n default-active=\"two\"\n label=\"Files\"\n >\n <helix-headless-tree-item\n default-open\n value=\"one\"\n >\n Documents\n <helix-headless-tree-item\n slot=\"children\"\n value=\"two\"\n >\n Budget.xlsx\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"three\"\n >\n Notes.txt\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"four\">Invoice-1042.pdf</helix-headless-tree-item>\n </helix-headless-tree>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\nhelix-headless-tree,\nhelix-headless-tree-item {\n display: block;\n}\n\nhelix-headless-tree-item::part(item) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item::part(row) {\n align-items: center;\n block-size: max(2rem, calc(1lh + 1rem));\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.5;\n padding: 0.5rem;\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem);\n user-select: none;\n}\n\nhelix-headless-tree[nesting=\"subordinate\"] [slot=\"children\"]::part(row) {\n font-size: 0.75rem;\n}\n\n/* The other answer, and the whole of it: the branch is relabeled and the rows\n under it are not touched. Nothing here is the styled tier's, which is the\n point of writing it out. */\nhelix-headless-tree[nesting=\"heading\"] :has(> [slot=\"children\"])::part(row) {\n color: var(--_gray-mark);\n font-size: 0.75rem;\n letter-spacing: 0.02em;\n}\n\nhelix-headless-tree-item:not(:has(> [slot=\"children\"]))::part(row) {\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem + 1.25rem);\n}\n\nhelix-headless-tree-item:state(selected)::part(row) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-tree-item::part(label) {\n align-self: stretch;\n flex: 1;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-tree-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tree::part(tree),\nhelix-headless-tree-item::part(group) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item:not(:state(open))::part(group) {\n display: none;\n}\n\nhelix-headless-tree-item::part(toggle) {\n align-self: center;\n block-size: 1rem;\n color: var(--_gray-mark);\n cursor: pointer;\n flex: none;\n inline-size: 1rem;\n rotate: -90deg;\n}\n\nhelix-headless-tree-item:dir(rtl)::part(toggle) {\n rotate: 90deg;\n}\n\nhelix-headless-tree-item:state(open)::part(toggle) {\n rotate: 0deg;\n}","description":"Depth as a position, depth as a rank, and a branch that is a heading, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <helix-headless-tree label=\"Project files\">\n <helix-headless-tree-item\n default-open\n value=\"helix\"\n >\n src\n <helix-headless-tree-item\n slot=\"children\"\n value=\"headless\"\n >components</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"styled\"\n >styles</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"readme\">README.md</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Filters\"\n nesting=\"subordinate\"\n >\n <helix-headless-tree-item\n default-open\n value=\"status\"\n >\n Status\n <helix-headless-tree-item\n slot=\"children\"\n value=\"open\"\n >Open</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"merged\"\n >Merged</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"mine\">Assigned to me</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Documentation\"\n nesting=\"heading\"\n >\n <helix-headless-tree-item\n default-open\n value=\"start\"\n >\n Getting started\n <helix-headless-tree-item\n default-open\n slot=\"children\"\n value=\"install\"\n >\n Installation\n <helix-headless-tree-item\n slot=\"children\"\n value=\"any-framework\"\n >Windows</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"react\"\n >macOS</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"theming\"\n >Configuration</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"changelog\">Changelog</helix-headless-tree-item>\n </helix-headless-tree>\n</div>","imports":["import '@fusion.dev/helix-headless/tree'"],"label":"Nesting","renders":[],"slug":"nesting","tier":"headless","tsx":"import './nesting.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <helix-headless-tree label=\"Project files\">\n <helix-headless-tree-item\n default-open\n value=\"helix\"\n >\n src\n <helix-headless-tree-item\n slot=\"children\"\n value=\"headless\"\n >\n components\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"styled\"\n >\n styles\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"readme\">README.md</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Filters\"\n nesting=\"subordinate\"\n >\n <helix-headless-tree-item\n default-open\n value=\"status\"\n >\n Status\n <helix-headless-tree-item\n slot=\"children\"\n value=\"open\"\n >\n Open\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"merged\"\n >\n Merged\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"mine\">Assigned to me</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Documentation\"\n nesting=\"heading\"\n >\n <helix-headless-tree-item\n default-open\n value=\"start\"\n >\n Getting started\n <helix-headless-tree-item\n default-open\n slot=\"children\"\n value=\"install\"\n >\n Installation\n <helix-headless-tree-item\n slot=\"children\"\n value=\"any-framework\"\n >\n Windows\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"react\"\n >\n macOS\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"theming\"\n >\n Configuration\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"changelog\">Changelog</helix-headless-tree-item>\n </helix-headless-tree>\n </div>\n )\n}"}],"trend":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.row {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem 2rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-trend {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n}\n\nhelix-headless-trend[good=\"up\"],\nhelix-headless-trend[good=\"down\"] {\n color: var(--_gray-strong);\n}\n\nhelix-headless-trend > [slot=\"label\"] {\n color: var(--_gray-muted);\n font-weight: 400;\n}\n\nhelix-headless-trend::part(icon) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-trend::part(direction) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The same trend on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-trend\n good=\"up\"\n movement=\"up\"\n >\n 12.4%\n <span slot=\"label\">Revenue</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"down\"\n >\n 0.4pt\n <span slot=\"label\">Churn</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"up\"\n movement=\"down\"\n >\n 0.6pt\n <span slot=\"label\">Conversion</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"up\"\n >\n 40ms\n <span slot=\"label\">Response time</span>\n </helix-headless-trend>\n <helix-headless-trend movement=\"neutral\">\n 0\n <span slot=\"label\">Open incidents</span>\n </helix-headless-trend>\n</div>","imports":["import '@fusion.dev/helix-headless/trend'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-trend\n good=\"up\"\n movement=\"up\"\n >\n 12.4%\n <span slot=\"label\">Revenue</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"down\"\n >\n 0.4pt\n <span slot=\"label\">Churn</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"up\"\n movement=\"down\"\n >\n 0.6pt\n <span slot=\"label\">Conversion</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"up\"\n >\n 40ms\n <span slot=\"label\">Response time</span>\n </helix-headless-trend>\n <helix-headless-trend movement=\"neutral\">\n 0<span slot=\"label\">Open incidents</span>\n </helix-headless-trend>\n </div>\n )\n}"}],"video":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The host turns and the loading mark reads the angle: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_spin {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-video {\n animation: video-spin 0.8s linear infinite;\n display: block;\n position: relative;\n}\n\nhelix-headless-video::part(stage) {\n border-radius: var(--_radius-surface);\n color-scheme: light;\n display: block;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-video::part(stage):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video::part(video) {\n aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));\n background-color: var(--_gray-strong);\n block-size: auto;\n display: block;\n inline-size: 100%;\n object-fit: contain;\n}\n\nhelix-headless-video::part(poster) {\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(loading),\nhelix-headless-video::part(failure) {\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-strong) 72%, transparent);\n border-radius: var(--_radius-surface);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n padding: 0.5rem 0.75rem;\n position: absolute;\n translate: -50% -50%;\n}\n\n/* The ring that turns, drawn on the message rather than slotted into it. The\n tier renders no box for this: a consumer who wants one writes it. */\nhelix-headless-video::part(loading)::before {\n block-size: 1rem;\n border: 2px solid var(--_gray-muted);\n border-block-start-color: var(--_gray-surface);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n rotate: var(--_spin);\n}\n\n@keyframes video-spin {\n to {\n --_spin: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-video {\n animation: none;\n }\n}\n\nhelix-headless-video::part(start) {\n all: unset;\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-muted);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: flex;\n inline-size: clamp(2.5rem, 15%, 4.5rem);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n justify-content: center;\n padding: 1.25rem;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-video::part(cue) {\n background-color: var(--_gray-strong);\n color: var(--_gray-surface);\n font-size: 0.875rem;\n inline-size: max-content;\n inset-block-end: 3rem;\n inset-inline-start: 50%;\n margin: 0;\n max-inline-size: min(80%, 36rem);\n padding: 0.25rem 0.5rem;\n position: absolute;\n text-align: center;\n translate: -50% 0;\n}\n\nhelix-headless-video::part(header) {\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: absolute;\n z-index: 10;\n}\n\nhelix-headless-video::part(stage)::before {\n background-image: linear-gradient(\n to top,\n color-mix(in srgb, var(--_gray-strong) 64%, transparent),\n transparent\n );\n block-size: 4.5rem;\n content: \"\";\n inset-block-end: 0;\n inset-inline: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(controls) {\n align-items: center;\n color: var(--_gray-surface);\n display: flex;\n gap: 0.5rem;\n inset-block-end: 0;\n inset-inline: 0;\n padding: 0.5rem 0.75rem;\n position: absolute;\n}\n\nhelix-headless-video::part(play),\nhelix-headless-video::part(rewind),\nhelix-headless-video::part(forward),\nhelix-headless-video::part(previous),\nhelix-headless-video::part(next),\nhelix-headless-video::part(mute),\nhelix-headless-video::part(captions),\nhelix-headless-video::part(speed),\nhelix-headless-video::part(pip),\nhelix-headless-video::part(remote),\nhelix-headless-video::part(download),\nhelix-headless-video::part(more),\nhelix-headless-video::part(fullscreen) {\n all: unset;\n block-size: 1.5rem;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-inline-size: 1.5rem;\n padding: 0.25rem;\n}\n\nhelix-headless-video::part(speed) {\n align-items: center;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 2.5rem;\n}\n\nhelix-headless-video::part(time) {\n flex: none;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-video::part(scrubber),\nhelix-headless-video::part(volume) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb, so the accent grays its own thumb. */\n accent-color: var(--_gray-surface);\n appearance: none;\n background-color: var(--_gray-muted);\n block-size: 4px;\n cursor: pointer;\n margin: 0;\n}\n\nhelix-headless-video::part(scrubber) {\n background-image: linear-gradient(\n to right,\n var(--_gray-surface) calc(var(--video-progress, 0) * 100%),\n transparent calc(var(--video-progress, 0) * 100%)\n );\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\nhelix-headless-video::part(scrubber)::-webkit-slider-thumb,\nhelix-headless-video::part(volume)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(scrubber)::-moz-range-thumb,\nhelix-headless-video::part(volume)::-moz-range-thumb {\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(sound) {\n align-items: center;\n display: flex;\n flex: none;\n position: relative;\n}\n\nhelix-headless-video::part(volume) {\n background-image: linear-gradient(\n to top,\n var(--_gray-surface) calc(var(--video-level, 1) * 100%),\n transparent calc(var(--video-level, 1) * 100%)\n );\n bottom: calc(100% + 0.25rem);\n direction: rtl;\n inline-size: 4.5rem;\n left: 50%;\n opacity: 0;\n padding: 0;\n position: absolute;\n translate: -50% 0;\n writing-mode: vertical-rl;\n}\n\nhelix-headless-video::part(volume):hover,\nhelix-headless-video::part(volume):focus-visible {\n opacity: 1;\n}\n\nhelix-headless-video::part(overflow) {\n display: contents;\n}\n\nhelix-headless-video::part(play):focus-visible,\nhelix-headless-video::part(rewind):focus-visible,\nhelix-headless-video::part(forward):focus-visible,\nhelix-headless-video::part(previous):focus-visible,\nhelix-headless-video::part(next):focus-visible,\nhelix-headless-video::part(mute):focus-visible,\nhelix-headless-video::part(captions):focus-visible,\nhelix-headless-video::part(speed):focus-visible,\nhelix-headless-video::part(pip):focus-visible,\nhelix-headless-video::part(remote):focus-visible,\nhelix-headless-video::part(download):focus-visible,\nhelix-headless-video::part(more):focus-visible,\nhelix-headless-video::part(fullscreen):focus-visible,\nhelix-headless-video::part(start):focus-visible,\nhelix-headless-video::part(scrubber):focus-visible,\nhelix-headless-video::part(volume):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video::part(captions-menu-back-mark),\nhelix-headless-video::part(entry-mark),\nhelix-headless-video::part(overflow-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The video player on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-video\n label=\"Product walkthrough\"\n poster=\"https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=960\"\n src=\"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4\"\n></helix-headless-video>","imports":["import '@fusion.dev/helix-headless/video'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-video\n label=\"Product walkthrough\"\n poster=\"https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=960\"\n src=\"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4\"\n ></helix-headless-video>\n )\n}"}],"video-playlist":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The host turns and the loading mark reads the angle: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_spin {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-video {\n animation: video-spin 0.8s linear infinite;\n display: block;\n position: relative;\n}\n\nhelix-headless-video::part(stage) {\n border-radius: var(--_radius-surface);\n color-scheme: light;\n display: block;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-video::part(stage):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video::part(video) {\n aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));\n background-color: var(--_gray-strong);\n block-size: auto;\n display: block;\n inline-size: 100%;\n object-fit: contain;\n}\n\nhelix-headless-video::part(poster) {\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(loading),\nhelix-headless-video::part(failure) {\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-strong) 72%, transparent);\n border-radius: var(--_radius-surface);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n padding: 0.5rem 0.75rem;\n position: absolute;\n translate: -50% -50%;\n}\n\n/* The ring that turns, drawn on the message rather than slotted into it. The\n tier renders no box for this: a consumer who wants one writes it. */\nhelix-headless-video::part(loading)::before {\n block-size: 1rem;\n border: 2px solid var(--_gray-muted);\n border-block-start-color: var(--_gray-surface);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n rotate: var(--_spin);\n}\n\n@keyframes video-spin {\n to {\n --_spin: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-video {\n animation: none;\n }\n}\n\nhelix-headless-video::part(start) {\n all: unset;\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-muted);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: flex;\n inline-size: clamp(2.5rem, 15%, 4.5rem);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n justify-content: center;\n padding: 1.25rem;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-video::part(cue) {\n background-color: var(--_gray-strong);\n color: var(--_gray-surface);\n font-size: 0.875rem;\n inline-size: max-content;\n inset-block-end: 3rem;\n inset-inline-start: 50%;\n margin: 0;\n max-inline-size: min(80%, 36rem);\n padding: 0.25rem 0.5rem;\n position: absolute;\n text-align: center;\n translate: -50% 0;\n}\n\nhelix-headless-video::part(header) {\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: absolute;\n z-index: 10;\n}\n\nhelix-headless-video::part(stage)::before {\n background-image: linear-gradient(\n to top,\n color-mix(in srgb, var(--_gray-strong) 64%, transparent),\n transparent\n );\n block-size: 4.5rem;\n content: \"\";\n inset-block-end: 0;\n inset-inline: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(controls) {\n align-items: center;\n color: var(--_gray-surface);\n display: flex;\n gap: 0.5rem;\n inset-block-end: 0;\n inset-inline: 0;\n padding: 0.5rem 0.75rem;\n position: absolute;\n}\n\nhelix-headless-video::part(play),\nhelix-headless-video::part(rewind),\nhelix-headless-video::part(forward),\nhelix-headless-video::part(previous),\nhelix-headless-video::part(next),\nhelix-headless-video::part(mute),\nhelix-headless-video::part(captions),\nhelix-headless-video::part(speed),\nhelix-headless-video::part(pip),\nhelix-headless-video::part(remote),\nhelix-headless-video::part(download),\nhelix-headless-video::part(more),\nhelix-headless-video::part(fullscreen) {\n all: unset;\n block-size: 1.5rem;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-inline-size: 1.5rem;\n padding: 0.25rem;\n}\n\nhelix-headless-video::part(speed) {\n align-items: center;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 2.5rem;\n}\n\nhelix-headless-video::part(time) {\n flex: none;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-video::part(scrubber),\nhelix-headless-video::part(volume) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb, so the accent grays its own thumb. */\n accent-color: var(--_gray-surface);\n appearance: none;\n background-color: var(--_gray-muted);\n block-size: 4px;\n cursor: pointer;\n margin: 0;\n}\n\nhelix-headless-video::part(scrubber) {\n background-image: linear-gradient(\n to right,\n var(--_gray-surface) calc(var(--video-progress, 0) * 100%),\n transparent calc(var(--video-progress, 0) * 100%)\n );\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\nhelix-headless-video::part(scrubber)::-webkit-slider-thumb,\nhelix-headless-video::part(volume)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(scrubber)::-moz-range-thumb,\nhelix-headless-video::part(volume)::-moz-range-thumb {\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(sound) {\n align-items: center;\n display: flex;\n flex: none;\n position: relative;\n}\n\nhelix-headless-video::part(volume) {\n background-image: linear-gradient(\n to top,\n var(--_gray-surface) calc(var(--video-level, 1) * 100%),\n transparent calc(var(--video-level, 1) * 100%)\n );\n bottom: calc(100% + 0.25rem);\n direction: rtl;\n inline-size: 4.5rem;\n left: 50%;\n opacity: 0;\n padding: 0;\n position: absolute;\n translate: -50% 0;\n writing-mode: vertical-rl;\n}\n\nhelix-headless-video::part(volume):hover,\nhelix-headless-video::part(volume):focus-visible {\n opacity: 1;\n}\n\nhelix-headless-video::part(overflow) {\n display: contents;\n}\n\nhelix-headless-video::part(play):focus-visible,\nhelix-headless-video::part(rewind):focus-visible,\nhelix-headless-video::part(forward):focus-visible,\nhelix-headless-video::part(previous):focus-visible,\nhelix-headless-video::part(next):focus-visible,\nhelix-headless-video::part(mute):focus-visible,\nhelix-headless-video::part(captions):focus-visible,\nhelix-headless-video::part(speed):focus-visible,\nhelix-headless-video::part(pip):focus-visible,\nhelix-headless-video::part(remote):focus-visible,\nhelix-headless-video::part(download):focus-visible,\nhelix-headless-video::part(more):focus-visible,\nhelix-headless-video::part(fullscreen):focus-visible,\nhelix-headless-video::part(start):focus-visible,\nhelix-headless-video::part(scrubber):focus-visible,\nhelix-headless-video::part(volume):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video::part(captions-menu-back-mark),\nhelix-headless-video::part(entry-mark),\nhelix-headless-video::part(overflow-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-video-playlist-menu::part(entry-mark),\nhelix-headless-video-playlist-menu::part(menu-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-video-playlist {\n display: grid;\n gap: 1rem;\n grid-template-columns: 1fr;\n}\n\nhelix-headless-video-playlist::part(items) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n max-block-size: 26rem;\n overflow-y: auto;\n}\n\nhelix-headless-video-playlist::part(live) {\n clip-path: inset(50%);\n position: absolute;\n}\n\nhelix-headless-video-playlist-item {\n display: block;\n}\n\nhelix-headless-video-playlist-item::part(item) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: 0.75rem;\n inline-size: 100%;\n padding: 0.25rem 0.25rem 0.25rem 0.75rem;\n position: relative;\n text-align: start;\n}\n\nhelix-headless-video-playlist-item::part(item-current) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-video-playlist-item::part(item-current)::before {\n background-color: var(--_gray-strong);\n border-radius: 9999px;\n content: \"\";\n inline-size: 2px;\n inset-block: 0.25rem;\n inset-inline-start: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-video-playlist-item:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-video-playlist-item[disabled]::part(item) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-video-playlist-item::part(media) {\n aspect-ratio: 16 / 9;\n border-radius: var(--_radius-control);\n flex: none;\n inline-size: 5rem;\n overflow: hidden;\n}\n\nhelix-headless-video-playlist-item::part(thumbnail) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-video-playlist-item::part(label) {\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n min-inline-size: 0;\n}\n\nhelix-headless-video-playlist-item > [slot=\"meta\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 400;\n}\n\nhelix-headless-video-playlist-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video-playlist-menu {\n display: flex;\n flex: none;\n}\n\nhelix-headless-video-playlist-menu::part(trigger) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-video-playlist-menu::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video-playlist-menu::part(menu-surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n padding: 0.25rem 0;\n}\n\nhelix-headless-video-playlist-menu::part(poster) {\n aspect-ratio: 16 / 9;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}","description":"The video playlist on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-video-playlist\n default-active=\"sintel\"\n label=\"Episodes\"\n>\n <helix-headless-video\n extra-controls=\"previous next\"\n label=\"Episode player\"\n slot=\"player\"\n ></helix-headless-video>\n\n <helix-headless-video-playlist-item\n poster=\"/media/sintel-short.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/sintel-short.mp4\"\n value=\"sintel\"\n >\n Sintel\n <span slot=\"meta\">2:00</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"tears\"\n >\n Tears of Steel\n <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n disabled\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"unavailable\"\n >\n Not available in your region\n <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n</helix-headless-video-playlist>","imports":["import '@fusion.dev/helix-headless/video-playlist'","import '@fusion.dev/helix-headless/video'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-video-playlist\n default-active=\"sintel\"\n label=\"Episodes\"\n >\n <helix-headless-video\n extra-controls=\"previous next\"\n label=\"Episode player\"\n slot=\"player\"\n ></helix-headless-video>\n <helix-headless-video-playlist-item\n poster=\"/media/sintel-short.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/sintel-short.mp4\"\n value=\"sintel\"\n >\n Sintel <span slot=\"meta\">2:00</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"tears\"\n >\n Tears of Steel <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n disabled\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"unavailable\"\n >\n Not available in your region <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n </helix-headless-video-playlist>\n )\n}"}],"virtual-list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-virtual-list {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* A height, because how tall a list is, is a decision. No `overflow`: the\n component marks this box as a scroller and `core` gives it one. */\nhelix-headless-virtual-list::part(viewport) {\n block-size: 20em;\n margin-inline: -4px;\n overscroll-behavior: contain;\n padding-inline: 4px;\n}","description":"The same virtual list on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-virtual-list\n estimate=\"32\"\n for=\"people\"\n label=\"Two thousand rows\"\n>\n <template>\n <div class=\"virtualRow\">\n <strong data-field=\"name\"></strong>\n <span data-field=\"note\"></span>\n </div>\n </template>\n</helix-headless-virtual-list>\n\n<script\n id=\"people\"\n type=\"application/json\"\n>[{\"name\":\"Row 1\",\"note\":\"the 1st of two thousand\"},{\"name\":\"Row 2\",\"note\":\"the 2nd of two thousand\"},{\"name\":\"Row 3\",\"note\":\"the 3rd of two thousand\"},{\"name\":\"Row 4\",\"note\":\"the 4th of two thousand\"},{\"name\":\"Row 5\",\"note\":\"the 5th of two thousand\"},{\"name\":\"Row 6\",\"note\":\"the 6th of two thousand\"},{\"name\":\"Row 7\",\"note\":\"the 7th of two thousand\"},{\"name\":\"Row 8\",\"note\":\"the 8th of two thousand\"},{\"name\":\"Row 9\",\"note\":\"the 9th of two thousand\"},{\"name\":\"Row 10\",\"note\":\"the 10th of two thousand\"},{\"name\":\"Row 11\",\"note\":\"the 11th of two thousand\"},{\"name\":\"Row 12\",\"note\":\"the 12th of two thousand\"},{\"name\":\"Row 13\",\"note\":\"the 13th of two thousand\"},{\"name\":\"Row 14\",\"note\":\"the 14th of two thousand\"},{\"name\":\"Row 15\",\"note\":\"the 15th of two thousand\"},{\"name\":\"Row 16\",\"note\":\"the 16th of two thousand\"},{\"name\":\"Row 17\",\"note\":\"the 17th of two thousand\"},{\"name\":\"Row 18\",\"note\":\"the 18th of two thousand\"},{\"name\":\"Row 19\",\"note\":\"the 19th of two thousand\"},{\"name\":\"Row 20\",\"note\":\"the 20th of two thousand\"},{\"name\":\"Row 21\",\"note\":\"the 21st of two thousand\"},{\"name\":\"Row 22\",\"note\":\"the 22nd of two thousand\"},{\"name\":\"Row 23\",\"note\":\"the 23rd of two thousand\"},{\"name\":\"Row 24\",\"note\":\"the 24th of two thousand\"},{\"name\":\"Row 25\",\"note\":\"the 25th of two thousand\"},{\"name\":\"Row 26\",\"note\":\"the 26th of two thousand\"},{\"name\":\"Row 27\",\"note\":\"the 27th of two thousand\"},{\"name\":\"Row 28\",\"note\":\"the 28th of two thousand\"},{\"name\":\"Row 29\",\"note\":\"the 29th of two thousand\"},{\"name\":\"Row 30\",\"note\":\"the 30th of two thousand\"},{\"name\":\"Row 31\",\"note\":\"the 31st of two thousand\"},{\"name\":\"Row 32\",\"note\":\"the 32nd of two thousand\"},{\"name\":\"Row 33\",\"note\":\"the 33rd of two thousand\"},{\"name\":\"Row 34\",\"note\":\"the 34th of two thousand\"},{\"name\":\"Row 35\",\"note\":\"the 35th of two thousand\"},{\"name\":\"Row 36\",\"note\":\"the 36th of two thousand\"},{\"name\":\"Row 37\",\"note\":\"the 37th of two thousand\"},{\"name\":\"Row 38\",\"note\":\"the 38th of two thousand\"},{\"name\":\"Row 39\",\"note\":\"the 39th of two thousand\"},{\"name\":\"Row 40\",\"note\":\"the 40th of two thousand\"},{\"name\":\"Row 41\",\"note\":\"the 41st of two thousand\"},{\"name\":\"Row 42\",\"note\":\"the 42nd of two thousand\"},{\"name\":\"Row 43\",\"note\":\"the 43rd of two thousand\"},{\"name\":\"Row 44\",\"note\":\"the 44th of two thousand\"},{\"name\":\"Row 45\",\"note\":\"the 45th of two thousand\"},{\"name\":\"Row 46\",\"note\":\"the 46th of two thousand\"},{\"name\":\"Row 47\",\"note\":\"the 47th of two thousand\"},{\"name\":\"Row 48\",\"note\":\"the 48th of two thousand\"},{\"name\":\"Row 49\",\"note\":\"the 49th of two thousand\"},{\"name\":\"Row 50\",\"note\":\"the 50th of two thousand\"},{\"name\":\"Row 51\",\"note\":\"the 51st of two thousand\"},{\"name\":\"Row 52\",\"note\":\"the 52nd of two thousand\"},{\"name\":\"Row 53\",\"note\":\"the 53rd of two thousand\"},{\"name\":\"Row 54\",\"note\":\"the 54th of two thousand\"},{\"name\":\"Row 55\",\"note\":\"the 55th of two thousand\"},{\"name\":\"Row 56\",\"note\":\"the 56th of two thousand\"},{\"name\":\"Row 57\",\"note\":\"the 57th of two thousand\"},{\"name\":\"Row 58\",\"note\":\"the 58th of two thousand\"},{\"name\":\"Row 59\",\"note\":\"the 59th of two thousand\"},{\"name\":\"Row 60\",\"note\":\"the 60th of two thousand\"},{\"name\":\"Row 61\",\"note\":\"the 61st of two thousand\"},{\"name\":\"Row 62\",\"note\":\"the 62nd of two thousand\"},{\"name\":\"Row 63\",\"note\":\"the 63rd of two thousand\"},{\"name\":\"Row 64\",\"note\":\"the 64th of two thousand\"},{\"name\":\"Row 65\",\"note\":\"the 65th of two thousand\"},{\"name\":\"Row 66\",\"note\":\"the 66th of two thousand\"},{\"name\":\"Row 67\",\"note\":\"the 67th of two thousand\"},{\"name\":\"Row 68\",\"note\":\"the 68th of two thousand\"},{\"name\":\"Row 69\",\"note\":\"the 69th of two thousand\"},{\"name\":\"Row 70\",\"note\":\"the 70th of two thousand\"},{\"name\":\"Row 71\",\"note\":\"the 71st of two thousand\"},{\"name\":\"Row 72\",\"note\":\"the 72nd of two thousand\"},{\"name\":\"Row 73\",\"note\":\"the 73rd of two thousand\"},{\"name\":\"Row 74\",\"note\":\"the 74th of two thousand\"},{\"name\":\"Row 75\",\"note\":\"the 75th of two thousand\"},{\"name\":\"Row 76\",\"note\":\"the 76th of two thousand\"},{\"name\":\"Row 77\",\"note\":\"the 77th of two thousand\"},{\"name\":\"Row 78\",\"note\":\"the 78th of two thousand\"},{\"name\":\"Row 79\",\"note\":\"the 79th of two thousand\"},{\"name\":\"Row 80\",\"note\":\"the 80th of two thousand\"},{\"name\":\"Row 81\",\"note\":\"the 81st of two thousand\"},{\"name\":\"Row 82\",\"note\":\"the 82nd of two thousand\"},{\"name\":\"Row 83\",\"note\":\"the 83rd of two thousand\"},{\"name\":\"Row 84\",\"note\":\"the 84th of two thousand\"},{\"name\":\"Row 85\",\"note\":\"the 85th of two thousand\"},{\"name\":\"Row 86\",\"note\":\"the 86th of two thousand\"},{\"name\":\"Row 87\",\"note\":\"the 87th of two thousand\"},{\"name\":\"Row 88\",\"note\":\"the 88th of two thousand\"},{\"name\":\"Row 89\",\"note\":\"the 89th of two thousand\"},{\"name\":\"Row 90\",\"note\":\"the 90th of two thousand\"},{\"name\":\"Row 91\",\"note\":\"the 91st of two thousand\"},{\"name\":\"Row 92\",\"note\":\"the 92nd of two thousand\"},{\"name\":\"Row 93\",\"note\":\"the 93rd of two thousand\"},{\"name\":\"Row 94\",\"note\":\"the 94th of two thousand\"},{\"name\":\"Row 95\",\"note\":\"the 95th of two thousand\"},{\"name\":\"Row 96\",\"note\":\"the 96th of two thousand\"},{\"name\":\"Row 97\",\"note\":\"the 97th of two thousand\"},{\"name\":\"Row 98\",\"note\":\"the 98th of two thousand\"},{\"name\":\"Row 99\",\"note\":\"the 99th of two thousand\"},{\"name\":\"Row 100\",\"note\":\"the 100th of two thousand\"},{\"name\":\"Row 101\",\"note\":\"the 101st of two thousand\"},{\"name\":\"Row 102\",\"note\":\"the 102nd of two thousand\"},{\"name\":\"Row 103\",\"note\":\"the 103rd of two thousand\"},{\"name\":\"Row 104\",\"note\":\"the 104th of two thousand\"},{\"name\":\"Row 105\",\"note\":\"the 105th of two thousand\"},{\"name\":\"Row 106\",\"note\":\"the 106th of two thousand\"},{\"name\":\"Row 107\",\"note\":\"the 107th of two thousand\"},{\"name\":\"Row 108\",\"note\":\"the 108th of two thousand\"},{\"name\":\"Row 109\",\"note\":\"the 109th of two thousand\"},{\"name\":\"Row 110\",\"note\":\"the 110th of two thousand\"},{\"name\":\"Row 111\",\"note\":\"the 111th of two thousand\"},{\"name\":\"Row 112\",\"note\":\"the 112th of two thousand\"},{\"name\":\"Row 113\",\"note\":\"the 113th of two thousand\"},{\"name\":\"Row 114\",\"note\":\"the 114th of two thousand\"},{\"name\":\"Row 115\",\"note\":\"the 115th of two thousand\"},{\"name\":\"Row 116\",\"note\":\"the 116th of two thousand\"},{\"name\":\"Row 117\",\"note\":\"the 117th of two thousand\"},{\"name\":\"Row 118\",\"note\":\"the 118th of two thousand\"},{\"name\":\"Row 119\",\"note\":\"the 119th of two thousand\"},{\"name\":\"Row 120\",\"note\":\"the 120th of two thousand\"},{\"name\":\"Row 121\",\"note\":\"the 121st of two thousand\"},{\"name\":\"Row 122\",\"note\":\"the 122nd of two thousand\"},{\"name\":\"Row 123\",\"note\":\"the 123rd of two thousand\"},{\"name\":\"Row 124\",\"note\":\"the 124th of two thousand\"},{\"name\":\"Row 125\",\"note\":\"the 125th of two thousand\"},{\"name\":\"Row 126\",\"note\":\"the 126th of two thousand\"},{\"name\":\"Row 127\",\"note\":\"the 127th of two thousand\"},{\"name\":\"Row 128\",\"note\":\"the 128th of two thousand\"},{\"name\":\"Row 129\",\"note\":\"the 129th of two thousand\"},{\"name\":\"Row 130\",\"note\":\"the 130th of two thousand\"},{\"name\":\"Row 131\",\"note\":\"the 131st of two thousand\"},{\"name\":\"Row 132\",\"note\":\"the 132nd of two thousand\"},{\"name\":\"Row 133\",\"note\":\"the 133rd of two thousand\"},{\"name\":\"Row 134\",\"note\":\"the 134th of two thousand\"},{\"name\":\"Row 135\",\"note\":\"the 135th of two thousand\"},{\"name\":\"Row 136\",\"note\":\"the 136th of two thousand\"},{\"name\":\"Row 137\",\"note\":\"the 137th of two thousand\"},{\"name\":\"Row 138\",\"note\":\"the 138th of two thousand\"},{\"name\":\"Row 139\",\"note\":\"the 139th of two thousand\"},{\"name\":\"Row 140\",\"note\":\"the 140th of two thousand\"},{\"name\":\"Row 141\",\"note\":\"the 141st of two thousand\"},{\"name\":\"Row 142\",\"note\":\"the 142nd of two thousand\"},{\"name\":\"Row 143\",\"note\":\"the 143rd of two thousand\"},{\"name\":\"Row 144\",\"note\":\"the 144th of two thousand\"},{\"name\":\"Row 145\",\"note\":\"the 145th of two thousand\"},{\"name\":\"Row 146\",\"note\":\"the 146th of two thousand\"},{\"name\":\"Row 147\",\"note\":\"the 147th of two thousand\"},{\"name\":\"Row 148\",\"note\":\"the 148th of two thousand\"},{\"name\":\"Row 149\",\"note\":\"the 149th of two thousand\"},{\"name\":\"Row 150\",\"note\":\"the 150th of two thousand\"},{\"name\":\"Row 151\",\"note\":\"the 151st of two thousand\"},{\"name\":\"Row 152\",\"note\":\"the 152nd of two thousand\"},{\"name\":\"Row 153\",\"note\":\"the 153rd of two thousand\"},{\"name\":\"Row 154\",\"note\":\"the 154th of two thousand\"},{\"name\":\"Row 155\",\"note\":\"the 155th of two thousand\"},{\"name\":\"Row 156\",\"note\":\"the 156th of two thousand\"},{\"name\":\"Row 157\",\"note\":\"the 157th of two thousand\"},{\"name\":\"Row 158\",\"note\":\"the 158th of two thousand\"},{\"name\":\"Row 159\",\"note\":\"the 159th of two thousand\"},{\"name\":\"Row 160\",\"note\":\"the 160th of two thousand\"},{\"name\":\"Row 161\",\"note\":\"the 161st of two thousand\"},{\"name\":\"Row 162\",\"note\":\"the 162nd of two thousand\"},{\"name\":\"Row 163\",\"note\":\"the 163rd of two thousand\"},{\"name\":\"Row 164\",\"note\":\"the 164th of two thousand\"},{\"name\":\"Row 165\",\"note\":\"the 165th of two thousand\"},{\"name\":\"Row 166\",\"note\":\"the 166th of two thousand\"},{\"name\":\"Row 167\",\"note\":\"the 167th of two thousand\"},{\"name\":\"Row 168\",\"note\":\"the 168th of two thousand\"},{\"name\":\"Row 169\",\"note\":\"the 169th of two thousand\"},{\"name\":\"Row 170\",\"note\":\"the 170th of two thousand\"},{\"name\":\"Row 171\",\"note\":\"the 171st of two thousand\"},{\"name\":\"Row 172\",\"note\":\"the 172nd of two thousand\"},{\"name\":\"Row 173\",\"note\":\"the 173rd of two thousand\"},{\"name\":\"Row 174\",\"note\":\"the 174th of two thousand\"},{\"name\":\"Row 175\",\"note\":\"the 175th of two thousand\"},{\"name\":\"Row 176\",\"note\":\"the 176th of two thousand\"},{\"name\":\"Row 177\",\"note\":\"the 177th of two thousand\"},{\"name\":\"Row 178\",\"note\":\"the 178th of two thousand\"},{\"name\":\"Row 179\",\"note\":\"the 179th of two thousand\"},{\"name\":\"Row 180\",\"note\":\"the 180th of two thousand\"},{\"name\":\"Row 181\",\"note\":\"the 181st of two thousand\"},{\"name\":\"Row 182\",\"note\":\"the 182nd of two thousand\"},{\"name\":\"Row 183\",\"note\":\"the 183rd of two thousand\"},{\"name\":\"Row 184\",\"note\":\"the 184th of two thousand\"},{\"name\":\"Row 185\",\"note\":\"the 185th of two thousand\"},{\"name\":\"Row 186\",\"note\":\"the 186th of two thousand\"},{\"name\":\"Row 187\",\"note\":\"the 187th of two thousand\"},{\"name\":\"Row 188\",\"note\":\"the 188th of two thousand\"},{\"name\":\"Row 189\",\"note\":\"the 189th of two thousand\"},{\"name\":\"Row 190\",\"note\":\"the 190th of two thousand\"},{\"name\":\"Row 191\",\"note\":\"the 191st of two thousand\"},{\"name\":\"Row 192\",\"note\":\"the 192nd of two thousand\"},{\"name\":\"Row 193\",\"note\":\"the 193rd of two thousand\"},{\"name\":\"Row 194\",\"note\":\"the 194th of two thousand\"},{\"name\":\"Row 195\",\"note\":\"the 195th of two thousand\"},{\"name\":\"Row 196\",\"note\":\"the 196th of two thousand\"},{\"name\":\"Row 197\",\"note\":\"the 197th of two thousand\"},{\"name\":\"Row 198\",\"note\":\"the 198th of two thousand\"},{\"name\":\"Row 199\",\"note\":\"the 199th of two thousand\"},{\"name\":\"Row 200\",\"note\":\"the 200th of two thousand\"},{\"name\":\"Row 201\",\"note\":\"the 201st of two thousand\"},{\"name\":\"Row 202\",\"note\":\"the 202nd of two thousand\"},{\"name\":\"Row 203\",\"note\":\"the 203rd of two thousand\"},{\"name\":\"Row 204\",\"note\":\"the 204th of two thousand\"},{\"name\":\"Row 205\",\"note\":\"the 205th of two thousand\"},{\"name\":\"Row 206\",\"note\":\"the 206th of two thousand\"},{\"name\":\"Row 207\",\"note\":\"the 207th of two thousand\"},{\"name\":\"Row 208\",\"note\":\"the 208th of two thousand\"},{\"name\":\"Row 209\",\"note\":\"the 209th of two thousand\"},{\"name\":\"Row 210\",\"note\":\"the 210th of two thousand\"},{\"name\":\"Row 211\",\"note\":\"the 211th of two thousand\"},{\"name\":\"Row 212\",\"note\":\"the 212th of two thousand\"},{\"name\":\"Row 213\",\"note\":\"the 213th of two thousand\"},{\"name\":\"Row 214\",\"note\":\"the 214th of two thousand\"},{\"name\":\"Row 215\",\"note\":\"the 215th of two thousand\"},{\"name\":\"Row 216\",\"note\":\"the 216th of two thousand\"},{\"name\":\"Row 217\",\"note\":\"the 217th of two thousand\"},{\"name\":\"Row 218\",\"note\":\"the 218th of two thousand\"},{\"name\":\"Row 219\",\"note\":\"the 219th of two thousand\"},{\"name\":\"Row 220\",\"note\":\"the 220th of two thousand\"},{\"name\":\"Row 221\",\"note\":\"the 221st of two thousand\"},{\"name\":\"Row 222\",\"note\":\"the 222nd of two thousand\"},{\"name\":\"Row 223\",\"note\":\"the 223rd of two thousand\"},{\"name\":\"Row 224\",\"note\":\"the 224th of two thousand\"},{\"name\":\"Row 225\",\"note\":\"the 225th of two thousand\"},{\"name\":\"Row 226\",\"note\":\"the 226th of two thousand\"},{\"name\":\"Row 227\",\"note\":\"the 227th of two thousand\"},{\"name\":\"Row 228\",\"note\":\"the 228th of two thousand\"},{\"name\":\"Row 229\",\"note\":\"the 229th of two thousand\"},{\"name\":\"Row 230\",\"note\":\"the 230th of two thousand\"},{\"name\":\"Row 231\",\"note\":\"the 231st of two thousand\"},{\"name\":\"Row 232\",\"note\":\"the 232nd of two thousand\"},{\"name\":\"Row 233\",\"note\":\"the 233rd of two thousand\"},{\"name\":\"Row 234\",\"note\":\"the 234th of two thousand\"},{\"name\":\"Row 235\",\"note\":\"the 235th of two thousand\"},{\"name\":\"Row 236\",\"note\":\"the 236th of two thousand\"},{\"name\":\"Row 237\",\"note\":\"the 237th of two thousand\"},{\"name\":\"Row 238\",\"note\":\"the 238th of two thousand\"},{\"name\":\"Row 239\",\"note\":\"the 239th of two thousand\"},{\"name\":\"Row 240\",\"note\":\"the 240th of two thousand\"},{\"name\":\"Row 241\",\"note\":\"the 241st of two thousand\"},{\"name\":\"Row 242\",\"note\":\"the 242nd of two thousand\"},{\"name\":\"Row 243\",\"note\":\"the 243rd of two thousand\"},{\"name\":\"Row 244\",\"note\":\"the 244th of two thousand\"},{\"name\":\"Row 245\",\"note\":\"the 245th of two thousand\"},{\"name\":\"Row 246\",\"note\":\"the 246th of two thousand\"},{\"name\":\"Row 247\",\"note\":\"the 247th of two thousand\"},{\"name\":\"Row 248\",\"note\":\"the 248th of two thousand\"},{\"name\":\"Row 249\",\"note\":\"the 249th of two thousand\"},{\"name\":\"Row 250\",\"note\":\"the 250th of two thousand\"},{\"name\":\"Row 251\",\"note\":\"the 251st of two thousand\"},{\"name\":\"Row 252\",\"note\":\"the 252nd of two thousand\"},{\"name\":\"Row 253\",\"note\":\"the 253rd of two thousand\"},{\"name\":\"Row 254\",\"note\":\"the 254th of two thousand\"},{\"name\":\"Row 255\",\"note\":\"the 255th of two thousand\"},{\"name\":\"Row 256\",\"note\":\"the 256th of two thousand\"},{\"name\":\"Row 257\",\"note\":\"the 257th of two thousand\"},{\"name\":\"Row 258\",\"note\":\"the 258th of two thousand\"},{\"name\":\"Row 259\",\"note\":\"the 259th of two thousand\"},{\"name\":\"Row 260\",\"note\":\"the 260th of two thousand\"},{\"name\":\"Row 261\",\"note\":\"the 261st of two thousand\"},{\"name\":\"Row 262\",\"note\":\"the 262nd of two thousand\"},{\"name\":\"Row 263\",\"note\":\"the 263rd of two thousand\"},{\"name\":\"Row 264\",\"note\":\"the 264th of two thousand\"},{\"name\":\"Row 265\",\"note\":\"the 265th of two thousand\"},{\"name\":\"Row 266\",\"note\":\"the 266th of two thousand\"},{\"name\":\"Row 267\",\"note\":\"the 267th of two thousand\"},{\"name\":\"Row 268\",\"note\":\"the 268th of two thousand\"},{\"name\":\"Row 269\",\"note\":\"the 269th of two thousand\"},{\"name\":\"Row 270\",\"note\":\"the 270th of two thousand\"},{\"name\":\"Row 271\",\"note\":\"the 271st of two thousand\"},{\"name\":\"Row 272\",\"note\":\"the 272nd of two thousand\"},{\"name\":\"Row 273\",\"note\":\"the 273rd of two thousand\"},{\"name\":\"Row 274\",\"note\":\"the 274th of two thousand\"},{\"name\":\"Row 275\",\"note\":\"the 275th of two thousand\"},{\"name\":\"Row 276\",\"note\":\"the 276th of two thousand\"},{\"name\":\"Row 277\",\"note\":\"the 277th of two thousand\"},{\"name\":\"Row 278\",\"note\":\"the 278th of two thousand\"},{\"name\":\"Row 279\",\"note\":\"the 279th of two thousand\"},{\"name\":\"Row 280\",\"note\":\"the 280th of two thousand\"},{\"name\":\"Row 281\",\"note\":\"the 281st of two thousand\"},{\"name\":\"Row 282\",\"note\":\"the 282nd of two thousand\"},{\"name\":\"Row 283\",\"note\":\"the 283rd of two thousand\"},{\"name\":\"Row 284\",\"note\":\"the 284th of two thousand\"},{\"name\":\"Row 285\",\"note\":\"the 285th of two thousand\"},{\"name\":\"Row 286\",\"note\":\"the 286th of two thousand\"},{\"name\":\"Row 287\",\"note\":\"the 287th of two thousand\"},{\"name\":\"Row 288\",\"note\":\"the 288th of two thousand\"},{\"name\":\"Row 289\",\"note\":\"the 289th of two thousand\"},{\"name\":\"Row 290\",\"note\":\"the 290th of two thousand\"},{\"name\":\"Row 291\",\"note\":\"the 291st of two thousand\"},{\"name\":\"Row 292\",\"note\":\"the 292nd of two thousand\"},{\"name\":\"Row 293\",\"note\":\"the 293rd of two thousand\"},{\"name\":\"Row 294\",\"note\":\"the 294th of two thousand\"},{\"name\":\"Row 295\",\"note\":\"the 295th of two thousand\"},{\"name\":\"Row 296\",\"note\":\"the 296th of two thousand\"},{\"name\":\"Row 297\",\"note\":\"the 297th of two thousand\"},{\"name\":\"Row 298\",\"note\":\"the 298th of two thousand\"},{\"name\":\"Row 299\",\"note\":\"the 299th of two thousand\"},{\"name\":\"Row 300\",\"note\":\"the 300th of two thousand\"},{\"name\":\"Row 301\",\"note\":\"the 301st of two thousand\"},{\"name\":\"Row 302\",\"note\":\"the 302nd of two thousand\"},{\"name\":\"Row 303\",\"note\":\"the 303rd of two thousand\"},{\"name\":\"Row 304\",\"note\":\"the 304th of two thousand\"},{\"name\":\"Row 305\",\"note\":\"the 305th of two thousand\"},{\"name\":\"Row 306\",\"note\":\"the 306th of two thousand\"},{\"name\":\"Row 307\",\"note\":\"the 307th of two thousand\"},{\"name\":\"Row 308\",\"note\":\"the 308th of two thousand\"},{\"name\":\"Row 309\",\"note\":\"the 309th of two thousand\"},{\"name\":\"Row 310\",\"note\":\"the 310th of two thousand\"},{\"name\":\"Row 311\",\"note\":\"the 311th of two thousand\"},{\"name\":\"Row 312\",\"note\":\"the 312th of two thousand\"},{\"name\":\"Row 313\",\"note\":\"the 313th of two thousand\"},{\"name\":\"Row 314\",\"note\":\"the 314th of two thousand\"},{\"name\":\"Row 315\",\"note\":\"the 315th of two thousand\"},{\"name\":\"Row 316\",\"note\":\"the 316th of two thousand\"},{\"name\":\"Row 317\",\"note\":\"the 317th of two thousand\"},{\"name\":\"Row 318\",\"note\":\"the 318th of two thousand\"},{\"name\":\"Row 319\",\"note\":\"the 319th of two thousand\"},{\"name\":\"Row 320\",\"note\":\"the 320th of two thousand\"},{\"name\":\"Row 321\",\"note\":\"the 321st of two thousand\"},{\"name\":\"Row 322\",\"note\":\"the 322nd of two thousand\"},{\"name\":\"Row 323\",\"note\":\"the 323rd of two thousand\"},{\"name\":\"Row 324\",\"note\":\"the 324th of two thousand\"},{\"name\":\"Row 325\",\"note\":\"the 325th of two thousand\"},{\"name\":\"Row 326\",\"note\":\"the 326th of two thousand\"},{\"name\":\"Row 327\",\"note\":\"the 327th of two thousand\"},{\"name\":\"Row 328\",\"note\":\"the 328th of two thousand\"},{\"name\":\"Row 329\",\"note\":\"the 329th of two thousand\"},{\"name\":\"Row 330\",\"note\":\"the 330th of two thousand\"},{\"name\":\"Row 331\",\"note\":\"the 331st of two thousand\"},{\"name\":\"Row 332\",\"note\":\"the 332nd of two thousand\"},{\"name\":\"Row 333\",\"note\":\"the 333rd of two thousand\"},{\"name\":\"Row 334\",\"note\":\"the 334th of two thousand\"},{\"name\":\"Row 335\",\"note\":\"the 335th of two thousand\"},{\"name\":\"Row 336\",\"note\":\"the 336th of two thousand\"},{\"name\":\"Row 337\",\"note\":\"the 337th of two thousand\"},{\"name\":\"Row 338\",\"note\":\"the 338th of two thousand\"},{\"name\":\"Row 339\",\"note\":\"the 339th of two thousand\"},{\"name\":\"Row 340\",\"note\":\"the 340th of two thousand\"},{\"name\":\"Row 341\",\"note\":\"the 341st of two thousand\"},{\"name\":\"Row 342\",\"note\":\"the 342nd of two thousand\"},{\"name\":\"Row 343\",\"note\":\"the 343rd of two thousand\"},{\"name\":\"Row 344\",\"note\":\"the 344th of two thousand\"},{\"name\":\"Row 345\",\"note\":\"the 345th of two thousand\"},{\"name\":\"Row 346\",\"note\":\"the 346th of two thousand\"},{\"name\":\"Row 347\",\"note\":\"the 347th of two thousand\"},{\"name\":\"Row 348\",\"note\":\"the 348th of two thousand\"},{\"name\":\"Row 349\",\"note\":\"the 349th of two thousand\"},{\"name\":\"Row 350\",\"note\":\"the 350th of two thousand\"},{\"name\":\"Row 351\",\"note\":\"the 351st of two thousand\"},{\"name\":\"Row 352\",\"note\":\"the 352nd of two thousand\"},{\"name\":\"Row 353\",\"note\":\"the 353rd of two thousand\"},{\"name\":\"Row 354\",\"note\":\"the 354th of two thousand\"},{\"name\":\"Row 355\",\"note\":\"the 355th of two thousand\"},{\"name\":\"Row 356\",\"note\":\"the 356th of two thousand\"},{\"name\":\"Row 357\",\"note\":\"the 357th of two thousand\"},{\"name\":\"Row 358\",\"note\":\"the 358th of two thousand\"},{\"name\":\"Row 359\",\"note\":\"the 359th of two thousand\"},{\"name\":\"Row 360\",\"note\":\"the 360th of two thousand\"},{\"name\":\"Row 361\",\"note\":\"the 361st of two thousand\"},{\"name\":\"Row 362\",\"note\":\"the 362nd of two thousand\"},{\"name\":\"Row 363\",\"note\":\"the 363rd of two thousand\"},{\"name\":\"Row 364\",\"note\":\"the 364th of two thousand\"},{\"name\":\"Row 365\",\"note\":\"the 365th of two thousand\"},{\"name\":\"Row 366\",\"note\":\"the 366th of two thousand\"},{\"name\":\"Row 367\",\"note\":\"the 367th of two thousand\"},{\"name\":\"Row 368\",\"note\":\"the 368th of two thousand\"},{\"name\":\"Row 369\",\"note\":\"the 369th of two thousand\"},{\"name\":\"Row 370\",\"note\":\"the 370th of two thousand\"},{\"name\":\"Row 371\",\"note\":\"the 371st of two thousand\"},{\"name\":\"Row 372\",\"note\":\"the 372nd of two thousand\"},{\"name\":\"Row 373\",\"note\":\"the 373rd of two thousand\"},{\"name\":\"Row 374\",\"note\":\"the 374th of two thousand\"},{\"name\":\"Row 375\",\"note\":\"the 375th of two thousand\"},{\"name\":\"Row 376\",\"note\":\"the 376th of two thousand\"},{\"name\":\"Row 377\",\"note\":\"the 377th of two thousand\"},{\"name\":\"Row 378\",\"note\":\"the 378th of two thousand\"},{\"name\":\"Row 379\",\"note\":\"the 379th of two thousand\"},{\"name\":\"Row 380\",\"note\":\"the 380th of two thousand\"},{\"name\":\"Row 381\",\"note\":\"the 381st of two thousand\"},{\"name\":\"Row 382\",\"note\":\"the 382nd of two thousand\"},{\"name\":\"Row 383\",\"note\":\"the 383rd of two thousand\"},{\"name\":\"Row 384\",\"note\":\"the 384th of two thousand\"},{\"name\":\"Row 385\",\"note\":\"the 385th of two thousand\"},{\"name\":\"Row 386\",\"note\":\"the 386th of two thousand\"},{\"name\":\"Row 387\",\"note\":\"the 387th of two thousand\"},{\"name\":\"Row 388\",\"note\":\"the 388th of two thousand\"},{\"name\":\"Row 389\",\"note\":\"the 389th of two thousand\"},{\"name\":\"Row 390\",\"note\":\"the 390th of two thousand\"},{\"name\":\"Row 391\",\"note\":\"the 391st of two thousand\"},{\"name\":\"Row 392\",\"note\":\"the 392nd of two thousand\"},{\"name\":\"Row 393\",\"note\":\"the 393rd of two thousand\"},{\"name\":\"Row 394\",\"note\":\"the 394th of two thousand\"},{\"name\":\"Row 395\",\"note\":\"the 395th of two thousand\"},{\"name\":\"Row 396\",\"note\":\"the 396th of two thousand\"},{\"name\":\"Row 397\",\"note\":\"the 397th of two thousand\"},{\"name\":\"Row 398\",\"note\":\"the 398th of two thousand\"},{\"name\":\"Row 399\",\"note\":\"the 399th of two thousand\"},{\"name\":\"Row 400\",\"note\":\"the 400th of two thousand\"},{\"name\":\"Row 401\",\"note\":\"the 401st of two thousand\"},{\"name\":\"Row 402\",\"note\":\"the 402nd of two thousand\"},{\"name\":\"Row 403\",\"note\":\"the 403rd of two thousand\"},{\"name\":\"Row 404\",\"note\":\"the 404th of two thousand\"},{\"name\":\"Row 405\",\"note\":\"the 405th of two thousand\"},{\"name\":\"Row 406\",\"note\":\"the 406th of two thousand\"},{\"name\":\"Row 407\",\"note\":\"the 407th of two thousand\"},{\"name\":\"Row 408\",\"note\":\"the 408th of two thousand\"},{\"name\":\"Row 409\",\"note\":\"the 409th of two thousand\"},{\"name\":\"Row 410\",\"note\":\"the 410th of two thousand\"},{\"name\":\"Row 411\",\"note\":\"the 411th of two thousand\"},{\"name\":\"Row 412\",\"note\":\"the 412th of two thousand\"},{\"name\":\"Row 413\",\"note\":\"the 413th of two thousand\"},{\"name\":\"Row 414\",\"note\":\"the 414th of two thousand\"},{\"name\":\"Row 415\",\"note\":\"the 415th of two thousand\"},{\"name\":\"Row 416\",\"note\":\"the 416th of two thousand\"},{\"name\":\"Row 417\",\"note\":\"the 417th of two thousand\"},{\"name\":\"Row 418\",\"note\":\"the 418th of two thousand\"},{\"name\":\"Row 419\",\"note\":\"the 419th of two thousand\"},{\"name\":\"Row 420\",\"note\":\"the 420th of two thousand\"},{\"name\":\"Row 421\",\"note\":\"the 421st of two thousand\"},{\"name\":\"Row 422\",\"note\":\"the 422nd of two thousand\"},{\"name\":\"Row 423\",\"note\":\"the 423rd of two thousand\"},{\"name\":\"Row 424\",\"note\":\"the 424th of two thousand\"},{\"name\":\"Row 425\",\"note\":\"the 425th of two thousand\"},{\"name\":\"Row 426\",\"note\":\"the 426th of two thousand\"},{\"name\":\"Row 427\",\"note\":\"the 427th of two thousand\"},{\"name\":\"Row 428\",\"note\":\"the 428th of two thousand\"},{\"name\":\"Row 429\",\"note\":\"the 429th of two thousand\"},{\"name\":\"Row 430\",\"note\":\"the 430th of two thousand\"},{\"name\":\"Row 431\",\"note\":\"the 431st of two thousand\"},{\"name\":\"Row 432\",\"note\":\"the 432nd of two thousand\"},{\"name\":\"Row 433\",\"note\":\"the 433rd of two thousand\"},{\"name\":\"Row 434\",\"note\":\"the 434th of two thousand\"},{\"name\":\"Row 435\",\"note\":\"the 435th of two thousand\"},{\"name\":\"Row 436\",\"note\":\"the 436th of two thousand\"},{\"name\":\"Row 437\",\"note\":\"the 437th of two thousand\"},{\"name\":\"Row 438\",\"note\":\"the 438th of two thousand\"},{\"name\":\"Row 439\",\"note\":\"the 439th of two thousand\"},{\"name\":\"Row 440\",\"note\":\"the 440th of two thousand\"},{\"name\":\"Row 441\",\"note\":\"the 441st of two thousand\"},{\"name\":\"Row 442\",\"note\":\"the 442nd of two thousand\"},{\"name\":\"Row 443\",\"note\":\"the 443rd of two thousand\"},{\"name\":\"Row 444\",\"note\":\"the 444th of two thousand\"},{\"name\":\"Row 445\",\"note\":\"the 445th of two thousand\"},{\"name\":\"Row 446\",\"note\":\"the 446th of two thousand\"},{\"name\":\"Row 447\",\"note\":\"the 447th of two thousand\"},{\"name\":\"Row 448\",\"note\":\"the 448th of two thousand\"},{\"name\":\"Row 449\",\"note\":\"the 449th of two thousand\"},{\"name\":\"Row 450\",\"note\":\"the 450th of two thousand\"},{\"name\":\"Row 451\",\"note\":\"the 451st of two thousand\"},{\"name\":\"Row 452\",\"note\":\"the 452nd of two thousand\"},{\"name\":\"Row 453\",\"note\":\"the 453rd of two thousand\"},{\"name\":\"Row 454\",\"note\":\"the 454th of two thousand\"},{\"name\":\"Row 455\",\"note\":\"the 455th of two thousand\"},{\"name\":\"Row 456\",\"note\":\"the 456th of two thousand\"},{\"name\":\"Row 457\",\"note\":\"the 457th of two thousand\"},{\"name\":\"Row 458\",\"note\":\"the 458th of two thousand\"},{\"name\":\"Row 459\",\"note\":\"the 459th of two thousand\"},{\"name\":\"Row 460\",\"note\":\"the 460th of two thousand\"},{\"name\":\"Row 461\",\"note\":\"the 461st of two thousand\"},{\"name\":\"Row 462\",\"note\":\"the 462nd of two thousand\"},{\"name\":\"Row 463\",\"note\":\"the 463rd of two thousand\"},{\"name\":\"Row 464\",\"note\":\"the 464th of two thousand\"},{\"name\":\"Row 465\",\"note\":\"the 465th of two thousand\"},{\"name\":\"Row 466\",\"note\":\"the 466th of two thousand\"},{\"name\":\"Row 467\",\"note\":\"the 467th of two thousand\"},{\"name\":\"Row 468\",\"note\":\"the 468th of two thousand\"},{\"name\":\"Row 469\",\"note\":\"the 469th of two thousand\"},{\"name\":\"Row 470\",\"note\":\"the 470th of two thousand\"},{\"name\":\"Row 471\",\"note\":\"the 471st of two thousand\"},{\"name\":\"Row 472\",\"note\":\"the 472nd of two thousand\"},{\"name\":\"Row 473\",\"note\":\"the 473rd of two thousand\"},{\"name\":\"Row 474\",\"note\":\"the 474th of two thousand\"},{\"name\":\"Row 475\",\"note\":\"the 475th of two thousand\"},{\"name\":\"Row 476\",\"note\":\"the 476th of two thousand\"},{\"name\":\"Row 477\",\"note\":\"the 477th of two thousand\"},{\"name\":\"Row 478\",\"note\":\"the 478th of two thousand\"},{\"name\":\"Row 479\",\"note\":\"the 479th of two thousand\"},{\"name\":\"Row 480\",\"note\":\"the 480th of two thousand\"},{\"name\":\"Row 481\",\"note\":\"the 481st of two thousand\"},{\"name\":\"Row 482\",\"note\":\"the 482nd of two thousand\"},{\"name\":\"Row 483\",\"note\":\"the 483rd of two thousand\"},{\"name\":\"Row 484\",\"note\":\"the 484th of two thousand\"},{\"name\":\"Row 485\",\"note\":\"the 485th of two thousand\"},{\"name\":\"Row 486\",\"note\":\"the 486th of two thousand\"},{\"name\":\"Row 487\",\"note\":\"the 487th of two thousand\"},{\"name\":\"Row 488\",\"note\":\"the 488th of two thousand\"},{\"name\":\"Row 489\",\"note\":\"the 489th of two thousand\"},{\"name\":\"Row 490\",\"note\":\"the 490th of two thousand\"},{\"name\":\"Row 491\",\"note\":\"the 491st of two thousand\"},{\"name\":\"Row 492\",\"note\":\"the 492nd of two thousand\"},{\"name\":\"Row 493\",\"note\":\"the 493rd of two thousand\"},{\"name\":\"Row 494\",\"note\":\"the 494th of two thousand\"},{\"name\":\"Row 495\",\"note\":\"the 495th of two thousand\"},{\"name\":\"Row 496\",\"note\":\"the 496th of two thousand\"},{\"name\":\"Row 497\",\"note\":\"the 497th of two thousand\"},{\"name\":\"Row 498\",\"note\":\"the 498th of two thousand\"},{\"name\":\"Row 499\",\"note\":\"the 499th of two thousand\"},{\"name\":\"Row 500\",\"note\":\"the 500th of two thousand\"},{\"name\":\"Row 501\",\"note\":\"the 501st of two thousand\"},{\"name\":\"Row 502\",\"note\":\"the 502nd of two thousand\"},{\"name\":\"Row 503\",\"note\":\"the 503rd of two thousand\"},{\"name\":\"Row 504\",\"note\":\"the 504th of two thousand\"},{\"name\":\"Row 505\",\"note\":\"the 505th of two thousand\"},{\"name\":\"Row 506\",\"note\":\"the 506th of two thousand\"},{\"name\":\"Row 507\",\"note\":\"the 507th of two thousand\"},{\"name\":\"Row 508\",\"note\":\"the 508th of two thousand\"},{\"name\":\"Row 509\",\"note\":\"the 509th of two thousand\"},{\"name\":\"Row 510\",\"note\":\"the 510th of two thousand\"},{\"name\":\"Row 511\",\"note\":\"the 511th of two thousand\"},{\"name\":\"Row 512\",\"note\":\"the 512th of two thousand\"},{\"name\":\"Row 513\",\"note\":\"the 513th of two thousand\"},{\"name\":\"Row 514\",\"note\":\"the 514th of two thousand\"},{\"name\":\"Row 515\",\"note\":\"the 515th of two thousand\"},{\"name\":\"Row 516\",\"note\":\"the 516th of two thousand\"},{\"name\":\"Row 517\",\"note\":\"the 517th of two thousand\"},{\"name\":\"Row 518\",\"note\":\"the 518th of two thousand\"},{\"name\":\"Row 519\",\"note\":\"the 519th of two thousand\"},{\"name\":\"Row 520\",\"note\":\"the 520th of two thousand\"},{\"name\":\"Row 521\",\"note\":\"the 521st of two thousand\"},{\"name\":\"Row 522\",\"note\":\"the 522nd of two thousand\"},{\"name\":\"Row 523\",\"note\":\"the 523rd of two thousand\"},{\"name\":\"Row 524\",\"note\":\"the 524th of two thousand\"},{\"name\":\"Row 525\",\"note\":\"the 525th of two thousand\"},{\"name\":\"Row 526\",\"note\":\"the 526th of two thousand\"},{\"name\":\"Row 527\",\"note\":\"the 527th of two thousand\"},{\"name\":\"Row 528\",\"note\":\"the 528th of two thousand\"},{\"name\":\"Row 529\",\"note\":\"the 529th of two thousand\"},{\"name\":\"Row 530\",\"note\":\"the 530th of two thousand\"},{\"name\":\"Row 531\",\"note\":\"the 531st of two thousand\"},{\"name\":\"Row 532\",\"note\":\"the 532nd of two thousand\"},{\"name\":\"Row 533\",\"note\":\"the 533rd of two thousand\"},{\"name\":\"Row 534\",\"note\":\"the 534th of two thousand\"},{\"name\":\"Row 535\",\"note\":\"the 535th of two thousand\"},{\"name\":\"Row 536\",\"note\":\"the 536th of two thousand\"},{\"name\":\"Row 537\",\"note\":\"the 537th of two thousand\"},{\"name\":\"Row 538\",\"note\":\"the 538th of two thousand\"},{\"name\":\"Row 539\",\"note\":\"the 539th of two thousand\"},{\"name\":\"Row 540\",\"note\":\"the 540th of two thousand\"},{\"name\":\"Row 541\",\"note\":\"the 541st of two thousand\"},{\"name\":\"Row 542\",\"note\":\"the 542nd of two thousand\"},{\"name\":\"Row 543\",\"note\":\"the 543rd of two thousand\"},{\"name\":\"Row 544\",\"note\":\"the 544th of two thousand\"},{\"name\":\"Row 545\",\"note\":\"the 545th of two thousand\"},{\"name\":\"Row 546\",\"note\":\"the 546th of two thousand\"},{\"name\":\"Row 547\",\"note\":\"the 547th of two thousand\"},{\"name\":\"Row 548\",\"note\":\"the 548th of two thousand\"},{\"name\":\"Row 549\",\"note\":\"the 549th of two thousand\"},{\"name\":\"Row 550\",\"note\":\"the 550th of two thousand\"},{\"name\":\"Row 551\",\"note\":\"the 551st of two thousand\"},{\"name\":\"Row 552\",\"note\":\"the 552nd of two thousand\"},{\"name\":\"Row 553\",\"note\":\"the 553rd of two thousand\"},{\"name\":\"Row 554\",\"note\":\"the 554th of two thousand\"},{\"name\":\"Row 555\",\"note\":\"the 555th of two thousand\"},{\"name\":\"Row 556\",\"note\":\"the 556th of two thousand\"},{\"name\":\"Row 557\",\"note\":\"the 557th of two thousand\"},{\"name\":\"Row 558\",\"note\":\"the 558th of two thousand\"},{\"name\":\"Row 559\",\"note\":\"the 559th of two thousand\"},{\"name\":\"Row 560\",\"note\":\"the 560th of two thousand\"},{\"name\":\"Row 561\",\"note\":\"the 561st of two thousand\"},{\"name\":\"Row 562\",\"note\":\"the 562nd of two thousand\"},{\"name\":\"Row 563\",\"note\":\"the 563rd of two thousand\"},{\"name\":\"Row 564\",\"note\":\"the 564th of two thousand\"},{\"name\":\"Row 565\",\"note\":\"the 565th of two thousand\"},{\"name\":\"Row 566\",\"note\":\"the 566th of two thousand\"},{\"name\":\"Row 567\",\"note\":\"the 567th of two thousand\"},{\"name\":\"Row 568\",\"note\":\"the 568th of two thousand\"},{\"name\":\"Row 569\",\"note\":\"the 569th of two thousand\"},{\"name\":\"Row 570\",\"note\":\"the 570th of two thousand\"},{\"name\":\"Row 571\",\"note\":\"the 571st of two thousand\"},{\"name\":\"Row 572\",\"note\":\"the 572nd of two thousand\"},{\"name\":\"Row 573\",\"note\":\"the 573rd of two thousand\"},{\"name\":\"Row 574\",\"note\":\"the 574th of two thousand\"},{\"name\":\"Row 575\",\"note\":\"the 575th of two thousand\"},{\"name\":\"Row 576\",\"note\":\"the 576th of two thousand\"},{\"name\":\"Row 577\",\"note\":\"the 577th of two thousand\"},{\"name\":\"Row 578\",\"note\":\"the 578th of two thousand\"},{\"name\":\"Row 579\",\"note\":\"the 579th of two thousand\"},{\"name\":\"Row 580\",\"note\":\"the 580th of two thousand\"},{\"name\":\"Row 581\",\"note\":\"the 581st of two thousand\"},{\"name\":\"Row 582\",\"note\":\"the 582nd of two thousand\"},{\"name\":\"Row 583\",\"note\":\"the 583rd of two thousand\"},{\"name\":\"Row 584\",\"note\":\"the 584th of two thousand\"},{\"name\":\"Row 585\",\"note\":\"the 585th of two thousand\"},{\"name\":\"Row 586\",\"note\":\"the 586th of two thousand\"},{\"name\":\"Row 587\",\"note\":\"the 587th of two thousand\"},{\"name\":\"Row 588\",\"note\":\"the 588th of two thousand\"},{\"name\":\"Row 589\",\"note\":\"the 589th of two thousand\"},{\"name\":\"Row 590\",\"note\":\"the 590th of two thousand\"},{\"name\":\"Row 591\",\"note\":\"the 591st of two thousand\"},{\"name\":\"Row 592\",\"note\":\"the 592nd of two thousand\"},{\"name\":\"Row 593\",\"note\":\"the 593rd of two thousand\"},{\"name\":\"Row 594\",\"note\":\"the 594th of two thousand\"},{\"name\":\"Row 595\",\"note\":\"the 595th of two thousand\"},{\"name\":\"Row 596\",\"note\":\"the 596th of two thousand\"},{\"name\":\"Row 597\",\"note\":\"the 597th of two thousand\"},{\"name\":\"Row 598\",\"note\":\"the 598th of two thousand\"},{\"name\":\"Row 599\",\"note\":\"the 599th of two thousand\"},{\"name\":\"Row 600\",\"note\":\"the 600th of two thousand\"},{\"name\":\"Row 601\",\"note\":\"the 601st of two thousand\"},{\"name\":\"Row 602\",\"note\":\"the 602nd of two thousand\"},{\"name\":\"Row 603\",\"note\":\"the 603rd of two thousand\"},{\"name\":\"Row 604\",\"note\":\"the 604th of two thousand\"},{\"name\":\"Row 605\",\"note\":\"the 605th of two thousand\"},{\"name\":\"Row 606\",\"note\":\"the 606th of two thousand\"},{\"name\":\"Row 607\",\"note\":\"the 607th of two thousand\"},{\"name\":\"Row 608\",\"note\":\"the 608th of two thousand\"},{\"name\":\"Row 609\",\"note\":\"the 609th of two thousand\"},{\"name\":\"Row 610\",\"note\":\"the 610th of two thousand\"},{\"name\":\"Row 611\",\"note\":\"the 611th of two thousand\"},{\"name\":\"Row 612\",\"note\":\"the 612th of two thousand\"},{\"name\":\"Row 613\",\"note\":\"the 613th of two thousand\"},{\"name\":\"Row 614\",\"note\":\"the 614th of two thousand\"},{\"name\":\"Row 615\",\"note\":\"the 615th of two thousand\"},{\"name\":\"Row 616\",\"note\":\"the 616th of two thousand\"},{\"name\":\"Row 617\",\"note\":\"the 617th of two thousand\"},{\"name\":\"Row 618\",\"note\":\"the 618th of two thousand\"},{\"name\":\"Row 619\",\"note\":\"the 619th of two thousand\"},{\"name\":\"Row 620\",\"note\":\"the 620th of two thousand\"},{\"name\":\"Row 621\",\"note\":\"the 621st of two thousand\"},{\"name\":\"Row 622\",\"note\":\"the 622nd of two thousand\"},{\"name\":\"Row 623\",\"note\":\"the 623rd of two thousand\"},{\"name\":\"Row 624\",\"note\":\"the 624th of two thousand\"},{\"name\":\"Row 625\",\"note\":\"the 625th of two thousand\"},{\"name\":\"Row 626\",\"note\":\"the 626th of two thousand\"},{\"name\":\"Row 627\",\"note\":\"the 627th of two thousand\"},{\"name\":\"Row 628\",\"note\":\"the 628th of two thousand\"},{\"name\":\"Row 629\",\"note\":\"the 629th of two thousand\"},{\"name\":\"Row 630\",\"note\":\"the 630th of two thousand\"},{\"name\":\"Row 631\",\"note\":\"the 631st of two thousand\"},{\"name\":\"Row 632\",\"note\":\"the 632nd of two thousand\"},{\"name\":\"Row 633\",\"note\":\"the 633rd of two thousand\"},{\"name\":\"Row 634\",\"note\":\"the 634th of two thousand\"},{\"name\":\"Row 635\",\"note\":\"the 635th of two thousand\"},{\"name\":\"Row 636\",\"note\":\"the 636th of two thousand\"},{\"name\":\"Row 637\",\"note\":\"the 637th of two thousand\"},{\"name\":\"Row 638\",\"note\":\"the 638th of two thousand\"},{\"name\":\"Row 639\",\"note\":\"the 639th of two thousand\"},{\"name\":\"Row 640\",\"note\":\"the 640th of two thousand\"},{\"name\":\"Row 641\",\"note\":\"the 641st of two thousand\"},{\"name\":\"Row 642\",\"note\":\"the 642nd of two thousand\"},{\"name\":\"Row 643\",\"note\":\"the 643rd of two thousand\"},{\"name\":\"Row 644\",\"note\":\"the 644th of two thousand\"},{\"name\":\"Row 645\",\"note\":\"the 645th of two thousand\"},{\"name\":\"Row 646\",\"note\":\"the 646th of two thousand\"},{\"name\":\"Row 647\",\"note\":\"the 647th of two thousand\"},{\"name\":\"Row 648\",\"note\":\"the 648th of two thousand\"},{\"name\":\"Row 649\",\"note\":\"the 649th of two thousand\"},{\"name\":\"Row 650\",\"note\":\"the 650th of two thousand\"},{\"name\":\"Row 651\",\"note\":\"the 651st of two thousand\"},{\"name\":\"Row 652\",\"note\":\"the 652nd of two thousand\"},{\"name\":\"Row 653\",\"note\":\"the 653rd of two thousand\"},{\"name\":\"Row 654\",\"note\":\"the 654th of two thousand\"},{\"name\":\"Row 655\",\"note\":\"the 655th of two thousand\"},{\"name\":\"Row 656\",\"note\":\"the 656th of two thousand\"},{\"name\":\"Row 657\",\"note\":\"the 657th of two thousand\"},{\"name\":\"Row 658\",\"note\":\"the 658th of two thousand\"},{\"name\":\"Row 659\",\"note\":\"the 659th of two thousand\"},{\"name\":\"Row 660\",\"note\":\"the 660th of two thousand\"},{\"name\":\"Row 661\",\"note\":\"the 661st of two thousand\"},{\"name\":\"Row 662\",\"note\":\"the 662nd of two thousand\"},{\"name\":\"Row 663\",\"note\":\"the 663rd of two thousand\"},{\"name\":\"Row 664\",\"note\":\"the 664th of two thousand\"},{\"name\":\"Row 665\",\"note\":\"the 665th of two thousand\"},{\"name\":\"Row 666\",\"note\":\"the 666th of two thousand\"},{\"name\":\"Row 667\",\"note\":\"the 667th of two thousand\"},{\"name\":\"Row 668\",\"note\":\"the 668th of two thousand\"},{\"name\":\"Row 669\",\"note\":\"the 669th of two thousand\"},{\"name\":\"Row 670\",\"note\":\"the 670th of two thousand\"},{\"name\":\"Row 671\",\"note\":\"the 671st of two thousand\"},{\"name\":\"Row 672\",\"note\":\"the 672nd of two thousand\"},{\"name\":\"Row 673\",\"note\":\"the 673rd of two thousand\"},{\"name\":\"Row 674\",\"note\":\"the 674th of two thousand\"},{\"name\":\"Row 675\",\"note\":\"the 675th of two thousand\"},{\"name\":\"Row 676\",\"note\":\"the 676th of two thousand\"},{\"name\":\"Row 677\",\"note\":\"the 677th of two thousand\"},{\"name\":\"Row 678\",\"note\":\"the 678th of two thousand\"},{\"name\":\"Row 679\",\"note\":\"the 679th of two thousand\"},{\"name\":\"Row 680\",\"note\":\"the 680th of two thousand\"},{\"name\":\"Row 681\",\"note\":\"the 681st of two thousand\"},{\"name\":\"Row 682\",\"note\":\"the 682nd of two thousand\"},{\"name\":\"Row 683\",\"note\":\"the 683rd of two thousand\"},{\"name\":\"Row 684\",\"note\":\"the 684th of two thousand\"},{\"name\":\"Row 685\",\"note\":\"the 685th of two thousand\"},{\"name\":\"Row 686\",\"note\":\"the 686th of two thousand\"},{\"name\":\"Row 687\",\"note\":\"the 687th of two thousand\"},{\"name\":\"Row 688\",\"note\":\"the 688th of two thousand\"},{\"name\":\"Row 689\",\"note\":\"the 689th of two thousand\"},{\"name\":\"Row 690\",\"note\":\"the 690th of two thousand\"},{\"name\":\"Row 691\",\"note\":\"the 691st of two thousand\"},{\"name\":\"Row 692\",\"note\":\"the 692nd of two thousand\"},{\"name\":\"Row 693\",\"note\":\"the 693rd of two thousand\"},{\"name\":\"Row 694\",\"note\":\"the 694th of two thousand\"},{\"name\":\"Row 695\",\"note\":\"the 695th of two thousand\"},{\"name\":\"Row 696\",\"note\":\"the 696th of two thousand\"},{\"name\":\"Row 697\",\"note\":\"the 697th of two thousand\"},{\"name\":\"Row 698\",\"note\":\"the 698th of two thousand\"},{\"name\":\"Row 699\",\"note\":\"the 699th of two thousand\"},{\"name\":\"Row 700\",\"note\":\"the 700th of two thousand\"},{\"name\":\"Row 701\",\"note\":\"the 701st of two thousand\"},{\"name\":\"Row 702\",\"note\":\"the 702nd of two thousand\"},{\"name\":\"Row 703\",\"note\":\"the 703rd of two thousand\"},{\"name\":\"Row 704\",\"note\":\"the 704th of two thousand\"},{\"name\":\"Row 705\",\"note\":\"the 705th of two thousand\"},{\"name\":\"Row 706\",\"note\":\"the 706th of two thousand\"},{\"name\":\"Row 707\",\"note\":\"the 707th of two thousand\"},{\"name\":\"Row 708\",\"note\":\"the 708th of two thousand\"},{\"name\":\"Row 709\",\"note\":\"the 709th of two thousand\"},{\"name\":\"Row 710\",\"note\":\"the 710th of two thousand\"},{\"name\":\"Row 711\",\"note\":\"the 711th of two thousand\"},{\"name\":\"Row 712\",\"note\":\"the 712th of two thousand\"},{\"name\":\"Row 713\",\"note\":\"the 713th of two thousand\"},{\"name\":\"Row 714\",\"note\":\"the 714th of two thousand\"},{\"name\":\"Row 715\",\"note\":\"the 715th of two thousand\"},{\"name\":\"Row 716\",\"note\":\"the 716th of two thousand\"},{\"name\":\"Row 717\",\"note\":\"the 717th of two thousand\"},{\"name\":\"Row 718\",\"note\":\"the 718th of two thousand\"},{\"name\":\"Row 719\",\"note\":\"the 719th of two thousand\"},{\"name\":\"Row 720\",\"note\":\"the 720th of two thousand\"},{\"name\":\"Row 721\",\"note\":\"the 721st of two thousand\"},{\"name\":\"Row 722\",\"note\":\"the 722nd of two thousand\"},{\"name\":\"Row 723\",\"note\":\"the 723rd of two thousand\"},{\"name\":\"Row 724\",\"note\":\"the 724th of two thousand\"},{\"name\":\"Row 725\",\"note\":\"the 725th of two thousand\"},{\"name\":\"Row 726\",\"note\":\"the 726th of two thousand\"},{\"name\":\"Row 727\",\"note\":\"the 727th of two thousand\"},{\"name\":\"Row 728\",\"note\":\"the 728th of two thousand\"},{\"name\":\"Row 729\",\"note\":\"the 729th of two thousand\"},{\"name\":\"Row 730\",\"note\":\"the 730th of two thousand\"},{\"name\":\"Row 731\",\"note\":\"the 731st of two thousand\"},{\"name\":\"Row 732\",\"note\":\"the 732nd of two thousand\"},{\"name\":\"Row 733\",\"note\":\"the 733rd of two thousand\"},{\"name\":\"Row 734\",\"note\":\"the 734th of two thousand\"},{\"name\":\"Row 735\",\"note\":\"the 735th of two thousand\"},{\"name\":\"Row 736\",\"note\":\"the 736th of two thousand\"},{\"name\":\"Row 737\",\"note\":\"the 737th of two thousand\"},{\"name\":\"Row 738\",\"note\":\"the 738th of two thousand\"},{\"name\":\"Row 739\",\"note\":\"the 739th of two thousand\"},{\"name\":\"Row 740\",\"note\":\"the 740th of two thousand\"},{\"name\":\"Row 741\",\"note\":\"the 741st of two thousand\"},{\"name\":\"Row 742\",\"note\":\"the 742nd of two thousand\"},{\"name\":\"Row 743\",\"note\":\"the 743rd of two thousand\"},{\"name\":\"Row 744\",\"note\":\"the 744th of two thousand\"},{\"name\":\"Row 745\",\"note\":\"the 745th of two thousand\"},{\"name\":\"Row 746\",\"note\":\"the 746th of two thousand\"},{\"name\":\"Row 747\",\"note\":\"the 747th of two thousand\"},{\"name\":\"Row 748\",\"note\":\"the 748th of two thousand\"},{\"name\":\"Row 749\",\"note\":\"the 749th of two thousand\"},{\"name\":\"Row 750\",\"note\":\"the 750th of two thousand\"},{\"name\":\"Row 751\",\"note\":\"the 751st of two thousand\"},{\"name\":\"Row 752\",\"note\":\"the 752nd of two thousand\"},{\"name\":\"Row 753\",\"note\":\"the 753rd of two thousand\"},{\"name\":\"Row 754\",\"note\":\"the 754th of two thousand\"},{\"name\":\"Row 755\",\"note\":\"the 755th of two thousand\"},{\"name\":\"Row 756\",\"note\":\"the 756th of two thousand\"},{\"name\":\"Row 757\",\"note\":\"the 757th of two thousand\"},{\"name\":\"Row 758\",\"note\":\"the 758th of two thousand\"},{\"name\":\"Row 759\",\"note\":\"the 759th of two thousand\"},{\"name\":\"Row 760\",\"note\":\"the 760th of two thousand\"},{\"name\":\"Row 761\",\"note\":\"the 761st of two thousand\"},{\"name\":\"Row 762\",\"note\":\"the 762nd of two thousand\"},{\"name\":\"Row 763\",\"note\":\"the 763rd of two thousand\"},{\"name\":\"Row 764\",\"note\":\"the 764th of two thousand\"},{\"name\":\"Row 765\",\"note\":\"the 765th of two thousand\"},{\"name\":\"Row 766\",\"note\":\"the 766th of two thousand\"},{\"name\":\"Row 767\",\"note\":\"the 767th of two thousand\"},{\"name\":\"Row 768\",\"note\":\"the 768th of two thousand\"},{\"name\":\"Row 769\",\"note\":\"the 769th of two thousand\"},{\"name\":\"Row 770\",\"note\":\"the 770th of two thousand\"},{\"name\":\"Row 771\",\"note\":\"the 771st of two thousand\"},{\"name\":\"Row 772\",\"note\":\"the 772nd of two thousand\"},{\"name\":\"Row 773\",\"note\":\"the 773rd of two thousand\"},{\"name\":\"Row 774\",\"note\":\"the 774th of two thousand\"},{\"name\":\"Row 775\",\"note\":\"the 775th of two thousand\"},{\"name\":\"Row 776\",\"note\":\"the 776th of two thousand\"},{\"name\":\"Row 777\",\"note\":\"the 777th of two thousand\"},{\"name\":\"Row 778\",\"note\":\"the 778th of two thousand\"},{\"name\":\"Row 779\",\"note\":\"the 779th of two thousand\"},{\"name\":\"Row 780\",\"note\":\"the 780th of two thousand\"},{\"name\":\"Row 781\",\"note\":\"the 781st of two thousand\"},{\"name\":\"Row 782\",\"note\":\"the 782nd of two thousand\"},{\"name\":\"Row 783\",\"note\":\"the 783rd of two thousand\"},{\"name\":\"Row 784\",\"note\":\"the 784th of two thousand\"},{\"name\":\"Row 785\",\"note\":\"the 785th of two thousand\"},{\"name\":\"Row 786\",\"note\":\"the 786th of two thousand\"},{\"name\":\"Row 787\",\"note\":\"the 787th of two thousand\"},{\"name\":\"Row 788\",\"note\":\"the 788th of two thousand\"},{\"name\":\"Row 789\",\"note\":\"the 789th of two thousand\"},{\"name\":\"Row 790\",\"note\":\"the 790th of two thousand\"},{\"name\":\"Row 791\",\"note\":\"the 791st of two thousand\"},{\"name\":\"Row 792\",\"note\":\"the 792nd of two thousand\"},{\"name\":\"Row 793\",\"note\":\"the 793rd of two thousand\"},{\"name\":\"Row 794\",\"note\":\"the 794th of two thousand\"},{\"name\":\"Row 795\",\"note\":\"the 795th of two thousand\"},{\"name\":\"Row 796\",\"note\":\"the 796th of two thousand\"},{\"name\":\"Row 797\",\"note\":\"the 797th of two thousand\"},{\"name\":\"Row 798\",\"note\":\"the 798th of two thousand\"},{\"name\":\"Row 799\",\"note\":\"the 799th of two thousand\"},{\"name\":\"Row 800\",\"note\":\"the 800th of two thousand\"},{\"name\":\"Row 801\",\"note\":\"the 801st of two thousand\"},{\"name\":\"Row 802\",\"note\":\"the 802nd of two thousand\"},{\"name\":\"Row 803\",\"note\":\"the 803rd of two thousand\"},{\"name\":\"Row 804\",\"note\":\"the 804th of two thousand\"},{\"name\":\"Row 805\",\"note\":\"the 805th of two thousand\"},{\"name\":\"Row 806\",\"note\":\"the 806th of two thousand\"},{\"name\":\"Row 807\",\"note\":\"the 807th of two thousand\"},{\"name\":\"Row 808\",\"note\":\"the 808th of two thousand\"},{\"name\":\"Row 809\",\"note\":\"the 809th of two thousand\"},{\"name\":\"Row 810\",\"note\":\"the 810th of two thousand\"},{\"name\":\"Row 811\",\"note\":\"the 811th of two thousand\"},{\"name\":\"Row 812\",\"note\":\"the 812th of two thousand\"},{\"name\":\"Row 813\",\"note\":\"the 813th of two thousand\"},{\"name\":\"Row 814\",\"note\":\"the 814th of two thousand\"},{\"name\":\"Row 815\",\"note\":\"the 815th of two thousand\"},{\"name\":\"Row 816\",\"note\":\"the 816th of two thousand\"},{\"name\":\"Row 817\",\"note\":\"the 817th of two thousand\"},{\"name\":\"Row 818\",\"note\":\"the 818th of two thousand\"},{\"name\":\"Row 819\",\"note\":\"the 819th of two thousand\"},{\"name\":\"Row 820\",\"note\":\"the 820th of two thousand\"},{\"name\":\"Row 821\",\"note\":\"the 821st of two thousand\"},{\"name\":\"Row 822\",\"note\":\"the 822nd of two thousand\"},{\"name\":\"Row 823\",\"note\":\"the 823rd of two thousand\"},{\"name\":\"Row 824\",\"note\":\"the 824th of two thousand\"},{\"name\":\"Row 825\",\"note\":\"the 825th of two thousand\"},{\"name\":\"Row 826\",\"note\":\"the 826th of two thousand\"},{\"name\":\"Row 827\",\"note\":\"the 827th of two thousand\"},{\"name\":\"Row 828\",\"note\":\"the 828th of two thousand\"},{\"name\":\"Row 829\",\"note\":\"the 829th of two thousand\"},{\"name\":\"Row 830\",\"note\":\"the 830th of two thousand\"},{\"name\":\"Row 831\",\"note\":\"the 831st of two thousand\"},{\"name\":\"Row 832\",\"note\":\"the 832nd of two thousand\"},{\"name\":\"Row 833\",\"note\":\"the 833rd of two thousand\"},{\"name\":\"Row 834\",\"note\":\"the 834th of two thousand\"},{\"name\":\"Row 835\",\"note\":\"the 835th of two thousand\"},{\"name\":\"Row 836\",\"note\":\"the 836th of two thousand\"},{\"name\":\"Row 837\",\"note\":\"the 837th of two thousand\"},{\"name\":\"Row 838\",\"note\":\"the 838th of two thousand\"},{\"name\":\"Row 839\",\"note\":\"the 839th of two thousand\"},{\"name\":\"Row 840\",\"note\":\"the 840th of two thousand\"},{\"name\":\"Row 841\",\"note\":\"the 841st of two thousand\"},{\"name\":\"Row 842\",\"note\":\"the 842nd of two thousand\"},{\"name\":\"Row 843\",\"note\":\"the 843rd of two thousand\"},{\"name\":\"Row 844\",\"note\":\"the 844th of two thousand\"},{\"name\":\"Row 845\",\"note\":\"the 845th of two thousand\"},{\"name\":\"Row 846\",\"note\":\"the 846th of two thousand\"},{\"name\":\"Row 847\",\"note\":\"the 847th of two thousand\"},{\"name\":\"Row 848\",\"note\":\"the 848th of two thousand\"},{\"name\":\"Row 849\",\"note\":\"the 849th of two thousand\"},{\"name\":\"Row 850\",\"note\":\"the 850th of two thousand\"},{\"name\":\"Row 851\",\"note\":\"the 851st of two thousand\"},{\"name\":\"Row 852\",\"note\":\"the 852nd of two thousand\"},{\"name\":\"Row 853\",\"note\":\"the 853rd of two thousand\"},{\"name\":\"Row 854\",\"note\":\"the 854th of two thousand\"},{\"name\":\"Row 855\",\"note\":\"the 855th of two thousand\"},{\"name\":\"Row 856\",\"note\":\"the 856th of two thousand\"},{\"name\":\"Row 857\",\"note\":\"the 857th of two thousand\"},{\"name\":\"Row 858\",\"note\":\"the 858th of two thousand\"},{\"name\":\"Row 859\",\"note\":\"the 859th of two thousand\"},{\"name\":\"Row 860\",\"note\":\"the 860th of two thousand\"},{\"name\":\"Row 861\",\"note\":\"the 861st of two thousand\"},{\"name\":\"Row 862\",\"note\":\"the 862nd of two thousand\"},{\"name\":\"Row 863\",\"note\":\"the 863rd of two thousand\"},{\"name\":\"Row 864\",\"note\":\"the 864th of two thousand\"},{\"name\":\"Row 865\",\"note\":\"the 865th of two thousand\"},{\"name\":\"Row 866\",\"note\":\"the 866th of two thousand\"},{\"name\":\"Row 867\",\"note\":\"the 867th of two thousand\"},{\"name\":\"Row 868\",\"note\":\"the 868th of two thousand\"},{\"name\":\"Row 869\",\"note\":\"the 869th of two thousand\"},{\"name\":\"Row 870\",\"note\":\"the 870th of two thousand\"},{\"name\":\"Row 871\",\"note\":\"the 871st of two thousand\"},{\"name\":\"Row 872\",\"note\":\"the 872nd of two thousand\"},{\"name\":\"Row 873\",\"note\":\"the 873rd of two thousand\"},{\"name\":\"Row 874\",\"note\":\"the 874th of two thousand\"},{\"name\":\"Row 875\",\"note\":\"the 875th of two thousand\"},{\"name\":\"Row 876\",\"note\":\"the 876th of two thousand\"},{\"name\":\"Row 877\",\"note\":\"the 877th of two thousand\"},{\"name\":\"Row 878\",\"note\":\"the 878th of two thousand\"},{\"name\":\"Row 879\",\"note\":\"the 879th of two thousand\"},{\"name\":\"Row 880\",\"note\":\"the 880th of two thousand\"},{\"name\":\"Row 881\",\"note\":\"the 881st of two thousand\"},{\"name\":\"Row 882\",\"note\":\"the 882nd of two thousand\"},{\"name\":\"Row 883\",\"note\":\"the 883rd of two thousand\"},{\"name\":\"Row 884\",\"note\":\"the 884th of two thousand\"},{\"name\":\"Row 885\",\"note\":\"the 885th of two thousand\"},{\"name\":\"Row 886\",\"note\":\"the 886th of two thousand\"},{\"name\":\"Row 887\",\"note\":\"the 887th of two thousand\"},{\"name\":\"Row 888\",\"note\":\"the 888th of two thousand\"},{\"name\":\"Row 889\",\"note\":\"the 889th of two thousand\"},{\"name\":\"Row 890\",\"note\":\"the 890th of two thousand\"},{\"name\":\"Row 891\",\"note\":\"the 891st of two thousand\"},{\"name\":\"Row 892\",\"note\":\"the 892nd of two thousand\"},{\"name\":\"Row 893\",\"note\":\"the 893rd of two thousand\"},{\"name\":\"Row 894\",\"note\":\"the 894th of two thousand\"},{\"name\":\"Row 895\",\"note\":\"the 895th of two thousand\"},{\"name\":\"Row 896\",\"note\":\"the 896th of two thousand\"},{\"name\":\"Row 897\",\"note\":\"the 897th of two thousand\"},{\"name\":\"Row 898\",\"note\":\"the 898th of two thousand\"},{\"name\":\"Row 899\",\"note\":\"the 899th of two thousand\"},{\"name\":\"Row 900\",\"note\":\"the 900th of two thousand\"},{\"name\":\"Row 901\",\"note\":\"the 901st of two thousand\"},{\"name\":\"Row 902\",\"note\":\"the 902nd of two thousand\"},{\"name\":\"Row 903\",\"note\":\"the 903rd of two thousand\"},{\"name\":\"Row 904\",\"note\":\"the 904th of two thousand\"},{\"name\":\"Row 905\",\"note\":\"the 905th of two thousand\"},{\"name\":\"Row 906\",\"note\":\"the 906th of two thousand\"},{\"name\":\"Row 907\",\"note\":\"the 907th of two thousand\"},{\"name\":\"Row 908\",\"note\":\"the 908th of two thousand\"},{\"name\":\"Row 909\",\"note\":\"the 909th of two thousand\"},{\"name\":\"Row 910\",\"note\":\"the 910th of two thousand\"},{\"name\":\"Row 911\",\"note\":\"the 911th of two thousand\"},{\"name\":\"Row 912\",\"note\":\"the 912th of two thousand\"},{\"name\":\"Row 913\",\"note\":\"the 913th of two thousand\"},{\"name\":\"Row 914\",\"note\":\"the 914th of two thousand\"},{\"name\":\"Row 915\",\"note\":\"the 915th of two thousand\"},{\"name\":\"Row 916\",\"note\":\"the 916th of two thousand\"},{\"name\":\"Row 917\",\"note\":\"the 917th of two thousand\"},{\"name\":\"Row 918\",\"note\":\"the 918th of two thousand\"},{\"name\":\"Row 919\",\"note\":\"the 919th of two thousand\"},{\"name\":\"Row 920\",\"note\":\"the 920th of two thousand\"},{\"name\":\"Row 921\",\"note\":\"the 921st of two thousand\"},{\"name\":\"Row 922\",\"note\":\"the 922nd of two thousand\"},{\"name\":\"Row 923\",\"note\":\"the 923rd of two thousand\"},{\"name\":\"Row 924\",\"note\":\"the 924th of two thousand\"},{\"name\":\"Row 925\",\"note\":\"the 925th of two thousand\"},{\"name\":\"Row 926\",\"note\":\"the 926th of two thousand\"},{\"name\":\"Row 927\",\"note\":\"the 927th of two thousand\"},{\"name\":\"Row 928\",\"note\":\"the 928th of two thousand\"},{\"name\":\"Row 929\",\"note\":\"the 929th of two thousand\"},{\"name\":\"Row 930\",\"note\":\"the 930th of two thousand\"},{\"name\":\"Row 931\",\"note\":\"the 931st of two thousand\"},{\"name\":\"Row 932\",\"note\":\"the 932nd of two thousand\"},{\"name\":\"Row 933\",\"note\":\"the 933rd of two thousand\"},{\"name\":\"Row 934\",\"note\":\"the 934th of two thousand\"},{\"name\":\"Row 935\",\"note\":\"the 935th of two thousand\"},{\"name\":\"Row 936\",\"note\":\"the 936th of two thousand\"},{\"name\":\"Row 937\",\"note\":\"the 937th of two thousand\"},{\"name\":\"Row 938\",\"note\":\"the 938th of two thousand\"},{\"name\":\"Row 939\",\"note\":\"the 939th of two thousand\"},{\"name\":\"Row 940\",\"note\":\"the 940th of two thousand\"},{\"name\":\"Row 941\",\"note\":\"the 941st of two thousand\"},{\"name\":\"Row 942\",\"note\":\"the 942nd of two thousand\"},{\"name\":\"Row 943\",\"note\":\"the 943rd of two thousand\"},{\"name\":\"Row 944\",\"note\":\"the 944th of two thousand\"},{\"name\":\"Row 945\",\"note\":\"the 945th of two thousand\"},{\"name\":\"Row 946\",\"note\":\"the 946th of two thousand\"},{\"name\":\"Row 947\",\"note\":\"the 947th of two thousand\"},{\"name\":\"Row 948\",\"note\":\"the 948th of two thousand\"},{\"name\":\"Row 949\",\"note\":\"the 949th of two thousand\"},{\"name\":\"Row 950\",\"note\":\"the 950th of two thousand\"},{\"name\":\"Row 951\",\"note\":\"the 951st of two thousand\"},{\"name\":\"Row 952\",\"note\":\"the 952nd of two thousand\"},{\"name\":\"Row 953\",\"note\":\"the 953rd of two thousand\"},{\"name\":\"Row 954\",\"note\":\"the 954th of two thousand\"},{\"name\":\"Row 955\",\"note\":\"the 955th of two thousand\"},{\"name\":\"Row 956\",\"note\":\"the 956th of two thousand\"},{\"name\":\"Row 957\",\"note\":\"the 957th of two thousand\"},{\"name\":\"Row 958\",\"note\":\"the 958th of two thousand\"},{\"name\":\"Row 959\",\"note\":\"the 959th of two thousand\"},{\"name\":\"Row 960\",\"note\":\"the 960th of two thousand\"},{\"name\":\"Row 961\",\"note\":\"the 961st of two thousand\"},{\"name\":\"Row 962\",\"note\":\"the 962nd of two thousand\"},{\"name\":\"Row 963\",\"note\":\"the 963rd of two thousand\"},{\"name\":\"Row 964\",\"note\":\"the 964th of two thousand\"},{\"name\":\"Row 965\",\"note\":\"the 965th of two thousand\"},{\"name\":\"Row 966\",\"note\":\"the 966th of two thousand\"},{\"name\":\"Row 967\",\"note\":\"the 967th of two thousand\"},{\"name\":\"Row 968\",\"note\":\"the 968th of two thousand\"},{\"name\":\"Row 969\",\"note\":\"the 969th of two thousand\"},{\"name\":\"Row 970\",\"note\":\"the 970th of two thousand\"},{\"name\":\"Row 971\",\"note\":\"the 971st of two thousand\"},{\"name\":\"Row 972\",\"note\":\"the 972nd of two thousand\"},{\"name\":\"Row 973\",\"note\":\"the 973rd of two thousand\"},{\"name\":\"Row 974\",\"note\":\"the 974th of two thousand\"},{\"name\":\"Row 975\",\"note\":\"the 975th of two thousand\"},{\"name\":\"Row 976\",\"note\":\"the 976th of two thousand\"},{\"name\":\"Row 977\",\"note\":\"the 977th of two thousand\"},{\"name\":\"Row 978\",\"note\":\"the 978th of two thousand\"},{\"name\":\"Row 979\",\"note\":\"the 979th of two thousand\"},{\"name\":\"Row 980\",\"note\":\"the 980th of two thousand\"},{\"name\":\"Row 981\",\"note\":\"the 981st of two thousand\"},{\"name\":\"Row 982\",\"note\":\"the 982nd of two thousand\"},{\"name\":\"Row 983\",\"note\":\"the 983rd of two thousand\"},{\"name\":\"Row 984\",\"note\":\"the 984th of two thousand\"},{\"name\":\"Row 985\",\"note\":\"the 985th of two thousand\"},{\"name\":\"Row 986\",\"note\":\"the 986th of two thousand\"},{\"name\":\"Row 987\",\"note\":\"the 987th of two thousand\"},{\"name\":\"Row 988\",\"note\":\"the 988th of two thousand\"},{\"name\":\"Row 989\",\"note\":\"the 989th of two thousand\"},{\"name\":\"Row 990\",\"note\":\"the 990th of two thousand\"},{\"name\":\"Row 991\",\"note\":\"the 991st of two thousand\"},{\"name\":\"Row 992\",\"note\":\"the 992nd of two thousand\"},{\"name\":\"Row 993\",\"note\":\"the 993rd of two thousand\"},{\"name\":\"Row 994\",\"note\":\"the 994th of two thousand\"},{\"name\":\"Row 995\",\"note\":\"the 995th of two thousand\"},{\"name\":\"Row 996\",\"note\":\"the 996th of two thousand\"},{\"name\":\"Row 997\",\"note\":\"the 997th of two thousand\"},{\"name\":\"Row 998\",\"note\":\"the 998th of two thousand\"},{\"name\":\"Row 999\",\"note\":\"the 999th of two thousand\"},{\"name\":\"Row 1000\",\"note\":\"the 1,000th of two thousand\"},{\"name\":\"Row 1001\",\"note\":\"the 1,001st of two thousand\"},{\"name\":\"Row 1002\",\"note\":\"the 1,002nd of two thousand\"},{\"name\":\"Row 1003\",\"note\":\"the 1,003rd of two thousand\"},{\"name\":\"Row 1004\",\"note\":\"the 1,004th of two thousand\"},{\"name\":\"Row 1005\",\"note\":\"the 1,005th of two thousand\"},{\"name\":\"Row 1006\",\"note\":\"the 1,006th of two thousand\"},{\"name\":\"Row 1007\",\"note\":\"the 1,007th of two thousand\"},{\"name\":\"Row 1008\",\"note\":\"the 1,008th of two thousand\"},{\"name\":\"Row 1009\",\"note\":\"the 1,009th of two thousand\"},{\"name\":\"Row 1010\",\"note\":\"the 1,010th of two thousand\"},{\"name\":\"Row 1011\",\"note\":\"the 1,011th of two thousand\"},{\"name\":\"Row 1012\",\"note\":\"the 1,012th of two thousand\"},{\"name\":\"Row 1013\",\"note\":\"the 1,013th of two thousand\"},{\"name\":\"Row 1014\",\"note\":\"the 1,014th of two thousand\"},{\"name\":\"Row 1015\",\"note\":\"the 1,015th of two thousand\"},{\"name\":\"Row 1016\",\"note\":\"the 1,016th of two thousand\"},{\"name\":\"Row 1017\",\"note\":\"the 1,017th of two thousand\"},{\"name\":\"Row 1018\",\"note\":\"the 1,018th of two thousand\"},{\"name\":\"Row 1019\",\"note\":\"the 1,019th of two thousand\"},{\"name\":\"Row 1020\",\"note\":\"the 1,020th of two thousand\"},{\"name\":\"Row 1021\",\"note\":\"the 1,021st of two thousand\"},{\"name\":\"Row 1022\",\"note\":\"the 1,022nd of two thousand\"},{\"name\":\"Row 1023\",\"note\":\"the 1,023rd of two thousand\"},{\"name\":\"Row 1024\",\"note\":\"the 1,024th of two thousand\"},{\"name\":\"Row 1025\",\"note\":\"the 1,025th of two thousand\"},{\"name\":\"Row 1026\",\"note\":\"the 1,026th of two thousand\"},{\"name\":\"Row 1027\",\"note\":\"the 1,027th of two thousand\"},{\"name\":\"Row 1028\",\"note\":\"the 1,028th of two thousand\"},{\"name\":\"Row 1029\",\"note\":\"the 1,029th of two thousand\"},{\"name\":\"Row 1030\",\"note\":\"the 1,030th of two thousand\"},{\"name\":\"Row 1031\",\"note\":\"the 1,031st of two thousand\"},{\"name\":\"Row 1032\",\"note\":\"the 1,032nd of two thousand\"},{\"name\":\"Row 1033\",\"note\":\"the 1,033rd of two thousand\"},{\"name\":\"Row 1034\",\"note\":\"the 1,034th of two thousand\"},{\"name\":\"Row 1035\",\"note\":\"the 1,035th of two thousand\"},{\"name\":\"Row 1036\",\"note\":\"the 1,036th of two thousand\"},{\"name\":\"Row 1037\",\"note\":\"the 1,037th of two thousand\"},{\"name\":\"Row 1038\",\"note\":\"the 1,038th of two thousand\"},{\"name\":\"Row 1039\",\"note\":\"the 1,039th of two thousand\"},{\"name\":\"Row 1040\",\"note\":\"the 1,040th of two thousand\"},{\"name\":\"Row 1041\",\"note\":\"the 1,041st of two thousand\"},{\"name\":\"Row 1042\",\"note\":\"the 1,042nd of two thousand\"},{\"name\":\"Row 1043\",\"note\":\"the 1,043rd of two thousand\"},{\"name\":\"Row 1044\",\"note\":\"the 1,044th of two thousand\"},{\"name\":\"Row 1045\",\"note\":\"the 1,045th of two thousand\"},{\"name\":\"Row 1046\",\"note\":\"the 1,046th of two thousand\"},{\"name\":\"Row 1047\",\"note\":\"the 1,047th of two thousand\"},{\"name\":\"Row 1048\",\"note\":\"the 1,048th of two thousand\"},{\"name\":\"Row 1049\",\"note\":\"the 1,049th of two thousand\"},{\"name\":\"Row 1050\",\"note\":\"the 1,050th of two thousand\"},{\"name\":\"Row 1051\",\"note\":\"the 1,051st of two thousand\"},{\"name\":\"Row 1052\",\"note\":\"the 1,052nd of two thousand\"},{\"name\":\"Row 1053\",\"note\":\"the 1,053rd of two thousand\"},{\"name\":\"Row 1054\",\"note\":\"the 1,054th of two thousand\"},{\"name\":\"Row 1055\",\"note\":\"the 1,055th of two thousand\"},{\"name\":\"Row 1056\",\"note\":\"the 1,056th of two thousand\"},{\"name\":\"Row 1057\",\"note\":\"the 1,057th of two thousand\"},{\"name\":\"Row 1058\",\"note\":\"the 1,058th of two thousand\"},{\"name\":\"Row 1059\",\"note\":\"the 1,059th of two thousand\"},{\"name\":\"Row 1060\",\"note\":\"the 1,060th of two thousand\"},{\"name\":\"Row 1061\",\"note\":\"the 1,061st of two thousand\"},{\"name\":\"Row 1062\",\"note\":\"the 1,062nd of two thousand\"},{\"name\":\"Row 1063\",\"note\":\"the 1,063rd of two thousand\"},{\"name\":\"Row 1064\",\"note\":\"the 1,064th of two thousand\"},{\"name\":\"Row 1065\",\"note\":\"the 1,065th of two thousand\"},{\"name\":\"Row 1066\",\"note\":\"the 1,066th of two thousand\"},{\"name\":\"Row 1067\",\"note\":\"the 1,067th of two thousand\"},{\"name\":\"Row 1068\",\"note\":\"the 1,068th of two thousand\"},{\"name\":\"Row 1069\",\"note\":\"the 1,069th of two thousand\"},{\"name\":\"Row 1070\",\"note\":\"the 1,070th of two thousand\"},{\"name\":\"Row 1071\",\"note\":\"the 1,071st of two thousand\"},{\"name\":\"Row 1072\",\"note\":\"the 1,072nd of two thousand\"},{\"name\":\"Row 1073\",\"note\":\"the 1,073rd of two thousand\"},{\"name\":\"Row 1074\",\"note\":\"the 1,074th of two thousand\"},{\"name\":\"Row 1075\",\"note\":\"the 1,075th of two thousand\"},{\"name\":\"Row 1076\",\"note\":\"the 1,076th of two thousand\"},{\"name\":\"Row 1077\",\"note\":\"the 1,077th of two thousand\"},{\"name\":\"Row 1078\",\"note\":\"the 1,078th of two thousand\"},{\"name\":\"Row 1079\",\"note\":\"the 1,079th of two thousand\"},{\"name\":\"Row 1080\",\"note\":\"the 1,080th of two thousand\"},{\"name\":\"Row 1081\",\"note\":\"the 1,081st of two thousand\"},{\"name\":\"Row 1082\",\"note\":\"the 1,082nd of two thousand\"},{\"name\":\"Row 1083\",\"note\":\"the 1,083rd of two thousand\"},{\"name\":\"Row 1084\",\"note\":\"the 1,084th of two thousand\"},{\"name\":\"Row 1085\",\"note\":\"the 1,085th of two thousand\"},{\"name\":\"Row 1086\",\"note\":\"the 1,086th of two thousand\"},{\"name\":\"Row 1087\",\"note\":\"the 1,087th of two thousand\"},{\"name\":\"Row 1088\",\"note\":\"the 1,088th of two thousand\"},{\"name\":\"Row 1089\",\"note\":\"the 1,089th of two thousand\"},{\"name\":\"Row 1090\",\"note\":\"the 1,090th of two thousand\"},{\"name\":\"Row 1091\",\"note\":\"the 1,091st of two thousand\"},{\"name\":\"Row 1092\",\"note\":\"the 1,092nd of two thousand\"},{\"name\":\"Row 1093\",\"note\":\"the 1,093rd of two thousand\"},{\"name\":\"Row 1094\",\"note\":\"the 1,094th of two thousand\"},{\"name\":\"Row 1095\",\"note\":\"the 1,095th of two thousand\"},{\"name\":\"Row 1096\",\"note\":\"the 1,096th of two thousand\"},{\"name\":\"Row 1097\",\"note\":\"the 1,097th of two thousand\"},{\"name\":\"Row 1098\",\"note\":\"the 1,098th of two thousand\"},{\"name\":\"Row 1099\",\"note\":\"the 1,099th of two thousand\"},{\"name\":\"Row 1100\",\"note\":\"the 1,100th of two thousand\"},{\"name\":\"Row 1101\",\"note\":\"the 1,101st of two thousand\"},{\"name\":\"Row 1102\",\"note\":\"the 1,102nd of two thousand\"},{\"name\":\"Row 1103\",\"note\":\"the 1,103rd of two thousand\"},{\"name\":\"Row 1104\",\"note\":\"the 1,104th of two thousand\"},{\"name\":\"Row 1105\",\"note\":\"the 1,105th of two thousand\"},{\"name\":\"Row 1106\",\"note\":\"the 1,106th of two thousand\"},{\"name\":\"Row 1107\",\"note\":\"the 1,107th of two thousand\"},{\"name\":\"Row 1108\",\"note\":\"the 1,108th of two thousand\"},{\"name\":\"Row 1109\",\"note\":\"the 1,109th of two thousand\"},{\"name\":\"Row 1110\",\"note\":\"the 1,110th of two thousand\"},{\"name\":\"Row 1111\",\"note\":\"the 1,111th of two thousand\"},{\"name\":\"Row 1112\",\"note\":\"the 1,112th of two thousand\"},{\"name\":\"Row 1113\",\"note\":\"the 1,113th of two thousand\"},{\"name\":\"Row 1114\",\"note\":\"the 1,114th of two thousand\"},{\"name\":\"Row 1115\",\"note\":\"the 1,115th of two thousand\"},{\"name\":\"Row 1116\",\"note\":\"the 1,116th of two thousand\"},{\"name\":\"Row 1117\",\"note\":\"the 1,117th of two thousand\"},{\"name\":\"Row 1118\",\"note\":\"the 1,118th of two thousand\"},{\"name\":\"Row 1119\",\"note\":\"the 1,119th of two thousand\"},{\"name\":\"Row 1120\",\"note\":\"the 1,120th of two thousand\"},{\"name\":\"Row 1121\",\"note\":\"the 1,121st of two thousand\"},{\"name\":\"Row 1122\",\"note\":\"the 1,122nd of two thousand\"},{\"name\":\"Row 1123\",\"note\":\"the 1,123rd of two thousand\"},{\"name\":\"Row 1124\",\"note\":\"the 1,124th of two thousand\"},{\"name\":\"Row 1125\",\"note\":\"the 1,125th of two thousand\"},{\"name\":\"Row 1126\",\"note\":\"the 1,126th of two thousand\"},{\"name\":\"Row 1127\",\"note\":\"the 1,127th of two thousand\"},{\"name\":\"Row 1128\",\"note\":\"the 1,128th of two thousand\"},{\"name\":\"Row 1129\",\"note\":\"the 1,129th of two thousand\"},{\"name\":\"Row 1130\",\"note\":\"the 1,130th of two thousand\"},{\"name\":\"Row 1131\",\"note\":\"the 1,131st of two thousand\"},{\"name\":\"Row 1132\",\"note\":\"the 1,132nd of two thousand\"},{\"name\":\"Row 1133\",\"note\":\"the 1,133rd of two thousand\"},{\"name\":\"Row 1134\",\"note\":\"the 1,134th of two thousand\"},{\"name\":\"Row 1135\",\"note\":\"the 1,135th of two thousand\"},{\"name\":\"Row 1136\",\"note\":\"the 1,136th of two thousand\"},{\"name\":\"Row 1137\",\"note\":\"the 1,137th of two thousand\"},{\"name\":\"Row 1138\",\"note\":\"the 1,138th of two thousand\"},{\"name\":\"Row 1139\",\"note\":\"the 1,139th of two thousand\"},{\"name\":\"Row 1140\",\"note\":\"the 1,140th of two thousand\"},{\"name\":\"Row 1141\",\"note\":\"the 1,141st of two thousand\"},{\"name\":\"Row 1142\",\"note\":\"the 1,142nd of two thousand\"},{\"name\":\"Row 1143\",\"note\":\"the 1,143rd of two thousand\"},{\"name\":\"Row 1144\",\"note\":\"the 1,144th of two thousand\"},{\"name\":\"Row 1145\",\"note\":\"the 1,145th of two thousand\"},{\"name\":\"Row 1146\",\"note\":\"the 1,146th of two thousand\"},{\"name\":\"Row 1147\",\"note\":\"the 1,147th of two thousand\"},{\"name\":\"Row 1148\",\"note\":\"the 1,148th of two thousand\"},{\"name\":\"Row 1149\",\"note\":\"the 1,149th of two thousand\"},{\"name\":\"Row 1150\",\"note\":\"the 1,150th of two thousand\"},{\"name\":\"Row 1151\",\"note\":\"the 1,151st of two thousand\"},{\"name\":\"Row 1152\",\"note\":\"the 1,152nd of two thousand\"},{\"name\":\"Row 1153\",\"note\":\"the 1,153rd of two thousand\"},{\"name\":\"Row 1154\",\"note\":\"the 1,154th of two thousand\"},{\"name\":\"Row 1155\",\"note\":\"the 1,155th of two thousand\"},{\"name\":\"Row 1156\",\"note\":\"the 1,156th of two thousand\"},{\"name\":\"Row 1157\",\"note\":\"the 1,157th of two thousand\"},{\"name\":\"Row 1158\",\"note\":\"the 1,158th of two thousand\"},{\"name\":\"Row 1159\",\"note\":\"the 1,159th of two thousand\"},{\"name\":\"Row 1160\",\"note\":\"the 1,160th of two thousand\"},{\"name\":\"Row 1161\",\"note\":\"the 1,161st of two thousand\"},{\"name\":\"Row 1162\",\"note\":\"the 1,162nd of two thousand\"},{\"name\":\"Row 1163\",\"note\":\"the 1,163rd of two thousand\"},{\"name\":\"Row 1164\",\"note\":\"the 1,164th of two thousand\"},{\"name\":\"Row 1165\",\"note\":\"the 1,165th of two thousand\"},{\"name\":\"Row 1166\",\"note\":\"the 1,166th of two thousand\"},{\"name\":\"Row 1167\",\"note\":\"the 1,167th of two thousand\"},{\"name\":\"Row 1168\",\"note\":\"the 1,168th of two thousand\"},{\"name\":\"Row 1169\",\"note\":\"the 1,169th of two thousand\"},{\"name\":\"Row 1170\",\"note\":\"the 1,170th of two thousand\"},{\"name\":\"Row 1171\",\"note\":\"the 1,171st of two thousand\"},{\"name\":\"Row 1172\",\"note\":\"the 1,172nd of two thousand\"},{\"name\":\"Row 1173\",\"note\":\"the 1,173rd of two thousand\"},{\"name\":\"Row 1174\",\"note\":\"the 1,174th of two thousand\"},{\"name\":\"Row 1175\",\"note\":\"the 1,175th of two thousand\"},{\"name\":\"Row 1176\",\"note\":\"the 1,176th of two thousand\"},{\"name\":\"Row 1177\",\"note\":\"the 1,177th of two thousand\"},{\"name\":\"Row 1178\",\"note\":\"the 1,178th of two thousand\"},{\"name\":\"Row 1179\",\"note\":\"the 1,179th of two thousand\"},{\"name\":\"Row 1180\",\"note\":\"the 1,180th of two thousand\"},{\"name\":\"Row 1181\",\"note\":\"the 1,181st of two thousand\"},{\"name\":\"Row 1182\",\"note\":\"the 1,182nd of two thousand\"},{\"name\":\"Row 1183\",\"note\":\"the 1,183rd of two thousand\"},{\"name\":\"Row 1184\",\"note\":\"the 1,184th of two thousand\"},{\"name\":\"Row 1185\",\"note\":\"the 1,185th of two thousand\"},{\"name\":\"Row 1186\",\"note\":\"the 1,186th of two thousand\"},{\"name\":\"Row 1187\",\"note\":\"the 1,187th of two thousand\"},{\"name\":\"Row 1188\",\"note\":\"the 1,188th of two thousand\"},{\"name\":\"Row 1189\",\"note\":\"the 1,189th of two thousand\"},{\"name\":\"Row 1190\",\"note\":\"the 1,190th of two thousand\"},{\"name\":\"Row 1191\",\"note\":\"the 1,191st of two thousand\"},{\"name\":\"Row 1192\",\"note\":\"the 1,192nd of two thousand\"},{\"name\":\"Row 1193\",\"note\":\"the 1,193rd of two thousand\"},{\"name\":\"Row 1194\",\"note\":\"the 1,194th of two thousand\"},{\"name\":\"Row 1195\",\"note\":\"the 1,195th of two thousand\"},{\"name\":\"Row 1196\",\"note\":\"the 1,196th of two thousand\"},{\"name\":\"Row 1197\",\"note\":\"the 1,197th of two thousand\"},{\"name\":\"Row 1198\",\"note\":\"the 1,198th of two thousand\"},{\"name\":\"Row 1199\",\"note\":\"the 1,199th of two thousand\"},{\"name\":\"Row 1200\",\"note\":\"the 1,200th of two thousand\"},{\"name\":\"Row 1201\",\"note\":\"the 1,201st of two thousand\"},{\"name\":\"Row 1202\",\"note\":\"the 1,202nd of two thousand\"},{\"name\":\"Row 1203\",\"note\":\"the 1,203rd of two thousand\"},{\"name\":\"Row 1204\",\"note\":\"the 1,204th of two thousand\"},{\"name\":\"Row 1205\",\"note\":\"the 1,205th of two thousand\"},{\"name\":\"Row 1206\",\"note\":\"the 1,206th of two thousand\"},{\"name\":\"Row 1207\",\"note\":\"the 1,207th of two thousand\"},{\"name\":\"Row 1208\",\"note\":\"the 1,208th of two thousand\"},{\"name\":\"Row 1209\",\"note\":\"the 1,209th of two thousand\"},{\"name\":\"Row 1210\",\"note\":\"the 1,210th of two thousand\"},{\"name\":\"Row 1211\",\"note\":\"the 1,211th of two thousand\"},{\"name\":\"Row 1212\",\"note\":\"the 1,212th of two thousand\"},{\"name\":\"Row 1213\",\"note\":\"the 1,213th of two thousand\"},{\"name\":\"Row 1214\",\"note\":\"the 1,214th of two thousand\"},{\"name\":\"Row 1215\",\"note\":\"the 1,215th of two thousand\"},{\"name\":\"Row 1216\",\"note\":\"the 1,216th of two thousand\"},{\"name\":\"Row 1217\",\"note\":\"the 1,217th of two thousand\"},{\"name\":\"Row 1218\",\"note\":\"the 1,218th of two thousand\"},{\"name\":\"Row 1219\",\"note\":\"the 1,219th of two thousand\"},{\"name\":\"Row 1220\",\"note\":\"the 1,220th of two thousand\"},{\"name\":\"Row 1221\",\"note\":\"the 1,221st of two thousand\"},{\"name\":\"Row 1222\",\"note\":\"the 1,222nd of two thousand\"},{\"name\":\"Row 1223\",\"note\":\"the 1,223rd of two thousand\"},{\"name\":\"Row 1224\",\"note\":\"the 1,224th of two thousand\"},{\"name\":\"Row 1225\",\"note\":\"the 1,225th of two thousand\"},{\"name\":\"Row 1226\",\"note\":\"the 1,226th of two thousand\"},{\"name\":\"Row 1227\",\"note\":\"the 1,227th of two thousand\"},{\"name\":\"Row 1228\",\"note\":\"the 1,228th of two thousand\"},{\"name\":\"Row 1229\",\"note\":\"the 1,229th of two thousand\"},{\"name\":\"Row 1230\",\"note\":\"the 1,230th of two thousand\"},{\"name\":\"Row 1231\",\"note\":\"the 1,231st of two thousand\"},{\"name\":\"Row 1232\",\"note\":\"the 1,232nd of two thousand\"},{\"name\":\"Row 1233\",\"note\":\"the 1,233rd of two thousand\"},{\"name\":\"Row 1234\",\"note\":\"the 1,234th of two thousand\"},{\"name\":\"Row 1235\",\"note\":\"the 1,235th of two thousand\"},{\"name\":\"Row 1236\",\"note\":\"the 1,236th of two thousand\"},{\"name\":\"Row 1237\",\"note\":\"the 1,237th of two thousand\"},{\"name\":\"Row 1238\",\"note\":\"the 1,238th of two thousand\"},{\"name\":\"Row 1239\",\"note\":\"the 1,239th of two thousand\"},{\"name\":\"Row 1240\",\"note\":\"the 1,240th of two thousand\"},{\"name\":\"Row 1241\",\"note\":\"the 1,241st of two thousand\"},{\"name\":\"Row 1242\",\"note\":\"the 1,242nd of two thousand\"},{\"name\":\"Row 1243\",\"note\":\"the 1,243rd of two thousand\"},{\"name\":\"Row 1244\",\"note\":\"the 1,244th of two thousand\"},{\"name\":\"Row 1245\",\"note\":\"the 1,245th of two thousand\"},{\"name\":\"Row 1246\",\"note\":\"the 1,246th of two thousand\"},{\"name\":\"Row 1247\",\"note\":\"the 1,247th of two thousand\"},{\"name\":\"Row 1248\",\"note\":\"the 1,248th of two thousand\"},{\"name\":\"Row 1249\",\"note\":\"the 1,249th of two thousand\"},{\"name\":\"Row 1250\",\"note\":\"the 1,250th of two thousand\"},{\"name\":\"Row 1251\",\"note\":\"the 1,251st of two thousand\"},{\"name\":\"Row 1252\",\"note\":\"the 1,252nd of two thousand\"},{\"name\":\"Row 1253\",\"note\":\"the 1,253rd of two thousand\"},{\"name\":\"Row 1254\",\"note\":\"the 1,254th of two thousand\"},{\"name\":\"Row 1255\",\"note\":\"the 1,255th of two thousand\"},{\"name\":\"Row 1256\",\"note\":\"the 1,256th of two thousand\"},{\"name\":\"Row 1257\",\"note\":\"the 1,257th of two thousand\"},{\"name\":\"Row 1258\",\"note\":\"the 1,258th of two thousand\"},{\"name\":\"Row 1259\",\"note\":\"the 1,259th of two thousand\"},{\"name\":\"Row 1260\",\"note\":\"the 1,260th of two thousand\"},{\"name\":\"Row 1261\",\"note\":\"the 1,261st of two thousand\"},{\"name\":\"Row 1262\",\"note\":\"the 1,262nd of two thousand\"},{\"name\":\"Row 1263\",\"note\":\"the 1,263rd of two thousand\"},{\"name\":\"Row 1264\",\"note\":\"the 1,264th of two thousand\"},{\"name\":\"Row 1265\",\"note\":\"the 1,265th of two thousand\"},{\"name\":\"Row 1266\",\"note\":\"the 1,266th of two thousand\"},{\"name\":\"Row 1267\",\"note\":\"the 1,267th of two thousand\"},{\"name\":\"Row 1268\",\"note\":\"the 1,268th of two thousand\"},{\"name\":\"Row 1269\",\"note\":\"the 1,269th of two thousand\"},{\"name\":\"Row 1270\",\"note\":\"the 1,270th of two thousand\"},{\"name\":\"Row 1271\",\"note\":\"the 1,271st of two thousand\"},{\"name\":\"Row 1272\",\"note\":\"the 1,272nd of two thousand\"},{\"name\":\"Row 1273\",\"note\":\"the 1,273rd of two thousand\"},{\"name\":\"Row 1274\",\"note\":\"the 1,274th of two thousand\"},{\"name\":\"Row 1275\",\"note\":\"the 1,275th of two thousand\"},{\"name\":\"Row 1276\",\"note\":\"the 1,276th of two thousand\"},{\"name\":\"Row 1277\",\"note\":\"the 1,277th of two thousand\"},{\"name\":\"Row 1278\",\"note\":\"the 1,278th of two thousand\"},{\"name\":\"Row 1279\",\"note\":\"the 1,279th of two thousand\"},{\"name\":\"Row 1280\",\"note\":\"the 1,280th of two thousand\"},{\"name\":\"Row 1281\",\"note\":\"the 1,281st of two thousand\"},{\"name\":\"Row 1282\",\"note\":\"the 1,282nd of two thousand\"},{\"name\":\"Row 1283\",\"note\":\"the 1,283rd of two thousand\"},{\"name\":\"Row 1284\",\"note\":\"the 1,284th of two thousand\"},{\"name\":\"Row 1285\",\"note\":\"the 1,285th of two thousand\"},{\"name\":\"Row 1286\",\"note\":\"the 1,286th of two thousand\"},{\"name\":\"Row 1287\",\"note\":\"the 1,287th of two thousand\"},{\"name\":\"Row 1288\",\"note\":\"the 1,288th of two thousand\"},{\"name\":\"Row 1289\",\"note\":\"the 1,289th of two thousand\"},{\"name\":\"Row 1290\",\"note\":\"the 1,290th of two thousand\"},{\"name\":\"Row 1291\",\"note\":\"the 1,291st of two thousand\"},{\"name\":\"Row 1292\",\"note\":\"the 1,292nd of two thousand\"},{\"name\":\"Row 1293\",\"note\":\"the 1,293rd of two thousand\"},{\"name\":\"Row 1294\",\"note\":\"the 1,294th of two thousand\"},{\"name\":\"Row 1295\",\"note\":\"the 1,295th of two thousand\"},{\"name\":\"Row 1296\",\"note\":\"the 1,296th of two thousand\"},{\"name\":\"Row 1297\",\"note\":\"the 1,297th of two thousand\"},{\"name\":\"Row 1298\",\"note\":\"the 1,298th of two thousand\"},{\"name\":\"Row 1299\",\"note\":\"the 1,299th of two thousand\"},{\"name\":\"Row 1300\",\"note\":\"the 1,300th of two thousand\"},{\"name\":\"Row 1301\",\"note\":\"the 1,301st of two thousand\"},{\"name\":\"Row 1302\",\"note\":\"the 1,302nd of two thousand\"},{\"name\":\"Row 1303\",\"note\":\"the 1,303rd of two thousand\"},{\"name\":\"Row 1304\",\"note\":\"the 1,304th of two thousand\"},{\"name\":\"Row 1305\",\"note\":\"the 1,305th of two thousand\"},{\"name\":\"Row 1306\",\"note\":\"the 1,306th of two thousand\"},{\"name\":\"Row 1307\",\"note\":\"the 1,307th of two thousand\"},{\"name\":\"Row 1308\",\"note\":\"the 1,308th of two thousand\"},{\"name\":\"Row 1309\",\"note\":\"the 1,309th of two thousand\"},{\"name\":\"Row 1310\",\"note\":\"the 1,310th of two thousand\"},{\"name\":\"Row 1311\",\"note\":\"the 1,311th of two thousand\"},{\"name\":\"Row 1312\",\"note\":\"the 1,312th of two thousand\"},{\"name\":\"Row 1313\",\"note\":\"the 1,313th of two thousand\"},{\"name\":\"Row 1314\",\"note\":\"the 1,314th of two thousand\"},{\"name\":\"Row 1315\",\"note\":\"the 1,315th of two thousand\"},{\"name\":\"Row 1316\",\"note\":\"the 1,316th of two thousand\"},{\"name\":\"Row 1317\",\"note\":\"the 1,317th of two thousand\"},{\"name\":\"Row 1318\",\"note\":\"the 1,318th of two thousand\"},{\"name\":\"Row 1319\",\"note\":\"the 1,319th of two thousand\"},{\"name\":\"Row 1320\",\"note\":\"the 1,320th of two thousand\"},{\"name\":\"Row 1321\",\"note\":\"the 1,321st of two thousand\"},{\"name\":\"Row 1322\",\"note\":\"the 1,322nd of two thousand\"},{\"name\":\"Row 1323\",\"note\":\"the 1,323rd of two thousand\"},{\"name\":\"Row 1324\",\"note\":\"the 1,324th of two thousand\"},{\"name\":\"Row 1325\",\"note\":\"the 1,325th of two thousand\"},{\"name\":\"Row 1326\",\"note\":\"the 1,326th of two thousand\"},{\"name\":\"Row 1327\",\"note\":\"the 1,327th of two thousand\"},{\"name\":\"Row 1328\",\"note\":\"the 1,328th of two thousand\"},{\"name\":\"Row 1329\",\"note\":\"the 1,329th of two thousand\"},{\"name\":\"Row 1330\",\"note\":\"the 1,330th of two thousand\"},{\"name\":\"Row 1331\",\"note\":\"the 1,331st of two thousand\"},{\"name\":\"Row 1332\",\"note\":\"the 1,332nd of two thousand\"},{\"name\":\"Row 1333\",\"note\":\"the 1,333rd of two thousand\"},{\"name\":\"Row 1334\",\"note\":\"the 1,334th of two thousand\"},{\"name\":\"Row 1335\",\"note\":\"the 1,335th of two thousand\"},{\"name\":\"Row 1336\",\"note\":\"the 1,336th of two thousand\"},{\"name\":\"Row 1337\",\"note\":\"the 1,337th of two thousand\"},{\"name\":\"Row 1338\",\"note\":\"the 1,338th of two thousand\"},{\"name\":\"Row 1339\",\"note\":\"the 1,339th of two thousand\"},{\"name\":\"Row 1340\",\"note\":\"the 1,340th of two thousand\"},{\"name\":\"Row 1341\",\"note\":\"the 1,341st of two thousand\"},{\"name\":\"Row 1342\",\"note\":\"the 1,342nd of two thousand\"},{\"name\":\"Row 1343\",\"note\":\"the 1,343rd of two thousand\"},{\"name\":\"Row 1344\",\"note\":\"the 1,344th of two thousand\"},{\"name\":\"Row 1345\",\"note\":\"the 1,345th of two thousand\"},{\"name\":\"Row 1346\",\"note\":\"the 1,346th of two thousand\"},{\"name\":\"Row 1347\",\"note\":\"the 1,347th of two thousand\"},{\"name\":\"Row 1348\",\"note\":\"the 1,348th of two thousand\"},{\"name\":\"Row 1349\",\"note\":\"the 1,349th of two thousand\"},{\"name\":\"Row 1350\",\"note\":\"the 1,350th of two thousand\"},{\"name\":\"Row 1351\",\"note\":\"the 1,351st of two thousand\"},{\"name\":\"Row 1352\",\"note\":\"the 1,352nd of two thousand\"},{\"name\":\"Row 1353\",\"note\":\"the 1,353rd of two thousand\"},{\"name\":\"Row 1354\",\"note\":\"the 1,354th of two thousand\"},{\"name\":\"Row 1355\",\"note\":\"the 1,355th of two thousand\"},{\"name\":\"Row 1356\",\"note\":\"the 1,356th of two thousand\"},{\"name\":\"Row 1357\",\"note\":\"the 1,357th of two thousand\"},{\"name\":\"Row 1358\",\"note\":\"the 1,358th of two thousand\"},{\"name\":\"Row 1359\",\"note\":\"the 1,359th of two thousand\"},{\"name\":\"Row 1360\",\"note\":\"the 1,360th of two thousand\"},{\"name\":\"Row 1361\",\"note\":\"the 1,361st of two thousand\"},{\"name\":\"Row 1362\",\"note\":\"the 1,362nd of two thousand\"},{\"name\":\"Row 1363\",\"note\":\"the 1,363rd of two thousand\"},{\"name\":\"Row 1364\",\"note\":\"the 1,364th of two thousand\"},{\"name\":\"Row 1365\",\"note\":\"the 1,365th of two thousand\"},{\"name\":\"Row 1366\",\"note\":\"the 1,366th of two thousand\"},{\"name\":\"Row 1367\",\"note\":\"the 1,367th of two thousand\"},{\"name\":\"Row 1368\",\"note\":\"the 1,368th of two thousand\"},{\"name\":\"Row 1369\",\"note\":\"the 1,369th of two thousand\"},{\"name\":\"Row 1370\",\"note\":\"the 1,370th of two thousand\"},{\"name\":\"Row 1371\",\"note\":\"the 1,371st of two thousand\"},{\"name\":\"Row 1372\",\"note\":\"the 1,372nd of two thousand\"},{\"name\":\"Row 1373\",\"note\":\"the 1,373rd of two thousand\"},{\"name\":\"Row 1374\",\"note\":\"the 1,374th of two thousand\"},{\"name\":\"Row 1375\",\"note\":\"the 1,375th of two thousand\"},{\"name\":\"Row 1376\",\"note\":\"the 1,376th of two thousand\"},{\"name\":\"Row 1377\",\"note\":\"the 1,377th of two thousand\"},{\"name\":\"Row 1378\",\"note\":\"the 1,378th of two thousand\"},{\"name\":\"Row 1379\",\"note\":\"the 1,379th of two thousand\"},{\"name\":\"Row 1380\",\"note\":\"the 1,380th of two thousand\"},{\"name\":\"Row 1381\",\"note\":\"the 1,381st of two thousand\"},{\"name\":\"Row 1382\",\"note\":\"the 1,382nd of two thousand\"},{\"name\":\"Row 1383\",\"note\":\"the 1,383rd of two thousand\"},{\"name\":\"Row 1384\",\"note\":\"the 1,384th of two thousand\"},{\"name\":\"Row 1385\",\"note\":\"the 1,385th of two thousand\"},{\"name\":\"Row 1386\",\"note\":\"the 1,386th of two thousand\"},{\"name\":\"Row 1387\",\"note\":\"the 1,387th of two thousand\"},{\"name\":\"Row 1388\",\"note\":\"the 1,388th of two thousand\"},{\"name\":\"Row 1389\",\"note\":\"the 1,389th of two thousand\"},{\"name\":\"Row 1390\",\"note\":\"the 1,390th of two thousand\"},{\"name\":\"Row 1391\",\"note\":\"the 1,391st of two thousand\"},{\"name\":\"Row 1392\",\"note\":\"the 1,392nd of two thousand\"},{\"name\":\"Row 1393\",\"note\":\"the 1,393rd of two thousand\"},{\"name\":\"Row 1394\",\"note\":\"the 1,394th of two thousand\"},{\"name\":\"Row 1395\",\"note\":\"the 1,395th of two thousand\"},{\"name\":\"Row 1396\",\"note\":\"the 1,396th of two thousand\"},{\"name\":\"Row 1397\",\"note\":\"the 1,397th of two thousand\"},{\"name\":\"Row 1398\",\"note\":\"the 1,398th of two thousand\"},{\"name\":\"Row 1399\",\"note\":\"the 1,399th of two thousand\"},{\"name\":\"Row 1400\",\"note\":\"the 1,400th of two thousand\"},{\"name\":\"Row 1401\",\"note\":\"the 1,401st of two thousand\"},{\"name\":\"Row 1402\",\"note\":\"the 1,402nd of two thousand\"},{\"name\":\"Row 1403\",\"note\":\"the 1,403rd of two thousand\"},{\"name\":\"Row 1404\",\"note\":\"the 1,404th of two thousand\"},{\"name\":\"Row 1405\",\"note\":\"the 1,405th of two thousand\"},{\"name\":\"Row 1406\",\"note\":\"the 1,406th of two thousand\"},{\"name\":\"Row 1407\",\"note\":\"the 1,407th of two thousand\"},{\"name\":\"Row 1408\",\"note\":\"the 1,408th of two thousand\"},{\"name\":\"Row 1409\",\"note\":\"the 1,409th of two thousand\"},{\"name\":\"Row 1410\",\"note\":\"the 1,410th of two thousand\"},{\"name\":\"Row 1411\",\"note\":\"the 1,411th of two thousand\"},{\"name\":\"Row 1412\",\"note\":\"the 1,412th of two thousand\"},{\"name\":\"Row 1413\",\"note\":\"the 1,413th of two thousand\"},{\"name\":\"Row 1414\",\"note\":\"the 1,414th of two thousand\"},{\"name\":\"Row 1415\",\"note\":\"the 1,415th of two thousand\"},{\"name\":\"Row 1416\",\"note\":\"the 1,416th of two thousand\"},{\"name\":\"Row 1417\",\"note\":\"the 1,417th of two thousand\"},{\"name\":\"Row 1418\",\"note\":\"the 1,418th of two thousand\"},{\"name\":\"Row 1419\",\"note\":\"the 1,419th of two thousand\"},{\"name\":\"Row 1420\",\"note\":\"the 1,420th of two thousand\"},{\"name\":\"Row 1421\",\"note\":\"the 1,421st of two thousand\"},{\"name\":\"Row 1422\",\"note\":\"the 1,422nd of two thousand\"},{\"name\":\"Row 1423\",\"note\":\"the 1,423rd of two thousand\"},{\"name\":\"Row 1424\",\"note\":\"the 1,424th of two thousand\"},{\"name\":\"Row 1425\",\"note\":\"the 1,425th of two thousand\"},{\"name\":\"Row 1426\",\"note\":\"the 1,426th of two thousand\"},{\"name\":\"Row 1427\",\"note\":\"the 1,427th of two thousand\"},{\"name\":\"Row 1428\",\"note\":\"the 1,428th of two thousand\"},{\"name\":\"Row 1429\",\"note\":\"the 1,429th of two thousand\"},{\"name\":\"Row 1430\",\"note\":\"the 1,430th of two thousand\"},{\"name\":\"Row 1431\",\"note\":\"the 1,431st of two thousand\"},{\"name\":\"Row 1432\",\"note\":\"the 1,432nd of two thousand\"},{\"name\":\"Row 1433\",\"note\":\"the 1,433rd of two thousand\"},{\"name\":\"Row 1434\",\"note\":\"the 1,434th of two thousand\"},{\"name\":\"Row 1435\",\"note\":\"the 1,435th of two thousand\"},{\"name\":\"Row 1436\",\"note\":\"the 1,436th of two thousand\"},{\"name\":\"Row 1437\",\"note\":\"the 1,437th of two thousand\"},{\"name\":\"Row 1438\",\"note\":\"the 1,438th of two thousand\"},{\"name\":\"Row 1439\",\"note\":\"the 1,439th of two thousand\"},{\"name\":\"Row 1440\",\"note\":\"the 1,440th of two thousand\"},{\"name\":\"Row 1441\",\"note\":\"the 1,441st of two thousand\"},{\"name\":\"Row 1442\",\"note\":\"the 1,442nd of two thousand\"},{\"name\":\"Row 1443\",\"note\":\"the 1,443rd of two thousand\"},{\"name\":\"Row 1444\",\"note\":\"the 1,444th of two thousand\"},{\"name\":\"Row 1445\",\"note\":\"the 1,445th of two thousand\"},{\"name\":\"Row 1446\",\"note\":\"the 1,446th of two thousand\"},{\"name\":\"Row 1447\",\"note\":\"the 1,447th of two thousand\"},{\"name\":\"Row 1448\",\"note\":\"the 1,448th of two thousand\"},{\"name\":\"Row 1449\",\"note\":\"the 1,449th of two thousand\"},{\"name\":\"Row 1450\",\"note\":\"the 1,450th of two thousand\"},{\"name\":\"Row 1451\",\"note\":\"the 1,451st of two thousand\"},{\"name\":\"Row 1452\",\"note\":\"the 1,452nd of two thousand\"},{\"name\":\"Row 1453\",\"note\":\"the 1,453rd of two thousand\"},{\"name\":\"Row 1454\",\"note\":\"the 1,454th of two thousand\"},{\"name\":\"Row 1455\",\"note\":\"the 1,455th of two thousand\"},{\"name\":\"Row 1456\",\"note\":\"the 1,456th of two thousand\"},{\"name\":\"Row 1457\",\"note\":\"the 1,457th of two thousand\"},{\"name\":\"Row 1458\",\"note\":\"the 1,458th of two thousand\"},{\"name\":\"Row 1459\",\"note\":\"the 1,459th of two thousand\"},{\"name\":\"Row 1460\",\"note\":\"the 1,460th of two thousand\"},{\"name\":\"Row 1461\",\"note\":\"the 1,461st of two thousand\"},{\"name\":\"Row 1462\",\"note\":\"the 1,462nd of two thousand\"},{\"name\":\"Row 1463\",\"note\":\"the 1,463rd of two thousand\"},{\"name\":\"Row 1464\",\"note\":\"the 1,464th of two thousand\"},{\"name\":\"Row 1465\",\"note\":\"the 1,465th of two thousand\"},{\"name\":\"Row 1466\",\"note\":\"the 1,466th of two thousand\"},{\"name\":\"Row 1467\",\"note\":\"the 1,467th of two thousand\"},{\"name\":\"Row 1468\",\"note\":\"the 1,468th of two thousand\"},{\"name\":\"Row 1469\",\"note\":\"the 1,469th of two thousand\"},{\"name\":\"Row 1470\",\"note\":\"the 1,470th of two thousand\"},{\"name\":\"Row 1471\",\"note\":\"the 1,471st of two thousand\"},{\"name\":\"Row 1472\",\"note\":\"the 1,472nd of two thousand\"},{\"name\":\"Row 1473\",\"note\":\"the 1,473rd of two thousand\"},{\"name\":\"Row 1474\",\"note\":\"the 1,474th of two thousand\"},{\"name\":\"Row 1475\",\"note\":\"the 1,475th of two thousand\"},{\"name\":\"Row 1476\",\"note\":\"the 1,476th of two thousand\"},{\"name\":\"Row 1477\",\"note\":\"the 1,477th of two thousand\"},{\"name\":\"Row 1478\",\"note\":\"the 1,478th of two thousand\"},{\"name\":\"Row 1479\",\"note\":\"the 1,479th of two thousand\"},{\"name\":\"Row 1480\",\"note\":\"the 1,480th of two thousand\"},{\"name\":\"Row 1481\",\"note\":\"the 1,481st of two thousand\"},{\"name\":\"Row 1482\",\"note\":\"the 1,482nd of two thousand\"},{\"name\":\"Row 1483\",\"note\":\"the 1,483rd of two thousand\"},{\"name\":\"Row 1484\",\"note\":\"the 1,484th of two thousand\"},{\"name\":\"Row 1485\",\"note\":\"the 1,485th of two thousand\"},{\"name\":\"Row 1486\",\"note\":\"the 1,486th of two thousand\"},{\"name\":\"Row 1487\",\"note\":\"the 1,487th of two thousand\"},{\"name\":\"Row 1488\",\"note\":\"the 1,488th of two thousand\"},{\"name\":\"Row 1489\",\"note\":\"the 1,489th of two thousand\"},{\"name\":\"Row 1490\",\"note\":\"the 1,490th of two thousand\"},{\"name\":\"Row 1491\",\"note\":\"the 1,491st of two thousand\"},{\"name\":\"Row 1492\",\"note\":\"the 1,492nd of two thousand\"},{\"name\":\"Row 1493\",\"note\":\"the 1,493rd of two thousand\"},{\"name\":\"Row 1494\",\"note\":\"the 1,494th of two thousand\"},{\"name\":\"Row 1495\",\"note\":\"the 1,495th of two thousand\"},{\"name\":\"Row 1496\",\"note\":\"the 1,496th of two thousand\"},{\"name\":\"Row 1497\",\"note\":\"the 1,497th of two thousand\"},{\"name\":\"Row 1498\",\"note\":\"the 1,498th of two thousand\"},{\"name\":\"Row 1499\",\"note\":\"the 1,499th of two thousand\"},{\"name\":\"Row 1500\",\"note\":\"the 1,500th of two thousand\"},{\"name\":\"Row 1501\",\"note\":\"the 1,501st of two thousand\"},{\"name\":\"Row 1502\",\"note\":\"the 1,502nd of two thousand\"},{\"name\":\"Row 1503\",\"note\":\"the 1,503rd of two thousand\"},{\"name\":\"Row 1504\",\"note\":\"the 1,504th of two thousand\"},{\"name\":\"Row 1505\",\"note\":\"the 1,505th of two thousand\"},{\"name\":\"Row 1506\",\"note\":\"the 1,506th of two thousand\"},{\"name\":\"Row 1507\",\"note\":\"the 1,507th of two thousand\"},{\"name\":\"Row 1508\",\"note\":\"the 1,508th of two thousand\"},{\"name\":\"Row 1509\",\"note\":\"the 1,509th of two thousand\"},{\"name\":\"Row 1510\",\"note\":\"the 1,510th of two thousand\"},{\"name\":\"Row 1511\",\"note\":\"the 1,511th of two thousand\"},{\"name\":\"Row 1512\",\"note\":\"the 1,512th of two thousand\"},{\"name\":\"Row 1513\",\"note\":\"the 1,513th of two thousand\"},{\"name\":\"Row 1514\",\"note\":\"the 1,514th of two thousand\"},{\"name\":\"Row 1515\",\"note\":\"the 1,515th of two thousand\"},{\"name\":\"Row 1516\",\"note\":\"the 1,516th of two thousand\"},{\"name\":\"Row 1517\",\"note\":\"the 1,517th of two thousand\"},{\"name\":\"Row 1518\",\"note\":\"the 1,518th of two thousand\"},{\"name\":\"Row 1519\",\"note\":\"the 1,519th of two thousand\"},{\"name\":\"Row 1520\",\"note\":\"the 1,520th of two thousand\"},{\"name\":\"Row 1521\",\"note\":\"the 1,521st of two thousand\"},{\"name\":\"Row 1522\",\"note\":\"the 1,522nd of two thousand\"},{\"name\":\"Row 1523\",\"note\":\"the 1,523rd of two thousand\"},{\"name\":\"Row 1524\",\"note\":\"the 1,524th of two thousand\"},{\"name\":\"Row 1525\",\"note\":\"the 1,525th of two thousand\"},{\"name\":\"Row 1526\",\"note\":\"the 1,526th of two thousand\"},{\"name\":\"Row 1527\",\"note\":\"the 1,527th of two thousand\"},{\"name\":\"Row 1528\",\"note\":\"the 1,528th of two thousand\"},{\"name\":\"Row 1529\",\"note\":\"the 1,529th of two thousand\"},{\"name\":\"Row 1530\",\"note\":\"the 1,530th of two thousand\"},{\"name\":\"Row 1531\",\"note\":\"the 1,531st of two thousand\"},{\"name\":\"Row 1532\",\"note\":\"the 1,532nd of two thousand\"},{\"name\":\"Row 1533\",\"note\":\"the 1,533rd of two thousand\"},{\"name\":\"Row 1534\",\"note\":\"the 1,534th of two thousand\"},{\"name\":\"Row 1535\",\"note\":\"the 1,535th of two thousand\"},{\"name\":\"Row 1536\",\"note\":\"the 1,536th of two thousand\"},{\"name\":\"Row 1537\",\"note\":\"the 1,537th of two thousand\"},{\"name\":\"Row 1538\",\"note\":\"the 1,538th of two thousand\"},{\"name\":\"Row 1539\",\"note\":\"the 1,539th of two thousand\"},{\"name\":\"Row 1540\",\"note\":\"the 1,540th of two thousand\"},{\"name\":\"Row 1541\",\"note\":\"the 1,541st of two thousand\"},{\"name\":\"Row 1542\",\"note\":\"the 1,542nd of two thousand\"},{\"name\":\"Row 1543\",\"note\":\"the 1,543rd of two thousand\"},{\"name\":\"Row 1544\",\"note\":\"the 1,544th of two thousand\"},{\"name\":\"Row 1545\",\"note\":\"the 1,545th of two thousand\"},{\"name\":\"Row 1546\",\"note\":\"the 1,546th of two thousand\"},{\"name\":\"Row 1547\",\"note\":\"the 1,547th of two thousand\"},{\"name\":\"Row 1548\",\"note\":\"the 1,548th of two thousand\"},{\"name\":\"Row 1549\",\"note\":\"the 1,549th of two thousand\"},{\"name\":\"Row 1550\",\"note\":\"the 1,550th of two thousand\"},{\"name\":\"Row 1551\",\"note\":\"the 1,551st of two thousand\"},{\"name\":\"Row 1552\",\"note\":\"the 1,552nd of two thousand\"},{\"name\":\"Row 1553\",\"note\":\"the 1,553rd of two thousand\"},{\"name\":\"Row 1554\",\"note\":\"the 1,554th of two thousand\"},{\"name\":\"Row 1555\",\"note\":\"the 1,555th of two thousand\"},{\"name\":\"Row 1556\",\"note\":\"the 1,556th of two thousand\"},{\"name\":\"Row 1557\",\"note\":\"the 1,557th of two thousand\"},{\"name\":\"Row 1558\",\"note\":\"the 1,558th of two thousand\"},{\"name\":\"Row 1559\",\"note\":\"the 1,559th of two thousand\"},{\"name\":\"Row 1560\",\"note\":\"the 1,560th of two thousand\"},{\"name\":\"Row 1561\",\"note\":\"the 1,561st of two thousand\"},{\"name\":\"Row 1562\",\"note\":\"the 1,562nd of two thousand\"},{\"name\":\"Row 1563\",\"note\":\"the 1,563rd of two thousand\"},{\"name\":\"Row 1564\",\"note\":\"the 1,564th of two thousand\"},{\"name\":\"Row 1565\",\"note\":\"the 1,565th of two thousand\"},{\"name\":\"Row 1566\",\"note\":\"the 1,566th of two thousand\"},{\"name\":\"Row 1567\",\"note\":\"the 1,567th of two thousand\"},{\"name\":\"Row 1568\",\"note\":\"the 1,568th of two thousand\"},{\"name\":\"Row 1569\",\"note\":\"the 1,569th of two thousand\"},{\"name\":\"Row 1570\",\"note\":\"the 1,570th of two thousand\"},{\"name\":\"Row 1571\",\"note\":\"the 1,571st of two thousand\"},{\"name\":\"Row 1572\",\"note\":\"the 1,572nd of two thousand\"},{\"name\":\"Row 1573\",\"note\":\"the 1,573rd of two thousand\"},{\"name\":\"Row 1574\",\"note\":\"the 1,574th of two thousand\"},{\"name\":\"Row 1575\",\"note\":\"the 1,575th of two thousand\"},{\"name\":\"Row 1576\",\"note\":\"the 1,576th of two thousand\"},{\"name\":\"Row 1577\",\"note\":\"the 1,577th of two thousand\"},{\"name\":\"Row 1578\",\"note\":\"the 1,578th of two thousand\"},{\"name\":\"Row 1579\",\"note\":\"the 1,579th of two thousand\"},{\"name\":\"Row 1580\",\"note\":\"the 1,580th of two thousand\"},{\"name\":\"Row 1581\",\"note\":\"the 1,581st of two thousand\"},{\"name\":\"Row 1582\",\"note\":\"the 1,582nd of two thousand\"},{\"name\":\"Row 1583\",\"note\":\"the 1,583rd of two thousand\"},{\"name\":\"Row 1584\",\"note\":\"the 1,584th of two thousand\"},{\"name\":\"Row 1585\",\"note\":\"the 1,585th of two thousand\"},{\"name\":\"Row 1586\",\"note\":\"the 1,586th of two thousand\"},{\"name\":\"Row 1587\",\"note\":\"the 1,587th of two thousand\"},{\"name\":\"Row 1588\",\"note\":\"the 1,588th of two thousand\"},{\"name\":\"Row 1589\",\"note\":\"the 1,589th of two thousand\"},{\"name\":\"Row 1590\",\"note\":\"the 1,590th of two thousand\"},{\"name\":\"Row 1591\",\"note\":\"the 1,591st of two thousand\"},{\"name\":\"Row 1592\",\"note\":\"the 1,592nd of two thousand\"},{\"name\":\"Row 1593\",\"note\":\"the 1,593rd of two thousand\"},{\"name\":\"Row 1594\",\"note\":\"the 1,594th of two thousand\"},{\"name\":\"Row 1595\",\"note\":\"the 1,595th of two thousand\"},{\"name\":\"Row 1596\",\"note\":\"the 1,596th of two thousand\"},{\"name\":\"Row 1597\",\"note\":\"the 1,597th of two thousand\"},{\"name\":\"Row 1598\",\"note\":\"the 1,598th of two thousand\"},{\"name\":\"Row 1599\",\"note\":\"the 1,599th of two thousand\"},{\"name\":\"Row 1600\",\"note\":\"the 1,600th of two thousand\"},{\"name\":\"Row 1601\",\"note\":\"the 1,601st of two thousand\"},{\"name\":\"Row 1602\",\"note\":\"the 1,602nd of two thousand\"},{\"name\":\"Row 1603\",\"note\":\"the 1,603rd of two thousand\"},{\"name\":\"Row 1604\",\"note\":\"the 1,604th of two thousand\"},{\"name\":\"Row 1605\",\"note\":\"the 1,605th of two thousand\"},{\"name\":\"Row 1606\",\"note\":\"the 1,606th of two thousand\"},{\"name\":\"Row 1607\",\"note\":\"the 1,607th of two thousand\"},{\"name\":\"Row 1608\",\"note\":\"the 1,608th of two thousand\"},{\"name\":\"Row 1609\",\"note\":\"the 1,609th of two thousand\"},{\"name\":\"Row 1610\",\"note\":\"the 1,610th of two thousand\"},{\"name\":\"Row 1611\",\"note\":\"the 1,611th of two thousand\"},{\"name\":\"Row 1612\",\"note\":\"the 1,612th of two thousand\"},{\"name\":\"Row 1613\",\"note\":\"the 1,613th of two thousand\"},{\"name\":\"Row 1614\",\"note\":\"the 1,614th of two thousand\"},{\"name\":\"Row 1615\",\"note\":\"the 1,615th of two thousand\"},{\"name\":\"Row 1616\",\"note\":\"the 1,616th of two thousand\"},{\"name\":\"Row 1617\",\"note\":\"the 1,617th of two thousand\"},{\"name\":\"Row 1618\",\"note\":\"the 1,618th of two thousand\"},{\"name\":\"Row 1619\",\"note\":\"the 1,619th of two thousand\"},{\"name\":\"Row 1620\",\"note\":\"the 1,620th of two thousand\"},{\"name\":\"Row 1621\",\"note\":\"the 1,621st of two thousand\"},{\"name\":\"Row 1622\",\"note\":\"the 1,622nd of two thousand\"},{\"name\":\"Row 1623\",\"note\":\"the 1,623rd of two thousand\"},{\"name\":\"Row 1624\",\"note\":\"the 1,624th of two thousand\"},{\"name\":\"Row 1625\",\"note\":\"the 1,625th of two thousand\"},{\"name\":\"Row 1626\",\"note\":\"the 1,626th of two thousand\"},{\"name\":\"Row 1627\",\"note\":\"the 1,627th of two thousand\"},{\"name\":\"Row 1628\",\"note\":\"the 1,628th of two thousand\"},{\"name\":\"Row 1629\",\"note\":\"the 1,629th of two thousand\"},{\"name\":\"Row 1630\",\"note\":\"the 1,630th of two thousand\"},{\"name\":\"Row 1631\",\"note\":\"the 1,631st of two thousand\"},{\"name\":\"Row 1632\",\"note\":\"the 1,632nd of two thousand\"},{\"name\":\"Row 1633\",\"note\":\"the 1,633rd of two thousand\"},{\"name\":\"Row 1634\",\"note\":\"the 1,634th of two thousand\"},{\"name\":\"Row 1635\",\"note\":\"the 1,635th of two thousand\"},{\"name\":\"Row 1636\",\"note\":\"the 1,636th of two thousand\"},{\"name\":\"Row 1637\",\"note\":\"the 1,637th of two thousand\"},{\"name\":\"Row 1638\",\"note\":\"the 1,638th of two thousand\"},{\"name\":\"Row 1639\",\"note\":\"the 1,639th of two thousand\"},{\"name\":\"Row 1640\",\"note\":\"the 1,640th of two thousand\"},{\"name\":\"Row 1641\",\"note\":\"the 1,641st of two thousand\"},{\"name\":\"Row 1642\",\"note\":\"the 1,642nd of two thousand\"},{\"name\":\"Row 1643\",\"note\":\"the 1,643rd of two thousand\"},{\"name\":\"Row 1644\",\"note\":\"the 1,644th of two thousand\"},{\"name\":\"Row 1645\",\"note\":\"the 1,645th of two thousand\"},{\"name\":\"Row 1646\",\"note\":\"the 1,646th of two thousand\"},{\"name\":\"Row 1647\",\"note\":\"the 1,647th of two thousand\"},{\"name\":\"Row 1648\",\"note\":\"the 1,648th of two thousand\"},{\"name\":\"Row 1649\",\"note\":\"the 1,649th of two thousand\"},{\"name\":\"Row 1650\",\"note\":\"the 1,650th of two thousand\"},{\"name\":\"Row 1651\",\"note\":\"the 1,651st of two thousand\"},{\"name\":\"Row 1652\",\"note\":\"the 1,652nd of two thousand\"},{\"name\":\"Row 1653\",\"note\":\"the 1,653rd of two thousand\"},{\"name\":\"Row 1654\",\"note\":\"the 1,654th of two thousand\"},{\"name\":\"Row 1655\",\"note\":\"the 1,655th of two thousand\"},{\"name\":\"Row 1656\",\"note\":\"the 1,656th of two thousand\"},{\"name\":\"Row 1657\",\"note\":\"the 1,657th of two thousand\"},{\"name\":\"Row 1658\",\"note\":\"the 1,658th of two thousand\"},{\"name\":\"Row 1659\",\"note\":\"the 1,659th of two thousand\"},{\"name\":\"Row 1660\",\"note\":\"the 1,660th of two thousand\"},{\"name\":\"Row 1661\",\"note\":\"the 1,661st of two thousand\"},{\"name\":\"Row 1662\",\"note\":\"the 1,662nd of two thousand\"},{\"name\":\"Row 1663\",\"note\":\"the 1,663rd of two thousand\"},{\"name\":\"Row 1664\",\"note\":\"the 1,664th of two thousand\"},{\"name\":\"Row 1665\",\"note\":\"the 1,665th of two thousand\"},{\"name\":\"Row 1666\",\"note\":\"the 1,666th of two thousand\"},{\"name\":\"Row 1667\",\"note\":\"the 1,667th of two thousand\"},{\"name\":\"Row 1668\",\"note\":\"the 1,668th of two thousand\"},{\"name\":\"Row 1669\",\"note\":\"the 1,669th of two thousand\"},{\"name\":\"Row 1670\",\"note\":\"the 1,670th of two thousand\"},{\"name\":\"Row 1671\",\"note\":\"the 1,671st of two thousand\"},{\"name\":\"Row 1672\",\"note\":\"the 1,672nd of two thousand\"},{\"name\":\"Row 1673\",\"note\":\"the 1,673rd of two thousand\"},{\"name\":\"Row 1674\",\"note\":\"the 1,674th of two thousand\"},{\"name\":\"Row 1675\",\"note\":\"the 1,675th of two thousand\"},{\"name\":\"Row 1676\",\"note\":\"the 1,676th of two thousand\"},{\"name\":\"Row 1677\",\"note\":\"the 1,677th of two thousand\"},{\"name\":\"Row 1678\",\"note\":\"the 1,678th of two thousand\"},{\"name\":\"Row 1679\",\"note\":\"the 1,679th of two thousand\"},{\"name\":\"Row 1680\",\"note\":\"the 1,680th of two thousand\"},{\"name\":\"Row 1681\",\"note\":\"the 1,681st of two thousand\"},{\"name\":\"Row 1682\",\"note\":\"the 1,682nd of two thousand\"},{\"name\":\"Row 1683\",\"note\":\"the 1,683rd of two thousand\"},{\"name\":\"Row 1684\",\"note\":\"the 1,684th of two thousand\"},{\"name\":\"Row 1685\",\"note\":\"the 1,685th of two thousand\"},{\"name\":\"Row 1686\",\"note\":\"the 1,686th of two thousand\"},{\"name\":\"Row 1687\",\"note\":\"the 1,687th of two thousand\"},{\"name\":\"Row 1688\",\"note\":\"the 1,688th of two thousand\"},{\"name\":\"Row 1689\",\"note\":\"the 1,689th of two thousand\"},{\"name\":\"Row 1690\",\"note\":\"the 1,690th of two thousand\"},{\"name\":\"Row 1691\",\"note\":\"the 1,691st of two thousand\"},{\"name\":\"Row 1692\",\"note\":\"the 1,692nd of two thousand\"},{\"name\":\"Row 1693\",\"note\":\"the 1,693rd of two thousand\"},{\"name\":\"Row 1694\",\"note\":\"the 1,694th of two thousand\"},{\"name\":\"Row 1695\",\"note\":\"the 1,695th of two thousand\"},{\"name\":\"Row 1696\",\"note\":\"the 1,696th of two thousand\"},{\"name\":\"Row 1697\",\"note\":\"the 1,697th of two thousand\"},{\"name\":\"Row 1698\",\"note\":\"the 1,698th of two thousand\"},{\"name\":\"Row 1699\",\"note\":\"the 1,699th of two thousand\"},{\"name\":\"Row 1700\",\"note\":\"the 1,700th of two thousand\"},{\"name\":\"Row 1701\",\"note\":\"the 1,701st of two thousand\"},{\"name\":\"Row 1702\",\"note\":\"the 1,702nd of two thousand\"},{\"name\":\"Row 1703\",\"note\":\"the 1,703rd of two thousand\"},{\"name\":\"Row 1704\",\"note\":\"the 1,704th of two thousand\"},{\"name\":\"Row 1705\",\"note\":\"the 1,705th of two thousand\"},{\"name\":\"Row 1706\",\"note\":\"the 1,706th of two thousand\"},{\"name\":\"Row 1707\",\"note\":\"the 1,707th of two thousand\"},{\"name\":\"Row 1708\",\"note\":\"the 1,708th of two thousand\"},{\"name\":\"Row 1709\",\"note\":\"the 1,709th of two thousand\"},{\"name\":\"Row 1710\",\"note\":\"the 1,710th of two thousand\"},{\"name\":\"Row 1711\",\"note\":\"the 1,711th of two thousand\"},{\"name\":\"Row 1712\",\"note\":\"the 1,712th of two thousand\"},{\"name\":\"Row 1713\",\"note\":\"the 1,713th of two thousand\"},{\"name\":\"Row 1714\",\"note\":\"the 1,714th of two thousand\"},{\"name\":\"Row 1715\",\"note\":\"the 1,715th of two thousand\"},{\"name\":\"Row 1716\",\"note\":\"the 1,716th of two thousand\"},{\"name\":\"Row 1717\",\"note\":\"the 1,717th of two thousand\"},{\"name\":\"Row 1718\",\"note\":\"the 1,718th of two thousand\"},{\"name\":\"Row 1719\",\"note\":\"the 1,719th of two thousand\"},{\"name\":\"Row 1720\",\"note\":\"the 1,720th of two thousand\"},{\"name\":\"Row 1721\",\"note\":\"the 1,721st of two thousand\"},{\"name\":\"Row 1722\",\"note\":\"the 1,722nd of two thousand\"},{\"name\":\"Row 1723\",\"note\":\"the 1,723rd of two thousand\"},{\"name\":\"Row 1724\",\"note\":\"the 1,724th of two thousand\"},{\"name\":\"Row 1725\",\"note\":\"the 1,725th of two thousand\"},{\"name\":\"Row 1726\",\"note\":\"the 1,726th of two thousand\"},{\"name\":\"Row 1727\",\"note\":\"the 1,727th of two thousand\"},{\"name\":\"Row 1728\",\"note\":\"the 1,728th of two thousand\"},{\"name\":\"Row 1729\",\"note\":\"the 1,729th of two thousand\"},{\"name\":\"Row 1730\",\"note\":\"the 1,730th of two thousand\"},{\"name\":\"Row 1731\",\"note\":\"the 1,731st of two thousand\"},{\"name\":\"Row 1732\",\"note\":\"the 1,732nd of two thousand\"},{\"name\":\"Row 1733\",\"note\":\"the 1,733rd of two thousand\"},{\"name\":\"Row 1734\",\"note\":\"the 1,734th of two thousand\"},{\"name\":\"Row 1735\",\"note\":\"the 1,735th of two thousand\"},{\"name\":\"Row 1736\",\"note\":\"the 1,736th of two thousand\"},{\"name\":\"Row 1737\",\"note\":\"the 1,737th of two thousand\"},{\"name\":\"Row 1738\",\"note\":\"the 1,738th of two thousand\"},{\"name\":\"Row 1739\",\"note\":\"the 1,739th of two thousand\"},{\"name\":\"Row 1740\",\"note\":\"the 1,740th of two thousand\"},{\"name\":\"Row 1741\",\"note\":\"the 1,741st of two thousand\"},{\"name\":\"Row 1742\",\"note\":\"the 1,742nd of two thousand\"},{\"name\":\"Row 1743\",\"note\":\"the 1,743rd of two thousand\"},{\"name\":\"Row 1744\",\"note\":\"the 1,744th of two thousand\"},{\"name\":\"Row 1745\",\"note\":\"the 1,745th of two thousand\"},{\"name\":\"Row 1746\",\"note\":\"the 1,746th of two thousand\"},{\"name\":\"Row 1747\",\"note\":\"the 1,747th of two thousand\"},{\"name\":\"Row 1748\",\"note\":\"the 1,748th of two thousand\"},{\"name\":\"Row 1749\",\"note\":\"the 1,749th of two thousand\"},{\"name\":\"Row 1750\",\"note\":\"the 1,750th of two thousand\"},{\"name\":\"Row 1751\",\"note\":\"the 1,751st of two thousand\"},{\"name\":\"Row 1752\",\"note\":\"the 1,752nd of two thousand\"},{\"name\":\"Row 1753\",\"note\":\"the 1,753rd of two thousand\"},{\"name\":\"Row 1754\",\"note\":\"the 1,754th of two thousand\"},{\"name\":\"Row 1755\",\"note\":\"the 1,755th of two thousand\"},{\"name\":\"Row 1756\",\"note\":\"the 1,756th of two thousand\"},{\"name\":\"Row 1757\",\"note\":\"the 1,757th of two thousand\"},{\"name\":\"Row 1758\",\"note\":\"the 1,758th of two thousand\"},{\"name\":\"Row 1759\",\"note\":\"the 1,759th of two thousand\"},{\"name\":\"Row 1760\",\"note\":\"the 1,760th of two thousand\"},{\"name\":\"Row 1761\",\"note\":\"the 1,761st of two thousand\"},{\"name\":\"Row 1762\",\"note\":\"the 1,762nd of two thousand\"},{\"name\":\"Row 1763\",\"note\":\"the 1,763rd of two thousand\"},{\"name\":\"Row 1764\",\"note\":\"the 1,764th of two thousand\"},{\"name\":\"Row 1765\",\"note\":\"the 1,765th of two thousand\"},{\"name\":\"Row 1766\",\"note\":\"the 1,766th of two thousand\"},{\"name\":\"Row 1767\",\"note\":\"the 1,767th of two thousand\"},{\"name\":\"Row 1768\",\"note\":\"the 1,768th of two thousand\"},{\"name\":\"Row 1769\",\"note\":\"the 1,769th of two thousand\"},{\"name\":\"Row 1770\",\"note\":\"the 1,770th of two thousand\"},{\"name\":\"Row 1771\",\"note\":\"the 1,771st of two thousand\"},{\"name\":\"Row 1772\",\"note\":\"the 1,772nd of two thousand\"},{\"name\":\"Row 1773\",\"note\":\"the 1,773rd of two thousand\"},{\"name\":\"Row 1774\",\"note\":\"the 1,774th of two thousand\"},{\"name\":\"Row 1775\",\"note\":\"the 1,775th of two thousand\"},{\"name\":\"Row 1776\",\"note\":\"the 1,776th of two thousand\"},{\"name\":\"Row 1777\",\"note\":\"the 1,777th of two thousand\"},{\"name\":\"Row 1778\",\"note\":\"the 1,778th of two thousand\"},{\"name\":\"Row 1779\",\"note\":\"the 1,779th of two thousand\"},{\"name\":\"Row 1780\",\"note\":\"the 1,780th of two thousand\"},{\"name\":\"Row 1781\",\"note\":\"the 1,781st of two thousand\"},{\"name\":\"Row 1782\",\"note\":\"the 1,782nd of two thousand\"},{\"name\":\"Row 1783\",\"note\":\"the 1,783rd of two thousand\"},{\"name\":\"Row 1784\",\"note\":\"the 1,784th of two thousand\"},{\"name\":\"Row 1785\",\"note\":\"the 1,785th of two thousand\"},{\"name\":\"Row 1786\",\"note\":\"the 1,786th of two thousand\"},{\"name\":\"Row 1787\",\"note\":\"the 1,787th of two thousand\"},{\"name\":\"Row 1788\",\"note\":\"the 1,788th of two thousand\"},{\"name\":\"Row 1789\",\"note\":\"the 1,789th of two thousand\"},{\"name\":\"Row 1790\",\"note\":\"the 1,790th of two thousand\"},{\"name\":\"Row 1791\",\"note\":\"the 1,791st of two thousand\"},{\"name\":\"Row 1792\",\"note\":\"the 1,792nd of two thousand\"},{\"name\":\"Row 1793\",\"note\":\"the 1,793rd of two thousand\"},{\"name\":\"Row 1794\",\"note\":\"the 1,794th of two thousand\"},{\"name\":\"Row 1795\",\"note\":\"the 1,795th of two thousand\"},{\"name\":\"Row 1796\",\"note\":\"the 1,796th of two thousand\"},{\"name\":\"Row 1797\",\"note\":\"the 1,797th of two thousand\"},{\"name\":\"Row 1798\",\"note\":\"the 1,798th of two thousand\"},{\"name\":\"Row 1799\",\"note\":\"the 1,799th of two thousand\"},{\"name\":\"Row 1800\",\"note\":\"the 1,800th of two thousand\"},{\"name\":\"Row 1801\",\"note\":\"the 1,801st of two thousand\"},{\"name\":\"Row 1802\",\"note\":\"the 1,802nd of two thousand\"},{\"name\":\"Row 1803\",\"note\":\"the 1,803rd of two thousand\"},{\"name\":\"Row 1804\",\"note\":\"the 1,804th of two thousand\"},{\"name\":\"Row 1805\",\"note\":\"the 1,805th of two thousand\"},{\"name\":\"Row 1806\",\"note\":\"the 1,806th of two thousand\"},{\"name\":\"Row 1807\",\"note\":\"the 1,807th of two thousand\"},{\"name\":\"Row 1808\",\"note\":\"the 1,808th of two thousand\"},{\"name\":\"Row 1809\",\"note\":\"the 1,809th of two thousand\"},{\"name\":\"Row 1810\",\"note\":\"the 1,810th of two thousand\"},{\"name\":\"Row 1811\",\"note\":\"the 1,811th of two thousand\"},{\"name\":\"Row 1812\",\"note\":\"the 1,812th of two thousand\"},{\"name\":\"Row 1813\",\"note\":\"the 1,813th of two thousand\"},{\"name\":\"Row 1814\",\"note\":\"the 1,814th of two thousand\"},{\"name\":\"Row 1815\",\"note\":\"the 1,815th of two thousand\"},{\"name\":\"Row 1816\",\"note\":\"the 1,816th of two thousand\"},{\"name\":\"Row 1817\",\"note\":\"the 1,817th of two thousand\"},{\"name\":\"Row 1818\",\"note\":\"the 1,818th of two thousand\"},{\"name\":\"Row 1819\",\"note\":\"the 1,819th of two thousand\"},{\"name\":\"Row 1820\",\"note\":\"the 1,820th of two thousand\"},{\"name\":\"Row 1821\",\"note\":\"the 1,821st of two thousand\"},{\"name\":\"Row 1822\",\"note\":\"the 1,822nd of two thousand\"},{\"name\":\"Row 1823\",\"note\":\"the 1,823rd of two thousand\"},{\"name\":\"Row 1824\",\"note\":\"the 1,824th of two thousand\"},{\"name\":\"Row 1825\",\"note\":\"the 1,825th of two thousand\"},{\"name\":\"Row 1826\",\"note\":\"the 1,826th of two thousand\"},{\"name\":\"Row 1827\",\"note\":\"the 1,827th of two thousand\"},{\"name\":\"Row 1828\",\"note\":\"the 1,828th of two thousand\"},{\"name\":\"Row 1829\",\"note\":\"the 1,829th of two thousand\"},{\"name\":\"Row 1830\",\"note\":\"the 1,830th of two thousand\"},{\"name\":\"Row 1831\",\"note\":\"the 1,831st of two thousand\"},{\"name\":\"Row 1832\",\"note\":\"the 1,832nd of two thousand\"},{\"name\":\"Row 1833\",\"note\":\"the 1,833rd of two thousand\"},{\"name\":\"Row 1834\",\"note\":\"the 1,834th of two thousand\"},{\"name\":\"Row 1835\",\"note\":\"the 1,835th of two thousand\"},{\"name\":\"Row 1836\",\"note\":\"the 1,836th of two thousand\"},{\"name\":\"Row 1837\",\"note\":\"the 1,837th of two thousand\"},{\"name\":\"Row 1838\",\"note\":\"the 1,838th of two thousand\"},{\"name\":\"Row 1839\",\"note\":\"the 1,839th of two thousand\"},{\"name\":\"Row 1840\",\"note\":\"the 1,840th of two thousand\"},{\"name\":\"Row 1841\",\"note\":\"the 1,841st of two thousand\"},{\"name\":\"Row 1842\",\"note\":\"the 1,842nd of two thousand\"},{\"name\":\"Row 1843\",\"note\":\"the 1,843rd of two thousand\"},{\"name\":\"Row 1844\",\"note\":\"the 1,844th of two thousand\"},{\"name\":\"Row 1845\",\"note\":\"the 1,845th of two thousand\"},{\"name\":\"Row 1846\",\"note\":\"the 1,846th of two thousand\"},{\"name\":\"Row 1847\",\"note\":\"the 1,847th of two thousand\"},{\"name\":\"Row 1848\",\"note\":\"the 1,848th of two thousand\"},{\"name\":\"Row 1849\",\"note\":\"the 1,849th of two thousand\"},{\"name\":\"Row 1850\",\"note\":\"the 1,850th of two thousand\"},{\"name\":\"Row 1851\",\"note\":\"the 1,851st of two thousand\"},{\"name\":\"Row 1852\",\"note\":\"the 1,852nd of two thousand\"},{\"name\":\"Row 1853\",\"note\":\"the 1,853rd of two thousand\"},{\"name\":\"Row 1854\",\"note\":\"the 1,854th of two thousand\"},{\"name\":\"Row 1855\",\"note\":\"the 1,855th of two thousand\"},{\"name\":\"Row 1856\",\"note\":\"the 1,856th of two thousand\"},{\"name\":\"Row 1857\",\"note\":\"the 1,857th of two thousand\"},{\"name\":\"Row 1858\",\"note\":\"the 1,858th of two thousand\"},{\"name\":\"Row 1859\",\"note\":\"the 1,859th of two thousand\"},{\"name\":\"Row 1860\",\"note\":\"the 1,860th of two thousand\"},{\"name\":\"Row 1861\",\"note\":\"the 1,861st of two thousand\"},{\"name\":\"Row 1862\",\"note\":\"the 1,862nd of two thousand\"},{\"name\":\"Row 1863\",\"note\":\"the 1,863rd of two thousand\"},{\"name\":\"Row 1864\",\"note\":\"the 1,864th of two thousand\"},{\"name\":\"Row 1865\",\"note\":\"the 1,865th of two thousand\"},{\"name\":\"Row 1866\",\"note\":\"the 1,866th of two thousand\"},{\"name\":\"Row 1867\",\"note\":\"the 1,867th of two thousand\"},{\"name\":\"Row 1868\",\"note\":\"the 1,868th of two thousand\"},{\"name\":\"Row 1869\",\"note\":\"the 1,869th of two thousand\"},{\"name\":\"Row 1870\",\"note\":\"the 1,870th of two thousand\"},{\"name\":\"Row 1871\",\"note\":\"the 1,871st of two thousand\"},{\"name\":\"Row 1872\",\"note\":\"the 1,872nd of two thousand\"},{\"name\":\"Row 1873\",\"note\":\"the 1,873rd of two thousand\"},{\"name\":\"Row 1874\",\"note\":\"the 1,874th of two thousand\"},{\"name\":\"Row 1875\",\"note\":\"the 1,875th of two thousand\"},{\"name\":\"Row 1876\",\"note\":\"the 1,876th of two thousand\"},{\"name\":\"Row 1877\",\"note\":\"the 1,877th of two thousand\"},{\"name\":\"Row 1878\",\"note\":\"the 1,878th of two thousand\"},{\"name\":\"Row 1879\",\"note\":\"the 1,879th of two thousand\"},{\"name\":\"Row 1880\",\"note\":\"the 1,880th of two thousand\"},{\"name\":\"Row 1881\",\"note\":\"the 1,881st of two thousand\"},{\"name\":\"Row 1882\",\"note\":\"the 1,882nd of two thousand\"},{\"name\":\"Row 1883\",\"note\":\"the 1,883rd of two thousand\"},{\"name\":\"Row 1884\",\"note\":\"the 1,884th of two thousand\"},{\"name\":\"Row 1885\",\"note\":\"the 1,885th of two thousand\"},{\"name\":\"Row 1886\",\"note\":\"the 1,886th of two thousand\"},{\"name\":\"Row 1887\",\"note\":\"the 1,887th of two thousand\"},{\"name\":\"Row 1888\",\"note\":\"the 1,888th of two thousand\"},{\"name\":\"Row 1889\",\"note\":\"the 1,889th of two thousand\"},{\"name\":\"Row 1890\",\"note\":\"the 1,890th of two thousand\"},{\"name\":\"Row 1891\",\"note\":\"the 1,891st of two thousand\"},{\"name\":\"Row 1892\",\"note\":\"the 1,892nd of two thousand\"},{\"name\":\"Row 1893\",\"note\":\"the 1,893rd of two thousand\"},{\"name\":\"Row 1894\",\"note\":\"the 1,894th of two thousand\"},{\"name\":\"Row 1895\",\"note\":\"the 1,895th of two thousand\"},{\"name\":\"Row 1896\",\"note\":\"the 1,896th of two thousand\"},{\"name\":\"Row 1897\",\"note\":\"the 1,897th of two thousand\"},{\"name\":\"Row 1898\",\"note\":\"the 1,898th of two thousand\"},{\"name\":\"Row 1899\",\"note\":\"the 1,899th of two thousand\"},{\"name\":\"Row 1900\",\"note\":\"the 1,900th of two thousand\"},{\"name\":\"Row 1901\",\"note\":\"the 1,901st of two thousand\"},{\"name\":\"Row 1902\",\"note\":\"the 1,902nd of two thousand\"},{\"name\":\"Row 1903\",\"note\":\"the 1,903rd of two thousand\"},{\"name\":\"Row 1904\",\"note\":\"the 1,904th of two thousand\"},{\"name\":\"Row 1905\",\"note\":\"the 1,905th of two thousand\"},{\"name\":\"Row 1906\",\"note\":\"the 1,906th of two thousand\"},{\"name\":\"Row 1907\",\"note\":\"the 1,907th of two thousand\"},{\"name\":\"Row 1908\",\"note\":\"the 1,908th of two thousand\"},{\"name\":\"Row 1909\",\"note\":\"the 1,909th of two thousand\"},{\"name\":\"Row 1910\",\"note\":\"the 1,910th of two thousand\"},{\"name\":\"Row 1911\",\"note\":\"the 1,911th of two thousand\"},{\"name\":\"Row 1912\",\"note\":\"the 1,912th of two thousand\"},{\"name\":\"Row 1913\",\"note\":\"the 1,913th of two thousand\"},{\"name\":\"Row 1914\",\"note\":\"the 1,914th of two thousand\"},{\"name\":\"Row 1915\",\"note\":\"the 1,915th of two thousand\"},{\"name\":\"Row 1916\",\"note\":\"the 1,916th of two thousand\"},{\"name\":\"Row 1917\",\"note\":\"the 1,917th of two thousand\"},{\"name\":\"Row 1918\",\"note\":\"the 1,918th of two thousand\"},{\"name\":\"Row 1919\",\"note\":\"the 1,919th of two thousand\"},{\"name\":\"Row 1920\",\"note\":\"the 1,920th of two thousand\"},{\"name\":\"Row 1921\",\"note\":\"the 1,921st of two thousand\"},{\"name\":\"Row 1922\",\"note\":\"the 1,922nd of two thousand\"},{\"name\":\"Row 1923\",\"note\":\"the 1,923rd of two thousand\"},{\"name\":\"Row 1924\",\"note\":\"the 1,924th of two thousand\"},{\"name\":\"Row 1925\",\"note\":\"the 1,925th of two thousand\"},{\"name\":\"Row 1926\",\"note\":\"the 1,926th of two thousand\"},{\"name\":\"Row 1927\",\"note\":\"the 1,927th of two thousand\"},{\"name\":\"Row 1928\",\"note\":\"the 1,928th of two thousand\"},{\"name\":\"Row 1929\",\"note\":\"the 1,929th of two thousand\"},{\"name\":\"Row 1930\",\"note\":\"the 1,930th of two thousand\"},{\"name\":\"Row 1931\",\"note\":\"the 1,931st of two thousand\"},{\"name\":\"Row 1932\",\"note\":\"the 1,932nd of two thousand\"},{\"name\":\"Row 1933\",\"note\":\"the 1,933rd of two thousand\"},{\"name\":\"Row 1934\",\"note\":\"the 1,934th of two thousand\"},{\"name\":\"Row 1935\",\"note\":\"the 1,935th of two thousand\"},{\"name\":\"Row 1936\",\"note\":\"the 1,936th of two thousand\"},{\"name\":\"Row 1937\",\"note\":\"the 1,937th of two thousand\"},{\"name\":\"Row 1938\",\"note\":\"the 1,938th of two thousand\"},{\"name\":\"Row 1939\",\"note\":\"the 1,939th of two thousand\"},{\"name\":\"Row 1940\",\"note\":\"the 1,940th of two thousand\"},{\"name\":\"Row 1941\",\"note\":\"the 1,941st of two thousand\"},{\"name\":\"Row 1942\",\"note\":\"the 1,942nd of two thousand\"},{\"name\":\"Row 1943\",\"note\":\"the 1,943rd of two thousand\"},{\"name\":\"Row 1944\",\"note\":\"the 1,944th of two thousand\"},{\"name\":\"Row 1945\",\"note\":\"the 1,945th of two thousand\"},{\"name\":\"Row 1946\",\"note\":\"the 1,946th of two thousand\"},{\"name\":\"Row 1947\",\"note\":\"the 1,947th of two thousand\"},{\"name\":\"Row 1948\",\"note\":\"the 1,948th of two thousand\"},{\"name\":\"Row 1949\",\"note\":\"the 1,949th of two thousand\"},{\"name\":\"Row 1950\",\"note\":\"the 1,950th of two thousand\"},{\"name\":\"Row 1951\",\"note\":\"the 1,951st of two thousand\"},{\"name\":\"Row 1952\",\"note\":\"the 1,952nd of two thousand\"},{\"name\":\"Row 1953\",\"note\":\"the 1,953rd of two thousand\"},{\"name\":\"Row 1954\",\"note\":\"the 1,954th of two thousand\"},{\"name\":\"Row 1955\",\"note\":\"the 1,955th of two thousand\"},{\"name\":\"Row 1956\",\"note\":\"the 1,956th of two thousand\"},{\"name\":\"Row 1957\",\"note\":\"the 1,957th of two thousand\"},{\"name\":\"Row 1958\",\"note\":\"the 1,958th of two thousand\"},{\"name\":\"Row 1959\",\"note\":\"the 1,959th of two thousand\"},{\"name\":\"Row 1960\",\"note\":\"the 1,960th of two thousand\"},{\"name\":\"Row 1961\",\"note\":\"the 1,961st of two thousand\"},{\"name\":\"Row 1962\",\"note\":\"the 1,962nd of two thousand\"},{\"name\":\"Row 1963\",\"note\":\"the 1,963rd of two thousand\"},{\"name\":\"Row 1964\",\"note\":\"the 1,964th of two thousand\"},{\"name\":\"Row 1965\",\"note\":\"the 1,965th of two thousand\"},{\"name\":\"Row 1966\",\"note\":\"the 1,966th of two thousand\"},{\"name\":\"Row 1967\",\"note\":\"the 1,967th of two thousand\"},{\"name\":\"Row 1968\",\"note\":\"the 1,968th of two thousand\"},{\"name\":\"Row 1969\",\"note\":\"the 1,969th of two thousand\"},{\"name\":\"Row 1970\",\"note\":\"the 1,970th of two thousand\"},{\"name\":\"Row 1971\",\"note\":\"the 1,971st of two thousand\"},{\"name\":\"Row 1972\",\"note\":\"the 1,972nd of two thousand\"},{\"name\":\"Row 1973\",\"note\":\"the 1,973rd of two thousand\"},{\"name\":\"Row 1974\",\"note\":\"the 1,974th of two thousand\"},{\"name\":\"Row 1975\",\"note\":\"the 1,975th of two thousand\"},{\"name\":\"Row 1976\",\"note\":\"the 1,976th of two thousand\"},{\"name\":\"Row 1977\",\"note\":\"the 1,977th of two thousand\"},{\"name\":\"Row 1978\",\"note\":\"the 1,978th of two thousand\"},{\"name\":\"Row 1979\",\"note\":\"the 1,979th of two thousand\"},{\"name\":\"Row 1980\",\"note\":\"the 1,980th of two thousand\"},{\"name\":\"Row 1981\",\"note\":\"the 1,981st of two thousand\"},{\"name\":\"Row 1982\",\"note\":\"the 1,982nd of two thousand\"},{\"name\":\"Row 1983\",\"note\":\"the 1,983rd of two thousand\"},{\"name\":\"Row 1984\",\"note\":\"the 1,984th of two thousand\"},{\"name\":\"Row 1985\",\"note\":\"the 1,985th of two thousand\"},{\"name\":\"Row 1986\",\"note\":\"the 1,986th of two thousand\"},{\"name\":\"Row 1987\",\"note\":\"the 1,987th of two thousand\"},{\"name\":\"Row 1988\",\"note\":\"the 1,988th of two thousand\"},{\"name\":\"Row 1989\",\"note\":\"the 1,989th of two thousand\"},{\"name\":\"Row 1990\",\"note\":\"the 1,990th of two thousand\"},{\"name\":\"Row 1991\",\"note\":\"the 1,991st of two thousand\"},{\"name\":\"Row 1992\",\"note\":\"the 1,992nd of two thousand\"},{\"name\":\"Row 1993\",\"note\":\"the 1,993rd of two thousand\"},{\"name\":\"Row 1994\",\"note\":\"the 1,994th of two thousand\"},{\"name\":\"Row 1995\",\"note\":\"the 1,995th of two thousand\"},{\"name\":\"Row 1996\",\"note\":\"the 1,996th of two thousand\"},{\"name\":\"Row 1997\",\"note\":\"the 1,997th of two thousand\"},{\"name\":\"Row 1998\",\"note\":\"the 1,998th of two thousand\"},{\"name\":\"Row 1999\",\"note\":\"the 1,999th of two thousand\"},{\"name\":\"Row 2000\",\"note\":\"the 2,000th of two thousand\"}]</script>\n\n<style>\n .virtualRow {\n align-content: center;\n align-items: baseline;\n block-size: 32px;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 4.5rem minmax(0, 1fr);\n padding-inline: 0.75rem;\n }\n</style>","imports":["import '@fusion.dev/helix-headless/virtual-list'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\n/* The two thousand rows are generated here. The HTML example writes the same\n rows out as JSON.\n\n The row template is set with `innerHTML` because the component clones the\n template's `content`, and React puts JSX children on the `<template>` itself. */\nconst ORDINAL = new Intl.PluralRules('en-US', { type: 'ordinal' })\nconst SUFFIX: Record<string, string> = { few: 'rd', one: 'st', other: 'th', two: 'nd' }\nconst rows = Array.from({ length: 2000 }, (_, index) => ({\n name: `Row ${index + 1}`,\n note: `the ${(index + 1).toLocaleString('en-US')}${SUFFIX[ORDINAL.select(index + 1)]} of two thousand`,\n}))\n\n/* The same stylesheet as the HTML example's `<style>` block. It is set with\n `dangerouslySetInnerHTML` because JSX reads the braces in CSS as expressions. */\nconst SHEET = `\\n .virtualRow {\\n align-content: center;\\n align-items: baseline;\\n block-size: 32px;\\n display: grid;\\n gap: 0.75rem;\\n grid-template-columns: 4.5rem minmax(0, 1fr);\\n padding-inline: 0.75rem;\\n }\\n`\n\n/* The same markup as the HTML example's `<template>`, indentation included, so\n both examples clone the same nodes. */\nconst ROW = `\n <div class=\"virtualRow\">\n <strong data-field=\"name\"></strong>\n <span data-field=\"note\"></span>\n </div>\n `\n\nexport function Example() {\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: SHEET }} />\n\n <helix-headless-virtual-list\n estimate={32}\n for=\"people\"\n label=\"Two thousand rows\"\n >\n <template dangerouslySetInnerHTML={{ __html: ROW }} />\n </helix-headless-virtual-list>\n\n <script\n dangerouslySetInnerHTML={{ __html: JSON.stringify(rows) }}\n id=\"people\"\n type=\"application/json\"\n />\n </>\n )\n}"}]},"package":"@fusion.dev/helix-headless"}
1
+ {"environment":{"browser":"chromium 153.0.8010.12","fonts":"90 fonts, d93ed8347ae01f6c","os":"ubuntu 24.04","platform":"linux"},"examples":{"accordion":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-accordion {\n display: block;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\nhelix-headless-accordion-item {\n display: block;\n}\n\nhelix-headless-accordion-item + helix-headless-accordion-item {\n border-block-start: 1px solid var(--_gray-line);\n}\n\nhelix-headless-accordion-item::part(trigger) {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font: inherit;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n min-block-size: 2.5rem;\n padding: 0.75rem 1rem;\n text-align: start;\n}\n\nhelix-headless-accordion-item::part(chevron) {\n block-size: 1em;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1em;\n margin-inline-start: auto;\n}\n\nhelix-headless-accordion-item:state(open)::part(chevron) {\n scale: 1 -1;\n}\n\nhelix-headless-accordion-item::part(content-inner) {\n color: var(--_gray-muted);\n padding: 0 1rem 0.75rem;\n}\n\n/* Opening grows the section from nothing to the height it publishes. */\nhelix-headless-accordion-item:state(open)::part(content) {\n animation: accordion-open 200ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-accordion-item:state(open)::part(content) {\n animation: none;\n }\n}\n\n/* Clipped only while it grows, so nothing changes about the open section. */\n@keyframes accordion-open {\n from {\n block-size: 0;\n overflow: clip;\n }\n\n to {\n block-size: var(--accordion-content-height, auto);\n overflow: clip;\n }\n}\n\nhelix-headless-accordion-item::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The accordion on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-accordion>\n <helix-headless-accordion-item default-open>\n <span slot=\"summary\">Shipping</span>\n Orders ship within two business days. You receive a tracking number by email.\n </helix-headless-accordion-item>\n <helix-headless-accordion-item>\n <span slot=\"summary\">Returns</span>\n You can return an item within 30 days.\n </helix-headless-accordion-item>\n</helix-headless-accordion>","imports":["import '@fusion.dev/helix-headless/accordion'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-accordion>\n <helix-headless-accordion-item default-open>\n <span slot=\"summary\">Shipping</span>\n Orders ship within two business days. You receive a tracking number by email.\n </helix-headless-accordion-item>\n <helix-headless-accordion-item>\n <span slot=\"summary\">Returns</span>\n You can return an item within 30 days.\n </helix-headless-accordion-item>\n </helix-headless-accordion>\n )\n}"}],"announcement":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-announcement {\n align-items: center;\n background-color: var(--_gray-subtle);\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n inline-size: 100%;\n line-height: 1.5;\n min-block-size: 3rem;\n padding: 0.5rem 1.5rem;\n position: relative;\n}\n\nhelix-headless-announcement[tone]:not([tone=\"neutral\"]) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-announcement::part(content) {\n flex: 1 1 auto;\n min-inline-size: 0;\n text-align: center;\n}\n\nhelix-headless-announcement[dismissible]::part(content) {\n padding-inline: 2rem;\n}\n\nhelix-headless-announcement::part(actions) {\n align-items: center;\n display: flex;\n flex: none;\n gap: 0.5rem;\n}\n\nhelix-headless-announcement [slot=\"actions\"] {\n margin-inline-start: 1rem;\n}\n\nhelix-headless-announcement::part(dismiss) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.5rem;\n inset-inline-end: 1.5rem;\n justify-content: center;\n position: absolute;\n}\n\nhelix-headless-announcement::part(dismiss):hover {\n background-color: var(--_gray-line);\n color: var(--_gray-strong);\n}\n\nhelix-headless-announcement::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-announcement::part(dismiss-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-announcement::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same announcement on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-announcement\n dismissible\n tone=\"info\"\n>\n Scheduled maintenance begins on Sunday at 10 PM.\n</helix-headless-announcement>","imports":["import '@fusion.dev/helix-headless/announcement'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-announcement\n dismissible\n tone=\"info\"\n >\n Scheduled maintenance begins on Sunday at 10 PM.\n </helix-headless-announcement>\n )\n}"}],"app-header":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-app-header {\n color: var(--_gray-strong);\n container-type: inline-size;\n display: block;\n font-size: 0.875rem;\n inline-size: 100%;\n line-height: 1.5;\n}\n\nhelix-headless-app-header::part(row) {\n align-items: center;\n block-size: 3.5rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);\n margin-inline: auto;\n max-inline-size: 72rem;\n padding-inline: 1.5rem;\n}\n\nhelix-headless-app-header::part(start) {\n align-items: center;\n display: flex;\n min-inline-size: 0;\n}\n\nhelix-headless-app-header [slot=\"start\"] {\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n\nhelix-headless-app-header::part(content) {\n align-items: center;\n display: flex;\n justify-content: safe center;\n min-inline-size: 0;\n}\n\n@container (inline-size < 24rem) {\n helix-headless-app-header::part(row) {\n gap: 1rem;\n padding-inline: 1rem;\n }\n}\n\nhelix-headless-app-header::part(end) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n min-inline-size: 0;\n}\n\nhelix-headless-navigation {\n min-inline-size: 0;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n z-index: 0;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n inline-size: 2rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1rem;\n display: inline-flex;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}","description":"The same app header on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-app-header>\n <span slot=\"start\">Logo</span>\n <helix-headless-navigation label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >Overview</a>\n <a href=\"#two\">Projects</a>\n </helix-headless-navigation>\n\n <helix-headless-icon-button\n label=\"Search\"\n slot=\"end\"\n >\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button\n label=\"Settings\"\n slot=\"end\"\n >\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-app-header>","imports":["import '@fusion.dev/helix-headless/app-header'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'","import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-app-header>\n {' '}\n <span slot=\"start\">Logo</span>{' '}\n <helix-headless-navigation label=\"Sections\">\n {' '}\n <a\n aria-current=\"page\"\n href=\"#one\"\n >\n Overview\n </a>{' '}\n <a href=\"#two\">Projects</a>{' '}\n </helix-headless-navigation>{' '}\n <helix-headless-icon-button\n label=\"Search\"\n slot=\"end\"\n >\n {' '}\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n <helix-headless-icon-button\n label=\"Settings\"\n slot=\"end\"\n >\n {' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n </helix-headless-app-header>\n )\n}"}],"area-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-area-chart {\n --chart-series-1: var(--_gray-mark);\n --chart-series-2: var(--_gray-line);\n --chart-series-3: var(--_gray-fill);\n --chart-series-4: var(--_gray-subtle);\n\n display: grid;\n font-size: 0.875rem;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-area-chart::part(plot) {\n block-size: 12em;\n cursor: crosshair;\n position: relative;\n}\n\nhelix-headless-area-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-area-chart::part(area) {\n fill: var(--chart-series);\n stroke: none;\n}\n\nhelix-headless-area-chart::part(line) {\n stroke: var(--_gray-muted);\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(baseline),\nhelix-headless-area-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(guide) {\n stroke: var(--_gray-muted);\n stroke-dasharray: 3 3;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-area-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-area-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-area-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-area-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inline-size: max-content;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-area-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-area-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-area-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-area-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series);\n block-size: 0.5em;\n border-radius: 9999px;\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-area-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-area-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-area-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-area-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The area chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"visits\"\n >\n <caption>Visits a month by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Search</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Referral</th>\n <th scope=\"col\">Social</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"420\">420</td>\n <td data-value=\"180\">180</td>\n <td data-value=\"90\">90</td>\n <td data-value=\"60\">60</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"460\">460</td>\n <td data-value=\"190\">190</td>\n <td data-value=\"95\">95</td>\n <td data-value=\"70\">70</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"510\">510</td>\n <td data-value=\"200\">200</td>\n <td data-value=\"110\">110</td>\n <td data-value=\"85\">85</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"540\">540</td>\n <td data-value=\"205\">205</td>\n <td data-value=\"120\">120</td>\n <td data-value=\"110\">110</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"600\">600</td>\n <td data-value=\"215\">215</td>\n <td data-value=\"118\">118</td>\n <td data-value=\"140\">140</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"650\">650</td>\n <td data-value=\"220\">220</td>\n <td data-value=\"125\">125</td>\n <td data-value=\"170\">170</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-area-chart for=\"visits\"></helix-headless-area-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/area-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"visits\"\n >\n <caption>Visits a month by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Search</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Referral</th>\n <th scope=\"col\">Social</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"420\">420</td>\n <td data-value=\"180\">180</td>\n <td data-value=\"90\">90</td>\n <td data-value=\"60\">60</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"460\">460</td>\n <td data-value=\"190\">190</td>\n <td data-value=\"95\">95</td>\n <td data-value=\"70\">70</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"510\">510</td>\n <td data-value=\"200\">200</td>\n <td data-value=\"110\">110</td>\n <td data-value=\"85\">85</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"540\">540</td>\n <td data-value=\"205\">205</td>\n <td data-value=\"120\">120</td>\n <td data-value=\"110\">110</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"600\">600</td>\n <td data-value=\"215\">215</td>\n <td data-value=\"118\">118</td>\n <td data-value=\"140\">140</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"650\">650</td>\n <td data-value=\"220\">220</td>\n <td data-value=\"125\">125</td>\n <td data-value=\"170\">170</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-area-chart for=\"visits\"></helix-headless-area-chart>\n </div>\n )\n}"}],"avatar":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-avatar {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2rem;\n border-radius: 9999px;\n color: var(--_gray-strong);\n display: inline-flex;\n flex: none;\n inline-size: 2rem;\n justify-content: center;\n overflow: hidden;\n}\n\nhelix-headless-avatar::part(image) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-avatar::part(initials) {\n font-size: 0.8rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n line-height: 1;\n user-select: none;\n}","description":"The avatar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-avatar name=\"Jane Doe\"></helix-headless-avatar>","imports":["import '@fusion.dev/helix-headless/avatar'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-avatar name=\"Jane Doe\"></helix-headless-avatar>\n}"}],"badge":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-badge {\n display: inline-flex;\n position: relative;\n vertical-align: middle;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n inline-size: 2.5rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-badge::part(indicator) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 1rem;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px Canvas;\n box-sizing: border-box;\n color: var(--_gray-surface);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 600;\n inset-block-start: 8px;\n inset-inline-end: 8px;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1rem;\n padding-inline: 0.25rem;\n pointer-events: none;\n position: absolute;\n translate: 50% -50%;\n white-space: nowrap;\n}","description":"The badge on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-badge\n label=\"3 unread\"\n value=\"3\"\n>\n <helix-headless-icon-button label=\"Notifications\">\n <helix-headless-icon name=\"bell\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-badge>","imports":["import '@fusion.dev/helix-headless/badge'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-badge\n label=\"3 unread\"\n value=\"3\"\n >\n <helix-headless-icon-button label=\"Notifications\">\n <helix-headless-icon name=\"bell\"></helix-headless-icon>\n </helix-headless-icon-button>\n </helix-headless-badge>\n )\n}"}],"bar-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-bar-chart {\n --chart-series-1: var(--_gray-mark);\n --chart-series-2: var(--_gray-line);\n --chart-series-3: var(--_gray-fill);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-strong);\n --chart-series-6: var(--_gray-subtle);\n\n display: grid;\n font-size: 0.875rem;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(plot) {\n block-size: 12em;\n cursor: crosshair;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-bar-chart::part(bar) {\n clip-path: inset(0);\n fill: var(--chart-series, var(--chart-series-1));\n}\n\n/* Rounded at the far end only, the end away from zero, so a stack meets square\n at its joins and a bar below zero meets the baseline square. */\nhelix-headless-bar-chart::part(bar-end) {\n clip-path: inset(0 round 2px 2px 0 0);\n}\n\nhelix-headless-bar-chart::part(bar-end-negative) {\n clip-path: inset(0 round 0 0 2px 2px);\n}\n\nhelix-headless-bar-chart::part(baseline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(band) {\n fill: var(--_gray-subtle);\n}\n\nhelix-headless-bar-chart::part(line) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-bar-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-bar-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(axis) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n pointer-events: none;\n position: relative;\n}\n\nhelix-headless-bar-chart::part(tick) {\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-bar-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inline-size: max-content;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-bar-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-bar-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-bar-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-bar-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series);\n block-size: 0.5em;\n border-radius: 9999px;\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-bar-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-bar-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-bar-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-bar-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same bar chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"revenue\"\n >\n <caption>Revenue by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Revenue</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"128000\">$128k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"141000\">$141k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"96000\">$96k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"164000\">$164k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"revenue\"></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by channel</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Partner</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td>84</td>\n <td>36</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td>92</td>\n <td>51</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td>70</td>\n <td>44</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td>101</td>\n <td>63</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart\n for=\"signups\"\n stacked\n ></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"net\"\n >\n <caption>Net cash by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Net</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"12000\">+$12k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"-8000\">-$8k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"5000\">+$5k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"-14000\">-$14k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"net\"></helix-headless-bar-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/bar-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"revenue\"\n >\n <caption>Revenue by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Revenue</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"128000\">$128k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"141000\">$141k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"96000\">$96k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"164000\">$164k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"revenue\"></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by channel</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Direct</th>\n <th scope=\"col\">Partner</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td>84</td>\n <td>36</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td>92</td>\n <td>51</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td>70</td>\n <td>44</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td>101</td>\n <td>63</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart\n for=\"signups\"\n stacked\n ></helix-headless-bar-chart>\n <table\n data-hidden-visually\n id=\"net\"\n >\n <caption>Net cash by quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Quarter</th>\n <th scope=\"col\">Net</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Q1</th>\n <td data-value=\"12000\">+$12k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q2</th>\n <td data-value=\"-8000\">-$8k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q3</th>\n <td data-value=\"5000\">+$5k</td>\n </tr>\n <tr>\n <th scope=\"row\">Q4</th>\n <td data-value=\"-14000\">-$14k</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-bar-chart for=\"net\"></helix-headless-bar-chart>\n </div>\n )\n}"}],"blockquote":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-blockquote {\n color: var(--_gray-muted);\n display: block;\n font-size: 1.5rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 1.2;\n}\n\nhelix-headless-blockquote::part(figure) {\n margin: 0;\n}\n\nhelix-headless-blockquote::part(blockquote) {\n display: block;\n margin: 0;\n}\n\nhelix-headless-blockquote::part(attribution) {\n color: var(--_gray-muted);\n display: block;\n font-size: 0.8125rem;\n font-weight: 400;\n letter-spacing: normal;\n line-height: 1.5;\n margin-block-start: 0.75rem;\n}","description":"The blockquote on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-blockquote cite=\"https://example.com/source\">\n Our team moved every project into the new workspace in one afternoon.\n Weekly reports that took a day to prepare now take a few minutes.\n <span slot=\"attribution\">Maria Lopez, operations manager</span>\n</helix-headless-blockquote>","imports":["import '@fusion.dev/helix-headless/blockquote'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-blockquote cite=\"https://example.com/source\">\n Our team moved every project into the new workspace in one afternoon. Weekly reports that took\n a day to prepare now take a few minutes.\n <span slot=\"attribution\">Maria Lopez, operations manager</span>\n </helix-headless-blockquote>\n )\n}"}],"breadcrumbs":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-breadcrumbs::part(list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-breadcrumb {\n align-items: center;\n display: inline-flex;\n font-weight: 500;\n gap: 0.5rem;\n}\n\nhelix-headless-breadcrumb::part(separator) {\n color: var(--_gray-mark);\n display: block;\n user-select: none;\n}\n\nhelix-headless-breadcrumb:first-child::part(separator) {\n display: none;\n}\n\nhelix-headless-breadcrumb::part(separator-mark) {\n block-size: 1em;\n inline-size: 1em;\n vertical-align: calc(0.5cap - 0.5em);\n}\n\nhelix-headless-breadcrumb::part(link) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n gap: 0.25rem;\n text-decoration: none;\n}\n\nhelix-headless-breadcrumb[current]::part(link) {\n color: var(--_gray-strong);\n padding-inline: 0.5rem;\n}\n\nhelix-headless-breadcrumb a {\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n padding: 0.25rem 0.5rem;\n text-decoration: none;\n}\n\nhelix-headless-breadcrumb:first-child a {\n margin-inline-start: -0.5rem;\n}\n\nhelix-headless-breadcrumb a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-breadcrumb a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The breadcrumbs on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-breadcrumbs aria-label=\"Breadcrumb\">\n <helix-headless-breadcrumb><a\n data-link=\"quiet\"\n href=\"/\"\n >Home</a></helix-headless-breadcrumb>\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/section\"\n >Projects</a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb current>Website redesign</helix-headless-breadcrumb>\n</helix-headless-breadcrumbs>","imports":["import '@fusion.dev/helix-headless/breadcrumbs'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-breadcrumbs aria-label=\"Breadcrumb\">\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/\"\n >\n Home\n </a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb>\n <a\n data-link=\"quiet\"\n href=\"/section\"\n >\n Projects\n </a>\n </helix-headless-breadcrumb>\n <helix-headless-breadcrumb current>Website redesign</helix-headless-breadcrumb>\n </helix-headless-breadcrumbs>\n )\n}"}],"button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button {\n display: inline-flex;\n max-inline-size: 100%;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(:disabled)::part(button):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-button:disabled::part(button) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button>Save changes</helix-headless-button>","imports":["import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-button>Save changes</helix-headless-button>\n}"}],"button-group":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group {\n display: inline-flex;\n}\n\nhelix-headless-button-group > helix-headless-button:not(:first-child) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-button-group > helix-headless-button:first-child::part(button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same button group on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group label=\"Calendar view\">\n <helix-headless-button>Day</helix-headless-button>\n <helix-headless-button>Week</helix-headless-button>\n <helix-headless-button>Month</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group label=\"Calendar view\">\n <helix-headless-button>Day</helix-headless-button>\n <helix-headless-button>Week</helix-headless-button>\n <helix-headless-button>Month</helix-headless-button>\n </helix-headless-button-group>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group {\n display: inline-flex;\n}\n\nhelix-headless-button-group > helix-headless-button:not(:first-child) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-button-group > helix-headless-button:first-child::part(button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\n/* The group writes `--button-group-pressed` on each toggle's control: 1 while\n it is pressed and 0 while it is not. */\nhelix-headless-button-group[selection-mode] > helix-headless-button::part(button) {\n background-color: color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-subtle)\n );\n color: color-mix(\n in oklab,\n var(--_gray-surface) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-strong)\n );\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-button-group[selection-mode] > helix-headless-button::part(button):hover {\n background-color: color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--button-group-pressed, 0) * 100%),\n var(--_gray-fill)\n );\n}","description":"A calendar view that stays pressed, set with `selection-mode`, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group\n label=\"Calendar view\"\n selection-mode=\"single\"\n value=\"week\"\n>\n <helix-headless-button value=\"day\">Day</helix-headless-button>\n <helix-headless-button value=\"week\">Week</helix-headless-button>\n <helix-headless-button value=\"month\">Month</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Selection","renders":[],"slug":"selection","tier":"headless","tsx":"import './selection.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group\n label=\"Calendar view\"\n selection-mode=\"single\"\n value=\"week\"\n >\n <helix-headless-button value=\"day\">Day</helix-headless-button>\n <helix-headless-button value=\"week\">Week</helix-headless-button>\n <helix-headless-button value=\"month\">Month</helix-headless-button>\n </helix-headless-button-group>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"] {\n align-items: stretch;\n display: inline-flex;\n flex-direction: column;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"] > helix-headless-button:not(:first-child) {\n margin-block-start: -1px;\n}\n\nhelix-headless-button-group[orientation=\"vertical\"]\n > helix-headless-button:first-child::part(button) {\n border-start-end-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group[orientation=\"vertical\"]\n > helix-headless-button:last-child::part(button) {\n border-end-end-radius: var(--_radius-control);\n border-end-start-radius: var(--_radius-control);\n}\n\nhelix-headless-button-group > helix-headless-button:hover,\nhelix-headless-button-group > helix-headless-button:focus-within {\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The joined buttons stacked vertically, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button-group\n label=\"Export\"\n orientation=\"vertical\"\n>\n <helix-headless-button>Download CSV</helix-headless-button>\n <helix-headless-button>Download JSON</helix-headless-button>\n <helix-headless-button>Copy to clipboard</helix-headless-button>\n</helix-headless-button-group>","imports":["import '@fusion.dev/helix-headless/button-group'","import '@fusion.dev/helix-headless/button'"],"label":"Vertical","renders":[],"slug":"vertical","tier":"headless","tsx":"import './vertical.css'\n\nexport function Example() {\n return (\n <helix-headless-button-group\n label=\"Export\"\n orientation=\"vertical\"\n >\n <helix-headless-button>Download CSV</helix-headless-button>\n <helix-headless-button>Download JSON</helix-headless-button>\n <helix-headless-button>Copy to clipboard</helix-headless-button>\n </helix-headless-button-group>\n )\n}"}],"callout":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-callout {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.75rem;\n overflow: hidden;\n padding: 1rem;\n padding-inline-start: calc(1rem + 2px);\n position: relative;\n}\n\nhelix-headless-callout::before {\n background-color: var(--_gray-muted);\n content: \"\";\n inline-size: 2px;\n inset-block: 0;\n inset-inline-start: 0;\n position: absolute;\n}\n\nhelix-headless-callout::part(icon) {\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-callout::part(icon-mark) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-callout::part(content) {\n line-height: 1.5;\n min-inline-size: 0;\n}\n\nhelix-headless-callout [slot=\"heading\"] {\n display: block;\n font-weight: 600;\n margin: 0;\n}","description":"The callout on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-callout tone=\"info\">\n Invoices are sent by email on the first day of each month.\n</helix-headless-callout>","imports":["import '@fusion.dev/helix-headless/callout'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-callout tone=\"info\">\n Invoices are sent by email on the first day of each month.\n </helix-headless-callout>\n )\n}"}],"canvas":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n properties, and each card's place in the card's own shadow root, which sets\n them on the card, so positioning is a read. */\nhelix-headless-canvas::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: auto 1fr auto;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-canvas::part(viewport) {\n cursor: grab;\n min-block-size: 0;\n overflow: hidden;\n position: relative;\n touch-action: none;\n}\n\nhelix-headless-canvas:state(pressing)::part(viewport) {\n user-select: none;\n}\n\nhelix-headless-canvas::part(board) {\n block-size: var(--_canvas-plane-block-size);\n inline-size: var(--_canvas-plane-inline-size);\n inset: 0;\n position: absolute;\n transform: translate(var(--_canvas-x), var(--_canvas-y)) scale(var(--_canvas-zoom));\n transform-origin: 0 0;\n}\n\nhelix-headless-canvas::part(edges) {\n inset: 0;\n overflow: visible;\n position: absolute;\n z-index: -1;\n}\n\nhelix-headless-canvas::part(edge) {\n pointer-events: none;\n stroke: var(--_gray-line);\n stroke-width: 2px;\n}\n\nhelix-headless-canvas::part(edge-target) {\n cursor: pointer;\n pointer-events: stroke;\n stroke: transparent;\n stroke-width: 12px;\n}\n\nhelix-headless-canvas::part(arrow) {\n fill: var(--_gray-line);\n}\n\nhelix-headless-canvas::part(label) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n left: var(--_canvas-label-x);\n line-height: 1;\n padding: 0.25rem;\n pointer-events: none;\n position: absolute;\n top: var(--_canvas-label-y);\n transform: translate(-50%, -50%);\n white-space: nowrap;\n}\n\nhelix-headless-canvas::part(draft) {\n stroke: var(--_gray-mark);\n stroke-dasharray: 6 4;\n stroke-width: 2px;\n}\n\nhelix-headless-canvas::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-canvas::part(controls) {\n display: grid;\n gap: 0.25rem;\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-canvas::part(zoom-in-button),\nhelix-headless-canvas::part(zoom-out-button),\nhelix-headless-canvas::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\n/* A card is placed from the coordinates the board wrote onto it. */\nhelix-headless-canvas-node {\n background-color: var(--_gray-surface);\n block-size: var(--_canvas-card-block-size);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n font-size: 0.875rem;\n inline-size: var(--_canvas-card-inline-size);\n left: var(--_canvas-card-x);\n position: absolute;\n top: var(--_canvas-card-y);\n}\n\nhelix-headless-canvas-node::part(node) {\n block-size: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n padding: 0.75rem;\n}\n\nhelix-headless-canvas-node::part(node):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-canvas-node::part(handle) {\n background-color: var(--_gray-surface);\n block-size: 0.625rem;\n border: 2px solid var(--_gray-mark);\n border-radius: 50%;\n box-sizing: border-box;\n cursor: crosshair;\n inline-size: 0.625rem;\n opacity: 0;\n position: absolute;\n transform: translate(-50%, -50%);\n}\n\nhelix-headless-canvas-node:hover::part(handle),\nhelix-headless-canvas-node:focus-within::part(handle) {\n opacity: 1;\n}\n\nhelix-headless-canvas-node::part(handle-top) {\n left: 50%;\n top: 0;\n}\n\nhelix-headless-canvas-node::part(handle-right) {\n left: 100%;\n top: 50%;\n}\n\nhelix-headless-canvas-node::part(handle-bottom) {\n left: 50%;\n top: 100%;\n}\n\nhelix-headless-canvas-node::part(handle-left) {\n left: 0;\n top: 50%;\n}\n\nhelix-headless-canvas::part(label-editor) {\n box-sizing: border-box;\n font: inherit;\n font-size: 0.75rem;\n inline-size: 12rem;\n left: var(--_canvas-editor-x);\n position: absolute;\n top: var(--_canvas-editor-y);\n transform: translate(-50%, -50%);\n z-index: 1;\n}\n\nhelix-headless-canvas-node:state(selected) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same board on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-canvas label=\"Document approval\">\n <helix-headless-canvas-node\n height=\"64\"\n name=\"write\"\n width=\"160\"\n x=\"0\"\n y=\"0\"\n >Write the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height=\"64\"\n name=\"review\"\n width=\"160\"\n x=\"320\"\n y=\"0\"\n >Review the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height=\"64\"\n name=\"ship\"\n width=\"160\"\n x=\"160\"\n y=\"192\"\n >Publish the draft</helix-headless-canvas-node>\n\n <helix-headless-canvas-edge\n from=\"write\"\n label=\"when it is complete\"\n to=\"review\"\n ></helix-headless-canvas-edge>\n\n <helix-headless-canvas-edge\n from=\"review\"\n to=\"ship\"\n ></helix-headless-canvas-edge>\n</helix-headless-canvas>","imports":["import '@fusion.dev/helix-headless/canvas'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-canvas label=\"Document approval\">\n <helix-headless-canvas-node\n height={64}\n name=\"write\"\n width={160}\n x={0}\n y={0}\n >\n Write the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height={64}\n name=\"review\"\n width={160}\n x={320}\n y={0}\n >\n Review the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-node\n height={64}\n name=\"ship\"\n width={160}\n x={160}\n y={192}\n >\n Publish the draft\n </helix-headless-canvas-node>\n\n <helix-headless-canvas-edge\n from=\"write\"\n label=\"when it is complete\"\n to=\"review\"\n ></helix-headless-canvas-edge>\n\n <helix-headless-canvas-edge\n from=\"review\"\n to=\"ship\"\n ></helix-headless-canvas-edge>\n </helix-headless-canvas>\n )\n}"}],"card":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-card {\n align-content: start;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: grid;\n font-size: 0.875rem;\n gap: 0.75rem;\n grid-template-columns: minmax(0, 1fr);\n line-height: 1.5;\n overflow: hidden;\n padding: 1rem;\n}\n\nhelix-headless-card > [slot=\"header\"] {\n color: var(--_gray-strong);\n margin: 0;\n}\n\nhelix-headless-card > [slot=\"footer\"] {\n justify-self: end;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-family: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same card on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-card aria-labelledby=\"card-title\">\n <h3\n id=\"card-title\"\n slot=\"header\"\n >Storage</h3>\n You have used 8 GB of the 10 GB in your plan. Delete old files or upgrade to add space.\n <helix-headless-button slot=\"footer\">Manage storage</helix-headless-button>\n</helix-headless-card>","imports":["import '@fusion.dev/helix-headless/card'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-card aria-labelledby=\"card-title\">\n <h3\n id=\"card-title\"\n slot=\"header\"\n >\n Storage\n </h3>\n You have used 8 GB of the 10 GB in your plan. Delete old files or upgrade to add space.\n <helix-headless-button slot=\"footer\">Manage storage</helix-headless-button>\n </helix-headless-card>\n )\n}"}],"carousel":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-carousel {\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\nhelix-headless-carousel::part(track) {\n display: flex;\n gap: 1rem;\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 0 0 100%;\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same carousel on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel label=\"Folders\">\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel label=\"Folders\">\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n </helix-headless-carousel>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The narrowest a card may be laid out, which is the whole of what this\n carousel is told. Nothing says how many go across: the rule below works that\n out from the room the track was given, which is what `per-view=\"auto\"` means\n and why it needs no script. */\nhelix-headless-carousel {\n --carousel-gap: 1rem;\n --carousel-slide-min: 12rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\n/* The count, which under `auto` the component does not hand over: how many\n boxes of at least the minimum, with a gap between each pair, fit the room the\n track has. A gap belongs to every pane but the last, so a gap added to the\n room and divided by a pane and a gap comes out whole. `max(1, ...)` is the\n clamp: dividing by zero would take the pane's `flex` down with it.\n\n `cqi` rather than `100%`, because a percentage cannot be a divisor, and\n `container-type` is what makes the unit mean this track rather than the\n viewport. The share below is then the same rule a declared count reads,\n unchanged: the count is a `round()` here rather than a digit. */\nhelix-headless-carousel::part(track) {\n --carousel-per-view: max(\n 1,\n round(\n down,\n calc((100cqi + var(--carousel-gap)) / (var(--carousel-slide-min) + var(--carousel-gap))),\n 1\n )\n );\n --_share: calc(\n (100% - (var(--carousel-per-view, 1) - 1) * var(--carousel-gap)) /\n var(--carousel-per-view, 1)\n );\n /* An odd sixty-fourth of a pixel, which is the unit layout keeps: a pane on an\n exact half rests a pixel apart in the two writing directions. */\n --carousel-pane: calc(round(var(--_share) - 0.015625px, 0.03125px) + 0.015625px);\n container-type: inline-size;\n display: flex;\n gap: var(--carousel-gap);\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\n/* The share where the run overflows, and the slack where it does not: a track\n holding fewer cards than it fits would otherwise leave the rest of the row\n empty. A run that overflows has no slack to give, so this moves nothing\n there. */\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 1 0 var(--carousel-pane);\n margin-inline-end: var(--carousel-run-end, 0px);\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"As many slides across as the track holds, set by a minimum slide width with no count.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel\n label=\"Folders\"\n per-view=\"auto\"\n>\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n <helix-headless-card>Templates</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"As Many As Fit","renders":[],"slug":"as-many-as-fit","tier":"headless","tsx":"import './as-many-as-fit.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel\n label=\"Folders\"\n per-view=\"auto\"\n >\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n <helix-headless-card>Templates</helix-headless-card>\n </helix-headless-carousel>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-carousel {\n --carousel-gap: 1rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n}\n\nhelix-headless-carousel::part(track) {\n --_share: calc(\n (100% - (var(--carousel-per-view, 1) - 1) * var(--carousel-gap)) /\n var(--carousel-per-view, 1)\n );\n /* An odd sixty-fourth of a pixel, which is the unit layout keeps: a pane on an\n exact half rests a pixel apart in the two writing directions. */\n --carousel-pane: calc(round(var(--_share) - 0.015625px, 0.03125px) + 0.015625px);\n display: flex;\n gap: var(--carousel-gap);\n grid-area: 2 / 2;\n overflow-x: auto;\n padding: 1rem;\n scroll-padding-inline: 1rem;\n scroll-snap-type: x mandatory;\n scrollbar-width: none;\n}\n\nhelix-headless-carousel::part(slide) {\n display: flex;\n flex: 0 0 var(--carousel-pane);\n margin-inline-end: var(--carousel-run-end, 0px);\n scroll-snap-align: start;\n}\n\nhelix-headless-carousel > * {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n}\n\nhelix-headless-card {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-muted);\n display: block;\n padding: 1rem;\n}\n\nhelix-headless-carousel::part(controls),\nhelix-headless-carousel::part(indicators) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n grid-area: 3 / 2;\n padding: 0.75rem 1rem 0;\n}\n\nhelix-headless-carousel::part(indicators) {\n justify-self: start;\n}\n\nhelix-headless-carousel::part(controls) {\n justify-self: end;\n}\n\nhelix-headless-carousel::part(previous),\nhelix-headless-carousel::part(next),\nhelix-headless-carousel::part(rotation) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-carousel::part(previous):hover,\nhelix-headless-carousel::part(next):hover,\nhelix-headless-carousel::part(rotation):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-carousel::part(previous-mark),\nhelix-headless-carousel::part(next-mark),\nhelix-headless-carousel::part(rotation-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-carousel::part(indicator) {\n all: unset;\n background-color: var(--_gray-mark);\n block-size: 0.5rem;\n border-radius: 9999px;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: 0.5rem;\n}\n\nhelix-headless-carousel::part(indicator-current) {\n background-color: var(--_gray-strong);\n inline-size: 1.5rem;\n}\n\nhelix-headless-carousel::part(indicator):hover {\n background-color: var(--_gray-muted);\n}\n\nhelix-headless-carousel::part(previous):focus-visible,\nhelix-headless-carousel::part(next):focus-visible,\nhelix-headless-carousel::part(rotation):focus-visible,\nhelix-headless-carousel::part(indicator):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-carousel::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Three slides across, with the pane, the gap, and the run's end written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-carousel\n label=\"Folders\"\n per-view=\"3\"\n>\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n</helix-headless-carousel>","imports":["import '@fusion.dev/helix-headless/carousel'","import '@fusion.dev/helix-headless/card'"],"label":"Several Across","renders":[],"slug":"several-across","tier":"headless","tsx":"import './several-across.css'\n\nexport function Example() {\n return (\n <helix-headless-carousel\n label=\"Folders\"\n per-view=\"3\"\n >\n <helix-headless-card>Reports</helix-headless-card>\n <helix-headless-card>Invoices</helix-headless-card>\n <helix-headless-card>Contracts</helix-headless-card>\n <helix-headless-card>Receipts</helix-headless-card>\n <helix-headless-card>Proposals</helix-headless-card>\n </helix-headless-carousel>\n )\n}"}],"chat":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-chat {\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.875rem;\n grid-template-rows: auto minmax(0, 1fr) auto auto auto;\n line-height: 1.5;\n min-block-size: 0;\n}\n\nhelix-headless-chat::part(header) {\n grid-row: 1;\n}\n\nhelix-headless-chat::part(log) {\n grid-row: 2;\n}\n\nhelix-headless-chat::part(resume) {\n grid-row: 3;\n}\n\nhelix-headless-chat::part(status) {\n grid-row: 4;\n}\n\nhelix-headless-chat::part(composer) {\n grid-row: 5;\n}\n\nhelix-headless-chat:has(> [slot=\"header\"], > [slot=\"actions\"])::part(header) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n}\n\nhelix-headless-chat::part(header) {\n border-block-end: 1px solid var(--_gray-edge);\n min-block-size: 2.5rem;\n padding: 0.25rem 1rem;\n}\n\nhelix-headless-chat::part(log) {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n justify-content: safe flex-end;\n overflow-y: auto;\n padding: 1rem;\n}\n\nhelix-headless-chat::part(resume) {\n margin-block-start: -2rem;\n pointer-events: none;\n position: relative;\n text-align: center;\n}\n\nhelix-headless-chat::part(status) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.5rem 1rem 0.25rem;\n}\n\nhelix-headless-chat::part(composer) {\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-chat::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-chat-message {\n display: block;\n}\n\nhelix-headless-chat-message::part(message) {\n align-items: start;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n}\n\nhelix-headless-chat-message::part(avatar) {\n align-items: center;\n display: flex;\n font-size: 0.8125rem;\n grid-column: 1;\n line-height: 1.5;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(avatar) {\n display: none;\n}\n\nhelix-headless-chat-message::part(body) {\n display: grid;\n gap: 0.25rem;\n grid-column: 2;\n justify-items: start;\n max-inline-size: min(42rem, 80%);\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(body) {\n justify-items: end;\n justify-self: end;\n}\n\nhelix-headless-chat-message::part(content) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n inline-size: fit-content;\n line-height: 1.5;\n max-inline-size: 100%;\n min-inline-size: 0;\n overflow-x: auto;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(content) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-chat-message[state=\"sending\"]::part(content) {\n opacity: 0.6;\n}\n\nhelix-headless-chat-message::part(meta) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n gap: 0.25rem;\n}\n\nhelix-headless-chat-message[author=\"me\"]::part(meta) {\n justify-content: flex-end;\n}\n\nhelix-headless-chat-message[state=\"failed\"]::part(meta) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-chat-message::part(state) {\n align-items: center;\n display: inline-flex;\n font-weight: 500;\n gap: 0.25rem;\n}\n\nhelix-headless-chat-message::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-chat-message::part(retry) {\n background: none;\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n font: inherit;\n font-weight: 500;\n margin-inline-end: -0.25rem;\n min-block-size: 1.75rem;\n padding: 0.25rem;\n text-decoration: underline;\n text-underline-offset: 0.2em;\n}\n\nhelix-headless-chat-message::part(retry):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-chat-message::part(actions) {\n opacity: 0;\n}\n\nhelix-headless-chat-message:hover::part(actions),\nhelix-headless-chat-message:focus-within::part(actions) {\n opacity: 1;\n}\n\nhelix-headless-chat-message::part(sources) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n}\n\nhelix-headless-chat-composer {\n display: block;\n}\n\nhelix-headless-chat-composer::part(composer) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n display: grid;\n gap: 0.25rem;\n padding: 0.5rem;\n}\n\nhelix-headless-chat-composer::part(composer):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-chat-composer::part(field) {\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n field-sizing: content;\n font: inherit;\n font-size: 0.8125rem;\n line-height: 1.5;\n max-block-size: 12rem;\n padding: 0.25rem calc(0.25rem - 1px);\n resize: none;\n}\n\nhelix-headless-chat-composer::part(field):focus-visible {\n outline: none;\n}\n\nhelix-headless-chat-composer::part(tools) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n justify-content: flex-end;\n}\n\nhelix-headless-chat-composer::part(start) {\n margin-inline-end: auto;\n}\n\nhelix-headless-chat-composer::part(send) {\n align-items: center;\n background-color: transparent;\n block-size: 1.75rem;\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.75rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-chat-composer::part(send):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-chat-composer::part(send):disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-chat-composer::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-chat-message::part(retry):focus-visible,\nhelix-headless-chat-composer::part(send):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"A conversation with the four states a turn can be in, and a composer under it.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-chat\n id=\"raw\"\n label=\"Support\"\n>\n <strong slot=\"header\">Support</strong>\n\n <helix-headless-chat-message\n author=\"them\"\n author-label=\"Support\"\n state=\"sent\"\n >\n How can I help?\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"sent\"\n >\n The deploy is stuck on the migration step.\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"them\"\n author-label=\"Support\"\n state=\"streaming\"\n >\n I am checking the migration now\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"failed\"\n >\n Thanks\n </helix-headless-chat-message>\n\n <span slot=\"status\">Support is typing</span>\n\n <helix-headless-chat-composer\n placeholder=\"Write a message\"\n slot=\"composer\"\n ></helix-headless-chat-composer>\n</helix-headless-chat>\n\n<script>\n const raw = document.getElementById('raw')\n const ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString()\n const turns = raw.querySelectorAll('helix-headless-chat-message')\n turns[0].at = ago(6)\n turns[1].at = ago(4)\n turns[2].at = ago(1)\n\n raw.addEventListener('helix-send', (event) => {\n const turn = document.createElement('helix-headless-chat-message')\n turn.setAttribute('author', 'me')\n turn.setAttribute('state', 'sent')\n turn.at = new Date().toISOString()\n turn.textContent = event.detail.value\n raw.append(turn)\n })\n</script>","imports":["import '@fusion.dev/helix-headless/chat'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import { useEffect, useState } from 'react'\nimport './preview.css'\n\nconst ago = (minutes: number): string => new Date(Date.now() - minutes * 60000).toISOString()\n\ninterface Turn {\n at: string\n body: string\n}\n\nexport function Example() {\n /* The timestamps are set after mount, so they are always a few minutes old\n and the server and the client render the same markup. */\n const [at, setAt] = useState<string[]>([])\n\n /* Each message you send is added to this list and rendered at the end of the\n transcript. */\n const [sent, setSent] = useState<Turn[]>([])\n\n useEffect(() => {\n setAt([6, 4, 1].map(ago))\n }, [])\n\n return (\n <helix-headless-chat\n label=\"Support\"\n onhelix-send={(event) =>\n setSent((all) => [...all, { at: new Date().toISOString(), body: event.detail.value }])\n }\n >\n <strong slot=\"header\">Support</strong>\n\n <helix-headless-chat-message\n at={at[0]}\n author=\"them\"\n author-label=\"Support\"\n state=\"sent\"\n >\n How can I help?\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n at={at[1]}\n author=\"me\"\n state=\"sent\"\n >\n The deploy is stuck on the migration step.\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n at={at[2]}\n author=\"them\"\n author-label=\"Support\"\n state=\"streaming\"\n >\n I am checking the migration now\n </helix-headless-chat-message>\n\n <helix-headless-chat-message\n author=\"me\"\n state=\"failed\"\n >\n Thanks\n </helix-headless-chat-message>\n\n {sent.map((turn) => (\n <helix-headless-chat-message\n at={turn.at}\n author=\"me\"\n key={turn.at}\n state=\"sent\"\n >\n {turn.body}\n </helix-headless-chat-message>\n ))}\n\n <span slot=\"status\">Support is typing</span>\n\n <helix-headless-chat-composer\n placeholder=\"Write a message\"\n slot=\"composer\"\n />\n </helix-headless-chat>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-chat {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.875rem;\n grid-template-rows: auto minmax(0, 1fr);\n line-height: 1.5;\n max-block-size: 22rem;\n min-block-size: 0;\n}\n\nhelix-headless-chat::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n display: flex;\n grid-row: 1;\n min-block-size: 2.5rem;\n padding: 0.25rem 1rem;\n}\n\nhelix-headless-chat::part(log) {\n display: flex;\n flex-direction: column;\n grid-row: 2;\n justify-content: safe flex-end;\n overflow-y: auto;\n padding: 0 1rem 1rem;\n}\n\nhelix-headless-chat::part(turn) {\n flex: none;\n padding-block-start: 1rem;\n}\n\nhelix-headless-chat::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-chat::part(message) {\n align-items: start;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n}\n\nhelix-headless-chat::part(message-avatar) {\n align-items: center;\n display: flex;\n font-size: 0.8125rem;\n grid-column: 1;\n line-height: 1.5;\n}\n\nhelix-headless-chat::part(message-avatar-mine) {\n display: none;\n}\n\nhelix-headless-chat::part(message-body) {\n display: grid;\n gap: 0.25rem;\n grid-column: 2;\n justify-items: start;\n max-inline-size: min(42rem, 80%);\n}\n\nhelix-headless-chat::part(message-body-mine) {\n justify-items: end;\n justify-self: end;\n}\n\nhelix-headless-chat::part(message-content) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n inline-size: fit-content;\n line-height: 1.5;\n max-inline-size: 100%;\n min-inline-size: 0;\n overflow-x: auto;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-chat::part(message-content-mine) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-chat::part(message-meta) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n gap: 0.25rem;\n}\n\nhelix-headless-chat::part(message-meta-mine) {\n justify-content: flex-end;\n}","description":"Two thousand turns set as data, with your own turns marked by their author.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-chat\n id=\"run\"\n label=\"Build agent\"\n>\n <strong slot=\"header\">Build agent</strong>\n</helix-headless-chat>\n\n<script type=\"module\">\n /* Steps of different lengths, so the turns have different heights. */\n const STEPS = [\n 'Installed 412 packages.',\n 'Compiled the project in 3.1 seconds.',\n 'Ran 1,589 tests. All of them passed, including the 11 that run in a browser.',\n 'Updated three screenshots. Only the settings page changed, because the save button moved to the top of the form.',\n 'Uploaded the build.',\n ]\n\n document.getElementById('run').turns = Array.from({ length: 2000 }, (_, index) => ({\n author: index % 5 === 4 ? 'me' : 'them',\n key: String(index),\n text: index % 5 === 4 ? `Continue from step ${index + 1}.` : `${index + 1}. ${STEPS[index % 5]}`,\n }))\n</script>","imports":["import '@fusion.dev/helix-headless/chat'"],"label":"Transcript","min":420,"renders":[],"slug":"transcript","tier":"headless","tsx":"import './transcript.css'\n\n/* Steps of different lengths, so the turns have different heights. */\nconst STEPS = [\n 'Installed 412 packages.',\n 'Compiled the project in 3.1 seconds.',\n 'Ran 1,589 tests. All of them passed, including the 11 that run in a browser.',\n 'Updated three screenshots. Only the settings page changed, because the save button moved to the top of the form.',\n 'Uploaded the build.',\n]\n\nconst turns = Array.from({ length: 2000 }, (_, index) => ({\n author: index % 5 === 4 ? 'me' : 'them',\n key: String(index),\n text: index % 5 === 4 ? `Continue from step ${index + 1}.` : `${index + 1}. ${STEPS[index % 5]}`,\n}))\n\nexport function Example() {\n return (\n <helix-headless-chat\n label=\"Build agent\"\n turns={turns}\n >\n <strong slot=\"header\">Build agent</strong>\n </helix-headless-chat>\n )\n}"}],"checkbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-checkbox {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox::part(box) {\n display: grid;\n flex: none;\n place-items: center;\n}\n\nhelix-headless-checkbox::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n cursor: inherit;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n margin: 0;\n}\n\nhelix-headless-checkbox:not(:disabled):hover::part(control) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(mark) {\n block-size: 1.25rem;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n pointer-events: none;\n}\n\nhelix-headless-checkbox::part(mark-indeterminate) {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E\");\n}\n\nhelix-headless-checkbox:state(checked)::part(control),\nhelix-headless-checkbox:state(indeterminate)::part(control) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(mark-checked),\nhelix-headless-checkbox::part(mark-indeterminate) {\n background-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-checkbox::part(hint),\nhelix-headless-checkbox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n padding-inline-start: 1.75rem;\n}\n\nhelix-headless-checkbox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-checkbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-checkbox:disabled::part(field) {\n cursor: not-allowed;\n}\n\nhelix-headless-checkbox::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The checkbox on the headless tier, with every style written by hand.","html":"<!-- Keep the closing tag on the same line. A newline inside the element hides the label. -->\n\n<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-checkbox\n default-checked\n hint=\"You can unsubscribe at any time.\"\n label=\"Email me about product updates\"\n name=\"option\"\n value=\"accepted\"\n></helix-headless-checkbox>","imports":["import '@fusion.dev/helix-headless/checkbox'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n {/* Keep the closing tag on the same line. A newline inside the element hides the label. */}\n\n <helix-headless-checkbox\n default-checked\n hint=\"You can unsubscribe at any time.\"\n label=\"Email me about product updates\"\n name=\"option\"\n value=\"accepted\"\n ></helix-headless-checkbox>\n </>\n )\n}"}],"checkbox-group":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-checkbox-group {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-checkbox-group::part(items) {\n align-items: start;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox-group::part(hint),\nhelix-headless-checkbox-group::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-checkbox-group::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox-group::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-checkbox {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-checkbox::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-checkbox::part(box) {\n display: grid;\n flex: none;\n place-items: center;\n}\n\nhelix-headless-checkbox::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n cursor: inherit;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n margin: 0;\n}\n\nhelix-headless-checkbox:not(:disabled):hover::part(control) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-checkbox::part(mark) {\n block-size: 1.25rem;\n grid-area: 1 / 1;\n inline-size: 1.25rem;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.7 18 8.4'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: 100%;\n pointer-events: none;\n}\n\nhelix-headless-checkbox::part(mark-indeterminate) {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E\");\n}\n\nhelix-headless-checkbox:state(checked)::part(control),\nhelix-headless-checkbox:state(indeterminate)::part(control) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(mark-checked),\nhelix-headless-checkbox::part(mark-indeterminate) {\n background-color: var(--_gray-strong);\n}\n\nhelix-headless-checkbox::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-checkbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-checkbox::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same checkbox group on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-checkbox-group\n hint=\"Choose where you receive updates.\"\n label=\"Notifications\"\n name=\"group\"\n value=\"one,two\"\n>\n <helix-headless-checkbox value=\"one\">Email</helix-headless-checkbox>\n <helix-headless-checkbox value=\"two\">Text message</helix-headless-checkbox>\n <helix-headless-checkbox value=\"three\">Mobile app</helix-headless-checkbox>\n <helix-headless-checkbox value=\"four\">Browser</helix-headless-checkbox>\n</helix-headless-checkbox-group>","imports":["import '@fusion.dev/helix-headless/checkbox-group'","import '@fusion.dev/helix-headless/checkbox'"],"label":"Preview","layout":"hug","min":240,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-checkbox-group\n hint=\"Choose where you receive updates.\"\n label=\"Notifications\"\n name=\"group\"\n value=\"one,two\"\n >\n <helix-headless-checkbox value=\"one\">Email</helix-headless-checkbox>\n <helix-headless-checkbox value=\"two\">Text message</helix-headless-checkbox>\n <helix-headless-checkbox value=\"three\">Mobile app</helix-headless-checkbox>\n <helix-headless-checkbox value=\"four\">Browser</helix-headless-checkbox>\n </helix-headless-checkbox-group>\n )\n}"}],"code":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-code {\n display: inline;\n}\n\nhelix-headless-code::part(code) {\n background-color: var(--_gray-subtle);\n border-radius: var(--_radius-control);\n color: color-mix(in oklab, var(--_gray-strong) 30%, var(--_gray-muted));\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.9286em;\n padding: 0 0.125rem;\n}","description":"Inline code on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Add <helix-headless-code>data-density</helix-headless-code> to a container to set the spacing\n of every control inside it.\n</p>","imports":["import '@fusion.dev/helix-headless/code'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n Add <helix-headless-code>data-density</helix-headless-code> to a container to set the spacing\n of every control inside it.\n </p>\n )\n}"}],"code-block":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-code-block {\n display: flex;\n flex-direction: column;\n line-height: 1.5;\n}\n\nhelix-headless-code-block::part(header) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel) var(--_radius-panel) 0 0;\n display: flex;\n gap: 0.75rem;\n padding: 0.25rem 0.25rem 0.25rem 1rem;\n}\n\nhelix-headless-code-block::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n}\n\nhelix-headless-code-block::part(frame) {\n flex: 1;\n}\n\nhelix-headless-code-block::part(block) {\n block-size: 100%;\n border: 1px solid var(--_gray-edge);\n border-block-start-width: 0;\n border-radius: 0 0 var(--_radius-panel) var(--_radius-panel);\n box-sizing: border-box;\n margin: 0;\n overflow: auto;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-code-block::part(code) {\n color: var(--_gray-strong);\n display: block;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.8125rem;\n line-height: 1.5;\n overflow-x: auto;\n}\n\nhelix-headless-code-block::part(copy) {\n margin-inline-start: auto;\n}\n\nhelix-headless-code-block::part(copy-button) {\n all: unset;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2rem;\n place-items: center;\n}\n\nhelix-headless-code-block::part(copy-button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-code-block::part(copy-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-code-block::part(copy-tooltip-surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-code-block::part(copy-tooltip-surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-code-block::part(copy-tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-code-block::part(copy-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The code block on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-code-block label=\"index.html\">&lt;helix-button emphasis=\"solid\" tone=\"primary\"&gt;Save&lt;/helix-button&gt;</helix-headless-code-block>","imports":["import '@fusion.dev/helix-headless/code-block'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-code-block label=\"index.html\">\n &lt;helix-button emphasis=\"solid\" tone=\"primary\"&gt;Save&lt;/helix-button&gt;\n </helix-headless-code-block>\n )\n}"}],"color-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-input {\n --_along: to right;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-color-input:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-color-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n overflow: hidden;\n padding-inline-start: 0.5rem;\n}\n\nhelix-headless-color-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-color-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-color-input::part(trigger) {\n all: unset;\n align-self: stretch;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n flex: none;\n}\n\nhelix-headless-color-input::part(preview) {\n background-image:\n linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border-inline-start: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n display: block;\n filter: grayscale(1);\n inline-size: 2.5rem;\n}\n\nhelix-headless-color-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: 16.5rem;\n inset: auto;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-color-input::part(picker) {\n display: block;\n padding: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-grid) {\n aspect-ratio: 1 / 0.7;\n background-image:\n linear-gradient(to top, var(--_gray-strong), transparent),\n linear-gradient(var(--_along), var(--_gray-surface), transparent),\n linear-gradient(var(--_gray-mark), var(--_gray-mark));\n border-radius: var(--_radius-control);\n color-scheme: light;\n cursor: crosshair;\n position: relative;\n touch-action: none;\n}\n\nhelix-headless-color-input::part(picker-grid-handle) {\n block-size: 1rem;\n border: 2px solid var(--_gray-surface);\n border-radius: 9999px;\n box-shadow: 0 0 0 1px var(--_gray-strong);\n box-sizing: border-box;\n inline-size: 1rem;\n inset-block-start: calc(100% - var(--color-picker-brightness, 100%));\n inset-inline-start: var(--color-picker-saturation, 100%);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-color-input:dir(rtl)::part(picker-grid-handle) {\n translate: 50% -50%;\n}\n\nhelix-headless-color-input::part(picker-grid-saturation),\nhelix-headless-color-input::part(picker-grid-brightness) {\n appearance: none;\n background: none;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-color-input::part(picker-controls) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-sample),\nhelix-headless-color-input::part(picker-swatch) {\n background-image:\n linear-gradient(\n var(--color-picker-swatch, transparent),\n var(--color-picker-swatch, transparent)\n ),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n filter: grayscale(1);\n padding: 0;\n}\n\nhelix-headless-color-input::part(picker-sample) {\n appearance: none;\n block-size: 36px;\n cursor: copy;\n flex: none;\n inline-size: 36px;\n}\n\nhelix-headless-color-input::part(picker-channels) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: 0.75rem;\n min-inline-size: 0;\n}\n\nhelix-headless-color-input::part(picker-channel-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-color-input::part(picker-channel-field) {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-color-input::part(picker-channel-control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background-color: var(--_gray-fill);\n block-size: 0.75rem;\n border-radius: 9999px;\n cursor: pointer;\n inline-size: 100%;\n margin: 0;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-moz-range-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.25rem;\n}\n\nhelix-headless-color-input::part(picker-channel-control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-color-input::part(picker-footer) {\n display: flex;\n gap: 0.5rem;\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-actions) {\n display: flex;\n flex: 1 1 auto;\n}\n\nhelix-headless-color-input::part(picker-eyedropper),\nhelix-headless-color-input::part(picker-format) {\n display: flex;\n flex: 1 1 0;\n}\n\nhelix-headless-color-input::part(picker-format) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button),\nhelix-headless-color-input::part(picker-format-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 1rem;\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button):hover,\nhelix-headless-color-input::part(picker-format-button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-color-input::part(picker-eyedropper-button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n display: grid;\n grid-template-columns: 1.25rem;\n place-content: center;\n}\n\nhelix-headless-color-input::part(picker-format-button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-variant-caps: all-small-caps;\n}\n\nhelix-headless-color-input::part(picker-swatches) {\n border-block-start: 1px solid var(--_gray-line);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-block-start: 0.75rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-input::part(picker-swatch) {\n block-size: 1.5rem;\n cursor: pointer;\n inline-size: 1.5rem;\n}\n\nhelix-headless-color-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-color-input::part(hint),\nhelix-headless-color-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-color-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-color-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-color-input::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-color-input::part(picker-grid):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(picker-channel-control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(picker-sample):focus-visible,\nhelix-headless-color-input::part(picker-eyedropper-button):focus-visible,\nhelix-headless-color-input::part(picker-format-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}","description":"The color input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-color-input\n hint=\"Use hex, rgb(), or hsl().\"\n label=\"Brand color\"\n name=\"brand\"\n></helix-headless-color-input>","imports":["import '@fusion.dev/helix-headless/color-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-color-input\n hint=\"Use hex, rgb(), or hsl().\"\n label=\"Brand color\"\n name=\"brand\"\n ></helix-headless-color-input>\n )\n}"}],"color-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-picker {\n --_along: to right;\n display: block;\n}\n\nhelix-headless-color-picker:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-color-picker::part(grid) {\n aspect-ratio: 1 / 0.7;\n background-image:\n linear-gradient(to top, var(--_gray-strong), transparent),\n linear-gradient(var(--_along), var(--_gray-surface), transparent),\n linear-gradient(var(--_gray-mark), var(--_gray-mark));\n border-radius: var(--_radius-control);\n color-scheme: light;\n cursor: crosshair;\n position: relative;\n touch-action: none;\n}\n\n/* Where the color is, drawn on the square rather than slotted into it. Both\n channels are already properties on the square, so the tier renders no box for\n this: a consumer who wants one writes it, and reads the same two numbers. */\nhelix-headless-color-picker::part(grid)::after {\n block-size: 1rem;\n border: 2px solid var(--_gray-surface);\n border-radius: 9999px;\n box-shadow: 0 0 0 1px var(--_gray-strong);\n box-sizing: border-box;\n content: \"\";\n inline-size: 1rem;\n inset-block-start: calc(100% - var(--color-picker-brightness, 100%));\n inset-inline-start: var(--color-picker-saturation, 100%);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-color-picker:dir(rtl)::part(grid)::after {\n translate: 50% -50%;\n}\n\nhelix-headless-color-picker::part(grid-saturation),\nhelix-headless-color-picker::part(grid-brightness) {\n appearance: none;\n background: none;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-color-picker::part(controls) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(sample),\nhelix-headless-color-picker::part(swatch) {\n background-image:\n linear-gradient(\n var(--color-picker-swatch, transparent),\n var(--color-picker-swatch, transparent)\n ),\n conic-gradient(\n var(--_gray-fill) 0 25%,\n var(--_gray-surface) 0 50%,\n var(--_gray-fill) 0 75%,\n var(--_gray-surface) 0\n );\n background-size:\n 100% 100%,\n 0.75rem 0.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n filter: grayscale(1);\n padding: 0;\n}\n\nhelix-headless-color-picker::part(sample) {\n appearance: none;\n block-size: 36px;\n cursor: copy;\n flex: none;\n inline-size: 36px;\n}\n\nhelix-headless-color-picker::part(channels) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: 0.75rem;\n min-inline-size: 0;\n}\n\nhelix-headless-color-picker::part(channel-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-color-picker::part(channel-field) {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-color-picker::part(channel-control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background-color: var(--_gray-fill);\n block-size: 0.75rem;\n border-radius: 9999px;\n cursor: pointer;\n inline-size: 100%;\n margin: 0;\n}\n\nhelix-headless-color-picker::part(channel-control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-moz-range-track {\n background: none;\n block-size: 0.75rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.25rem;\n}\n\nhelix-headless-color-picker::part(channel-control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 9999px;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-color-picker::part(footer) {\n display: flex;\n gap: 0.5rem;\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(value) {\n all: unset;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-color-picker::part(value):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-color-picker::part(actions) {\n display: flex;\n flex: 1 1 auto;\n}\n\nhelix-headless-color-picker::part(eyedropper),\nhelix-headless-color-picker::part(format) {\n display: flex;\n flex: 1 1 0;\n}\n\nhelix-headless-color-picker::part(format) {\n margin-inline-start: -1px;\n}\n\nhelix-headless-color-picker::part(eyedropper-button),\nhelix-headless-color-picker::part(format-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 1rem;\n}\n\nhelix-headless-color-picker::part(eyedropper-button):hover,\nhelix-headless-color-picker::part(format-button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-color-picker::part(eyedropper-button) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-color-picker::part(format-button) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-color-picker::part(eyedropper-button) {\n display: grid;\n grid-template-columns: 1.25rem;\n place-content: center;\n}\n\nhelix-headless-color-picker::part(format-button) {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-variant-caps: all-small-caps;\n}\n\nhelix-headless-color-picker::part(swatches) {\n border-block-start: 1px solid var(--_gray-line);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n margin-block-start: 0.75rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-color-picker::part(swatch) {\n block-size: 1.5rem;\n cursor: pointer;\n inline-size: 1.5rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-color-picker::part(grid):focus-within {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(channel-control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(sample):focus-visible,\nhelix-headless-color-picker::part(eyedropper-button):focus-visible,\nhelix-headless-color-picker::part(format-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-color-picker::part(value):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}","description":"The color picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-color-picker default-value=\"#3366ff\"></helix-headless-color-picker>","imports":["import '@fusion.dev/helix-headless/color-picker'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-color-picker default-value=\"#3366ff\"></helix-headless-color-picker>\n}"}],"combobox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-combobox::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.5rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-combobox:not(:disabled)::part(field):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-combobox::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-combobox::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-combobox::part(indicator) {\n block-size: 1rem;\n fill: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-combobox:state(open)::part(indicator) {\n scale: 1 -1;\n}\n\nhelix-headless-combobox::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n max-block-size: var(--floating-available-block-size, none);\n min-inline-size: max-content;\n overflow: hidden;\n padding: 0;\n}\n\nhelix-headless-combobox::part(listbox) {\n border: 0;\n display: block;\n}\n\nhelix-headless-combobox::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-combobox::part(listbox-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow: auto;\n padding-block: 0.25rem;\n}\n\nhelix-headless-combobox::part(listbox-items):focus-visible {\n outline: none;\n}\n\nhelix-headless-combobox::part(listbox-empty) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-combobox::part(listbox-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox::part(tag-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-combobox::part(hint),\nhelix-headless-combobox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-combobox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-combobox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n background-color: transparent;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option::part(label) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-option::part(item-active),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-fill);\n}\n\n::highlight(helix-filter-match) {\n background-color: var(--_gray-line);\n}\n\nhelix-headless-option::part(item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-combobox:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}","description":"The same combobox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-combobox\n hint=\"Type to narrow the list\"\n label=\"Language\"\n name=\"language\"\n placeholder=\"Search languages\"\n>\n <helix-headless-option value=\"c\">C</helix-headless-option>\n <helix-headless-option value=\"go\">Go</helix-headless-option>\n <helix-headless-option value=\"js\">JavaScript</helix-headless-option>\n <helix-headless-option value=\"py\">Python</helix-headless-option>\n <helix-headless-option value=\"rb\">Ruby</helix-headless-option>\n <helix-headless-option value=\"rs\">Rust</helix-headless-option>\n <helix-headless-option value=\"ts\">TypeScript</helix-headless-option>\n <helix-headless-option value=\"zig\">Zig</helix-headless-option>\n</helix-headless-combobox>","imports":["import '@fusion.dev/helix-headless/combobox'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-combobox\n hint=\"Type to narrow the list\"\n label=\"Language\"\n name=\"language\"\n placeholder=\"Search languages\"\n >\n <helix-headless-option value=\"c\">C</helix-headless-option>\n <helix-headless-option value=\"go\">Go</helix-headless-option>\n <helix-headless-option value=\"js\">JavaScript</helix-headless-option>\n <helix-headless-option value=\"py\">Python</helix-headless-option>\n <helix-headless-option value=\"rb\">Ruby</helix-headless-option>\n <helix-headless-option value=\"rs\">Rust</helix-headless-option>\n <helix-headless-option value=\"ts\">TypeScript</helix-headless-option>\n <helix-headless-option value=\"zig\">Zig</helix-headless-option>\n </helix-headless-combobox>\n )\n}"}],"command":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-command::part(dialog-surface) {\n align-self: start;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n gap: 1rem;\n inline-size: min(40rem, calc(100vw - 4rem));\n margin-block-start: 20vh;\n padding: 0;\n}\n\nhelix-headless-command::part(dialog-surface):modal {\n display: flex;\n}\n\nhelix-headless-command::part(dialog-surface)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-command::part(listbox) {\n background-color: transparent;\n border: 0;\n color: var(--_gray-strong);\n display: block;\n padding: 0;\n}\n\nhelix-headless-command::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-command::part(listbox-search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n padding: 0.75rem;\n}\n\nhelix-headless-command::part(listbox-filter-icon) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-command::part(listbox-filter-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-command::part(listbox-search-field) {\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-command::part(listbox-search-field)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-command::part(listbox-items) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n max-block-size: 22rem;\n overflow-y: auto;\n padding-block: 0.5rem;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n background-color: transparent;\n border: 0;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n line-height: 1.5;\n min-block-size: 2rem;\n padding: 0.75rem;\n user-select: none;\n}\n\nhelix-headless-option::part(label) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-option::part(item-active),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-fill);\n}\n\n::highlight(helix-filter-match) {\n background-color: var(--_gray-line);\n}\n\nhelix-headless-command::part(footer) {\n border-block-start: 1px solid var(--_gray-line);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.5rem 0.75rem;\n}\n\nhelix-headless-command p {\n margin: 0;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-command::part(listbox-search-field):focus-visible {\n outline: none;\n}\n\nhelix-headless-option::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The command palette on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-command\n default-open\n label=\"Commands\"\n>\n <helix-headless-option value=\"new\">New file</helix-headless-option>\n <helix-headless-option value=\"open\">Open folder</helix-headless-option>\n <helix-headless-option value=\"save\">Save all</helix-headless-option>\n <p slot=\"footer\">\n <helix-headless-kbd>Cmd</helix-headless-kbd>\n <helix-headless-kbd>K</helix-headless-kbd>\n to open,\n <helix-headless-kbd>Esc</helix-headless-kbd>\n to close\n </p>\n</helix-headless-command>","imports":["import '@fusion.dev/helix-headless/command'","import '@fusion.dev/helix-headless/kbd'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","min":320,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-command\n default-open\n label=\"Commands\"\n >\n <helix-headless-option value=\"new\">New file</helix-headless-option>\n <helix-headless-option value=\"open\">Open folder</helix-headless-option>\n <helix-headless-option value=\"save\">Save all</helix-headless-option>\n <p slot=\"footer\">\n <helix-headless-kbd>Cmd</helix-headless-kbd> <helix-headless-kbd>K</helix-headless-kbd> to\n open, <helix-headless-kbd>Esc</helix-headless-kbd> to close\n </p>\n </helix-headless-command>\n )\n}"}],"copy-button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-copy-button::part(button) {\n all: unset;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2.5rem;\n place-items: center;\n}\n\nhelix-headless-copy-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-copy-button::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-copy-button::part(tooltip-surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-copy-button::part(tooltip-surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-copy-button::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-copy-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same copy button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-copy-button value=\"bun add @fusion.dev/helix\"></helix-headless-copy-button>","imports":["import '@fusion.dev/helix-headless/copy-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-copy-button value=\"bun add @fusion.dev/helix\"></helix-headless-copy-button>\n}"}],"data-table":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-data-table {\n --_along: to right;\n /* Chromium 132 finds no keyframes from a ::part() rule and WebKit has no timeline-scope: both drive. */\n animation: data-table-edges linear;\n animation-range: 0% 101%;\n animation-timeline: --_data-table-scroll;\n display: block;\n timeline-scope: --_data-table-scroll;\n}\n\nhelix-headless-data-table:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-data-table::part(table) {\n animation: data-table-edges linear both;\n animation-timeline: scroll(self inline);\n display: grid;\n grid-template-columns: var(--data-table-template, minmax(0, 1fr));\n inline-size: 100%;\n mask-image: linear-gradient(\n var(--_along),\n transparent,\n #000 var(--_fade-start, 0rem),\n #000 calc(100% - var(--_fade-end, 0rem)),\n transparent\n );\n overflow-x: auto;\n scroll-timeline: --_data-table-scroll inline;\n}\n\n@keyframes data-table-edges {\n 0% {\n --_fade-end: 2rem;\n --_fade-start: 0rem;\n }\n\n 5%,\n 95% {\n --_fade-end: 2rem;\n --_fade-start: 2rem;\n }\n\n 100% {\n --_fade-end: 0rem;\n --_fade-start: 2rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-data-table,\n helix-headless-data-table::part(table) {\n animation: none;\n }\n}\n\nhelix-headless-data-table::part(head),\nhelix-headless-data-table::part(row) {\n display: contents;\n}\n\n/* The column's edge, which the element publishes as `--data-table-cell-align` and\n leaves to whoever draws the cell, the same hook a `helix-headless-table`'s\n cells read under `--table-cell-align`, each family under its own name. Unset\n under a column that names no edge, so the declaration drops\n out and the cell keeps the table's own alignment. */\nhelix-headless-data-table::part(cell) {\n border-block-start: 1px solid var(--_gray-line);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n line-height: 1.5;\n padding-block: 0.75rem;\n padding-inline: 0 1rem;\n text-align: var(--data-table-cell-align);\n}\n\nhelix-headless-table-column:not([hidden]) {\n display: contents;\n}\n\nhelix-headless-table-column::part(column) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 600;\n min-block-size: 3rem;\n min-inline-size: 0;\n padding-inline-end: 1rem;\n}\n\nhelix-headless-table-column::part(sort) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n flex: 1;\n gap: 0.25rem;\n min-inline-size: 0;\n}\n\nhelix-headless-table-column[text-align=\"end\"]::part(column),\nhelix-headless-table-column[text-align=\"end\"]::part(sort) {\n justify-content: flex-end;\n}\n\nhelix-headless-data-table::part(empty),\nhelix-headless-data-table::part(loading) {\n grid-column: 1 / -1;\n}\n\nhelix-headless-data-table::part(footer) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n padding-block-start: 0.75rem;\n}\n\nhelix-headless-data-table::part(pagination) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.25rem;\n margin-inline-start: auto;\n}\n\nhelix-headless-data-table::part(pagination-list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-data-table::part(pagination-item) {\n display: inline-flex;\n}\n\nhelix-headless-data-table::part(pagination-page),\nhelix-headless-data-table::part(pagination-gap),\nhelix-headless-data-table::part(pagination-previous),\nhelix-headless-data-table::part(pagination-next) {\n align-items: center;\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n justify-content: center;\n min-inline-size: 2rem;\n padding: 0 0.25rem;\n}\n\nhelix-headless-data-table::part(pagination-page):hover,\nhelix-headless-data-table::part(pagination-previous):hover,\nhelix-headless-data-table::part(pagination-next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-data-table::part(pagination-page-current),\nhelix-headless-data-table::part(pagination-page-current):hover {\n background-color: var(--_gray-subtle);\n border-color: var(--_gray-edge);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-data-table::part(pagination-gap) {\n user-select: none;\n}\n\nhelix-headless-data-table::part(pagination-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-data-table::part(pagination-previous):disabled,\nhelix-headless-data-table::part(pagination-next):disabled {\n cursor: default;\n opacity: 0.5;\n}\n\nhelix-headless-table-column::part(sort):focus-visible,\nhelix-headless-data-table::part(pagination-page):focus-visible,\nhelix-headless-data-table::part(pagination-gap):focus-visible,\nhelix-headless-data-table::part(pagination-previous):focus-visible,\nhelix-headless-data-table::part(pagination-next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The data table on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-data-table\n default-sort=\"name:asc\"\n id=\"objects\"\n label=\"Files\"\n page-size=\"4\"\n>\n <helix-headless-table-column\n field=\"name\"\n sortable\n width=\"minmax(9rem, 14rem)\"\n >Name</helix-headless-table-column>\n <helix-headless-table-column\n field=\"region\"\n sortable\n >Region</helix-headless-table-column>\n <helix-headless-table-column\n field=\"size\"\n sortable\n text-align=\"end\"\n width=\"6rem\"\n >Size</helix-headless-table-column>\n</helix-headless-data-table>\n\n<script>\n const objects = document.getElementById('objects')\n\n objects.rows = [\n { name: 'archive.tar.gz', region: 'us-east-1', size: 4_823_100 },\n { name: 'backup.sql', region: 'eu-central-1', size: 918_400 },\n { name: 'index.json', region: 'us-east-1', size: 2_100 },\n { name: 'manifest.yaml', region: 'ap-south-1', size: 812 },\n { name: 'profile.bin', region: 'eu-west-2', size: 61_440 },\n { name: 'report.pdf', region: 'us-west-1', size: 1_204_000 },\n { name: 'snapshot.img', region: 'eu-central-1', size: 9_800_000 },\n { name: 'trace.log', region: 'ap-south-1', size: 44_900 },\n ]\n\n /* The cell shows a readable size, and `compare` sorts the column by the\n number. Each value gets its own unit, so a small file does not read \"0 MB\". */\n const units = ['B', 'kB', 'MB', 'GB']\n\n const bytes = (value) => {\n const step = Math.min(units.length - 1, Math.floor(Math.log10(Math.max(value, 1)) / 3))\n const amount = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: step === 0 ? 0 : 1,\n }).format(value / 1000 ** step)\n return `${amount} ${units[step]}`\n }\n\n const size = objects.querySelector('[field=\"size\"]')\n size.cell = (row) => bytes(row.size)\n size.compare = (row) => row.size\n</script>","imports":["import '@fusion.dev/helix-headless/data-table'","import '@fusion.dev/helix-headless/table'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\n/* The cell shows a readable size, and `compare` sorts the column by the\n number. Each value gets its own unit, so a small file does not read \"0 MB\". */\nconst units = ['B', 'kB', 'MB', 'GB']\n\nconst bytes = (value: number): string => {\n const step = Math.min(units.length - 1, Math.floor(Math.log10(Math.max(value, 1)) / 3))\n const amount = new Intl.NumberFormat(undefined, {\n maximumFractionDigits: step === 0 ? 0 : 1,\n }).format(value / 1000 ** step)\n return `${amount} ${units[step]}`\n}\n\nconst rows = [\n { name: 'archive.tar.gz', region: 'us-east-1', size: 4_823_100 },\n { name: 'backup.sql', region: 'eu-central-1', size: 918_400 },\n { name: 'index.json', region: 'us-east-1', size: 2_100 },\n { name: 'manifest.yaml', region: 'ap-south-1', size: 812 },\n { name: 'profile.bin', region: 'eu-west-2', size: 61_440 },\n { name: 'report.pdf', region: 'us-west-1', size: 1_204_000 },\n { name: 'snapshot.img', region: 'eu-central-1', size: 9_800_000 },\n { name: 'trace.log', region: 'ap-south-1', size: 44_900 },\n]\n\nexport function Example() {\n return (\n <helix-headless-data-table\n default-sort=\"name:asc\"\n label=\"Files\"\n page-size=\"4\"\n rows={rows}\n >\n <helix-headless-table-column\n field=\"name\"\n sortable\n width=\"minmax(9rem, 14rem)\"\n >\n Name\n </helix-headless-table-column>\n <helix-headless-table-column\n field=\"region\"\n sortable\n >\n Region\n </helix-headless-table-column>\n <helix-headless-table-column\n cell={(row) => bytes(row.size as number)}\n compare={(row) => row.size}\n field=\"size\"\n sortable\n text-align=\"end\"\n width=\"6rem\"\n >\n Size\n </helix-headless-table-column>\n </helix-headless-data-table>\n )\n}"}],"date-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-date-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding-block: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-date-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-date-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-date-input::part(trigger) {\n all: unset;\n block-size: 1.25rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-date-input::part(trigger):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-input::part(trigger-icon) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-date-input::part(date) {\n flex: none;\n}\n\nhelix-headless-date-input::part(date-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: max-content;\n inset: auto;\n margin: 0;\n padding: 0.75rem;\n}\n\nhelix-headless-date-input::part(picker) {\n display: inline-block;\n}\n\nhelix-headless-date-input::part(picker-months) {\n align-items: start;\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(var(--date-picker-column-count, 1), max-content);\n justify-content: start;\n}\n\nhelix-headless-date-input::part(picker-header) {\n align-items: center;\n display: grid;\n gap: 0.25rem;\n grid-template-columns: 1.875rem 1fr 1.875rem;\n margin-block-end: 1.5rem;\n}\n\nhelix-headless-date-input::part(picker-heading) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n grid-column: 2;\n text-align: center;\n}\n\nhelix-headless-date-input::part(picker-previous),\nhelix-headless-date-input::part(picker-next) {\n all: unset;\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-previous) {\n grid-column: 1;\n}\n\nhelix-headless-date-input::part(picker-next) {\n grid-column: 3;\n}\n\nhelix-headless-date-input::part(picker-previous):hover,\nhelix-headless-date-input::part(picker-next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-input::part(picker-previous-mark),\nhelix-headless-date-input::part(picker-next-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input::part(picker-week) {\n display: grid;\n grid-template-columns: repeat(7, 2.5rem);\n}\n\nhelix-headless-date-input::part(picker-weekday) {\n align-items: center;\n block-size: 2.5rem;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n padding-block-end: 1.25rem;\n}\n\nhelix-headless-date-input::part(picker-cell) {\n align-items: center;\n block-size: 2.25rem;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-day) {\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.8125rem;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-input::part(picker-day):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-date-input::part(picker-day-outside),\nhelix-headless-date-input::part(picker-day-outside):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n}\n\nhelix-headless-date-input::part(picker-day-disabled),\nhelix-headless-date-input::part(picker-day-disabled):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-date-input::part(picker-day-today) {\n box-shadow: inset 0 0 0 1px var(--_gray-line);\n}\n\nhelix-headless-date-input::part(picker-cell-range-start),\nhelix-headless-date-input::part(picker-cell-range-middle),\nhelix-headless-date-input::part(picker-cell-range-end) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-date-input::part(picker-cell-range-start) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-date-input::part(picker-cell-range-end) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-date-input::part(picker-day-selected),\nhelix-headless-date-input::part(picker-day-selected):hover {\n background-color: var(--_gray-strong);\n box-shadow: 0 0 0 0.1875rem var(--_gray-fill);\n color: var(--_gray-surface);\n}\n\nhelix-headless-date-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-date-input::part(hint),\nhelix-headless-date-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-date-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-date-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-date-input::part(trigger):focus-visible,\nhelix-headless-date-input::part(picker-previous):focus-visible,\nhelix-headless-date-input::part(picker-next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-date-input::part(picker-cell):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The date input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-date-input\n hint=\"Any weekday works\"\n label=\"Starts\"\n name=\"starts\"\n></helix-headless-date-input>","imports":["import '@fusion.dev/helix-headless/date-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-date-input\n hint=\"Any weekday works\"\n label=\"Starts\"\n name=\"starts\"\n ></helix-headless-date-input>\n )\n}"}],"date-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker {\n display: inline-block;\n}\n\nhelix-headless-date-picker::part(months) {\n align-items: start;\n display: grid;\n gap: 1rem;\n grid-template-columns: repeat(var(--date-picker-column-count, 1), max-content);\n justify-content: start;\n}\n\nhelix-headless-date-picker::part(header) {\n align-items: center;\n display: grid;\n gap: 0.25rem;\n grid-template-columns: 1.875rem 1fr 1.875rem;\n margin-block-end: 1.5rem;\n}\n\nhelix-headless-date-picker::part(heading) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n grid-column: 2;\n text-align: center;\n}\n\nhelix-headless-date-picker::part(previous),\nhelix-headless-date-picker::part(next) {\n all: unset;\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(previous) {\n grid-column: 1;\n}\n\nhelix-headless-date-picker::part(next) {\n grid-column: 3;\n}\n\nhelix-headless-date-picker::part(previous):hover,\nhelix-headless-date-picker::part(next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-date-picker::part(previous-mark),\nhelix-headless-date-picker::part(next-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker::part(week) {\n display: grid;\n grid-template-columns: repeat(7, 2.5rem);\n}\n\nhelix-headless-date-picker::part(weekday) {\n align-items: center;\n block-size: 2.5rem;\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n padding-block-end: 1.25rem;\n}\n\nhelix-headless-date-picker::part(cell) {\n align-items: center;\n block-size: 2.25rem;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(day) {\n align-items: center;\n block-size: 1.875rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.8125rem;\n inline-size: 1.875rem;\n justify-content: center;\n}\n\nhelix-headless-date-picker::part(day):hover {\n background-color: var(--_gray-subtle);\n}\n\n/* The muted ink and not the mark's: a day outside the month is still a number\n a reader reads, and the mark's gray measured 3.25:1 on white. */\nhelix-headless-date-picker::part(day-outside),\nhelix-headless-date-picker::part(day-outside):hover {\n background-color: transparent;\n color: var(--_gray-muted);\n}\n\nhelix-headless-date-picker::part(day-disabled),\nhelix-headless-date-picker::part(day-disabled):hover {\n background-color: transparent;\n color: var(--_gray-mark);\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-date-picker::part(day-today) {\n box-shadow: inset 0 0 0 1px var(--_gray-line);\n}\n\nhelix-headless-date-picker::part(cell-range-start),\nhelix-headless-date-picker::part(cell-range-middle),\nhelix-headless-date-picker::part(cell-range-end) {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-date-picker::part(cell-range-start) {\n border-end-start-radius: var(--_radius-control);\n border-start-start-radius: var(--_radius-control);\n}\n\nhelix-headless-date-picker::part(cell-range-end) {\n border-end-end-radius: var(--_radius-control);\n border-start-end-radius: var(--_radius-control);\n}\n\nhelix-headless-date-picker::part(day-selected),\nhelix-headless-date-picker::part(day-selected):hover {\n background-color: var(--_gray-strong);\n box-shadow: 0 0 0 0.1875rem var(--_gray-fill);\n color: var(--_gray-surface);\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-date-picker::part(cell):focus-visible,\nhelix-headless-date-picker::part(previous):focus-visible,\nhelix-headless-date-picker::part(next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The date picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-date-picker\n default-month=\"2026-08\"\n default-value=\"2026-08-14\"\n label=\"Delivery date\"\n></helix-headless-date-picker>","imports":["import '@fusion.dev/helix-headless/date-picker'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-date-picker\n default-month=\"2026-08\"\n default-value=\"2026-08-14\"\n label=\"Delivery date\"\n ></helix-headless-date-picker>\n )\n}"}],"description-list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-description-list {\n container-type: inline-size;\n display: block;\n line-height: 1.5;\n}\n\nhelix-headless-description-list::part(list) {\n column-gap: 1.5rem;\n display: grid;\n grid-template-columns: max-content minmax(0, 1fr);\n margin: 0;\n row-gap: 0.75rem;\n}\n\n@container (inline-size < 22rem) {\n helix-headless-description-list::part(list) {\n grid-template-columns: minmax(0, 1fr);\n row-gap: 1rem;\n }\n}\n\nhelix-headless-description-list-item {\n align-items: baseline;\n display: grid;\n grid-column: 1 / -1;\n grid-template-columns: subgrid;\n row-gap: 0.25rem;\n}\n\nhelix-headless-description-list-item::part(label) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-weight: 500;\n margin: 0;\n}\n\nhelix-headless-description-list-item::part(value) {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n margin: 0;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n}\n\nhelix-headless-tag {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}","description":"A details panel on the headless tier, with every style written by hand and the labels in one column.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-description-list direction=\"row\">\n <helix-headless-description-list-item label=\"Owner\">Ada Okonjo</helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Status\">\n <helix-headless-tag>Running</helix-headless-tag>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Region\">us-east-1</helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Created\">\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Commit\">4f2a9c1e8b7d6a5f4e3d2c1b0a9f8e7d6c5b4a3f</helix-headless-description-list-item>\n</helix-headless-description-list>","imports":["import '@fusion.dev/helix-headless/description-list'","import '@fusion.dev/helix-headless/format-date'","import '@fusion.dev/helix-headless/tag'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-description-list direction=\"row\">\n <helix-headless-description-list-item label=\"Owner\">\n Ada Okonjo\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Status\">\n <helix-headless-tag>Running</helix-headless-tag>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Region\">\n us-east-1\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Created\">\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </helix-headless-description-list-item>\n <helix-headless-description-list-item label=\"Commit\">\n 4f2a9c1e8b7d6a5f4e3d2c1b0a9f8e7d6c5b4a3f\n </helix-headless-description-list-item>\n </helix-headless-description-list>\n )\n}"}],"device-screen":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_radius-control: 0.25rem;\n}\n\nhelix-headless-device-screen::part(region) {\n display: grid;\n gap: 0.5rem;\n justify-items: center;\n}\n\nhelix-headless-device-screen::part(controls) {\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-device-screen::part(home-button),\nhelix-headless-device-screen::part(screenshot-button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n padding: 0;\n}\n\nhelix-headless-device-screen::part(bezel) {\n background-color: #1c1c1e;\n border-radius: 2.75rem;\n padding: 0.75rem;\n}\n\nhelix-headless-device-screen::part(screen) {\n aspect-ratio: var(--device-screen-ratio);\n background-color: #000;\n border-radius: 2rem;\n inline-size: 15rem;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-device-screen::part(picture) {\n inset: 0;\n position: absolute;\n}\n\nhelix-headless-device-screen::part(touch) {\n border: 2px solid #fff;\n border-radius: 50%;\n inline-size: 2rem;\n aspect-ratio: 1;\n left: var(--device-screen-touch-x);\n position: absolute;\n top: var(--device-screen-touch-y);\n translate: -50% -50%;\n}\n\n.stand-in {\n align-items: center;\n background-image: linear-gradient(165deg, #2d3a8c, #6b2d6e);\n block-size: 100%;\n color: #fff;\n display: flex;\n flex-direction: column;\n padding-block-start: 22%;\n}\n\n.date {\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.time {\n font-size: 3.5rem;\n font-weight: 600;\n line-height: 1;\n}","description":"The device screen on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-device-screen\n label=\"iPhone 17 Pro\"\n screen-height=\"874\"\n screen-width=\"402\"\n>\n <!-- Put your stream here: a video, an image, or a canvas. -->\n <div class=\"stand-in\">\n <span class=\"date\">Saturday, October 10</span>\n <span class=\"time\">9:41</span>\n </div>\n</helix-headless-device-screen>","imports":["import '@fusion.dev/helix-headless/device-screen'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-device-screen\n label=\"iPhone 17 Pro\"\n screen-height=\"874\"\n screen-width=\"402\"\n >\n {/* Put your stream here: a video, an image, or a canvas. */}\n <div className=\"stand-in\">\n <span className=\"date\">Saturday, October 10</span>\n <span className=\"time\">9:41</span>\n </div>\n </helix-headless-device-screen>\n )\n}"}],"dialog":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-dialog::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n gap: 1rem;\n inline-size: min(28rem, calc(100vw - 2rem));\n max-block-size: calc(100dvh - 2rem);\n overflow-y: auto;\n padding: 1.5rem;\n}\n\nhelix-headless-dialog::part(surface):modal {\n display: flex;\n}\n\n@media (width < 30rem) {\n helix-headless-dialog::part(surface) {\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n inline-size: 100vw;\n margin-block: auto 0;\n max-block-size: calc(100dvh - 4rem);\n max-inline-size: 100vw;\n }\n}\n\nhelix-headless-dialog::part(surface)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-dialog h2 {\n font-size: 1.5rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.2;\n margin: 0;\n}\n\nhelix-headless-dialog p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-dialog [slot=\"footer\"] {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(helix-headless-dialog *)::part(button),\nhelix-headless-dialog [slot=\"footer\"] > helix-headless-button:first-child::part(button) {\n background-color: var(--_gray-strong);\n border-color: transparent;\n color: var(--_gray-surface);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The dialog on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"base-confirm\"\n>Delete project</helix-headless-button>\n\n<!-- The dialog starts open, so the preview shows it. -->\n<helix-headless-dialog\n id=\"base-confirm\"\n label=\"Delete project\"\n open\n>\n <h2 slot=\"header\">Delete project</h2>\n <p>This removes the project and everything in it. It cannot be undone.</p>\n <div slot=\"footer\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >Delete project</helix-headless-button>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >Cancel</helix-headless-button>\n </div>\n</helix-headless-dialog>","imports":["import '@fusion.dev/helix-headless/dialog'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"base-confirm\"\n >\n Delete project\n </helix-headless-button>\n\n {/* The dialog starts open, so the preview shows it. */}\n <helix-headless-dialog\n id=\"base-confirm\"\n label=\"Delete project\"\n open\n >\n <h2 slot=\"header\">Delete project</h2>\n <p>This removes the project and everything in it. It cannot be undone.</p>\n <div slot=\"footer\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >\n Delete project\n </helix-headless-button>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"base-confirm\"\n >\n Cancel\n </helix-headless-button>\n </div>\n </helix-headless-dialog>\n </>\n )\n}"}],"divider":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-divider {\n align-items: center;\n display: flex;\n}\n\nhelix-headless-divider::part(line) {\n background-color: var(--_gray-line);\n block-size: 1px;\n flex: 1 1 0;\n}\n\nhelix-headless-divider::part(content) {\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n font-size: 0.75rem;\n line-height: 1.2;\n white-space: nowrap;\n}\n\nhelix-headless-divider[orientation=\"vertical\"] {\n align-self: stretch;\n display: inline-flex;\n flex-direction: column;\n}\n\nhelix-headless-divider[orientation=\"vertical\"]::part(line) {\n block-size: auto;\n inline-size: 1px;\n min-block-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The same divider on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <p>\n Your workspace has three projects and five members. Each project keeps its\n own files and settings.\n </p>\n <helix-headless-divider></helix-headless-divider>\n <p>\n Members can open every project in the workspace. Only owners can invite\n people or change billing.\n </p>\n</div>","imports":["import '@fusion.dev/helix-headless/divider'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <p>\n Your workspace has three projects and five members. Each project keeps its own files and\n settings.\n </p>\n <helix-headless-divider></helix-headless-divider>\n <p>\n Members can open every project in the workspace. Only owners can invite people or change\n billing.\n </p>\n </div>\n )\n}"}],"donut-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart {\n display: grid;\n inline-size: 14rem;\n place-items: center;\n position: relative;\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-muted);\n --chart-series-3: var(--_gray-mark);\n --chart-series-4: var(--_gray-line);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-donut-chart::part(plot) {\n grid-area: 1 / 1;\n inline-size: 100%;\n position: relative;\n}\n\nhelix-headless-donut-chart::part(track),\nhelix-headless-donut-chart::part(segment) {\n transform: rotate(-90deg);\n transform-box: fill-box;\n transform-origin: center;\n}\n\nhelix-headless-donut-chart::part(track) {\n stroke: var(--_gray-subtle);\n}\n\nhelix-headless-donut-chart::part(segment) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: butt;\n stroke-width: var(--donut-chart-stroke);\n}\n\nhelix-headless-donut-chart::part(center) {\n inset-block-start: 50%;\n inset-inline-start: 50%;\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-donut-chart:dir(rtl)::part(center) {\n translate: 50% -50%;\n}\n\nhelix-headless-donut-chart::part(segment-active) {\n stroke-width: calc(var(--donut-chart-stroke) * 1.18);\n}\n\nhelix-headless-donut-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.5;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-donut-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-donut-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-donut-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: 0.5em minmax(0, 1fr) auto;\n}\n\nhelix-headless-donut-chart::part(tooltip-cell)::before {\n background-color: var(--chart-series, transparent);\n block-size: 0.5em;\n border-radius: 9999px;\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--_gray-surface) 60%, transparent);\n content: \"\";\n grid-column: 1;\n inline-size: 0.5em;\n}\n\nhelix-headless-donut-chart::part(tooltip-name) {\n grid-column: 2;\n opacity: 0.72;\n}\n\nhelix-headless-donut-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n grid-column: 3;\n}\n\nhelix-headless-donut-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-donut-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-icon::part(svg) {\n display: block;\n inline-size: 100%;\n}\n\nhelix-headless-donut-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-donut-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same donut chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Sessions by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Source</th>\n <th scope=\"col\">Share</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Direct</th>\n <td data-value=\"4200\">4,200</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"3100\">3,100</td>\n </tr>\n <tr>\n <th scope=\"row\">Referral</th>\n <td data-value=\"1800\">1,800</td>\n </tr>\n <tr>\n <th scope=\"row\">Social</th>\n <td data-value=\"900\">900</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-donut-chart for=\"traffic\"></helix-headless-donut-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/donut-chart'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Sessions by source</caption>\n <thead>\n <tr>\n <th scope=\"col\">Source</th>\n <th scope=\"col\">Share</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Direct</th>\n <td data-value=\"4200\">4,200</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"3100\">3,100</td>\n </tr>\n <tr>\n <th scope=\"row\">Referral</th>\n <td data-value=\"1800\">1,800</td>\n </tr>\n <tr>\n <th scope=\"row\">Social</th>\n <td data-value=\"900\">900</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-donut-chart for=\"traffic\"></helix-headless-donut-chart>\n </div>\n )\n}"}],"drawer":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.stack p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-drawer::part(panel) {\n background-color: var(--_gray-surface);\n border: 0;\n border-end-start-radius: var(--_radius-control);\n border-inline-start: 1px solid var(--_gray-edge);\n border-start-start-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex-direction: column;\n padding: 1.5rem;\n padding-block-start: 3rem;\n}\n\nhelix-headless-drawer::part(panel):modal {\n display: flex;\n}\n\nhelix-headless-drawer[placement=\"end\"]::part(panel) {\n block-size: 100dvh;\n inline-size: min(20rem, 100%);\n margin-block: 0;\n margin-inline: auto 0;\n max-block-size: none;\n}\n\nhelix-headless-drawer::part(panel)::backdrop {\n background-color: rgb(0 0 0 / 0.4);\n}\n\nhelix-headless-drawer::part(header) {\n flex: none;\n}\n\nhelix-headless-drawer > [slot=\"header\"] {\n display: block;\n font-size: 1.125rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.2;\n margin-block-end: 1rem;\n}\n\nhelix-headless-drawer::part(content) {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The drawer on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"panel\"\n>\n Open drawer\n</helix-headless-button>\n\n<helix-headless-drawer\n id=\"panel\"\n label=\"Project details\"\n placement=\"end\"\n>\n <span slot=\"header\">Project details</span>\n <div class=\"stack\">\n <p>\n See who owns the project, who can edit it, and when it last changed.\n </p>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"panel\"\n >\n Close\n </helix-headless-button>\n </div>\n</helix-headless-drawer>","imports":["import '@fusion.dev/helix-headless/drawer'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"panel\"\n >\n Open drawer\n </helix-headless-button>\n\n <helix-headless-drawer\n id=\"panel\"\n label=\"Project details\"\n placement=\"end\"\n >\n <span slot=\"header\">Project details</span>\n <div className=\"stack\">\n <p>See who owns the project, who can edit it, and when it last changed.</p>\n <helix-headless-button\n command=\"--close\"\n commandfor=\"panel\"\n >\n Close\n </helix-headless-button>\n </div>\n </helix-headless-drawer>\n </>\n )\n}"}],"drilldown":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.panel {\n max-inline-size: 18rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-drilldown {\n background-color: var(--_gray-surface);\n block-size: fit-content;\n display: block;\n overflow: hidden;\n}\n\nhelix-headless-drilldown::part(header) {\n align-items: center;\n block-size: 2.5rem;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.25rem;\n}\n\nhelix-headless-drilldown::part(back) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-drilldown::part(back):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-drilldown::part(back-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-drilldown::part(title) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-drilldown::part(page) {\n padding-block: 0.25rem;\n}\n\nhelix-headless-drilldown-item {\n display: block;\n}\n\nhelix-headless-drilldown-item::part(item) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inline-size: 100%;\n padding-inline: 0.75rem;\n user-select: none;\n}\n\nhelix-headless-drilldown-item::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-drilldown-item::part(label) {\n flex: 1 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-drilldown-item::part(mark) {\n block-size: 1rem;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-drilldown-item::part(item):focus-visible,\nhelix-headless-drilldown::part(back):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The same drilldown on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-drilldown\n class=\"panel\"\n label=\"Settings\"\n>\n <helix-headless-drilldown-item value=\"appearance\">\n Appearance\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"theme\"\n >Theme</helix-headless-drilldown-item>\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"density\"\n >Density</helix-headless-drilldown-item>\n </helix-headless-drilldown-item>\n <helix-headless-drilldown-item value=\"editor\">\n Editor\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"tabs\"\n >Tab size</helix-headless-drilldown-item>\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"wrap\"\n >Word wrap</helix-headless-drilldown-item>\n </helix-headless-drilldown-item>\n <helix-headless-drilldown-item value=\"about\">About</helix-headless-drilldown-item>\n</helix-headless-drilldown>","imports":["import '@fusion.dev/helix-headless/drilldown'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-drilldown\n className=\"panel\"\n label=\"Settings\"\n >\n {' '}\n <helix-headless-drilldown-item value=\"appearance\">\n {' '}\n Appearance{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"theme\"\n >\n Theme\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"density\"\n >\n Density\n </helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item value=\"editor\">\n {' '}\n Editor{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"tabs\"\n >\n Tab size\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item\n slot=\"page\"\n value=\"wrap\"\n >\n Word wrap\n </helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown-item>{' '}\n <helix-headless-drilldown-item value=\"about\">About</helix-headless-drilldown-item>{' '}\n </helix-headless-drilldown>\n )\n}"}],"empty":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-empty {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n gap: 0.75rem;\n line-height: 1.5;\n padding: 3rem;\n text-align: center;\n}\n\nhelix-headless-empty > helix-headless-icon[slot=\"icon\"] {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n inline-size: 1.5rem;\n}\n\nhelix-headless-empty > [slot=\"heading\"] {\n color: var(--_gray-strong);\n font-size: 1.125rem;\n font-weight: 600;\n margin: 0;\n}\n\nhelix-headless-empty > [slot=\"actions\"] {\n margin-block-start: 0.75rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-empty > helix-headless-icon[slot=\"icon\"]::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n min-inline-size: 12.5rem;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-empty::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same empty state on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-empty>\n <helix-headless-icon\n name=\"folder-open\"\n slot=\"icon\"\n ></helix-headless-icon>\n <h3 slot=\"heading\">No projects yet</h3>\n Anything you create will show up here.\n <helix-headless-button slot=\"actions\">New project</helix-headless-button>\n</helix-headless-empty>","imports":["import '@fusion.dev/helix-headless/empty'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","min":320,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-empty>\n <helix-headless-icon\n name=\"folder-open\"\n slot=\"icon\"\n ></helix-headless-icon>\n <h3 slot=\"heading\">No projects yet</h3>\n Anything you create will show up here.\n <helix-headless-button slot=\"actions\">New project</helix-headless-button>\n </helix-headless-empty>\n )\n}"}],"file-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px dashed var(--_gray-line);\n border-radius: var(--_radius-control);\n display: flex;\n gap: 0.5rem;\n justify-content: center;\n padding: 1rem;\n position: relative;\n}\n\nhelix-headless-file-input::part(control) {\n cursor: pointer;\n inset: 0;\n opacity: 0;\n position: absolute;\n}\n\nhelix-headless-file-input::part(trigger) {\n align-items: center;\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n font-weight: 500;\n gap: 0.25rem;\n pointer-events: none;\n text-align: center;\n}\n\nhelix-headless-file-input > helix-headless-icon[slot=\"trigger\"] {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n inline-size: 1.5rem;\n}\n\nhelix-headless-file-input::part(list) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n list-style: none;\n margin-block: 0.25rem 0;\n padding: 0;\n}\n\nhelix-headless-file-input::part(file) {\n align-items: center;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n gap: 0.75rem;\n padding-block: 0.5rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-file-input::part(detail) {\n align-items: center;\n column-gap: 0.75rem;\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n min-inline-size: 0;\n row-gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(name) {\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n min-inline-size: min(100%, 16ch);\n overflow-wrap: anywhere;\n}\n\nhelix-headless-file-input::part(meta) {\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\nhelix-headless-file-input::part(size),\nhelix-headless-file-input::part(kind) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}\n\nhelix-headless-file-input::part(size) {\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-file-input::part(remove) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n inline-size: 1.5rem;\n justify-content: center;\n padding: 0.25rem;\n}\n\nhelix-headless-file-input::part(remove):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-file-input::part(kind-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input::part(size-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-file-input::part(hint),\nhelix-headless-file-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-file-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-file-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-file-input > helix-headless-icon[slot=\"trigger\"]::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-file-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-file-input::part(remove):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The file input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-file-input\n hint=\"PNG or JPG, up to 10MB each\"\n label=\"Attachments\"\n multiple\n name=\"attachments\"\n>\n <helix-headless-icon\n name=\"upload-simple\"\n slot=\"trigger\"\n ></helix-headless-icon>\n <span slot=\"trigger\">Choose files, or drop them here</span>\n</helix-headless-file-input>","imports":["import '@fusion.dev/helix-headless/file-input'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-file-input\n hint=\"PNG or JPG, up to 10MB each\"\n label=\"Attachments\"\n multiple\n name=\"attachments\"\n >\n <helix-headless-icon\n name=\"upload-simple\"\n slot=\"trigger\"\n ></helix-headless-icon>\n <span slot=\"trigger\">Choose files, or drop them here</span>\n </helix-headless-file-input>\n )\n}"}],"filter-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-filter-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-filter-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-filter-input::part(tags) {\n display: contents;\n}\n\nhelix-headless-filter-input::part(rest) {\n color: var(--_gray-muted);\n flex: none;\n font-size: 0.8125rem;\n}\n\nhelix-headless-filter-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 6ch;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-filter-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-filter-input::part(clear) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-filter-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-filter-input::part(hint),\nhelix-headless-filter-input::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0;\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-filter-chip {\n align-items: center;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n flex: none;\n font-size: 0.8125rem;\n line-height: 1.5;\n max-inline-size: 100%;\n min-block-size: 1.75rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-filter-chip::part(field) {\n color: var(--_gray-muted);\n padding-inline-end: 0.25rem;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(operator) {\n color: var(--_gray-muted);\n padding-inline-end: 0.25rem;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(values) {\n font-weight: 500;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-filter-chip::part(dismiss) {\n all: unset;\n block-size: 1rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: grid;\n inline-size: 1rem;\n margin-inline-start: 0.25rem;\n place-items: center;\n}\n\nhelix-headless-filter-input::part(clear):hover,\nhelix-headless-filter-chip::part(dismiss):hover {\n background-color: var(--_gray-fill);\n color: var(--_gray-strong);\n}\n\nhelix-headless-filter-chip::part(dismiss-mark) {\n block-size: 0.85em;\n inline-size: 0.85em;\n}\n\nhelix-headless-filter-input:focus-within::part(field) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-filter-input::part(clear):focus-visible,\nhelix-headless-filter-chip::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The filter field on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-filter-input\n label=\"Filter rows\"\n placeholder=\"Add a filter\"\n>\n <helix-headless-filter-chip\n dismissible\n label=\"Owner\"\n name=\"owner\"\n slot=\"tags\"\n >Ada</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Env\"\n name=\"env\"\n slot=\"tags\"\n >Staging</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Status\"\n name=\"status\"\n slot=\"tags\"\n >Open</helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Area\"\n name=\"area\"\n slot=\"tags\"\n >Billing</helix-headless-filter-chip>\n</helix-headless-filter-input>","imports":["import '@fusion.dev/helix-headless/filter-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <helix-headless-filter-input\n label=\"Filter rows\"\n placeholder=\"Add a filter\"\n >\n <helix-headless-filter-chip\n dismissible\n label=\"Owner\"\n name=\"owner\"\n slot=\"tags\"\n >\n Ada\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Env\"\n name=\"env\"\n slot=\"tags\"\n >\n Staging\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Status\"\n name=\"status\"\n slot=\"tags\"\n >\n Open\n </helix-headless-filter-chip>\n <helix-headless-filter-chip\n dismissible\n label=\"Area\"\n name=\"area\"\n slot=\"tags\"\n >\n Billing\n </helix-headless-filter-chip>\n </helix-headless-filter-input>\n )\n}"}],"format-date":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\ndl {\n color: var(--_gray-strong);\n column-gap: 0.25rem;\n display: grid;\n font-size: 0.875rem;\n grid-template-columns: max-content minmax(0, 1fr);\n line-height: 1.5;\n margin: 0;\n row-gap: 0.75rem;\n}\n\ndd {\n margin: 0;\n}","description":"The formatted timestamps on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<dl>\n <dt>Elapsed:</dt>\n <dd>\n <helix-headless-format-date\n class=\"stamp\"\n elapsed\n ></helix-headless-format-date>\n </dd>\n\n <dt>Date:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Time:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"UTC\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Weekday:</dt>\n <dd>\n <helix-headless-format-date\n date=\"2026-03-14T15:09:00.000Z\"\n day=\"numeric\"\n month=\"long\"\n time-zone=\"UTC\"\n weekday=\"long\"\n ></helix-headless-format-date>\n </dd>\n</dl>\n\n<script>\n /* The elapsed time is set from script to 42 minutes ago, so it always reads\n \"42m\". The other dates are fixed and name a `time-zone`, so they look the\n same wherever the preview renders. */\n const at = new Date(Date.now() - 42 * 60_000).toISOString()\n for (const stamp of document.querySelectorAll('.stamp')) {\n stamp.date = at\n }\n</script>","imports":["import '@fusion.dev/helix-headless/format-date'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import { useEffect, useState } from 'react'\nimport './preview.css'\n\nconst AGO = 42 * 60_000\n\n/* The dates are fixed and name a `time-zone`, so they look the same wherever\n the preview renders. */\nconst FIXED = '2026-03-14T15:09:00.000Z'\n\nexport function Example() {\n const [at, setAt] = useState('')\n\n useEffect(() => {\n setAt(new Date(Date.now() - AGO).toISOString())\n }, [])\n\n return (\n <dl>\n <dt>Elapsed:</dt>\n <dd>\n <helix-headless-format-date\n date={at}\n elapsed\n ></helix-headless-format-date>\n </dd>\n\n <dt>Date:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n day=\"numeric\"\n month=\"short\"\n time-zone=\"UTC\"\n year=\"numeric\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Time:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n hour=\"numeric\"\n minute=\"2-digit\"\n time-zone=\"UTC\"\n ></helix-headless-format-date>\n </dd>\n\n <dt>Weekday:</dt>\n <dd>\n <helix-headless-format-date\n date={FIXED}\n day=\"numeric\"\n month=\"long\"\n time-zone=\"UTC\"\n weekday=\"long\"\n ></helix-headless-format-date>\n </dd>\n </dl>\n )\n}"}],"graph":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_accent-subtle: light-dark(#e6efff, #1d2a44);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n}\n\nhelix-headless-graph::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 24rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n container-type: inline-size;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n overflow: hidden;\n}\n\nhelix-headless-graph::part(body) {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 16rem;\n min-block-size: 0;\n}\n\n@container (inline-size < 36rem) {\n helix-headless-graph::part(body) {\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: 3fr 2fr;\n }\n\n helix-headless-graph::part(panel) {\n border-block-start: 1px solid var(--_gray-edge);\n border-inline-start: none;\n }\n}\n\nhelix-headless-graph::part(stage) {\n min-block-size: 0;\n position: relative;\n}\n\nhelix-headless-graph::part(viewport) {\n inset: 0;\n overflow: hidden;\n position: absolute;\n}\n\nhelix-headless-graph::part(controls) {\n display: grid;\n gap: 0.25rem;\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-graph::part(zoom-in-button),\nhelix-headless-graph::part(zoom-out-button),\nhelix-headless-graph::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\nhelix-headless-graph::part(panel) {\n background-color: var(--_gray-surface);\n border-inline-start: 1px solid var(--_gray-edge);\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: auto minmax(0, 1fr);\n min-block-size: 0;\n}\n\nhelix-headless-graph::part(search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n color: var(--_gray-muted);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-graph::part(filter-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-graph::part(search-field) {\n background-color: transparent;\n block-size: 2rem;\n border: none;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n min-inline-size: 0;\n}\n\nhelix-headless-graph::part(count) {\n font-size: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(empty) {\n color: var(--_gray-muted);\n grid-area: 2 / 1;\n padding: 0.5rem;\n}\n\nhelix-headless-graph::part(list) {\n padding-block: 0.25rem;\n}\n\nhelix-headless-graph::part(note) {\n align-items: center;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.875rem;\n gap: 0.75rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-graph::part(note-selected) {\n background-color: var(--_accent-subtle);\n}\n\nhelix-headless-graph:focus-within::part(note-cursor) {\n outline: 2px solid var(--_gray-strong);\n outline-offset: -2px;\n}\n\nhelix-headless-graph::part(note-name) {\n flex: 0 1 auto;\n max-inline-size: 70%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(note-relation) {\n color: var(--_gray-muted);\n flex: 1 1 0;\n font-size: 0.75rem;\n min-inline-size: 0;\n overflow: hidden;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-graph::part(live) {\n clip-path: inset(50%);\n position: absolute;\n}\n\n.stand-in {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: flex;\n justify-content: center;\n}","description":"The graph frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-graph\n default-active=\"pricing\"\n id=\"notes\"\n label=\"Company notes\"\n>\n <!-- Put your graph here, drawn by Sigma.js, a canvas, or an image. -->\n <div class=\"stand-in\">Graph</div>\n</helix-headless-graph>\n\n<script>\n const notes = document.getElementById('notes')\n\n notes.nodes = [\n { id: 'pricing', label: 'Pricing' },\n { id: 'plans', label: 'Plans and tiers' },\n { id: 'churn', label: 'Churn review' },\n { id: 'onboarding', label: 'Onboarding' },\n { id: 'roadmap', label: 'Roadmap' },\n { id: 'support', label: 'Support playbook' },\n { id: 'hiring', label: 'Hiring plan' },\n { id: 'budget', label: 'Budget' },\n ]\n\n notes.links = [\n { source: 'pricing', target: 'plans' },\n { source: 'churn', target: 'pricing' },\n { source: 'pricing', target: 'budget' },\n { source: 'budget', target: 'pricing' },\n { source: 'onboarding', target: 'churn' },\n { source: 'roadmap', target: 'onboarding' },\n { source: 'support', target: 'churn' },\n { source: 'hiring', target: 'budget' },\n ]\n</script>","imports":["import '@fusion.dev/helix-headless/graph'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nconst nodes = [\n { id: 'pricing', label: 'Pricing' },\n { id: 'plans', label: 'Plans and tiers' },\n { id: 'churn', label: 'Churn review' },\n { id: 'onboarding', label: 'Onboarding' },\n { id: 'roadmap', label: 'Roadmap' },\n { id: 'support', label: 'Support playbook' },\n { id: 'hiring', label: 'Hiring plan' },\n { id: 'budget', label: 'Budget' },\n]\n\nconst links = [\n { source: 'pricing', target: 'plans' },\n { source: 'churn', target: 'pricing' },\n { source: 'pricing', target: 'budget' },\n { source: 'budget', target: 'pricing' },\n { source: 'onboarding', target: 'churn' },\n { source: 'roadmap', target: 'onboarding' },\n { source: 'support', target: 'churn' },\n { source: 'hiring', target: 'budget' },\n]\n\nexport function Example() {\n return (\n <helix-headless-graph\n default-active=\"pricing\"\n label=\"Company notes\"\n links={links}\n nodes={nodes}\n >\n {/* Put your graph here, drawn by Sigma.js, a canvas, or an image. */}\n <div className=\"stand-in\">Graph</div>\n </helix-headless-graph>\n )\n}"}],"heatmap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-heatmap {\n display: grid;\n grid-template-columns: minmax(0, max-content);\n\n --heatmap-tone-danger: var(--_gray-strong);\n --heatmap-tone-success: var(--_gray-line);\n --heatmap-tone-warning: var(--_gray-muted);\n --heatmap-tone-1: var(--_gray-subtle);\n --heatmap-tone-2: var(--_gray-fill);\n --heatmap-tone-3: var(--_gray-line);\n --heatmap-tone-4: var(--_gray-mark);\n --heatmap-tone-5: var(--_gray-strong);\n}\n\nhelix-headless-heatmap::part(strip) {\n display: grid;\n gap: 0.25rem;\n grid-auto-columns: 0.75rem;\n grid-auto-flow: column;\n grid-template-rows: repeat(var(--heatmap-rows, 1), 0.75rem);\n justify-content: start;\n position: relative;\n}\n\nhelix-headless-heatmap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-heatmap::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-heatmap::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-heatmap::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-heatmap::part(tooltip-label) {\n display: block;\n font-weight: 500;\n opacity: 0.72;\n}\n\nhelix-headless-heatmap::part(tooltip-cell) {\n align-items: baseline;\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n}\n\nhelix-headless-heatmap::part(tooltip-name) {\n opacity: 0.72;\n}\n\nhelix-headless-heatmap::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n}\n\nhelix-headless-heatmap::part(cell) {\n background-color: var(--heatmap-tone, var(--_gray-surface));\n border-radius: calc(var(--_radius-control) / 2);\n inline-size: 0.75rem;\n}\n\n@media (hover: hover) {\n helix-headless-heatmap::part(cell):hover {\n outline: 1px solid var(--_gray-strong);\n outline-offset: 1px;\n }\n}\n\nhelix-headless-heatmap::part(footer) {\n align-items: baseline;\n color: var(--_gray-muted);\n display: grid;\n font-size: 0.75rem;\n gap: 0.5rem;\n grid-template-columns: auto minmax(0, 1fr) auto;\n padding-block-start: 0.5rem;\n}\n\nhelix-headless-heatmap::part(summary) {\n text-align: center;\n}\n\nhelix-headless-heatmap::part(end) {\n text-align: end;\n}\n\nhelix-headless-heatmap::part(empty) {\n color: var(--_gray-muted);\n margin: 0;\n text-align: center;\n}\n\nhelix-headless-heatmap::part(live),\nhelix-headless-heatmap::part(overview) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-heatmap::part(strip):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"Thirty days of uptime, each cell colored by how that day went.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-heatmap\n for=\"uptime\"\n label=\"Uptime, last 30 days\"\n>\n <table\n data-hidden-visually\n id=\"uptime\"\n >\n <caption>Uptime</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Uptime</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-28\">28 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-29\">29 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-30\">30 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-31\">31 Jul 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-01\">1 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-02\">2 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-03\">3 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-04\">4 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-05\">5 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-06\">6 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-07\">7 Aug 2026</time></th>\n <td\n data-tone=\"danger\"\n data-value=\"0.44\"\n >44.0%</td>\n <td>Database failover, 8h13m</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-08\">8 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-09\">9 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-10\">10 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-11\">11 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-12\">12 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-13\">13 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-14\">14 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-15\">15 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-16\">16 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-17\">17 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-18\">18 Aug 2026</time></th>\n <td\n data-tone=\"warning\"\n data-value=\"0.984\"\n >98.4%</td>\n <td>Elevated latency, eu-west</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-19\">19 Aug 2026</time></th>\n <td\n data-tone=\"warning\"\n data-value=\"0.977\"\n >97.7%</td>\n <td>Backfill running</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-20\">20 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-21\">21 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-22\">22 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-23\">23 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-24\">24 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-25\">25 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-26\">26 Aug 2026</time></th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >100.0%</td>\n <td>Normal</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">28 Jul</span>\n <span slot=\"summary\">99.6% uptime</span>\n <span slot=\"end\">Today</span>\n</helix-headless-heatmap>","imports":["import '@fusion.dev/helix-headless/heatmap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-heatmap\n for=\"uptime\"\n label=\"Uptime, last 30 days\"\n >\n <table\n data-hidden-visually\n id=\"uptime\"\n >\n <caption>Uptime</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Uptime</th>\n <th scope=\"col\">Status</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-28\">28 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-29\">29 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-30\">30 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-31\">31 Jul 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-01\">1 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-02\">2 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-03\">3 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-04\">4 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-05\">5 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-06\">6 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-07\">7 Aug 2026</time>\n </th>\n <td\n data-tone=\"danger\"\n data-value=\"0.44\"\n >\n 44.0%\n </td>\n <td>Database failover, 8h13m</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-08\">8 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-09\">9 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-10\">10 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-11\">11 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-12\">12 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-13\">13 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-14\">14 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-15\">15 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-16\">16 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-17\">17 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-18\">18 Aug 2026</time>\n </th>\n <td\n data-tone=\"warning\"\n data-value=\"0.984\"\n >\n 98.4%\n </td>\n <td>Elevated latency, eu-west</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-19\">19 Aug 2026</time>\n </th>\n <td\n data-tone=\"warning\"\n data-value=\"0.977\"\n >\n 97.7%\n </td>\n <td>Backfill running</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-20\">20 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-21\">21 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-22\">22 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-23\">23 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-24\">24 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-25\">25 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-26\">26 Aug 2026</time>\n </th>\n <td\n data-tone=\"success\"\n data-value=\"1.0\"\n >\n 100.0%\n </td>\n <td>Normal</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">28 Jul</span>\n <span slot=\"summary\">99.6% uptime</span>\n <span slot=\"end\">Today</span>\n </helix-headless-heatmap>\n )\n}"}],"icon":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The icon on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-icon name=\"caret-down\"></helix-headless-icon>\n<helix-headless-icon name=\"check-circle\"></helix-headless-icon>\n<helix-headless-icon name=\"gear\"></helix-headless-icon>\n<helix-headless-icon name=\"lightbulb\"></helix-headless-icon>\n<helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>\n<helix-headless-icon name=\"shield-check\"></helix-headless-icon>\n<helix-headless-icon\n label=\"Warning\"\n name=\"warning\"\n></helix-headless-icon>","imports":["import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-icon name=\"caret-down\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"check-circle\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"lightbulb\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"magnifying-glass\"></helix-headless-icon>{' '}\n <helix-headless-icon name=\"shield-check\"></helix-headless-icon>{' '}\n <helix-headless-icon\n label=\"Warning\"\n name=\"warning\"\n ></helix-headless-icon>\n </>\n )\n}"}],"icon-button":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon-button {\n display: inline-flex;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The same icon button on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-icon-button label=\"Settings\">\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n</helix-headless-icon-button>","imports":["import '@fusion.dev/helix-headless/icon-button'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-icon-button label=\"Settings\">\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n )\n}"}],"image":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-image {\n aspect-ratio: 16 / 9;\n border-radius: var(--_radius-surface);\n display: block;\n inline-size: 24rem;\n max-inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-image::part(image) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-image:not([data-status=\"loaded\"])::part(image) {\n visibility: hidden;\n}\n\nhelix-headless-image::part(placeholder),\nhelix-headless-image::part(fallback) {\n background-color: var(--_gray-subtle);\n inset: 0;\n position: absolute;\n}\n\nhelix-headless-image::part(fallback) {\n color: var(--_gray-muted);\n}","description":"The image on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-image\n alt=\"A road winding below highland cliffs at sunset\"\n src=\"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800\"\n></helix-headless-image>","imports":["import '@fusion.dev/helix-headless/image'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-image\n alt=\"A road winding below highland cliffs at sunset\"\n src=\"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800\"\n ></helix-headless-image>\n )\n}"}],"input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-input::part(clear),\nhelix-headless-input::part(reveal) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-input::part(clear):focus-visible,\nhelix-headless-input::part(reveal):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-input::part(hint),\nhelix-headless-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-input:disabled::part(field) {\n cursor: not-allowed;\n opacity: 0.5;\n}","description":"The input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-input\n hint=\"Visible to your team\"\n label=\"Project name\"\n placeholder=\"Website redesign\"\n></helix-headless-input>","imports":["import '@fusion.dev/helix-headless/input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-input\n hint=\"Visible to your team\"\n label=\"Project name\"\n placeholder=\"Website redesign\"\n ></helix-headless-input>\n )\n}"}],"kbd":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\np {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-kbd {\n display: inline-flex;\n font: inherit;\n vertical-align: -0.05em;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-variant-ligatures: none;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n white-space: nowrap;\n}","description":"The key on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Press\n <helix-headless-kbd>Cmd</helix-headless-kbd>\n <helix-headless-kbd>K</helix-headless-kbd>\n to search.\n</p>","imports":["import '@fusion.dev/helix-headless/kbd'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n {' '}\n Press <helix-headless-kbd>Cmd</helix-headless-kbd> <helix-headless-kbd>K</helix-headless-kbd>{' '}\n to search.{' '}\n </p>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.stack p {\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.stack .caption {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n}\n\nhelix-headless-kbd {\n display: inline-flex;\n font: inherit;\n vertical-align: -0.05em;\n}\n\nhelix-headless-kbd::part(kbd) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5em;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: inset 0 -1px 0 0 var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n font-size: 0.85em;\n font-variant-ligatures: none;\n font-weight: 500;\n justify-content: center;\n line-height: 1;\n min-inline-size: 1.5em;\n padding-block-start: 1px;\n padding-inline: 0.4em;\n white-space: nowrap;\n}\n\nhelix-headless-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-input[aria-label]:not([label])::part(label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-input::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-input::part(control)::placeholder {\n color: var(--_gray-muted);\n font-weight: 500;\n}\n\nhelix-headless-input > [slot=\"end\"] {\n flex: none;\n}","description":"The chord on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <p>\n Press\n <helix-headless-kbd keys=\"mod+k\"></helix-headless-kbd>\n to search. The shortcut <code>mod+k</code> shows as ⌘K on a Mac and Ctrl+K on\n other computers.\n </p>\n\n <helix-headless-input\n aria-label=\"Filter\"\n placeholder=\"Filter\"\n >\n <helix-headless-kbd\n id=\"key\"\n keys=\"/\"\n slot=\"end\"\n within=\"control\"\n ></helix-headless-kbd>\n </helix-headless-input>\n\n <p\n class=\"caption\"\n id=\"said\"\n >\n Click the field and press / to filter the list.\n </p>\n</div>\n\n<script type=\"module\">\n const key = document.getElementById('key')\n const said = document.getElementById('said')\n key.addEventListener('helix-shortcut', (event) => {\n said.textContent = `Heard ${event.detail.keys} inside the field.`\n })\n</script>","imports":["import '@fusion.dev/helix-headless/kbd'","import '@fusion.dev/helix-headless/input'"],"label":"Shortcut","renders":[],"slug":"shortcut","tier":"headless","tsx":"import './shortcut.css'\n\nimport { useState } from 'react'\n\nconst RESTING = 'Click the field and press / to filter the list.'\n\nexport function Example() {\n const [said, setSaid] = useState(RESTING)\n\n return (\n <div className=\"stack\">\n <p>\n Press <helix-headless-kbd keys=\"mod+k\" /> to search. The shortcut <code>mod+k</code> shows\n as ⌘K on a Mac and Ctrl+K on other computers.\n </p>\n\n <helix-headless-input\n aria-label=\"Filter\"\n placeholder=\"Filter\"\n >\n <helix-headless-kbd\n keys=\"/\"\n onhelix-shortcut={(event) => setSaid(`Heard ${event.detail.keys} inside the field.`)}\n slot=\"end\"\n within=\"control\"\n />\n </helix-headless-input>\n\n <p className=\"caption\">{said}</p>\n </div>\n )\n}"}],"legend":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-legend {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n\n display: block;\n}\n\nhelix-headless-legend::part(list) {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-legend::part(entry) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.25rem;\n line-height: 1.2;\n}\n\n/* The mark, drawn on the entry rather than slotted into it. The entry already\n carries its series, so the tier renders no box for this: a consumer who wants\n one writes it, and reads the same property. */\nhelix-headless-legend::part(entry)::before {\n background-color: var(--chart-series, var(--chart-series-1));\n block-size: 0.75rem;\n border-radius: var(--_radius-control);\n content: \"\";\n flex: none;\n inline-size: 0.75rem;\n}","description":"The same legend on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Visits by source</caption>\n <thead>\n <tr>\n <th>Week</th>\n <th>Direct</th>\n <th>Search</th>\n <th>Referral</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">W1</th>\n <td>1204</td>\n <td>812</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">W2</th>\n <td>1388</td>\n <td>964</td>\n <td>221</td>\n </tr>\n <tr>\n <th scope=\"row\">W3</th>\n <td>1502</td>\n <td>1030</td>\n <td>287</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-legend for=\"traffic\"></helix-headless-legend>\n</div>","imports":["import '@fusion.dev/helix-headless/legend'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"traffic\"\n >\n <caption>Visits by source</caption>\n <thead>\n <tr>\n <th>Week</th>\n <th>Direct</th>\n <th>Search</th>\n <th>Referral</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">W1</th>\n <td>1204</td>\n <td>812</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">W2</th>\n <td>1388</td>\n <td>964</td>\n <td>221</td>\n </tr>\n <tr>\n <th scope=\"row\">W3</th>\n <td>1502</td>\n <td>1030</td>\n <td>287</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-legend for=\"traffic\"></helix-headless-legend>\n </div>\n )\n}"}],"lightbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n\nhelix-headless-button::part(button) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-line);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n font: inherit;\n padding: 0.375rem 0.75rem;\n}\n\n/* A takeover rather than a panel: the picture wants every pixel, and the\n chrome is drawn over the dark rather than beside it. */\nhelix-headless-lightbox::part(dialog) {\n background-color: transparent;\n block-size: 100dvh;\n border: none;\n box-sizing: border-box;\n color: #e9e9ec;\n color-scheme: dark;\n gap: 0.5rem;\n grid-template-rows: auto 1fr auto;\n inline-size: 100vw;\n max-block-size: 100dvh;\n max-inline-size: 100vw;\n padding: 1rem;\n}\n\nhelix-headless-lightbox::part(dialog):modal {\n display: grid;\n}\n\nhelix-headless-lightbox::part(dialog)::backdrop {\n background-color: #111113;\n}\n\nhelix-headless-lightbox::part(viewport) {\n align-items: center;\n display: flex;\n justify-content: center;\n min-block-size: 0;\n overflow: hidden;\n}\n\nhelix-headless-lightbox::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-icon-button::part(button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid #45454b;\n border-radius: var(--_radius-control);\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n inline-size: 1em;\n}\n\nhelix-headless-lightbox [slot=\"header\"] {\n display: flex;\n justify-content: flex-end;\n}\n\nhelix-headless-lightbox-item::part(item) {\n align-items: center;\n block-size: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n inline-size: 100%;\n justify-content: center;\n min-block-size: 0;\n}\n\n/* The flex above outranks the UA's [hidden], so the items not shown say so. */\nhelix-headless-lightbox-item::part(item)[hidden] {\n display: none;\n}\n\nhelix-headless-lightbox-item img {\n max-block-size: 100%;\n max-inline-size: 100%;\n min-block-size: 0;\n object-fit: contain;\n}\n\nhelix-headless-lightbox-item [slot=\"description\"] {\n color: #a1a1aa;\n font-size: 0.875rem;\n text-align: center;\n}\n\nhelix-headless-lightbox::part(dialog):focus-visible {\n outline: none;\n}","description":"The same lightbox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n command=\"--show\"\n commandfor=\"base-gallery\"\n>Open gallery</helix-headless-button>\n\n<!-- The lightbox starts open, so the preview shows it. -->\n<helix-headless-lightbox\n id=\"base-gallery\"\n label=\"Beach photos\"\n open\n>\n <div slot=\"header\">\n <helix-headless-icon-button\n command=\"--close\"\n commandfor=\"base-gallery\"\n label=\"Close\"\n >\n <helix-headless-icon name=\"x\"></helix-headless-icon>\n </helix-headless-icon-button>\n </div>\n\n <helix-headless-lightbox-item\n label=\"Seawater over pale sand\"\n value=\"seawater\"\n >\n <img\n alt=\"Seawater over pale sand\"\n src=\"/media/scale/seawater-800.jpg\"\n />\n <span slot=\"description\">Shallow water at the beach in the morning.</span>\n </helix-headless-lightbox-item>\n\n <helix-headless-lightbox-item\n label=\"The sun low over open water\"\n value=\"ocean-sun\"\n >\n <img\n alt=\"The sun low over open water\"\n src=\"/media/scale/ocean-sun.jpg\"\n />\n <span slot=\"description\">Sunset over the ocean the same day.</span>\n </helix-headless-lightbox-item>\n</helix-headless-lightbox>","imports":["import '@fusion.dev/helix-headless/lightbox'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n command=\"--show\"\n commandfor=\"base-gallery\"\n >\n Open gallery\n </helix-headless-button>\n\n {/* The lightbox starts open, so the preview shows it. */}\n <helix-headless-lightbox\n id=\"base-gallery\"\n label=\"Beach photos\"\n open\n >\n <div slot=\"header\">\n <helix-headless-icon-button\n command=\"--close\"\n commandfor=\"base-gallery\"\n label=\"Close\"\n >\n <helix-headless-icon name=\"x\"></helix-headless-icon>\n </helix-headless-icon-button>\n </div>\n\n <helix-headless-lightbox-item\n label=\"Seawater over pale sand\"\n value=\"seawater\"\n >\n <img\n alt=\"Seawater over pale sand\"\n src=\"/media/scale/seawater-800.jpg\"\n />\n <span slot=\"description\">Shallow water at the beach in the morning.</span>\n </helix-headless-lightbox-item>\n\n <helix-headless-lightbox-item\n label=\"The sun low over open water\"\n value=\"ocean-sun\"\n >\n <img\n alt=\"The sun low over open water\"\n src=\"/media/scale/ocean-sun.jpg\"\n />\n <span slot=\"description\">Sunset over the ocean the same day.</span>\n </helix-headless-lightbox-item>\n </helix-headless-lightbox>\n </>\n )\n}"}],"line-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n --chart-series-4: var(--_gray-muted);\n --chart-series-5: var(--_gray-fill);\n --chart-series-6: var(--_gray-subtle);\n\n display: grid;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-line-chart::part(plot) {\n block-size: 10.5rem;\n position: relative;\n}\n\nhelix-headless-line-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-line-chart::part(line) {\n fill: none;\n stroke: var(--chart-series, var(--chart-series-1));\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(area) {\n fill: var(--chart-series, var(--chart-series-1));\n opacity: 0.16;\n stroke: none;\n}\n\nhelix-headless-line-chart::part(baseline),\nhelix-headless-line-chart::part(gridline) {\n stroke: var(--_gray-line);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(guide) {\n stroke: var(--_gray-muted);\n stroke-dasharray: 3 3;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-line-chart::part(band) {\n fill: var(--_gray-subtle);\n}\n\nhelix-headless-line-chart::part(terminus) {\n background-color: var(--chart-series, var(--chart-series-1));\n block-size: 5px;\n border-radius: 9999px;\n inline-size: 5px;\n inset-block-start: var(--chart-terminus-y);\n inset-inline-start: var(--chart-terminus-x);\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-line-chart:dir(rtl)::part(terminus) {\n translate: 50% -50%;\n}\n\nhelix-headless-line-chart::part(labels) {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n}\n\nhelix-headless-line-chart::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-area: 1 / 1;\n inline-size: var(--chart-label-size);\n margin-inline-start: var(--chart-label-start);\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-line-chart::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-line-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border: none;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-line-chart::part(tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-line-chart::part(tooltip-label) {\n display: block;\n font-weight: 500;\n margin-block-end: 0.25rem;\n}\n\nhelix-headless-line-chart::part(tooltip-cell) {\n align-items: baseline;\n column-gap: 0.75rem;\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n\nhelix-headless-line-chart::part(tooltip-name) {\n opacity: 0.72;\n}\n\nhelix-headless-line-chart::part(tooltip-value) {\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-line-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-line-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-line-chart::part(marker) {\n fill: none;\n stroke: var(--chart-series);\n stroke-linecap: round;\n stroke-width: 6px;\n vector-effect: non-scaling-stroke;\n}","description":"The line chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"sessions\"\n >\n <caption>Sessions a month</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Sessions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"1180\">1180</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"1240\">1240</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"1190\">1190</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"1320\">1320</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"1410\">1410</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"1380\">1380</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-line-chart for=\"sessions\"></helix-headless-line-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/line-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"sessions\"\n >\n <caption>Sessions a month</caption>\n <thead>\n <tr>\n <th scope=\"col\">Month</th>\n <th scope=\"col\">Sessions</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Jan</th>\n <td data-value=\"1180\">1180</td>\n </tr>\n <tr>\n <th scope=\"row\">Feb</th>\n <td data-value=\"1240\">1240</td>\n </tr>\n <tr>\n <th scope=\"row\">Mar</th>\n <td data-value=\"1190\">1190</td>\n </tr>\n <tr>\n <th scope=\"row\">Apr</th>\n <td data-value=\"1320\">1320</td>\n </tr>\n <tr>\n <th scope=\"row\">May</th>\n <td data-value=\"1410\">1410</td>\n </tr>\n <tr>\n <th scope=\"row\">Jun</th>\n <td data-value=\"1380\">1380</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-line-chart for=\"sessions\"></helix-headless-line-chart>\n </div>\n )\n}"}],"list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-list {\n display: flex;\n flex-direction: column;\n}\n\nhelix-headless-list-item + helix-headless-list-item {\n border-block-start: 1px solid var(--_gray-line);\n}\n\nhelix-headless-list-item::part(row) {\n align-items: center;\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.8125rem;\n grid-template-columns: auto 1fr auto;\n line-height: 1.5;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-list-item > [slot=\"start\"] {\n color: var(--_gray-muted);\n grid-column: 1;\n grid-row: 1 / span 2;\n margin-inline-end: 0.75rem;\n}\n\nhelix-headless-list-item > [slot=\"description\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n grid-column: 2;\n grid-row: 2;\n}\n\nhelix-headless-list-item > [slot=\"end\"] {\n grid-column: 3;\n grid-row: 1 / span 2;\n}\n\nhelix-headless-icon {\n block-size: 1.25rem;\n display: inline-flex;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The list on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-list label=\"Recent files\">\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Quarterly report\n <span slot=\"description\">Edited today</span>\n </helix-headless-list-item>\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Team handbook\n <span slot=\"description\">Edited 3 days ago</span>\n </helix-headless-list-item>\n</helix-headless-list>","imports":["import '@fusion.dev/helix-headless/list'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-list label=\"Recent files\">\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Quarterly report\n <span slot=\"description\">Edited today</span>\n </helix-headless-list-item>\n <helix-headless-list-item>\n <helix-headless-icon\n name=\"cube\"\n slot=\"start\"\n ></helix-headless-icon>\n Team handbook\n <span slot=\"description\">Edited 3 days ago</span>\n </helix-headless-list-item>\n </helix-headless-list>\n )\n}"}],"listbox":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-listbox {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-listbox::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-listbox::part(items) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n padding-block: 0.25rem;\n}\n\nhelix-headless-listbox::part(items):focus-visible {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-listbox::part(hint),\nhelix-headless-listbox::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-listbox::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-listbox::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-listbox::part(search) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.25rem 0.25rem 0.5rem;\n}\n\nhelix-headless-listbox::part(filter-icon) {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-listbox::part(filter-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-listbox::part(search-field) {\n all: unset;\n block-size: 2rem;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-listbox:disabled {\n opacity: 0.5;\n}\n\nhelix-headless-option {\n display: block;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option::part(text) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-inline-size: 0;\n}\n\nhelix-headless-option::part(label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-option[disabled]::part(item) {\n cursor: default;\n opacity: 0.5;\n}\n\n/* The region a screen reader hears, clipped out of the picture: this tier\n draws nothing, so the page hides it the way the styled tier does. */\nhelix-headless-listbox::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"The same listbox on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-listbox\n default-value=\"two\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"choice\"\n>\n <helix-headless-option value=\"one\">Free</helix-headless-option>\n <helix-headless-option value=\"two\">Pro</helix-headless-option>\n <helix-headless-option value=\"three\">Team</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >Enterprise</helix-headless-option>\n</helix-headless-listbox>","imports":["import '@fusion.dev/helix-headless/listbox'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-listbox\n default-value=\"two\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"choice\"\n >\n <helix-headless-option value=\"one\">Free</helix-headless-option>\n <helix-headless-option value=\"two\">Pro</helix-headless-option>\n <helix-headless-option value=\"three\">Team</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >\n Enterprise\n </helix-headless-option>\n </helix-headless-listbox>\n )\n}"}],"loader":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The host turns and the drawing reads the angle, so a slotted mark stays upright: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_turn {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-loader {\n animation: loader-turn 0.8s linear infinite;\n color: var(--_gray-strong);\n display: inline-grid;\n flex-shrink: 0;\n place-items: center;\n vertical-align: middle;\n}\n\nhelix-headless-loader::part(svg) {\n block-size: 1.5rem;\n grid-area: 1 / 1;\n inline-size: 1.5rem;\n rotate: var(--_turn);\n}\n\n@keyframes loader-turn {\n to {\n --_turn: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-loader {\n animation-duration: 4s;\n }\n}\n\nhelix-headless-loader::part(track) {\n stroke: var(--_gray-fill);\n stroke-width: 2;\n}\n\nhelix-headless-loader::part(indicator) {\n stroke: currentColor;\n stroke-dasharray: 50, 100;\n stroke-linecap: round;\n stroke-width: 2;\n}\n\nhelix-headless-loader::part(mark) {\n align-items: center;\n block-size: 0.6rem;\n display: flex;\n grid-area: 1 / 1;\n inline-size: 0.6rem;\n justify-content: center;\n}","description":"The same loader on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-loader label=\"Loading projects\"></helix-headless-loader>","imports":["import '@fusion.dev/helix-headless/loader'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-loader label=\"Loading projects\"></helix-headless-loader>\n}"}],"log":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_red: light-dark(#b42318, #f97066);\n --_red-wash: light-dark(#fef3f2, #2d1715);\n --_amber: light-dark(#93370d, #fdb022);\n --_green: light-dark(#067647, #47cd89);\n --_radius-surface: 0.5rem;\n}\n\nhelix-headless-log {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n color: var(--_gray-strong);\n display: grid;\n font-size: 0.8125rem;\n line-height: 1.5;\n overflow: hidden;\n}\n\nhelix-headless-log::part(log) {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n max-block-size: 24rem;\n padding-block: 0.5rem;\n}\n\nhelix-headless-log::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-log::part(resume) {\n margin-block-start: -2.5rem;\n padding-block-end: 0.5rem;\n pointer-events: none;\n position: relative;\n text-align: center;\n}\n\nhelix-headless-log::part(resume-button) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: 0.25rem;\n color: inherit;\n font: inherit;\n padding: 0.25rem 0.75rem;\n pointer-events: auto;\n}\n\nhelix-headless-log-line {\n display: block;\n}\n\nhelix-headless-log-line::part(line) {\n display: flex;\n gap: 1rem;\n padding-inline: 1rem;\n}\n\nhelix-headless-log-line::part(line-warn) {\n color: var(--_amber);\n}\n\nhelix-headless-log-line::part(line-error) {\n background-color: var(--_red-wash);\n color: var(--_red);\n}\n\n/* A line's level and its count in words, heard and not drawn. */\nhelix-headless-log-line::part(level),\nhelix-headless-log-line::part(count-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-log-line::part(text) {\n white-space: pre;\n}\n\nhelix-headless-log-line::part(number) {\n color: var(--_gray-muted);\n flex: none;\n min-inline-size: max(0.875rem, calc(var(--log-digits, 2) * 1ch));\n text-align: end;\n user-select: none;\n}\n\nhelix-headless-log-group {\n display: block;\n}\n\nhelix-headless-log-group::part(summary) {\n align-items: center;\n background: none;\n border: 0;\n color: inherit;\n display: flex;\n font: inherit;\n font-family: system-ui, sans-serif;\n font-weight: 600;\n gap: 0.5rem;\n inline-size: 100%;\n padding: 0.375rem 1rem;\n text-align: start;\n}\n\nhelix-headless-log-group::part(summary):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-log-group::part(mark) {\n block-size: 0.875rem;\n flex: none;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n inline-size: 0.875rem;\n margin-inline: calc(max(0.875rem, calc(var(--log-digits, 2) * 1ch)) - 0.875rem) 0.5rem;\n rotate: -90deg;\n}\n\nhelix-headless-log-group:state(open)::part(mark) {\n rotate: none;\n}\n\nhelix-headless-log-group::part(status) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-log-group[status=\"done\"]::part(status) {\n color: var(--_green);\n}\n\nhelix-headless-log-group[status=\"failed\"]::part(status) {\n color: var(--_red);\n}\n\nhelix-headless-log-group[status=\"skipped\"]::part(status) {\n color: var(--_gray-mark);\n}\n\nhelix-headless-log-group::part(duration) {\n color: var(--_gray-muted);\n font-weight: 400;\n margin-inline-start: auto;\n}","description":"A deployment's output with numbered lines, its steps folded, and the step that failed open.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-log\n label=\"Deployment\"\n line-numbers\n>\n <helix-headless-log-line>Cloning github.com/acme/storefront (branch main, commit 4f2a9c1)</helix-headless-log-line>\n <helix-headless-log-group\n duration=\"38s\"\n heading=\"Install dependencies\"\n status=\"done\"\n >\n <helix-headless-log-line>bun install v1.1.43</helix-headless-log-line>\n <helix-headless-log-line>Resolved 1,214 packages in 2.1s</helix-headless-log-line>\n <helix-headless-log-line level=\"warn\">warn: glob@7.2.3 is deprecated</helix-headless-log-line>\n <helix-headless-log-line>Installed 1,214 packages in 36.4s</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n default-open\n duration=\"1m 12s\"\n heading=\"Build\"\n status=\"failed\"\n >\n <helix-headless-log-line>Creating an optimized production build</helix-headless-log-line>\n <helix-headless-log-line>Compiled 214 modules for the browser and 37 for the server</helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Error: Cannot find module './checkout/summary'</helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Build failed with 1 error</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n heading=\"Deploy\"\n status=\"skipped\"\n ></helix-headless-log-group>\n</helix-headless-log>","imports":["import '@fusion.dev/helix-headless/log'"],"label":"Preview","layout":"padded","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-log\n label=\"Deployment\"\n line-numbers\n >\n <helix-headless-log-line>\n Cloning github.com/acme/storefront (branch main, commit 4f2a9c1)\n </helix-headless-log-line>\n <helix-headless-log-group\n duration=\"38s\"\n heading=\"Install dependencies\"\n status=\"done\"\n >\n <helix-headless-log-line>bun install v1.1.43</helix-headless-log-line>\n <helix-headless-log-line>Resolved 1,214 packages in 2.1s</helix-headless-log-line>\n <helix-headless-log-line level=\"warn\">\n warn: glob@7.2.3 is deprecated\n </helix-headless-log-line>\n <helix-headless-log-line>Installed 1,214 packages in 36.4s</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n default-open\n duration=\"1m 12s\"\n heading=\"Build\"\n status=\"failed\"\n >\n <helix-headless-log-line>Creating an optimized production build</helix-headless-log-line>\n <helix-headless-log-line>\n Compiled 214 modules for the browser and 37 for the server\n </helix-headless-log-line>\n <helix-headless-log-line level=\"error\">\n Error: Cannot find module './checkout/summary'\n </helix-headless-log-line>\n <helix-headless-log-line level=\"error\">Build failed with 1 error</helix-headless-log-line>\n </helix-headless-log-group>\n <helix-headless-log-group\n heading=\"Deploy\"\n status=\"skipped\"\n />\n </helix-headless-log>\n )\n}"}],"map":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n/* The frame. The board writes where it sits onto the viewport as three custom\n\n/* The frame, with each region in a row of its own so the map takes what is\n left whichever strips a consumer fills. */\nhelix-headless-map::part(region) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: auto 1fr auto auto;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-map::part(viewport) {\n min-block-size: 0;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-map::part(attribution) {\n border-block-start: 1px solid var(--_gray-edge);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-map::part(attribution):empty {\n display: none;\n}\n\n/* The pad in three columns and the zoom and fullscreen in a fourth. */\nhelix-headless-map::part(controls) {\n display: grid;\n gap: 0.25rem;\n grid-template-areas:\n \". up . zoomin\"\n \"start . end zoomout\"\n \". down . full\";\n inset-block-start: 0.5rem;\n inset-inline-end: 0.5rem;\n position: absolute;\n}\n\nhelix-headless-map::part(pan-up) {\n grid-area: up;\n}\n\nhelix-headless-map::part(pan-start) {\n grid-area: start;\n}\n\nhelix-headless-map::part(pan-end) {\n grid-area: end;\n}\n\nhelix-headless-map::part(pan-down) {\n grid-area: down;\n}\n\nhelix-headless-map::part(zoom-in) {\n grid-area: zoomin;\n}\n\nhelix-headless-map::part(zoom-out) {\n grid-area: zoomout;\n}\n\nhelix-headless-map::part(fullscreen) {\n grid-area: full;\n}\n\nhelix-headless-map::part(pan-up-button),\nhelix-headless-map::part(pan-start-button),\nhelix-headless-map::part(pan-end-button),\nhelix-headless-map::part(pan-down-button),\nhelix-headless-map::part(zoom-in-button),\nhelix-headless-map::part(zoom-out-button),\nhelix-headless-map::part(fullscreen-button) {\n background-color: var(--_gray-surface);\n block-size: 2rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n cursor: pointer;\n inline-size: 2rem;\n}\n\n/* What stands in for somebody else's map in a preview. */\n.stand-in {\n align-items: center;\n block-size: 100%;\n color: var(--_gray-muted);\n display: flex;\n justify-content: center;\n}","description":"The map frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-map label=\"Edinburgh city center\">\n <!-- Put your map here, drawn by MapLibre, Leaflet, an image, or a canvas. -->\n <div class=\"stand-in\">Map</div>\n\n <span slot=\"attribution\">© OpenStreetMap contributors</span>\n</helix-headless-map>","imports":["import '@fusion.dev/helix-headless/map'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-map label=\"Edinburgh city center\">\n {/* Put your map here, drawn by MapLibre, Leaflet, an image, or a canvas. */}\n <div className=\"stand-in\">Map</div>\n\n <span slot=\"attribution\">© OpenStreetMap contributors</span>\n </helix-headless-map>\n )\n}"}],"megamenu":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-navigation {\n display: block;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-megamenu {\n display: inline-flex;\n}\n\nhelix-headless-megamenu::part(trigger) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n min-block-size: 2rem;\n padding-inline: 0.5rem;\n}\n\nhelix-headless-megamenu::part(trigger):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-megamenu:state(open)::part(trigger) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-megamenu::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-megamenu::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n gap: 2rem;\n grid-auto-columns: minmax(15rem, 1fr);\n grid-auto-flow: column;\n inline-size: max-content;\n inset: auto;\n line-height: 1.5;\n margin: 0;\n max-inline-size: min(52rem, calc(100% - 4rem));\n padding: 1rem;\n}\n\nhelix-headless-megamenu::part(surface):popover-open {\n display: grid;\n}\n\n/* A panel taking over from another grows or shrinks from that one's size. */\nhelix-headless-megamenu:is(:state(from-start), :state(from-end))::part(surface) {\n animation: megamenu-resize 200ms ease-out;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-megamenu:is(:state(from-start), :state(from-end))::part(surface) {\n animation: none;\n }\n}\n\n/* Clipped only while it resizes, so nothing changes about the open panel. */\n@keyframes megamenu-resize {\n from {\n block-size: var(--megamenu-from-block-size);\n inline-size: var(--megamenu-from-inline-size);\n overflow: clip;\n }\n\n to {\n block-size: var(--megamenu-surface-block-size);\n inline-size: var(--megamenu-surface-inline-size);\n overflow: clip;\n }\n}\n\nhelix-headless-megamenu:state(narrow)::part(surface) {\n border: none;\n border-block-end: 1px solid var(--_gray-edge);\n border-radius: 0;\n box-shadow: 0 4px 12px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.1));\n grid-auto-flow: row;\n grid-template-columns: minmax(0, 1fr);\n inline-size: auto;\n inset-block-start: var(--megamenu-top, 100%);\n inset-inline: 0;\n max-block-size: calc(100dvh - var(--megamenu-top, 0px) - 2rem);\n max-inline-size: none;\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: 1rem 1rem 2rem;\n position: fixed;\n}\n\n[data-megamenu-group] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n[data-megamenu-heading] {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.5rem;\n margin: 0 0 0.25rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-navigation [data-megamenu-item] {\n align-items: start;\n block-size: auto;\n color: var(--_gray-strong);\n column-gap: 0.75rem;\n display: grid;\n font-weight: 400;\n grid-template-columns: auto minmax(0, 1fr);\n justify-content: stretch;\n min-block-size: 0;\n padding: 0.75rem;\n row-gap: 0.25rem;\n white-space: normal;\n}\n\n[data-megamenu-item] + [data-megamenu-item] {\n margin-block-start: -0.5rem;\n}\n\nhelix-headless-navigation [data-megamenu-item]:hover {\n background-color: transparent;\n}\n\nhelix-headless-icon {\n display: inline-flex;\n flex: none;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\n[data-megamenu-item] > helix-headless-icon {\n block-size: 1.5rem;\n grid-column: 1;\n grid-row: 1 / span 2;\n inline-size: 1.5rem;\n}\n\n[data-megamenu-item] > strong {\n font-size: 0.8125rem;\n font-weight: 600;\n grid-column: 2;\n}\n\n[data-megamenu-item] > span {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n grid-column: 2;\n}\n\n[data-megamenu-item]:hover > span {\n color: var(--_gray-strong);\n}","description":"The same megamenu on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-navigation label=\"Main\">\n <a href=\"#overview\">Overview</a>\n <helix-headless-megamenu label=\"Products\">\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Work</h3>\n <a\n data-megamenu-item\n href=\"#helix\"\n >\n <helix-headless-icon name=\"cube\"></helix-headless-icon>\n <strong>Projects</strong>\n <span>Plan and track work across teams.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#icons\"\n >\n <helix-headless-icon name=\"palette\"></helix-headless-icon>\n <strong>Documents</strong>\n <span>Write, edit, and share files.</span>\n </a>\n </div>\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Insights</h3>\n <a\n data-megamenu-item\n href=\"#cortex\"\n >\n <helix-headless-icon name=\"pulse\"></helix-headless-icon>\n <strong>Reports</strong>\n <span>See how your projects are doing.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#trace\"\n >\n <helix-headless-icon name=\"strategy\"></helix-headless-icon>\n <strong>Dashboards</strong>\n <span>Track the numbers you care about.</span>\n </a>\n </div>\n </helix-headless-megamenu>\n <a href=\"#pricing\">Pricing</a>\n</helix-headless-navigation>","imports":["import '@fusion.dev/helix-headless/megamenu'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","layout":"padded","min":360,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-navigation label=\"Main\">\n <a href=\"#overview\">Overview</a>\n <helix-headless-megamenu label=\"Products\">\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Work</h3>\n <a\n data-megamenu-item\n href=\"#helix\"\n >\n <helix-headless-icon name=\"cube\"></helix-headless-icon>\n <strong>Projects</strong>\n <span>Plan and track work across teams.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#icons\"\n >\n <helix-headless-icon name=\"palette\"></helix-headless-icon>\n <strong>Documents</strong>\n <span>Write, edit, and share files.</span>\n </a>\n </div>\n <div data-megamenu-group>\n <h3 data-megamenu-heading>Insights</h3>\n <a\n data-megamenu-item\n href=\"#cortex\"\n >\n <helix-headless-icon name=\"pulse\"></helix-headless-icon>\n <strong>Reports</strong>\n <span>See how your projects are doing.</span>\n </a>\n <a\n data-megamenu-item\n href=\"#trace\"\n >\n <helix-headless-icon name=\"strategy\"></helix-headless-icon>\n <strong>Dashboards</strong>\n <span>Track the numbers you care about.</span>\n </a>\n </div>\n </helix-headless-megamenu>\n <a href=\"#pricing\">Pricing</a>\n </helix-headless-navigation>\n )\n}"}],"menu":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button:not(:disabled)::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-menu::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inset: auto;\n margin: 0;\n min-inline-size: 12rem;\n overflow-y: auto;\n padding: 0.5rem 0;\n}\n\nhelix-headless-menu::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.25rem;\n margin-block-end: 0.25rem;\n padding: 0.25rem 0.5rem 0.5rem;\n}\n\nhelix-headless-menu::part(back) {\n all: unset;\n align-items: center;\n block-size: 1.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 1.5rem;\n justify-content: center;\n}\n\nhelix-headless-menu::part(back):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-menu::part(back):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-menu::part(back-mark) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-menu::part(title) {\n font-size: 0.75rem;\n font-weight: 500;\n}\n\nhelix-headless-menu-item {\n display: block;\n}\n\nhelix-headless-menu-item::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.75rem;\n font-weight: 500;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n text-decoration: none;\n user-select: none;\n}\n\nhelix-headless-menu-item::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-menu-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-menu-item::part(start) {\n align-items: center;\n color: var(--_gray-muted);\n display: flex;\n}\n\nhelix-headless-menu-item > [slot=\"start\"] {\n margin-inline-end: 0.5rem;\n}\n\nhelix-headless-menu-item::part(mark) {\n block-size: 1rem;\n color: var(--_gray-muted);\n flex: none;\n inline-size: 1.5rem;\n margin-inline-start: auto;\n padding-inline-start: 0.5rem;\n}\n\nhelix-headless-menu-item:state(checked)::part(mark) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-menu > helix-headless-divider {\n background-color: var(--_gray-line);\n block-size: 1px;\n display: block;\n margin-block: 0.25rem;\n}\n\nhelix-headless-menu:state(drilled) > helix-headless-divider {\n display: none;\n}\n\nhelix-headless-icon {\n block-size: 1rem;\n display: inline-flex;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}","description":"The menu on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-menu label=\"View options\">\n <helix-headless-button slot=\"trigger\">View options</helix-headless-button>\n\n <helix-headless-menu-item value=\"one\">\n Sort by\n <helix-headless-menu-item\n checkable\n checked\n exclusive\n slot=\"submenu\"\n value=\"one-a\"\n >\n Name\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n exclusive\n slot=\"submenu\"\n value=\"one-b\"\n >\n Date modified\n </helix-headless-menu-item>\n </helix-headless-menu-item>\n\n <helix-headless-divider></helix-headless-divider>\n\n <helix-headless-menu-item\n checkable\n checked\n value=\"two\"\n >Show hidden files</helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n value=\"three\"\n >Show file extensions</helix-headless-menu-item>\n</helix-headless-menu>","imports":["import '@fusion.dev/helix-headless/menu'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/divider'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-menu label=\"View options\">\n <helix-headless-button slot=\"trigger\">View options</helix-headless-button>\n\n <helix-headless-menu-item value=\"one\">\n Sort by\n <helix-headless-menu-item\n checkable\n checked\n exclusive\n slot=\"submenu\"\n value=\"one-a\"\n >\n Name\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n exclusive\n slot=\"submenu\"\n value=\"one-b\"\n >\n Date modified\n </helix-headless-menu-item>\n </helix-headless-menu-item>\n\n <helix-headless-divider></helix-headless-divider>\n\n <helix-headless-menu-item\n checkable\n checked\n value=\"two\"\n >\n Show hidden files\n </helix-headless-menu-item>\n <helix-headless-menu-item\n checkable\n value=\"three\"\n >\n Show file extensions\n </helix-headless-menu-item>\n </helix-headless-menu>\n )\n}"}],"meter":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-meter {\n display: block;\n}\n\nhelix-headless-meter[show-value] {\n align-items: center;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 1fr auto;\n}\n\nhelix-headless-meter::part(value) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n min-inline-size: 3ch;\n text-align: end;\n}\n\nhelix-headless-meter::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 1rem;\n border-radius: var(--_radius-control);\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-meter::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: 100%;\n inline-size: 100%;\n scale: var(--meter-fraction, 0) 1;\n transform-origin: left center;\n}\n\nhelix-headless-meter:dir(rtl)::part(indicator) {\n transform-origin: right center;\n}\n\nhelix-headless-meter::part(tick) {\n background-color: var(--_gray-surface);\n block-size: 100%;\n inline-size: 2px;\n inset-block-start: 0;\n inset-inline-start: var(--meter-at, 0%);\n position: absolute;\n translate: -50%;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"]) {\n display: inline-grid;\n place-items: center;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(track) {\n background-color: transparent;\n block-size: 6rem;\n grid-area: 1 / 1;\n inline-size: 6rem;\n}\n\nhelix-headless-meter[shape=\"ring\"]::part(track) {\n rotate: -90deg;\n}\n\nhelix-headless-meter[shape=\"arc\"]::part(track) {\n rotate: 135deg;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(groove),\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(indicator) {\n cx: 50%;\n cy: 50%;\n fill: none;\n r: calc(50% - 0.25rem);\n stroke-width: 0.5rem;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(groove) {\n stroke: var(--_gray-subtle);\n stroke-dasharray: var(--meter-sweep) 100;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(indicator) {\n scale: none;\n stroke: var(--_gray-strong);\n stroke-dasharray: var(--meter-along) 100;\n}\n\nhelix-headless-meter:is([shape=\"ring\"], [shape=\"arc\"])::part(value) {\n grid-area: 1 / 1;\n}","description":"The same meter on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-meter\n label=\"Disk used\"\n show-value\n value=\"42\"\n></helix-headless-meter>","imports":["import '@fusion.dev/helix-headless/meter'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-meter\n label=\"Disk used\"\n show-value\n value={42}\n ></helix-headless-meter>\n )\n}"}],"motion-toggle":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n.row {\n align-items: center;\n display: flex;\n gap: 1rem;\n}\n\nhelix-headless-motion-toggle::part(button) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-line);\n border-radius: 0.375rem;\n color: var(--_gray-strong);\n display: inline-flex;\n gap: 0.25rem;\n min-block-size: 2rem;\n min-inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-motion-toggle::part(icon) {\n display: inline-flex;\n}\n\nhelix-headless-motion-toggle::part(button)[aria-pressed=\"true\"] {\n background-color: var(--_gray-line);\n}","description":"The page's pause, as an icon alone and with words beside it. A press pauses every motion on the page that starts by itself.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-motion-toggle></helix-headless-motion-toggle>\n <helix-headless-motion-toggle>Pause motion</helix-headless-motion-toggle>\n</div>","imports":["import '@fusion.dev/helix-headless/motion-toggle'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-motion-toggle></helix-headless-motion-toggle>\n <helix-headless-motion-toggle>Pause motion</helix-headless-motion-toggle>\n </div>\n )\n}"}],"navigation":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-navigation {\n display: block;\n}\n\nhelix-headless-navigation::part(nav) {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n min-inline-size: 0;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-navigation::part(indicator) {\n background-color: var(--_gray-subtle);\n block-size: var(--indicator-block-size, 0);\n border-radius: var(--_radius-control);\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 50%;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) -50%;\n}\n\nhelix-headless-navigation a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n min-block-size: 2rem;\n padding-inline: 0.75rem;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n z-index: 1;\n}\n\nhelix-headless-navigation a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-navigation a[aria-current=\"page\"] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-navigation a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The same navigation on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-navigation label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"/one\"\n >Overview</a>\n <a href=\"/two\">Activity</a>\n <a href=\"/three\">Settings</a>\n</helix-headless-navigation>","imports":["import '@fusion.dev/helix-headless/navigation'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-navigation label=\"Sections\">\n {' '}\n <a\n aria-current=\"page\"\n href=\"/one\"\n >\n Overview\n </a>{' '}\n <a href=\"/two\">Activity</a> <a href=\"/three\">Settings</a>{' '}\n </helix-headless-navigation>\n )\n}"}],"notifications":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-notifications {\n color: var(--_gray-strong);\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n line-height: 1.5;\n max-inline-size: 28rem;\n}\n\nhelix-headless-notifications:state(media) {\n --notifications-media-column: 2.25rem;\n}\n\nhelix-headless-notifications::part(header) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n display: flex;\n gap: 0.75rem;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-notifications h2 {\n font-size: 1.3125rem;\n margin: 0;\n}\n\nhelix-headless-notifications::part(footer) {\n border-block-start: 1px solid var(--_gray-line);\n padding: 0.75rem 1rem;\n}\n\nhelix-headless-notifications > [slot=\"footer\"] {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n text-decoration: none;\n}\n\nhelix-headless-notifications::part(mark-all),\nhelix-headless-notification::part(dismiss) {\n all: unset;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n}\n\nhelix-headless-notifications::part(mark-all) {\n font-size: 0.8125rem;\n padding: 0.25rem;\n}\n\nhelix-headless-notifications::part(mark-all):hover {\n color: var(--_gray-strong);\n}\n\nhelix-headless-notifications::part(mark-all):focus-visible,\nhelix-headless-notification::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-notification {\n display: block;\n}\n\nhelix-headless-notification::part(item) {\n align-items: start;\n border-block-end: 1px solid var(--_gray-line);\n display: grid;\n grid-template-columns: minmax(var(--notifications-media-column, 0px), auto) minmax(0, 1fr) auto;\n padding: 0.5rem 1rem;\n position: relative;\n}\n\nhelix-headless-notification:last-of-type::part(item) {\n border-block-end-color: transparent;\n}\n\nhelix-headless-notification:not(:state(read))::part(item)::before {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n border-radius: 9999px;\n content: \"\";\n inline-size: 0.5rem;\n inset-block-start: calc(0.5rem + (1.21875rem - 0.5rem) / 2);\n inset-inline-start: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-notification::part(media) {\n display: grid;\n grid-template-rows: 1.21875rem;\n place-items: center start;\n}\n\nhelix-headless-notification > helix-headless-avatar {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border-radius: 9999px;\n color: var(--_gray-strong);\n display: inline-flex;\n inline-size: 1.5rem;\n justify-content: center;\n overflow: hidden;\n}\n\nhelix-headless-notification > helix-headless-avatar::part(initials) {\n font-size: 0.6rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n line-height: 1;\n}\n\nhelix-headless-notification > helix-headless-icon {\n block-size: 1.5rem;\n color: var(--_gray-muted);\n display: inline-flex;\n inline-size: 1.5rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n inline-size: 100%;\n}\n\nhelix-headless-notification::part(body) {\n display: grid;\n gap: 0.25rem;\n}\n\nhelix-headless-notification::part(label) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n line-height: 1.21875rem;\n}\n\nhelix-headless-notification:not(:state(read))::part(label) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-notification code {\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n}\n\nhelix-headless-notification::part(actions) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n}\n\nhelix-headless-notification:not(:state(actions))::part(actions) {\n display: none;\n}\n\nhelix-headless-notification:state(actions)::part(actions) {\n margin-block-start: 0.25rem;\n}\n\nhelix-headless-notification > button[slot=\"actions\"] {\n all: unset;\n align-items: center;\n background-color: var(--_gray-fill);\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding-inline: 1rem;\n}\n\nhelix-headless-notification > button[slot=\"actions\"]:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-notification::part(trailing) {\n align-items: center;\n align-self: start;\n block-size: 1.21875rem;\n display: flex;\n justify-content: end;\n margin-inline-start: 0.75rem;\n position: relative;\n}\n\nhelix-headless-notification::part(time) {\n color: var(--_gray-muted);\n display: block;\n font-size: 0.75rem;\n line-height: 1.21875rem;\n}\n\nhelix-headless-notification::part(controls) {\n align-items: center;\n display: flex;\n inset-block-start: 50%;\n inset-inline-end: -0.5rem;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n translate: 0 -50%;\n}\n\nhelix-headless-notification:is(:hover, :focus-within):state(controls)::part(time) {\n opacity: 0;\n}\n\nhelix-headless-notification:is(:hover, :focus-within):state(controls)::part(controls) {\n opacity: 1;\n pointer-events: auto;\n}\n\nhelix-headless-notification::part(dismiss) {\n block-size: 2rem;\n display: grid;\n inline-size: 2rem;\n margin-inline-start: 0.25rem;\n place-items: center;\n}\n\nhelix-headless-notification::part(dismiss):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-notification::part(dismiss-mark) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}","description":"A feed with unread items, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-notifications\n id=\"raw\"\n label=\"Notifications\"\n mark-all\n>\n <h2 slot=\"header\">Notifications</h2>\n\n <helix-headless-notification dismissible>\n <helix-headless-avatar\n name=\"Ada Okonjo\"\n slot=\"media\"\n ></helix-headless-avatar>\n <strong>Ada Okonjo</strong> approved your deploy to production.\n <button\n slot=\"actions\"\n type=\"button\"\n >View</button>\n </helix-headless-notification>\n\n <helix-headless-notification dismissible>\n <helix-headless-icon\n name=\"warning\"\n slot=\"media\"\n ></helix-headless-icon>\n Build <strong>#4821</strong> failed on <code>main</code>\n <button\n slot=\"actions\"\n type=\"button\"\n >Logs</button>\n </helix-headless-notification>\n\n <helix-headless-notification\n default-read\n dismissible\n >\n <helix-headless-avatar\n name=\"Platform Team\"\n slot=\"media\"\n ></helix-headless-avatar>\n Your invitation to the <strong>Platform</strong> team was accepted.\n </helix-headless-notification>\n\n <a\n href=\"#all\"\n slot=\"footer\"\n >See everything</a>\n</helix-headless-notifications>\n\n<script>\n const raw = document.getElementById('raw')\n const ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString()\n const items = raw.querySelectorAll('helix-headless-notification')\n items[0].at = ago(3)\n items[1].at = ago(42)\n items[2].at = ago(1500)\n</script>","imports":["import '@fusion.dev/helix-headless/notifications'","import '@fusion.dev/helix-headless/avatar'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\nimport { useEffect, useState } from 'react'\n\nconst ago = (minutes: number): string => new Date(Date.now() - minutes * 60000).toISOString()\n\nconst AGES = [3, 42, 1500]\n\nexport function Example() {\n /* The timestamps are set after mount, relative to now, so the server and the\n client render the same markup. */\n const [at, setAt] = useState<string[]>([])\n\n useEffect(() => {\n setAt(AGES.map(ago))\n }, [])\n\n return (\n <helix-headless-notifications\n id=\"raw\"\n label=\"Notifications\"\n mark-all\n >\n <h2 slot=\"header\">Notifications</h2>\n <helix-headless-notification\n at={at[0]}\n dismissible\n >\n <helix-headless-avatar\n name=\"Ada Okonjo\"\n slot=\"media\"\n ></helix-headless-avatar>\n <strong>Ada Okonjo</strong> approved your deploy to production.\n <button\n slot=\"actions\"\n type=\"button\"\n >\n View\n </button>\n </helix-headless-notification>\n <helix-headless-notification\n at={at[1]}\n dismissible\n >\n <helix-headless-icon\n name=\"warning\"\n slot=\"media\"\n ></helix-headless-icon>\n Build <strong>#4821</strong> failed on <code>main</code>\n <button\n slot=\"actions\"\n type=\"button\"\n >\n Logs\n </button>\n </helix-headless-notification>\n <helix-headless-notification\n at={at[2]}\n default-read\n dismissible\n >\n <helix-headless-avatar\n name=\"Platform Team\"\n slot=\"media\"\n ></helix-headless-avatar>\n Your invitation to the <strong>Platform</strong> team was accepted.\n </helix-headless-notification>\n <a\n href=\"#all\"\n slot=\"footer\"\n >\n See everything\n </a>\n </helix-headless-notifications>\n )\n}"}],"number-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-number-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-number-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-number-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n}\n\nhelix-headless-number-input:not(:disabled)::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-number-input:focus-within::part(field) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-number-input::part(control) {\n all: unset;\n block-size: 100%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 0;\n padding-inline: 0.5rem;\n text-align: center;\n}\n\nhelix-headless-number-input::part(decrement),\nhelix-headless-number-input::part(increment) {\n all: unset;\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-number-input::part(decrement) {\n border-inline-end: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-number-input::part(increment) {\n border-inline-start: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-number-input::part(decrement):hover:not(:disabled),\nhelix-headless-number-input::part(increment):hover:not(:disabled) {\n background-color: var(--_gray-surface);\n color: var(--_gray-strong);\n}\n\nhelix-headless-number-input::part(decrement):focus-visible,\nhelix-headless-number-input::part(increment):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-number-input::part(decrement):disabled,\nhelix-headless-number-input::part(increment):disabled {\n cursor: default;\n opacity: 0.4;\n}\n\nhelix-headless-number-input::part(decrement-mark),\nhelix-headless-number-input::part(increment-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-number-input::part(hint),\nhelix-headless-number-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-number-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-number-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-number-input:disabled::part(field) {\n cursor: not-allowed;\n opacity: 0.5;\n}","description":"The number input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-number-input\n default-value=\"3\"\n label=\"Guests\"\n min=\"1\"\n></helix-headless-number-input>","imports":["import '@fusion.dev/helix-headless/number-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-number-input\n default-value=\"3\"\n label=\"Guests\"\n min={1}\n ></helix-headless-number-input>\n )\n}"}],"object-inspector":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-object-inspector {\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n}\n\nhelix-headless-object-inspector::part(header) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-block-end: none;\n border-start-end-radius: var(--_radius-panel);\n border-start-start-radius: var(--_radius-panel);\n display: flex;\n padding: 0.5rem 1rem;\n}\n\nhelix-headless-object-inspector::part(label) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n}\n\nhelix-headless-object-inspector::part(frame) {\n position: relative;\n}\n\nhelix-headless-object-inspector::part(tree) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-panel);\n color: var(--_gray-strong);\n font-family:\n ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n line-height: 1.5;\n padding-block: 0.5rem;\n}\n\nhelix-headless-object-inspector[label]::part(tree) {\n border-start-end-radius: 0;\n border-start-start-radius: 0;\n}\n\nhelix-headless-object-inspector::part(row):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-object-inspector:focus-within::part(row-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-object-inspector::part(row) {\n overflow: hidden;\n padding-inline-end: 3rem;\n padding-inline-start: calc(var(--object-inspector-level) * 1.5rem + 0.75rem + 1em + 0.25rem);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-object-inspector::part(toggle) {\n block-size: 1em;\n color: var(--_gray-muted);\n inline-size: 1em;\n margin-inline: calc(-1em - 0.25rem) 0.25rem;\n vertical-align: -0.125em;\n}\n\nhelix-headless-object-inspector::part(string),\nhelix-headless-object-inspector::part(number),\nhelix-headless-object-inspector::part(boolean),\nhelix-headless-object-inspector::part(null),\nhelix-headless-object-inspector::part(summary),\nhelix-headless-object-inspector::part(count) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-object-inspector::part(count) {\n font-family: system-ui, sans-serif;\n font-size: 0.75rem;\n margin-inline-start: 0.5rem;\n}\n\nhelix-headless-object-inspector::part(copy) {\n inset-block-start: 0.25rem;\n inset-inline-end: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-object-inspector::part(copy-button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-grid;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-object-inspector::part(copy-button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-object-inspector::part(copy-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-object-inspector::part(copy-mark) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}\n\nhelix-headless-object-inspector::part(copy-tooltip-surface) {\n background-color: var(--_gray-strong);\n border: none;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n inset: auto;\n line-height: 1.2;\n margin: 0;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-object-inspector::part(copy-tooltip-arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}","description":"The same API response on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<script\n id=\"response\"\n type=\"application/json\"\n>\n {\n \"build\": { \"cache\": { \"hit\": true, \"size\": 1840211 }, \"duration\": 41.2 },\n \"createdAt\": 1767225600000,\n \"id\": \"dpl_8f2c\",\n \"meta\": { \"author\": \"Ada Okonjo\", \"branch\": \"main\", \"commit\": \"4f2a9c1e\" },\n \"public\": true,\n \"regions\": [\"iad1\", \"sfo1\", \"fra1\"],\n \"state\": \"READY\",\n \"target\": null\n }\n</script>\n\n<helix-headless-object-inspector\n default-depth=\"2\"\n for=\"response\"\n label=\"GET /v1/deployments/dpl_8f2c\"\n></helix-headless-object-inspector>","imports":["import '@fusion.dev/helix-headless/object-inspector'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nconst RESPONSE = {\n build: { cache: { hit: true, size: 1840211 }, duration: 41.2 },\n createdAt: 1767225600000,\n id: 'dpl_8f2c',\n meta: { author: 'Ada Okonjo', branch: 'main', commit: '4f2a9c1e' },\n public: true,\n regions: ['iad1', 'sfo1', 'fra1'],\n state: 'READY',\n target: null,\n}\n\nexport function Example() {\n return (\n <>\n {/* The JSON is written into the page because React hydration drops object\n properties on custom elements. The text survives server rendering. */}\n <script\n id=\"response\"\n type=\"application/json\"\n >\n {JSON.stringify(RESPONSE)}\n </script>\n\n <helix-headless-object-inspector\n default-depth=\"2\"\n for=\"response\"\n label=\"GET /v1/deployments/dpl_8f2c\"\n ></helix-headless-object-inspector>\n </>\n )\n}"}],"option":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.listbox {\n max-inline-size: 20rem;\n}\n\nhelix-headless-option {\n display: block;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option::part(text) {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-inline-size: 0;\n}\n\nhelix-headless-option::part(label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-option[disabled]::part(item) {\n cursor: default;\n opacity: 0.5;\n}","description":"The same option on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<!-- An option needs a parent with `role=\"listbox\"`. -->\n<div\n aria-label=\"Assignee\"\n class=\"listbox\"\n role=\"listbox\"\n>\n <helix-headless-option\n selected\n value=\"one\"\n >Alex Kim</helix-headless-option>\n <helix-headless-option\n data-active\n value=\"two\"\n >Sam Patel</helix-headless-option>\n <helix-headless-option value=\"three\">Jordan Lee</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >Priya Shah</helix-headless-option>\n</div>","imports":["import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n {/* An option needs a parent with `role=\"listbox\"`. */}\n <div\n aria-label=\"Assignee\"\n className=\"listbox\"\n role=\"listbox\"\n >\n <helix-headless-option\n selected\n value=\"one\"\n >\n Alex Kim\n </helix-headless-option>\n <helix-headless-option\n data-active\n value=\"two\"\n >\n Sam Patel\n </helix-headless-option>\n <helix-headless-option value=\"three\">Jordan Lee</helix-headless-option>\n <helix-headless-option\n disabled\n value=\"four\"\n >\n Priya Shah\n </helix-headless-option>\n </div>\n </>\n )\n}"}],"outline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.layout {\n container-type: inline-size;\n display: grid;\n gap: 2rem;\n grid-template-columns: 12rem minmax(0, 1fr);\n}\n\n.nav {\n align-self: start;\n position: sticky;\n top: 1rem;\n}\n\n@container (width < 36rem) {\n .nav,\n .prose {\n grid-column: 1 / -1;\n }\n\n .nav {\n position: static;\n }\n}\n\n.prose {\n display: flex;\n flex-direction: column;\n gap: 3rem;\n}\n\n.prose section {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n min-block-size: 60vh;\n}\n\n.prose h2 {\n color: var(--_gray-strong);\n font-size: 1.125rem;\n font-weight: 600;\n line-height: calc(0.99em + 0.5rem);\n margin: 0;\n}\n\n.prose p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-outline {\n display: block;\n}\n\nhelix-headless-outline::part(nav) {\n background-image: linear-gradient(var(--_gray-line), var(--_gray-line));\n background-position: 1.5px 0;\n background-repeat: repeat-y;\n background-size: 1px 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\nhelix-headless-outline::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: var(--indicator-block-size, 0);\n border-radius: 9999px;\n inline-size: 1px;\n inset-block-start: 0;\n inset-inline-start: 1.5px;\n position: absolute;\n translate: 0 var(--indicator-y, 0);\n}\n\nhelix-headless-outline:hover::part(indicator) {\n inline-size: 2px;\n inset-inline-start: 1px;\n}\n\nhelix-headless-outline a {\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.5;\n margin-inline-start: 0.25rem;\n padding: 0.25rem 0.75rem;\n text-decoration: none;\n}\n\nhelix-headless-outline a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-outline a[aria-current] {\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-outline a[data-level=\"2\"] {\n padding-inline-start: 1.5rem;\n}\n\nhelix-headless-outline a[data-level=\"3\"] {\n padding-inline-start: 2.25rem;\n}\n\nhelix-headless-outline a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}","description":"The outline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"layout\">\n <helix-headless-outline\n class=\"nav\"\n label=\"On this page\"\n >\n <a href=\"#install\">Install</a>\n <a\n data-level=\"2\"\n href=\"#requirements\"\n >Requirements</a>\n <a href=\"#usage\">Usage</a>\n <a\n data-level=\"2\"\n href=\"#options\"\n >Options</a>\n <a href=\"#api\">API</a>\n </helix-headless-outline>\n\n <div class=\"prose\">\n <section id=\"install\">\n <h2>Install</h2>\n <p>Install the package with your package manager, then import it once in the entry file of your app before you use it.</p>\n </section>\n <section id=\"requirements\">\n <h2>Requirements</h2>\n <p>The package needs a current version of Node.js and a browser that supports custom elements and modern JavaScript.</p>\n </section>\n <section id=\"usage\">\n <h2>Usage</h2>\n <p>Create a client with your API key, then call its methods to read and write the projects, files, and users in your account.</p>\n </section>\n <section id=\"options\">\n <h2>Options</h2>\n <p>Pass options when you create the client to set the request timeout, the number of retries, and the base URL to use.</p>\n </section>\n <section id=\"api\">\n <h2>API</h2>\n <p>Each method returns a promise. Errors include a code and a message that you can show to the people who use your app.</p>\n </section>\n </div>\n</div>","imports":["import '@fusion.dev/helix-headless/outline'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"layout\">\n <helix-headless-outline\n className=\"nav\"\n label=\"On this page\"\n >\n <a href=\"#install\">Install</a>\n <a\n data-level=\"2\"\n href=\"#requirements\"\n >\n Requirements\n </a>\n <a href=\"#usage\">Usage</a>\n <a\n data-level=\"2\"\n href=\"#options\"\n >\n Options\n </a>\n <a href=\"#api\">API</a>\n </helix-headless-outline>\n\n <div className=\"prose\">\n <section id=\"install\">\n <h2>Install</h2>\n <p>\n Install the package with your package manager, then import it once in the entry file of\n your app before you use it.\n </p>\n </section>\n <section id=\"requirements\">\n <h2>Requirements</h2>\n <p>\n The package needs a current version of Node.js and a browser that supports custom\n elements and modern JavaScript.\n </p>\n </section>\n <section id=\"usage\">\n <h2>Usage</h2>\n <p>\n Create a client with your API key, then call its methods to read and write the projects,\n files, and users in your account.\n </p>\n </section>\n <section id=\"options\">\n <h2>Options</h2>\n <p>\n Pass options when you create the client to set the request timeout, the number of\n retries, and the base URL to use.\n </p>\n </section>\n <section id=\"api\">\n <h2>API</h2>\n <p>\n Each method returns a promise. Errors include a code and a message that you can show to\n the people who use your app.\n </p>\n </section>\n </div>\n </div>\n )\n}"}],"pagination":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-pagination {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n font-size: 0.8125rem;\n gap: 0.25rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-pagination::part(list) {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.25rem;\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\nhelix-headless-pagination::part(item) {\n display: inline-flex;\n}\n\nhelix-headless-pagination::part(page),\nhelix-headless-pagination::part(gap),\nhelix-headless-pagination::part(previous),\nhelix-headless-pagination::part(next) {\n align-items: center;\n appearance: none;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n justify-content: center;\n min-inline-size: 2rem;\n padding: 0 0.25rem;\n}\n\nhelix-headless-pagination::part(page):hover,\nhelix-headless-pagination::part(previous):hover,\nhelix-headless-pagination::part(next):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-pagination::part(page-current),\nhelix-headless-pagination::part(page-current):hover {\n background-color: var(--_gray-subtle);\n border-color: var(--_gray-edge);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-pagination::part(gap) {\n cursor: pointer;\n user-select: none;\n}\n\nhelix-headless-pagination::part(mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-pagination::part(previous):disabled,\nhelix-headless-pagination::part(next):disabled {\n cursor: default;\n opacity: 0.5;\n}\n\nhelix-headless-pagination::part(page):focus-visible,\nhelix-headless-pagination::part(gap):focus-visible,\nhelix-headless-pagination::part(previous):focus-visible,\nhelix-headless-pagination::part(next):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The pagination on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-pagination\n default-page=\"4\"\n pages=\"12\"\n></helix-headless-pagination>","imports":["import '@fusion.dev/helix-headless/pagination'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-pagination\n default-page=\"4\"\n pages={12}\n ></helix-headless-pagination>\n )\n}"}],"pin-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-pin-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-pin-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-pin-input::part(field) {\n align-self: start;\n display: flex;\n gap: 0.5rem;\n}\n\nhelix-headless-pin-input::part(cell) {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: text;\n display: flex;\n font: inherit;\n font-size: 1.125rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-pin-input::part(cell):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-pin-input::part(cell-active) {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-pin-input::part(caret) {\n background-color: currentcolor;\n block-size: 1em;\n inline-size: 1px;\n}\n\nhelix-headless-pin-input::part(placeholder) {\n color: var(--_gray-mark);\n}\n\nhelix-headless-pin-input::part(hint),\nhelix-headless-pin-input::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-pin-input::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-pin-input::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}","description":"The same pin input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-pin-input\n hint=\"Sent to your phone\"\n label=\"Verification code\"\n></helix-headless-pin-input>","imports":["import '@fusion.dev/helix-headless/pin-input'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-pin-input\n hint=\"Sent to your phone\"\n label=\"Verification code\"\n ></helix-headless-pin-input>\n )\n}"}],"popover":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n align-items: center;\n appearance: none;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding: 0 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n background-color: var(--_gray-fill);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-popover::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: 20rem;\n inset: auto;\n margin: 0;\n max-inline-size: calc(100vw - 1.5rem);\n padding: 1rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n font-size: 0.875rem;\n gap: 1rem;\n line-height: 1.5;\n}\n\n.stack p {\n margin: 0;\n}\n\n.actions {\n display: flex;\n justify-content: flex-end;\n}","description":"The same popover on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-popover\n id=\"details\"\n label=\"Project details\"\n>\n <helix-headless-button slot=\"trigger\">Project details</helix-headless-button>\n <div class=\"stack\">\n <p>\n The project has 12 members and 48 files. It was last updated on\n September 15, 2026.\n </p>\n <div class=\"actions\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"details\"\n >\n Close\n </helix-headless-button>\n </div>\n </div>\n</helix-headless-popover>","imports":["import '@fusion.dev/helix-headless/popover'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","min":380,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-popover\n id=\"details\"\n label=\"Project details\"\n >\n <helix-headless-button slot=\"trigger\">Project details</helix-headless-button>\n <div className=\"stack\">\n <p>The project has 12 members and 48 files. It was last updated on September 15, 2026.</p>\n <div className=\"actions\">\n <helix-headless-button\n command=\"--close\"\n commandfor=\"details\"\n >\n Close\n </helix-headless-button>\n </div>\n </div>\n </helix-headless-popover>\n )\n}"}],"progress":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-progress {\n display: block;\n}\n\nhelix-headless-progress[show-value] {\n align-items: center;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 1fr auto;\n}\n\nhelix-headless-progress::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 0.5rem;\n border-radius: 9999px;\n display: block;\n inline-size: 100%;\n overflow: hidden;\n}\n\nhelix-headless-progress::part(indicator) {\n background-color: var(--_gray-strong);\n block-size: 100%;\n border-radius: inherit;\n display: block;\n inline-size: calc(var(--progress-fraction, 0) * 100%);\n}\n\nhelix-headless-progress::part(value) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n line-height: 1.5;\n min-inline-size: 3ch;\n text-align: end;\n}","description":"The progress bar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-progress\n label=\"Uploading\"\n show-value\n value=\"62\"\n></helix-headless-progress>","imports":["import '@fusion.dev/helix-headless/progress'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-progress\n label=\"Uploading\"\n show-value\n value={62}\n ></helix-headless-progress>\n )\n}"}],"qr-code":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-qr-code {\n background-color: var(--_gray-surface);\n block-size: 12rem;\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n color-scheme: light;\n display: block;\n inline-size: 12rem;\n}\n\nhelix-headless-qr-code::part(code) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n}","description":"The QR code on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-qr-code\n label=\"Documentation website\"\n value=\"https://fusion.dev/helix\"\n></helix-headless-qr-code>","imports":["import '@fusion.dev/helix-headless/qr-code'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-qr-code\n label=\"Documentation website\"\n value=\"https://fusion.dev/helix\"\n ></helix-headless-qr-code>\n )\n}"}],"quote":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\np {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-quote::part(quote) {\n color: var(--_gray-muted);\n font-style: italic;\n}","description":"The quote on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<p>\n Alex said\n <helix-headless-quote cite=\"https://example.com/source\">the report will be ready on Friday</helix-headless-quote>\n during the call.\n</p>","imports":["import '@fusion.dev/helix-headless/quote'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <p>\n {' Alex said '}\n <helix-headless-quote cite=\"https://example.com/source\">\n the report will be ready on Friday\n </helix-headless-quote>\n {' during the call. '}\n </p>\n )\n}"}],"radio":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-radio-group {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-radio-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-radio-group::part(items) {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-radio-group::part(hint),\nhelix-headless-radio-group::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-radio-group::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-radio-group::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-radio {\n display: block;\n}\n\nhelix-headless-radio::part(item) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-radio::part(box) {\n background-color: var(--_gray-surface);\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n display: grid;\n flex: none;\n inline-size: 1.25rem;\n place-items: center;\n}\n\n/* The dot, drawn on the circle rather than slotted into it. The tier renders no\n box for this: a consumer who wants one writes it, and a pseudo-element is the\n cheapest way to write it. */\nhelix-headless-radio::part(box)::after {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n border-radius: 50%;\n content: \"\";\n inline-size: 0.5rem;\n scale: 0;\n}\n\nhelix-headless-radio:not([disabled]):hover::part(box) {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-radio:state(selected)::part(box) {\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-radio:state(selected)::part(box)::after {\n scale: 1;\n}\n\nhelix-headless-radio::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-radio[disabled] {\n opacity: 0.5;\n}\n\nhelix-headless-radio::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The radio on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-radio-group\n default-value=\"one\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"group\"\n>\n <helix-headless-radio value=\"one\">Free</helix-headless-radio>\n <helix-headless-radio value=\"two\">Pro</helix-headless-radio>\n <helix-headless-radio value=\"three\">Team</helix-headless-radio>\n</helix-headless-radio-group>","imports":["import '@fusion.dev/helix-headless/radio'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-radio-group\n default-value=\"one\"\n hint=\"Billed monthly\"\n label=\"Plan\"\n name=\"group\"\n >\n <helix-headless-radio value=\"one\">Free</helix-headless-radio>\n <helix-headless-radio value=\"two\">Pro</helix-headless-radio>\n <helix-headless-radio value=\"three\">Team</helix-headless-radio>\n </helix-headless-radio-group>\n )\n}"}],"rating":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-rating {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-rating::part(field) {\n align-items: center;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-rating::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-rating::part(hint),\nhelix-headless-rating::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n}\n\nhelix-headless-rating::part(marks) {\n display: inline-flex;\n position: relative;\n}\n\nhelix-headless-rating::part(track),\nhelix-headless-rating::part(fill) {\n display: inline-flex;\n gap: 0.25rem;\n}\n\nhelix-headless-rating::part(track) {\n color: var(--_gray-line);\n}\n\nhelix-headless-rating::part(fill) {\n color: var(--_gray-strong);\n inline-size: calc(var(--rating-full, 0) * 1.5rem + var(--rating-part, 0) * 1.25rem);\n inset-block: 0;\n inset-inline-start: 0;\n overflow: hidden;\n position: absolute;\n}\n\nhelix-headless-rating::part(mark) {\n background-color: currentColor;\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.4l6.5-.9z\"/></svg>');\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-rating::part(option) {\n all: unset;\n box-sizing: border-box;\n cursor: pointer;\n inline-size: calc((100% + 0.25rem) / var(--rating-steps, 1));\n inset-block: 0;\n inset-inline-start: calc(\n (var(--rating-step, 1) - 1) *\n (100% + 0.25rem) /\n var(--rating-steps, 1) -\n 0.125rem\n );\n position: absolute;\n}\n\nhelix-headless-rating::part(option):focus-visible {\n border-radius: var(--_radius-control);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-rating::part(value) {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n line-height: 1;\n}","description":"The rating on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-rating\n default-value=\"3\"\n label=\"Rate your order\"\n></helix-headless-rating>","imports":["import '@fusion.dev/helix-headless/rating'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-rating\n default-value=\"3\"\n label=\"Rate your order\"\n ></helix-headless-rating>\n )\n}"}],"scatter-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n[data-hidden-visually] {\n block-size: 1px;\n border: 0;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\nhelix-headless-scatter-chart {\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n\n display: block;\n position: relative;\n}\n\nhelix-headless-scatter-chart::part(plane) {\n column-gap: 0.5rem;\n display: grid;\n grid-template-areas:\n \"y-name y-name\"\n \"y-axis plot\"\n \". x-axis\"\n \". x-name\";\n grid-template-columns: auto minmax(0, 1fr);\n row-gap: 0.5rem;\n}\n\nhelix-headless-scatter-chart::part(plot) {\n block-size: 12.25rem;\n grid-area: plot;\n position: relative;\n}\n\nhelix-headless-scatter-chart::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-scatter-chart::part(gridline) {\n stroke: var(--_gray-fill);\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-scatter-chart::part(points) {\n opacity: 0.8;\n}\n\nhelix-headless-scatter-chart::part(point),\nhelix-headless-scatter-chart::part(point-ring) {\n fill: none;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-scatter-chart::part(point) {\n stroke: var(--chart-series);\n stroke-width: 8px;\n}\n\nhelix-headless-scatter-chart::part(point-ring) {\n stroke: var(--_gray-surface);\n stroke-width: 10px;\n}\n\nhelix-headless-scatter-chart::part(point-active) {\n background-color: var(--chart-series);\n block-size: 8px;\n border-radius: 50%;\n box-shadow: 0 0 0 1px var(--_gray-surface);\n inline-size: 8px;\n inset-block-start: var(--chart-point-y);\n inset-inline-start: var(--chart-point-x);\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-scatter-chart::part(y-axis),\nhelix-headless-scatter-chart::part(x-axis) {\n display: grid;\n}\n\nhelix-headless-scatter-chart::part(y-axis) {\n grid-area: y-axis;\n}\n\nhelix-headless-scatter-chart::part(x-axis) {\n grid-area: x-axis;\n}\n\nhelix-headless-scatter-chart::part(x-tick),\nhelix-headless-scatter-chart::part(y-tick) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n grid-area: 1 / 1;\n line-height: 1;\n position: relative;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(x-tick) {\n inset-inline-start: var(--chart-tick);\n justify-self: start;\n translate: -50% 0;\n}\n\nhelix-headless-scatter-chart::part(y-tick) {\n align-self: start;\n inset-block-start: var(--chart-tick);\n justify-self: end;\n translate: 0 -50%;\n}\n\nhelix-headless-scatter-chart::part(x-name),\nhelix-headless-scatter-chart::part(y-name) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.5;\n}\n\nhelix-headless-scatter-chart::part(x-name) {\n grid-area: x-name;\n justify-self: end;\n}\n\nhelix-headless-scatter-chart::part(y-name) {\n grid-area: y-name;\n justify-self: start;\n}\n\nhelix-headless-scatter-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n}\n\nhelix-headless-scatter-chart::part(tooltip-surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-line);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n padding: 0.5rem;\n}\n\nhelix-headless-scatter-chart::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-scatter-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same scatter chart on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <table\n data-hidden-visually\n id=\"pages\"\n >\n <caption>Page weight and load time</caption>\n <thead>\n <tr>\n <th scope=\"col\">Page</th>\n <th scope=\"col\">Weight (KB)</th>\n <th scope=\"col\">Load time (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Home</th>\n <td data-value=\"820\">820</td>\n <td data-value=\"1240\">1,240</td>\n </tr>\n <tr>\n <th scope=\"row\">Pricing</th>\n <td data-value=\"640\">640</td>\n <td data-value=\"980\">980</td>\n </tr>\n <tr>\n <th scope=\"row\">Plans</th>\n <td data-value=\"652\">652</td>\n <td data-value=\"994\">994</td>\n </tr>\n <tr>\n <th scope=\"row\">Compare</th>\n <td data-value=\"631\">631</td>\n <td data-value=\"1012\">1,012</td>\n </tr>\n <tr>\n <th scope=\"row\">Docs</th>\n <td data-value=\"1180\">1,180</td>\n <td data-value=\"1710\">1,710</td>\n </tr>\n <tr>\n <th scope=\"row\">Blog</th>\n <td data-value=\"1450\">1,450</td>\n <td data-value=\"2050\">2,050</td>\n </tr>\n <tr>\n <th scope=\"row\">Changelog</th>\n <td data-value=\"530\">530</td>\n <td data-value=\"860\">860</td>\n </tr>\n <tr>\n <th scope=\"row\">Careers</th>\n <td data-value=\"910\">910</td>\n <td data-value=\"1380\">1,380</td>\n </tr>\n <tr>\n <th scope=\"row\">About</th>\n <td data-value=\"470\">470</td>\n <td data-value=\"790\">790</td>\n </tr>\n <tr>\n <th scope=\"row\">Contact</th>\n <td data-value=\"380\">380</td>\n <td data-value=\"690\">690</td>\n </tr>\n <tr>\n <th scope=\"row\">Status</th>\n <td data-value=\"290\">290</td>\n <td data-value=\"520\">520</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"760\">760</td>\n <td data-value=\"1310\">1,310</td>\n </tr>\n <tr>\n <th scope=\"row\">Account</th>\n <td data-value=\"1020\">1,020</td>\n <td data-value=\"1490\">1,490</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td data-value=\"1320\">1,320</td>\n <td data-value=\"1880\">1,880</td>\n </tr>\n <tr>\n <th scope=\"row\">Support</th>\n <td data-value=\"700\">700</td>\n <td data-value=\"1150\">1,150</td>\n </tr>\n <tr>\n <th scope=\"row\">Legal</th>\n <td data-value=\"350\">350</td>\n <td data-value=\"610\">610</td>\n </tr>\n <tr>\n <th scope=\"row\">Press</th>\n <td data-value=\"980\">980</td>\n <td data-value=\"1600\">1,600</td>\n </tr>\n <tr>\n <th scope=\"row\">Events</th>\n <td data-value=\"1260\">1,260</td>\n <td data-value=\"1740\">1,740</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-scatter-chart\n for=\"pages\"\n gridlines\n ></helix-headless-scatter-chart>\n</div>","imports":["import '@fusion.dev/helix-headless/scatter-chart'"],"label":"Preview","min":300,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"export function Example() {\n return (\n <div className=\"stack\">\n <table\n data-hidden-visually\n id=\"pages\"\n >\n <caption>Page weight and load time</caption>\n <thead>\n <tr>\n <th scope=\"col\">Page</th>\n <th scope=\"col\">Weight (KB)</th>\n <th scope=\"col\">Load time (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Home</th>\n <td data-value=\"820\">820</td>\n <td data-value=\"1240\">1,240</td>\n </tr>\n <tr>\n <th scope=\"row\">Pricing</th>\n <td data-value=\"640\">640</td>\n <td data-value=\"980\">980</td>\n </tr>\n <tr>\n <th scope=\"row\">Plans</th>\n <td data-value=\"652\">652</td>\n <td data-value=\"994\">994</td>\n </tr>\n <tr>\n <th scope=\"row\">Compare</th>\n <td data-value=\"631\">631</td>\n <td data-value=\"1012\">1,012</td>\n </tr>\n <tr>\n <th scope=\"row\">Docs</th>\n <td data-value=\"1180\">1,180</td>\n <td data-value=\"1710\">1,710</td>\n </tr>\n <tr>\n <th scope=\"row\">Blog</th>\n <td data-value=\"1450\">1,450</td>\n <td data-value=\"2050\">2,050</td>\n </tr>\n <tr>\n <th scope=\"row\">Changelog</th>\n <td data-value=\"530\">530</td>\n <td data-value=\"860\">860</td>\n </tr>\n <tr>\n <th scope=\"row\">Careers</th>\n <td data-value=\"910\">910</td>\n <td data-value=\"1380\">1,380</td>\n </tr>\n <tr>\n <th scope=\"row\">About</th>\n <td data-value=\"470\">470</td>\n <td data-value=\"790\">790</td>\n </tr>\n <tr>\n <th scope=\"row\">Contact</th>\n <td data-value=\"380\">380</td>\n <td data-value=\"690\">690</td>\n </tr>\n <tr>\n <th scope=\"row\">Status</th>\n <td data-value=\"290\">290</td>\n <td data-value=\"520\">520</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td data-value=\"760\">760</td>\n <td data-value=\"1310\">1,310</td>\n </tr>\n <tr>\n <th scope=\"row\">Account</th>\n <td data-value=\"1020\">1,020</td>\n <td data-value=\"1490\">1,490</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td data-value=\"1320\">1,320</td>\n <td data-value=\"1880\">1,880</td>\n </tr>\n <tr>\n <th scope=\"row\">Support</th>\n <td data-value=\"700\">700</td>\n <td data-value=\"1150\">1,150</td>\n </tr>\n <tr>\n <th scope=\"row\">Legal</th>\n <td data-value=\"350\">350</td>\n <td data-value=\"610\">610</td>\n </tr>\n <tr>\n <th scope=\"row\">Press</th>\n <td data-value=\"980\">980</td>\n <td data-value=\"1600\">1,600</td>\n </tr>\n <tr>\n <th scope=\"row\">Events</th>\n <td data-value=\"1260\">1,260</td>\n <td data-value=\"1740\">1,740</td>\n </tr>\n </tbody>\n </table>\n\n <helix-headless-scatter-chart\n for=\"pages\"\n gridlines=\"both\"\n ></helix-headless-scatter-chart>\n </div>\n )\n}"}],"scroll-area":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-scroll-area {\n --_fade-block-start: 0rem;\n --_fade-block-end: 0rem;\n\n block-size: 12rem;\n display: block;\n inline-size: 20rem;\n position: relative;\n}\n\nhelix-headless-scroll-area:state(more-block-start) {\n --_fade-block-start: 2rem;\n}\n\nhelix-headless-scroll-area:state(more-block-end) {\n --_fade-block-end: 2rem;\n}\n\nhelix-headless-scroll-area::part(viewport) {\n block-size: 100%;\n mask-image: linear-gradient(\n to bottom,\n transparent,\n var(--_gray-strong) var(--_fade-block-start),\n var(--_gray-strong) calc(100% - var(--_fade-block-end)),\n transparent\n );\n overscroll-behavior: contain;\n scrollbar-color: var(--_gray-line) transparent;\n scrollbar-width: thin;\n}\n\nhelix-headless-scroll-area::part(viewport):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-scroll-area p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0 0 0.75rem;\n}","description":"The scroll area on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-scroll-area label=\"Release notes\">\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n</helix-headless-scroll-area>","imports":["import '@fusion.dev/helix-headless/scroll-area'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-scroll-area label=\"Release notes\">\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n </helix-headless-scroll-area>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\nhelix-headless-scroll-area {\n block-size: 12rem;\n display: block;\n inline-size: 20rem;\n position: relative;\n}\n\n/* The browser's own scrollbar goes, since the component draws one. */\nhelix-headless-scroll-area::part(viewport) {\n block-size: 100%;\n overscroll-behavior: contain;\n scrollbar-width: none;\n}\n\nhelix-headless-scroll-area::part(viewport):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\n/* Each scrollbar over the content at its edge, and shown only while the\n component names it visible. */\nhelix-headless-scroll-area::part(scrollbar) {\n opacity: 0;\n position: absolute;\n touch-action: none;\n transition: opacity 150ms;\n user-select: none;\n}\n\nhelix-headless-scroll-area::part(scrollbar-visible) {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-scroll-area::part(scrollbar) {\n transition: none;\n }\n}\n\nhelix-headless-scroll-area::part(scrollbar-vertical) {\n inline-size: 0.625rem;\n inset-block: 0;\n inset-inline-end: 0;\n}\n\nhelix-headless-scroll-area::part(scrollbar-horizontal) {\n block-size: 0.625rem;\n inset-block-end: 0;\n inset-inline: 0;\n}\n\n/* The thumb's length is its share of the track, and its start is how far\n along the content is, times the room the thumb has left. */\nhelix-headless-scroll-area::part(thumb) {\n --_thumb: max(1.5rem, var(--scroll-area-thumb-fraction) * 100%);\n\n background-color: var(--_gray-line);\n border-radius: 9999px;\n position: absolute;\n}\n\nhelix-headless-scroll-area::part(thumb-vertical) {\n block-size: var(--_thumb);\n inset-block-start: calc(var(--scroll-area-scroll-fraction) * (100% - var(--_thumb)));\n inset-inline: 2px;\n}\n\nhelix-headless-scroll-area::part(thumb-horizontal) {\n inline-size: var(--_thumb);\n inset-block: 2px;\n inset-inline-start: calc(var(--scroll-area-scroll-fraction) * (100% - var(--_thumb)));\n}\n\nhelix-headless-scroll-area p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0 0 0.75rem;\n padding-inline-end: 1rem;\n}","description":"Scrollbars drawn by the scroll area, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-scroll-area\n label=\"Release notes\"\n scrollbars=\"auto\"\n>\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n</helix-headless-scroll-area>","imports":["import '@fusion.dev/helix-headless/scroll-area'"],"label":"Scrollbars","renders":[],"slug":"scrollbars","tier":"headless","tsx":"import './scrollbars.css'\n\nexport function Example() {\n return (\n <helix-headless-scroll-area\n label=\"Release notes\"\n scrollbars=\"auto\"\n >\n <p>You can now export reports as CSV files.</p>\n <p>Search results load faster on large projects.</p>\n <p>Invoices now show the tax for each line item.</p>\n <p>Shared folders show who added each file.</p>\n <p>You can pin projects to the top of your list.</p>\n <p>Comments now support mentions and links.</p>\n <p>Dark mode is available in settings.</p>\n <p>Team admins can now remove members.</p>\n </helix-headless-scroll-area>\n )\n}"}],"select":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-select {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n position: relative;\n}\n\nhelix-headless-select::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-select::part(trigger) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n justify-content: space-between;\n line-height: 1.5;\n padding: 0 0.5rem;\n}\n\nhelix-headless-select:not(:disabled)::part(trigger):hover {\n border-color: var(--_gray-muted);\n}\n\nhelix-headless-select::part(trigger):focus-visible {\n border-color: var(--_gray-strong);\n outline: 2px solid var(--_gray-mark);\n outline-offset: 0;\n}\n\nhelix-headless-select::part(value) {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-select::part(indicator) {\n block-size: 1rem;\n fill: var(--_gray-muted);\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-select > helix-headless-icon[slot=\"indicator\"] {\n color: var(--_gray-muted);\n font-size: 1.25rem;\n}\n\nhelix-headless-select:state(open)::part(indicator),\nhelix-headless-select:state(open) > [slot=\"indicator\"] {\n scale: 1 -1;\n}\n\nhelix-headless-select::part(hint),\nhelix-headless-select::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-select::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-select::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}\n\nhelix-headless-select::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n min-inline-size: max-content;\n padding: 0.5rem 0;\n}\n\nhelix-headless-select::part(listbox-items) {\n max-block-size: 14rem;\n overflow: auto;\n}\n\nhelix-headless-select::part(listbox-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-select::part(listbox-items):focus-visible {\n outline: none;\n}\n\nhelix-headless-select::part(listbox-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-option::part(item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-option:state(active)::part(item),\nhelix-headless-option:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-option:state(selected)::part(item)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}","description":"The same select on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-select\n default-value=\"two\"\n hint=\"Used for emails and notifications\"\n label=\"Language\"\n name=\"choice\"\n>\n <helix-headless-icon\n name=\"caret-down\"\n slot=\"indicator\"\n ></helix-headless-icon>\n <helix-headless-option value=\"one\">English</helix-headless-option>\n <helix-headless-option value=\"two\">Spanish</helix-headless-option>\n <helix-headless-option value=\"three\">French</helix-headless-option>\n</helix-headless-select>","imports":["import '@fusion.dev/helix-headless/select'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/option'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-select\n default-value=\"two\"\n hint=\"Used for emails and notifications\"\n label=\"Language\"\n name=\"choice\"\n >\n <helix-headless-icon\n name=\"caret-down\"\n slot=\"indicator\"\n ></helix-headless-icon>\n <helix-headless-option value=\"one\">English</helix-headless-option>\n <helix-headless-option value=\"two\">Spanish</helix-headless-option>\n <helix-headless-option value=\"three\">French</helix-headless-option>\n </helix-headless-select>\n )\n}"}],"skeleton":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-skeleton {\n display: block;\n inline-size: 100%;\n}\n\nhelix-headless-skeleton::part(skeleton) {\n background-color: var(--_gray-fill);\n block-size: 100%;\n border-radius: var(--_radius-control);\n display: block;\n inline-size: 100%;\n}\n\n.row {\n align-items: center;\n display: flex;\n gap: 1rem;\n}\n\n.avatar {\n block-size: 2.5rem;\n flex: none;\n inline-size: 2.5rem;\n}\n\n.avatar::part(skeleton) {\n border-radius: 50%;\n}\n\n.stack {\n display: flex;\n flex: auto;\n inline-size: 16rem;\n flex-direction: column;\n gap: 0.25rem;\n min-inline-size: 0;\n}\n\n.line-name,\n.line-detail {\n block-size: 0.875rem;\n}\n\n.line-name::part(skeleton),\n.line-detail::part(skeleton) {\n border-radius: 9999px;\n}\n\n.line-name {\n inline-size: 40%;\n}\n\n.line-detail {\n inline-size: 70%;\n}","description":"The same skeleton on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-skeleton class=\"avatar\"></helix-headless-skeleton>\n <div class=\"stack\">\n <helix-headless-skeleton class=\"line-name\"></helix-headless-skeleton>\n <helix-headless-skeleton class=\"line-detail\"></helix-headless-skeleton>\n </div>\n</div>","imports":["import '@fusion.dev/helix-headless/skeleton'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-skeleton className=\"avatar\"></helix-headless-skeleton>\n <div className=\"stack\">\n <helix-headless-skeleton className=\"line-name\"></helix-headless-skeleton>\n <helix-headless-skeleton className=\"line-detail\"></helix-headless-skeleton>\n </div>\n </div>\n )\n}"}],"skip-link":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-skip-link:not(:focus-within) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-skip-link:focus-within {\n display: block;\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: fixed;\n z-index: 1;\n}\n\nhelix-headless-skip-link::part(link) {\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: inline-block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.5;\n padding: 0.75rem 1rem;\n text-decoration: none;\n}\n\nhelix-headless-skip-link::part(link):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nheader {\n align-items: center;\n block-size: 3.5rem;\n display: grid;\n gap: 1.5rem;\n grid-template-columns: 1fr auto 1fr;\n padding: 0 1.5rem;\n}\n\nheader > span {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n font-weight: 600;\n}\n\nnav {\n align-items: center;\n block-size: 2rem;\n display: flex;\n gap: 0.25rem;\n}\n\nnav a {\n align-items: center;\n block-size: 100%;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n padding: 0 0.75rem;\n text-decoration: none;\n white-space: nowrap;\n}\n\nnav a:hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nnav a[aria-current=\"page\"] {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n font-weight: 600;\n}\n\nnav a:focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nmain {\n padding-inline: 1.5rem;\n}\n\nmain p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}","description":"The skip link on the headless tier, with every style written by hand, focused here so it shows.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-skip-link></helix-headless-skip-link>\n\n<header>\n <span>Logo</span>\n <nav aria-label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >Overview</a>\n <a href=\"#two\">Projects</a>\n </nav>\n</header>\n\n<main id=\"main\">\n <p>Welcome back. You have 3 new messages.</p>\n</main>\n\n<script>\n const skip = document.querySelector('helix-headless-skip-link')\n customElements\n .whenDefined('helix-headless-skip-link')\n .then(() => skip.updateComplete)\n .then(() => skip.focus({ preventScroll: true }))\n</script>","imports":["import '@fusion.dev/helix-headless/skip-link'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\nimport { useEffect } from 'react'\n\nexport function Example() {\n useEffect(() => {\n const skip = document.querySelector('helix-headless-skip-link')\n customElements\n .whenDefined('helix-headless-skip-link')\n .then(() => skip?.updateComplete)\n .then(() => skip?.focus({ preventScroll: true }))\n }, [])\n\n return (\n <>\n <helix-headless-skip-link></helix-headless-skip-link>\n\n <header>\n <span>Logo</span>\n <nav aria-label=\"Sections\">\n <a\n aria-current=\"page\"\n href=\"#one\"\n >\n Overview\n </a>\n <a href=\"#two\">Projects</a>\n </nav>\n </header>\n\n <main id=\"main\">\n <p>Welcome back. You have 3 new messages.</p>\n </main>\n </>\n )\n}"}],"slider":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-slider {\n --_along: to right;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-slider:dir(rtl) {\n --_along: to left;\n}\n\nhelix-headless-slider::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-slider::part(field) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n}\n\nhelix-headless-slider::part(control) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb: the input is the track, its accent the thumb. */\n accent-color: var(--_gray-strong);\n appearance: none;\n background: linear-gradient(\n var(--_along),\n var(--_gray-mark) calc(var(--slider-fraction, 0) * 100%),\n var(--_gray-fill) calc(var(--slider-fraction, 0) * 100%)\n );\n block-size: 0.5rem;\n border-radius: 9999px;\n cursor: pointer;\n flex: 1 1 auto;\n font: inherit;\n min-inline-size: 0;\n}\n\nhelix-headless-slider::part(control)::-webkit-slider-runnable-track {\n background: none;\n block-size: 0.5rem;\n}\n\nhelix-headless-slider::part(control)::-moz-range-track {\n background: none;\n block-size: 0.5rem;\n}\n\nhelix-headless-slider::part(control)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n margin-block-start: -0.375rem;\n}\n\nhelix-headless-slider::part(control)::-moz-range-thumb {\n background-color: var(--_gray-strong);\n block-size: 1.25rem;\n border: none;\n border-radius: 50%;\n box-shadow: 0 0 0 2px var(--_gray-surface);\n inline-size: 1.25rem;\n}\n\nhelix-headless-slider::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-slider::part(output) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-variant-numeric: tabular-nums;\n line-height: 1.5;\n min-inline-size: 3ch;\n text-align: end;\n}\n\nhelix-headless-slider::part(hint),\nhelix-headless-slider::part(feedback) {\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-slider::part(hint) {\n color: var(--_gray-muted);\n}\n\nhelix-headless-slider::part(feedback) {\n color: var(--_gray-strong);\n font-weight: 500;\n}","description":"The slider on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-slider\n default-value=\"40\"\n hint=\"Applies to notification sounds\"\n label=\"Volume\"\n show-value\n></helix-headless-slider>","imports":["import '@fusion.dev/helix-headless/slider'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-slider\n default-value=\"40\"\n hint=\"Applies to notification sounds\"\n label=\"Volume\"\n show-value\n ></helix-headless-slider>\n )\n}"}],"sparkline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n.row {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\nhelix-headless-sparkline {\n block-size: 2.1875rem;\n color: var(--_gray-strong);\n display: inline-block;\n inline-size: 6.125rem;\n position: relative;\n vertical-align: middle;\n}\n\nhelix-headless-sparkline::part(svg) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n}\n\nhelix-headless-sparkline::part(line) {\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-width: 1.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-sparkline::part(bar) {\n fill: currentColor;\n}\n\nhelix-headless-sparkline::part(area) {\n fill: none;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(area) {\n fill: url(\"#sparkline-wash\");\n}\n\nhelix-headless-sparkline::part(wash-start),\nhelix-headless-sparkline::part(wash-end) {\n stop-color: currentColor;\n stop-opacity: 0;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(wash-start) {\n stop-opacity: 0.45;\n}\n\nhelix-headless-sparkline[plot=\"area\"]::part(wash-end) {\n stop-opacity: 0.05;\n}\n\nhelix-headless-sparkline::part(terminus) {\n background-color: currentColor;\n block-size: 5px;\n border-radius: 50%;\n inline-size: 5px;\n inset-block-start: var(--chart-terminus-y);\n inset-inline-start: var(--chart-terminus-x);\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-sparkline:dir(rtl)::part(terminus) {\n translate: 50% -50%;\n}\n\nhelix-headless-sparkline::part(svg):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-sparkline::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-sparkline::part(cursor) {\n background-color: currentColor;\n block-size: 5px;\n border-radius: 50%;\n inline-size: 5px;\n pointer-events: none;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-sparkline::part(readout) {\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n font-size: 0.75rem;\n padding: 0 0.25rem;\n pointer-events: none;\n position: absolute;\n translate: -50% calc(-100% - 5px);\n white-space: nowrap;\n}","description":"The same sparkline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-sparkline\n label=\"Sessions over seven days, as bars\"\n plot=\"bar\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as a line\"\n plot=\"line\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as an area\"\n plot=\"area\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n</div>","imports":["import '@fusion.dev/helix-headless/sparkline'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-sparkline\n label=\"Sessions over seven days, as bars\"\n plot=\"bar\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as a line\"\n plot=\"line\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n <helix-headless-sparkline\n label=\"Sessions over seven days, as an area\"\n plot=\"area\"\n values=\"1240 1318 1102 1291 1244 1180 1102\"\n ></helix-headless-sparkline>\n </div>\n )\n}"}],"spatial-bar-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-bar-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-bar-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-bar-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the outline on the bar the pointer or the keys rest on. */\nhelix-headless-spatial-bar-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-bar-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-bar-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-bar-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-bar-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-bar-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The same outline over everything, faint and dashed, where others hide it. */\nhelix-headless-spatial-bar-chart::part(ring-behind) {\n fill: none;\n opacity: 0.6;\n stroke: var(--_gray-strong);\n stroke-dasharray: 3px 2px;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-bar-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-bar-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its series' gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-bar-chart::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-bar-chart-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-bar-chart::part(live),\nhelix-headless-spatial-bar-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Signups for five regions over four quarters, each a bar in its quarter's color, drawn in 3D in SVG. Drag to turn the bars, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"signups\"\n>\n <caption>Signups by region and quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Region</th>\n <th scope=\"col\">Q1</th>\n <th scope=\"col\">Q2</th>\n <th scope=\"col\">Q3</th>\n <th scope=\"col\">Q4</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">North</th>\n <td>420</td>\n <td>465</td>\n <td>510</td>\n <td>580</td>\n </tr>\n <tr>\n <th scope=\"row\">South</th>\n <td>310</td>\n <td>355</td>\n <td>340</td>\n <td>390</td>\n </tr>\n <tr>\n <th scope=\"row\">East</th>\n <td>520</td>\n <td>560</td>\n <td>615</td>\n <td>690</td>\n </tr>\n <tr>\n <th scope=\"row\">West</th>\n <td>260</td>\n <td>300</td>\n <td>345</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Central</th>\n <td>180</td>\n <td>210</td>\n <td>205</td>\n <td>240</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-bar-chart\n for=\"signups\"\n label=\"Signups by region and quarter\"\n></helix-headless-spatial-bar-chart>","imports":["import '@fusion.dev/helix-headless/spatial-bar-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"signups\"\n >\n <caption>Signups by region and quarter</caption>\n <thead>\n <tr>\n <th scope=\"col\">Region</th>\n <th scope=\"col\">Q1</th>\n <th scope=\"col\">Q2</th>\n <th scope=\"col\">Q3</th>\n <th scope=\"col\">Q4</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">North</th>\n <td>420</td>\n <td>465</td>\n <td>510</td>\n <td>580</td>\n </tr>\n <tr>\n <th scope=\"row\">South</th>\n <td>310</td>\n <td>355</td>\n <td>340</td>\n <td>390</td>\n </tr>\n <tr>\n <th scope=\"row\">East</th>\n <td>520</td>\n <td>560</td>\n <td>615</td>\n <td>690</td>\n </tr>\n <tr>\n <th scope=\"row\">West</th>\n <td>260</td>\n <td>300</td>\n <td>345</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Central</th>\n <td>180</td>\n <td>210</td>\n <td>205</td>\n <td>240</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-bar-chart\n for=\"signups\"\n label=\"Signups by region and quarter\"\n ></helix-headless-spatial-bar-chart>\n </>\n )\n}"}],"spatial-heatmap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\nhelix-headless-spatial-heatmap {\n display: grid;\n grid-template-columns: minmax(0, max-content);\n\n --heatmap-tone-1: var(--_gray-fill);\n --heatmap-tone-2: var(--_gray-line);\n --heatmap-tone-3: var(--_gray-mark);\n --heatmap-tone-4: var(--_gray-muted);\n --heatmap-tone-5: var(--_gray-strong);\n}\n\n/* The strip is the drawing's span of cells, at 0.866 of a cell each, which is\n the cosine of 30 degrees. */\nhelix-headless-spatial-heatmap::part(strip) {\n inline-size: calc(var(--spatial-heatmap-span) * 0.866 * 1.25rem);\n max-inline-size: 100%;\n position: relative;\n}\n\nhelix-headless-spatial-heatmap::part(drawing) {\n display: block;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\n/* Each side is the face's tone a step less light, and the slab is a step\n darker than an empty tile. */\nhelix-headless-spatial-heatmap::part(top-face) {\n fill: var(--heatmap-tone, var(--_gray-subtle));\n}\n\nhelix-headless-spatial-heatmap::part(left-face) {\n fill: oklch(from var(--heatmap-tone, var(--_gray-subtle)) calc(l - 0.07) c h);\n}\n\nhelix-headless-spatial-heatmap::part(right-face) {\n fill: oklch(from var(--heatmap-tone, var(--_gray-subtle)) calc(l - 0.14) c h);\n}\n\nhelix-headless-spatial-heatmap::part(base-top) {\n fill: var(--_gray-fill);\n}\n\nhelix-headless-spatial-heatmap::part(base-left) {\n fill: oklch(from var(--_gray-fill) calc(l - 0.07) c h);\n}\n\nhelix-headless-spatial-heatmap::part(base-right) {\n fill: oklch(from var(--_gray-fill) calc(l - 0.14) c h);\n}\n\nhelix-headless-spatial-heatmap::part(cell-active) {\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n}\n\nhelix-headless-spatial-heatmap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-spatial-heatmap::part(tooltip-anchor) {\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\n/* The first and last labels stand where the component measures them, under\n their ends of the front edge and clear of the drawing. */\nhelix-headless-spatial-heatmap::part(footer) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n min-block-size: 1lh;\n position: relative;\n}\n\nhelix-headless-spatial-heatmap::part(start),\nhelix-headless-spatial-heatmap::part(end) {\n inset-block-start: var(--spatial-heatmap-label-y, 0);\n inset-inline-start: var(--spatial-heatmap-label-x, 0);\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-spatial-heatmap::part(live),\nhelix-headless-spatial-heatmap::part(overview) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-spatial-heatmap::part(strip):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"Sixteen weeks of commits, each day a prism as tall as its count.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-spatial-heatmap\n for=\"commits\"\n label=\"Commits, last sixteen weeks\"\n rows=\"7\"\n thresholds=\"1 3 5 7 9\"\n tones=\"1 2 3 4 5\"\n>\n <table\n data-hidden-visually\n id=\"commits\"\n >\n <caption>Commits</caption>\n <tbody>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-18\">18 May</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-19\">19 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-20\">20 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-21\">21 May</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-22\">22 May</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-23\">23 May</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-24\">24 May</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-25\">25 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-26\">26 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-27\">27 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-28\">28 May</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-29\">29 May</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-30\">30 May</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-05-31\">31 May</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-01\">1 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-02\">2 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-03\">3 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-04\">4 Jun</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-05\">5 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-06\">6 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-07\">7 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-08\">8 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-09\">9 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-10\">10 Jun</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-11\">11 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-12\">12 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-13\">13 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-14\">14 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-15\">15 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-16\">16 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-17\">17 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-18\">18 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-19\">19 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-20\">20 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-21\">21 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-22\">22 Jun</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-23\">23 Jun</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-24\">24 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-25\">25 Jun</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-26\">26 Jun</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-27\">27 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-28\">28 Jun</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-29\">29 Jun</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-06-30\">30 Jun</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-01\">1 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-02\">2 Jul</time></th>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-03\">3 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-04\">4 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-05\">5 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-06\">6 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-07\">7 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-08\">8 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-09\">9 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-10\">10 Jul</time></th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-11\">11 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-12\">12 Jul</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-13\">13 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-14\">14 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-15\">15 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-16\">16 Jul</time></th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-17\">17 Jul</time></th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-18\">18 Jul</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-19\">19 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-20\">20 Jul</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-21\">21 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-22\">22 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-23\">23 Jul</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-24\">24 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-25\">25 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-26\">26 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-27\">27 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-28\">28 Jul</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-29\">29 Jul</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-30\">30 Jul</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-07-31\">31 Jul</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-01\">1 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-02\">2 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-03\">3 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-04\">4 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-05\">5 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-06\">6 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-07\">7 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-08\">8 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-09\">9 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-10\">10 Aug</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-11\">11 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-12\">12 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-13\">13 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-14\">14 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-15\">15 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-16\">16 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-17\">17 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-18\">18 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-19\">19 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-20\">20 Aug</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-21\">21 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-22\">22 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-23\">23 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-24\">24 Aug</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-25\">25 Aug</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-26\">26 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-27\">27 Aug</time></th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-28\">28 Aug</time></th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-29\">29 Aug</time></th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-30\">30 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-08-31\">31 Aug</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-01\">1 Sep</time></th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-02\">2 Sep</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-03\">3 Sep</time></th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-04\">4 Sep</time></th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-05\">5 Sep</time></th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\"><time datetime=\"2026-09-06\">6 Sep</time></th>\n <td>0</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">May</span>\n <span slot=\"end\">Sep</span>\n</helix-headless-spatial-heatmap>","imports":["import '@fusion.dev/helix-headless/spatial-heatmap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-spatial-heatmap\n for=\"commits\"\n label=\"Commits, last sixteen weeks\"\n rows={7}\n thresholds=\"1 3 5 7 9\"\n tones=\"1 2 3 4 5\"\n >\n <table\n data-hidden-visually\n id=\"commits\"\n >\n <caption>Commits</caption>\n <tbody>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-18\">18 May</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-19\">19 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-20\">20 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-21\">21 May</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-22\">22 May</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-23\">23 May</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-24\">24 May</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-25\">25 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-26\">26 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-27\">27 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-28\">28 May</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-29\">29 May</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-30\">30 May</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-05-31\">31 May</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-01\">1 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-02\">2 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-03\">3 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-04\">4 Jun</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-05\">5 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-06\">6 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-07\">7 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-08\">8 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-09\">9 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-10\">10 Jun</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-11\">11 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-12\">12 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-13\">13 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-14\">14 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-15\">15 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-16\">16 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-17\">17 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-18\">18 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-19\">19 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-20\">20 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-21\">21 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-22\">22 Jun</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-23\">23 Jun</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-24\">24 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-25\">25 Jun</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-26\">26 Jun</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-27\">27 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-28\">28 Jun</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-29\">29 Jun</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-06-30\">30 Jun</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-01\">1 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-02\">2 Jul</time>\n </th>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-03\">3 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-04\">4 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-05\">5 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-06\">6 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-07\">7 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-08\">8 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-09\">9 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-10\">10 Jul</time>\n </th>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-11\">11 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-12\">12 Jul</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-13\">13 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-14\">14 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-15\">15 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-16\">16 Jul</time>\n </th>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-17\">17 Jul</time>\n </th>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-18\">18 Jul</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-19\">19 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-20\">20 Jul</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-21\">21 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-22\">22 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-23\">23 Jul</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-24\">24 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-25\">25 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-26\">26 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-27\">27 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-28\">28 Jul</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-29\">29 Jul</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-30\">30 Jul</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-07-31\">31 Jul</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-01\">1 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-02\">2 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-03\">3 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-04\">4 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-05\">5 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-06\">6 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-07\">7 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-08\">8 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-09\">9 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-10\">10 Aug</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-11\">11 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-12\">12 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-13\">13 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-14\">14 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-15\">15 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-16\">16 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-17\">17 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-18\">18 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-19\">19 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-20\">20 Aug</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-21\">21 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-22\">22 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-23\">23 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-24\">24 Aug</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-25\">25 Aug</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-26\">26 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-27\">27 Aug</time>\n </th>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-28\">28 Aug</time>\n </th>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-29\">29 Aug</time>\n </th>\n <td>0</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-30\">30 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-08-31\">31 Aug</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-01\">1 Sep</time>\n </th>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-02\">2 Sep</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-03\">3 Sep</time>\n </th>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-04\">4 Sep</time>\n </th>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-05\">5 Sep</time>\n </th>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <time dateTime=\"2026-09-06\">6 Sep</time>\n </th>\n <td>0</td>\n </tr>\n </tbody>\n </table>\n\n <span slot=\"start\">May</span>\n <span slot=\"end\">Sep</span>\n </helix-headless-spatial-heatmap>\n )\n}"}],"spatial-ribbon-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-ribbon-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-ribbon-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-ribbon-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-ribbon-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-ribbon-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-ribbon-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-ribbon-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-ribbon-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-ribbon-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-ribbon-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-ribbon-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its series' gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-ribbon-chart::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-ribbon-chart-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-ribbon-chart::part(live),\nhelix-headless-spatial-ribbon-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Response time for four regions over two weeks, each region a ribbon in its own color, drawn in 3D in SVG. Drag to turn the ribbons, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"latency\"\n>\n <caption>Response time by region, first two weeks of September</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Frankfurt (ms)</th>\n <th scope=\"col\">Virginia (ms)</th>\n <th scope=\"col\">Singapore (ms)</th>\n <th scope=\"col\">São Paulo (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">1 Sep</th>\n <td>120</td>\n <td>110</td>\n <td>196</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">2 Sep</th>\n <td>128</td>\n <td>113</td>\n <td>191</td>\n <td>204</td>\n </tr>\n <tr>\n <th scope=\"row\">3 Sep</th>\n <td>134</td>\n <td>112</td>\n <td>184</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">4 Sep</th>\n <td>138</td>\n <td>108</td>\n <td>176</td>\n <td>193</td>\n </tr>\n <tr>\n <th scope=\"row\">5 Sep</th>\n <td>137</td>\n <td>101</td>\n <td>169</td>\n <td>192</td>\n </tr>\n <tr>\n <th scope=\"row\">6 Sep</th>\n <td>134</td>\n <td>93</td>\n <td>164</td>\n <td>195</td>\n </tr>\n <tr>\n <th scope=\"row\">7 Sep</th>\n <td>127</td>\n <td>85</td>\n <td>202</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">8 Sep</th>\n <td>119</td>\n <td>79</td>\n <td>204</td>\n <td>208</td>\n </tr>\n <tr>\n <th scope=\"row\">9 Sep</th>\n <td>111</td>\n <td>77</td>\n <td>209</td>\n <td>216</td>\n </tr>\n <tr>\n <th scope=\"row\">10 Sep</th>\n <td>105</td>\n <td>78</td>\n <td>177</td>\n <td>223</td>\n </tr>\n <tr>\n <th scope=\"row\">11 Sep</th>\n <td>102</td>\n <td>83</td>\n <td>185</td>\n <td>252</td>\n </tr>\n <tr>\n <th scope=\"row\">12 Sep</th>\n <td>103</td>\n <td>90</td>\n <td>192</td>\n <td>253</td>\n </tr>\n <tr>\n <th scope=\"row\">13 Sep</th>\n <td>107</td>\n <td>98</td>\n <td>197</td>\n <td>250</td>\n </tr>\n <tr>\n <th scope=\"row\">14 Sep</th>\n <td>113</td>\n <td>106</td>\n <td>198</td>\n <td>244</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-ribbon-chart\n for=\"latency\"\n label=\"Response time by region\"\n></helix-headless-spatial-ribbon-chart>","imports":["import '@fusion.dev/helix-headless/spatial-ribbon-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"latency\"\n >\n <caption>Response time by region, first two weeks of September</caption>\n <thead>\n <tr>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Frankfurt (ms)</th>\n <th scope=\"col\">Virginia (ms)</th>\n <th scope=\"col\">Singapore (ms)</th>\n <th scope=\"col\">São Paulo (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">1 Sep</th>\n <td>120</td>\n <td>110</td>\n <td>196</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">2 Sep</th>\n <td>128</td>\n <td>113</td>\n <td>191</td>\n <td>204</td>\n </tr>\n <tr>\n <th scope=\"row\">3 Sep</th>\n <td>134</td>\n <td>112</td>\n <td>184</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">4 Sep</th>\n <td>138</td>\n <td>108</td>\n <td>176</td>\n <td>193</td>\n </tr>\n <tr>\n <th scope=\"row\">5 Sep</th>\n <td>137</td>\n <td>101</td>\n <td>169</td>\n <td>192</td>\n </tr>\n <tr>\n <th scope=\"row\">6 Sep</th>\n <td>134</td>\n <td>93</td>\n <td>164</td>\n <td>195</td>\n </tr>\n <tr>\n <th scope=\"row\">7 Sep</th>\n <td>127</td>\n <td>85</td>\n <td>202</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">8 Sep</th>\n <td>119</td>\n <td>79</td>\n <td>204</td>\n <td>208</td>\n </tr>\n <tr>\n <th scope=\"row\">9 Sep</th>\n <td>111</td>\n <td>77</td>\n <td>209</td>\n <td>216</td>\n </tr>\n <tr>\n <th scope=\"row\">10 Sep</th>\n <td>105</td>\n <td>78</td>\n <td>177</td>\n <td>223</td>\n </tr>\n <tr>\n <th scope=\"row\">11 Sep</th>\n <td>102</td>\n <td>83</td>\n <td>185</td>\n <td>252</td>\n </tr>\n <tr>\n <th scope=\"row\">12 Sep</th>\n <td>103</td>\n <td>90</td>\n <td>192</td>\n <td>253</td>\n </tr>\n <tr>\n <th scope=\"row\">13 Sep</th>\n <td>107</td>\n <td>98</td>\n <td>197</td>\n <td>250</td>\n </tr>\n <tr>\n <th scope=\"row\">14 Sep</th>\n <td>113</td>\n <td>106</td>\n <td>198</td>\n <td>244</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-ribbon-chart\n for=\"latency\"\n label=\"Response time by region\"\n ></helix-headless-spatial-ribbon-chart>\n </>\n )\n}"}],"spatial-scatter-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-scatter-chart {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-line);\n}\n\nhelix-headless-spatial-scatter-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-scatter-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its numbers\n and names, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-scatter-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-scatter-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-scatter-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-scatter-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-scatter-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-scatter-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-scatter-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-scatter-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\nhelix-headless-spatial-scatter-chart::part(point) {\n fill: var(--chart-series);\n stroke: var(--_gray-subtle);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-scatter-chart::part(live),\nhelix-headless-spatial-scatter-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Forty-five customers by age, yearly spend, and visits a month, drawn in 3D in SVG. Press Shift with an arrow to turn the box.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"customers\"\n>\n <caption>Customers</caption>\n <thead>\n <tr>\n <th scope=\"col\">Customer</th>\n <th scope=\"col\">Segment</th>\n <th scope=\"col\">Age</th>\n <th scope=\"col\">Yearly spend</th>\n <th scope=\"col\">Visits a month</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Avery S</th>\n <td>Students</td>\n <td>21</td>\n <td>494</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake S</th>\n <td>Students</td>\n <td>19</td>\n <td>336</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey S</th>\n <td>Students</td>\n <td>24</td>\n <td>531</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew S</th>\n <td>Students</td>\n <td>22</td>\n <td>401</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery S</th>\n <td>Students</td>\n <td>22</td>\n <td>453</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley S</th>\n <td>Students</td>\n <td>24</td>\n <td>387</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray S</th>\n <td>Students</td>\n <td>23</td>\n <td>737</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper S</th>\n <td>Students</td>\n <td>19</td>\n <td>656</td>\n <td>11</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy S</th>\n <td>Students</td>\n <td>25</td>\n <td>406</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules S</th>\n <td>Students</td>\n <td>19</td>\n <td>435</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai S</th>\n <td>Students</td>\n <td>23</td>\n <td>434</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane S</th>\n <td>Students</td>\n <td>21</td>\n <td>532</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan S</th>\n <td>Students</td>\n <td>22</td>\n <td>161</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel S</th>\n <td>Students</td>\n <td>21</td>\n <td>710</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley S</th>\n <td>Students</td>\n <td>24</td>\n <td>507</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery F</th>\n <td>Families</td>\n <td>46</td>\n <td>2527</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake F</th>\n <td>Families</td>\n <td>43</td>\n <td>2155</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey F</th>\n <td>Families</td>\n <td>43</td>\n <td>2291</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew F</th>\n <td>Families</td>\n <td>43</td>\n <td>2645</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery F</th>\n <td>Families</td>\n <td>36</td>\n <td>2421</td>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley F</th>\n <td>Families</td>\n <td>46</td>\n <td>2382</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray F</th>\n <td>Families</td>\n <td>37</td>\n <td>2266</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper F</th>\n <td>Families</td>\n <td>40</td>\n <td>2419</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy F</th>\n <td>Families</td>\n <td>38</td>\n <td>2605</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules F</th>\n <td>Families</td>\n <td>39</td>\n <td>2627</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai F</th>\n <td>Families</td>\n <td>38</td>\n <td>2264</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane F</th>\n <td>Families</td>\n <td>41</td>\n <td>2508</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan F</th>\n <td>Families</td>\n <td>40</td>\n <td>2349</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel F</th>\n <td>Families</td>\n <td>39</td>\n <td>2453</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley F</th>\n <td>Families</td>\n <td>38</td>\n <td>2093</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery R</th>\n <td>Retirees</td>\n <td>70</td>\n <td>1169</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1456</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1887</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1528</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1657</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley R</th>\n <td>Retirees</td>\n <td>66</td>\n <td>1671</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1311</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1266</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1555</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules R</th>\n <td>Retirees</td>\n <td>74</td>\n <td>1574</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai R</th>\n <td>Retirees</td>\n <td>65</td>\n <td>1520</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1428</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1306</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel R</th>\n <td>Retirees</td>\n <td>63</td>\n <td>1458</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1486</td>\n <td>5</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-scatter-chart\n for=\"customers\"\n group-by=\"Segment\"\n label=\"Customers\"\n>\n</helix-headless-spatial-scatter-chart>","imports":["import '@fusion.dev/helix-headless/spatial-scatter-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"customers\"\n >\n <caption>Customers</caption>\n <thead>\n <tr>\n <th scope=\"col\">Customer</th>\n <th scope=\"col\">Segment</th>\n <th scope=\"col\">Age</th>\n <th scope=\"col\">Yearly spend</th>\n <th scope=\"col\">Visits a month</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Avery S</th>\n <td>Students</td>\n <td>21</td>\n <td>494</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake S</th>\n <td>Students</td>\n <td>19</td>\n <td>336</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey S</th>\n <td>Students</td>\n <td>24</td>\n <td>531</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew S</th>\n <td>Students</td>\n <td>22</td>\n <td>401</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery S</th>\n <td>Students</td>\n <td>22</td>\n <td>453</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley S</th>\n <td>Students</td>\n <td>24</td>\n <td>387</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray S</th>\n <td>Students</td>\n <td>23</td>\n <td>737</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper S</th>\n <td>Students</td>\n <td>19</td>\n <td>656</td>\n <td>11</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy S</th>\n <td>Students</td>\n <td>25</td>\n <td>406</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules S</th>\n <td>Students</td>\n <td>19</td>\n <td>435</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai S</th>\n <td>Students</td>\n <td>23</td>\n <td>434</td>\n <td>9</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane S</th>\n <td>Students</td>\n <td>21</td>\n <td>532</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan S</th>\n <td>Students</td>\n <td>22</td>\n <td>161</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel S</th>\n <td>Students</td>\n <td>21</td>\n <td>710</td>\n <td>8</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley S</th>\n <td>Students</td>\n <td>24</td>\n <td>507</td>\n <td>10</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery F</th>\n <td>Families</td>\n <td>46</td>\n <td>2527</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake F</th>\n <td>Families</td>\n <td>43</td>\n <td>2155</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey F</th>\n <td>Families</td>\n <td>43</td>\n <td>2291</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew F</th>\n <td>Families</td>\n <td>43</td>\n <td>2645</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery F</th>\n <td>Families</td>\n <td>36</td>\n <td>2421</td>\n <td>1</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley F</th>\n <td>Families</td>\n <td>46</td>\n <td>2382</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray F</th>\n <td>Families</td>\n <td>37</td>\n <td>2266</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper F</th>\n <td>Families</td>\n <td>40</td>\n <td>2419</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy F</th>\n <td>Families</td>\n <td>38</td>\n <td>2605</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules F</th>\n <td>Families</td>\n <td>39</td>\n <td>2627</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai F</th>\n <td>Families</td>\n <td>38</td>\n <td>2264</td>\n <td>2</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane F</th>\n <td>Families</td>\n <td>41</td>\n <td>2508</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan F</th>\n <td>Families</td>\n <td>40</td>\n <td>2349</td>\n <td>3</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel F</th>\n <td>Families</td>\n <td>39</td>\n <td>2453</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley F</th>\n <td>Families</td>\n <td>38</td>\n <td>2093</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Avery R</th>\n <td>Retirees</td>\n <td>70</td>\n <td>1169</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Blake R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1456</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Casey R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1887</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Drew R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1528</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Emery R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1657</td>\n <td>7</td>\n </tr>\n <tr>\n <th scope=\"row\">Finley R</th>\n <td>Retirees</td>\n <td>66</td>\n <td>1671</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Gray R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1311</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Harper R</th>\n <td>Retirees</td>\n <td>67</td>\n <td>1266</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Indy R</th>\n <td>Retirees</td>\n <td>68</td>\n <td>1555</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Jules R</th>\n <td>Retirees</td>\n <td>74</td>\n <td>1574</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Kai R</th>\n <td>Retirees</td>\n <td>65</td>\n <td>1520</td>\n <td>6</td>\n </tr>\n <tr>\n <th scope=\"row\">Lane R</th>\n <td>Retirees</td>\n <td>69</td>\n <td>1428</td>\n <td>5</td>\n </tr>\n <tr>\n <th scope=\"row\">Morgan R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1306</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Noel R</th>\n <td>Retirees</td>\n <td>63</td>\n <td>1458</td>\n <td>4</td>\n </tr>\n <tr>\n <th scope=\"row\">Oakley R</th>\n <td>Retirees</td>\n <td>71</td>\n <td>1486</td>\n <td>5</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-scatter-chart\n for=\"customers\"\n group-by=\"Segment\"\n label=\"Customers\"\n ></helix-headless-spatial-scatter-chart>\n </>\n )\n}"}],"spatial-surface-chart":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-low: light-dark(#e2e2e5, #2e2e33);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-surface-chart {\n display: block;\n}\n\nhelix-headless-spatial-surface-chart::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-surface-chart::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its numbers\n and names, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-surface-chart::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-surface-chart::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-surface-chart::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-surface-chart::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-surface-chart::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-surface-chart::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-surface-chart::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-surface-chart::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face by its height, and a step less light as it turns from the\n light, which the chart writes as `--spatial-surface-chart-level` and\n `--spatial-surface-chart-shade`. */\nhelix-headless-spatial-surface-chart::part(face) {\n fill: oklch(\n from\n color-mix(\n in oklab,\n var(--_gray-strong) calc(var(--spatial-surface-chart-level) * 100%),\n var(--_gray-low)\n )\n calc(l - var(--spatial-surface-chart-shade)) c h\n );\n stroke: var(--_gray-mark);\n stroke-opacity: 0.5;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-surface-chart::part(live),\nhelix-headless-spatial-surface-chart::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Requests a minute over a week, every two hours, drawn as a surface in 3D in SVG. Press Shift with an arrow to turn the box.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"load\"\n>\n <caption>Load over a week</caption>\n <thead>\n <tr>\n <th scope=\"col\">Slot</th>\n <th scope=\"col\">Hour</th>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Requests a minute</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Mon 00:00</th>\n <td>0</td>\n <td>1</td>\n <td>129</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 02:00</th>\n <td>2</td>\n <td>1</td>\n <td>104</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 04:00</th>\n <td>4</td>\n <td>1</td>\n <td>142</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 06:00</th>\n <td>6</td>\n <td>1</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 08:00</th>\n <td>8</td>\n <td>1</td>\n <td>1011</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 10:00</th>\n <td>10</td>\n <td>1</td>\n <td>1354</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 12:00</th>\n <td>12</td>\n <td>1</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 14:00</th>\n <td>14</td>\n <td>1</td>\n <td>1106</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 16:00</th>\n <td>16</td>\n <td>1</td>\n <td>1209</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 18:00</th>\n <td>18</td>\n <td>1</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 20:00</th>\n <td>20</td>\n <td>1</td>\n <td>445</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 22:00</th>\n <td>22</td>\n <td>1</td>\n <td>248</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 00:00</th>\n <td>0</td>\n <td>2</td>\n <td>156</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 02:00</th>\n <td>2</td>\n <td>2</td>\n <td>148</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 04:00</th>\n <td>4</td>\n <td>2</td>\n <td>114</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 06:00</th>\n <td>6</td>\n <td>2</td>\n <td>338</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 08:00</th>\n <td>8</td>\n <td>2</td>\n <td>961</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 10:00</th>\n <td>10</td>\n <td>2</td>\n <td>1409</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 12:00</th>\n <td>12</td>\n <td>2</td>\n <td>1153</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 14:00</th>\n <td>14</td>\n <td>2</td>\n <td>1039</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 16:00</th>\n <td>16</td>\n <td>2</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 18:00</th>\n <td>18</td>\n <td>2</td>\n <td>894</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 20:00</th>\n <td>20</td>\n <td>2</td>\n <td>429</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 22:00</th>\n <td>22</td>\n <td>2</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 00:00</th>\n <td>0</td>\n <td>3</td>\n <td>125</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 02:00</th>\n <td>2</td>\n <td>3</td>\n <td>118</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 04:00</th>\n <td>4</td>\n <td>3</td>\n <td>199</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 06:00</th>\n <td>6</td>\n <td>3</td>\n <td>387</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 08:00</th>\n <td>8</td>\n <td>3</td>\n <td>994</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 10:00</th>\n <td>10</td>\n <td>3</td>\n <td>1386</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 12:00</th>\n <td>12</td>\n <td>3</td>\n <td>1139</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 14:00</th>\n <td>14</td>\n <td>3</td>\n <td>1054</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 16:00</th>\n <td>16</td>\n <td>3</td>\n <td>1261</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 18:00</th>\n <td>18</td>\n <td>3</td>\n <td>855</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 20:00</th>\n <td>20</td>\n <td>3</td>\n <td>490</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 22:00</th>\n <td>22</td>\n <td>3</td>\n <td>245</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 00:00</th>\n <td>0</td>\n <td>4</td>\n <td>132</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 02:00</th>\n <td>2</td>\n <td>4</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 04:00</th>\n <td>4</td>\n <td>4</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 06:00</th>\n <td>6</td>\n <td>4</td>\n <td>419</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 08:00</th>\n <td>8</td>\n <td>4</td>\n <td>977</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 10:00</th>\n <td>10</td>\n <td>4</td>\n <td>1382</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 12:00</th>\n <td>12</td>\n <td>4</td>\n <td>1103</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 14:00</th>\n <td>14</td>\n <td>4</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 16:00</th>\n <td>16</td>\n <td>4</td>\n <td>1200</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 18:00</th>\n <td>18</td>\n <td>4</td>\n <td>886</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 20:00</th>\n <td>20</td>\n <td>4</td>\n <td>451</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 22:00</th>\n <td>22</td>\n <td>4</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 00:00</th>\n <td>0</td>\n <td>5</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 02:00</th>\n <td>2</td>\n <td>5</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 04:00</th>\n <td>4</td>\n <td>5</td>\n <td>137</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 06:00</th>\n <td>6</td>\n <td>5</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 08:00</th>\n <td>8</td>\n <td>5</td>\n <td>943</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 10:00</th>\n <td>10</td>\n <td>5</td>\n <td>1397</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 12:00</th>\n <td>12</td>\n <td>5</td>\n <td>1155</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 14:00</th>\n <td>14</td>\n <td>5</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 16:00</th>\n <td>16</td>\n <td>5</td>\n <td>1245</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 18:00</th>\n <td>18</td>\n <td>5</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 20:00</th>\n <td>20</td>\n <td>5</td>\n <td>416</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 22:00</th>\n <td>22</td>\n <td>5</td>\n <td>225</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 00:00</th>\n <td>0</td>\n <td>6</td>\n <td>99</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 02:00</th>\n <td>2</td>\n <td>6</td>\n <td>163</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 04:00</th>\n <td>4</td>\n <td>6</td>\n <td>131</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 06:00</th>\n <td>6</td>\n <td>6</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 08:00</th>\n <td>8</td>\n <td>6</td>\n <td>386</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 10:00</th>\n <td>10</td>\n <td>6</td>\n <td>503</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 12:00</th>\n <td>12</td>\n <td>6</td>\n <td>435</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 14:00</th>\n <td>14</td>\n <td>6</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 16:00</th>\n <td>16</td>\n <td>6</td>\n <td>496</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 18:00</th>\n <td>18</td>\n <td>6</td>\n <td>431</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 20:00</th>\n <td>20</td>\n <td>6</td>\n <td>413</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 22:00</th>\n <td>22</td>\n <td>6</td>\n <td>283</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 00:00</th>\n <td>0</td>\n <td>7</td>\n <td>144</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 02:00</th>\n <td>2</td>\n <td>7</td>\n <td>76</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 04:00</th>\n <td>4</td>\n <td>7</td>\n <td>136</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 06:00</th>\n <td>6</td>\n <td>7</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 08:00</th>\n <td>8</td>\n <td>7</td>\n <td>356</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 10:00</th>\n <td>10</td>\n <td>7</td>\n <td>528</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 12:00</th>\n <td>12</td>\n <td>7</td>\n <td>469</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 14:00</th>\n <td>14</td>\n <td>7</td>\n <td>439</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 16:00</th>\n <td>16</td>\n <td>7</td>\n <td>458</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 18:00</th>\n <td>18</td>\n <td>7</td>\n <td>440</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 20:00</th>\n <td>20</td>\n <td>7</td>\n <td>397</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 22:00</th>\n <td>22</td>\n <td>7</td>\n <td>274</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-surface-chart\n for=\"load\"\n label=\"Load over a week\"\n>\n</helix-headless-spatial-surface-chart>","imports":["import '@fusion.dev/helix-headless/spatial-surface-chart'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"load\"\n >\n <caption>Load over a week</caption>\n <thead>\n <tr>\n <th scope=\"col\">Slot</th>\n <th scope=\"col\">Hour</th>\n <th scope=\"col\">Day</th>\n <th scope=\"col\">Requests a minute</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Mon 00:00</th>\n <td>0</td>\n <td>1</td>\n <td>129</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 02:00</th>\n <td>2</td>\n <td>1</td>\n <td>104</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 04:00</th>\n <td>4</td>\n <td>1</td>\n <td>142</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 06:00</th>\n <td>6</td>\n <td>1</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 08:00</th>\n <td>8</td>\n <td>1</td>\n <td>1011</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 10:00</th>\n <td>10</td>\n <td>1</td>\n <td>1354</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 12:00</th>\n <td>12</td>\n <td>1</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 14:00</th>\n <td>14</td>\n <td>1</td>\n <td>1106</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 16:00</th>\n <td>16</td>\n <td>1</td>\n <td>1209</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 18:00</th>\n <td>18</td>\n <td>1</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 20:00</th>\n <td>20</td>\n <td>1</td>\n <td>445</td>\n </tr>\n <tr>\n <th scope=\"row\">Mon 22:00</th>\n <td>22</td>\n <td>1</td>\n <td>248</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 00:00</th>\n <td>0</td>\n <td>2</td>\n <td>156</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 02:00</th>\n <td>2</td>\n <td>2</td>\n <td>148</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 04:00</th>\n <td>4</td>\n <td>2</td>\n <td>114</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 06:00</th>\n <td>6</td>\n <td>2</td>\n <td>338</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 08:00</th>\n <td>8</td>\n <td>2</td>\n <td>961</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 10:00</th>\n <td>10</td>\n <td>2</td>\n <td>1409</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 12:00</th>\n <td>12</td>\n <td>2</td>\n <td>1153</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 14:00</th>\n <td>14</td>\n <td>2</td>\n <td>1039</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 16:00</th>\n <td>16</td>\n <td>2</td>\n <td>1188</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 18:00</th>\n <td>18</td>\n <td>2</td>\n <td>894</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 20:00</th>\n <td>20</td>\n <td>2</td>\n <td>429</td>\n </tr>\n <tr>\n <th scope=\"row\">Tue 22:00</th>\n <td>22</td>\n <td>2</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 00:00</th>\n <td>0</td>\n <td>3</td>\n <td>125</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 02:00</th>\n <td>2</td>\n <td>3</td>\n <td>118</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 04:00</th>\n <td>4</td>\n <td>3</td>\n <td>199</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 06:00</th>\n <td>6</td>\n <td>3</td>\n <td>387</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 08:00</th>\n <td>8</td>\n <td>3</td>\n <td>994</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 10:00</th>\n <td>10</td>\n <td>3</td>\n <td>1386</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 12:00</th>\n <td>12</td>\n <td>3</td>\n <td>1139</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 14:00</th>\n <td>14</td>\n <td>3</td>\n <td>1054</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 16:00</th>\n <td>16</td>\n <td>3</td>\n <td>1261</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 18:00</th>\n <td>18</td>\n <td>3</td>\n <td>855</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 20:00</th>\n <td>20</td>\n <td>3</td>\n <td>490</td>\n </tr>\n <tr>\n <th scope=\"row\">Wed 22:00</th>\n <td>22</td>\n <td>3</td>\n <td>245</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 00:00</th>\n <td>0</td>\n <td>4</td>\n <td>132</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 02:00</th>\n <td>2</td>\n <td>4</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 04:00</th>\n <td>4</td>\n <td>4</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 06:00</th>\n <td>6</td>\n <td>4</td>\n <td>419</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 08:00</th>\n <td>8</td>\n <td>4</td>\n <td>977</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 10:00</th>\n <td>10</td>\n <td>4</td>\n <td>1382</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 12:00</th>\n <td>12</td>\n <td>4</td>\n <td>1103</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 14:00</th>\n <td>14</td>\n <td>4</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 16:00</th>\n <td>16</td>\n <td>4</td>\n <td>1200</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 18:00</th>\n <td>18</td>\n <td>4</td>\n <td>886</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 20:00</th>\n <td>20</td>\n <td>4</td>\n <td>451</td>\n </tr>\n <tr>\n <th scope=\"row\">Thu 22:00</th>\n <td>22</td>\n <td>4</td>\n <td>198</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 00:00</th>\n <td>0</td>\n <td>5</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 02:00</th>\n <td>2</td>\n <td>5</td>\n <td>87</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 04:00</th>\n <td>4</td>\n <td>5</td>\n <td>137</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 06:00</th>\n <td>6</td>\n <td>5</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 08:00</th>\n <td>8</td>\n <td>5</td>\n <td>943</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 10:00</th>\n <td>10</td>\n <td>5</td>\n <td>1397</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 12:00</th>\n <td>12</td>\n <td>5</td>\n <td>1155</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 14:00</th>\n <td>14</td>\n <td>5</td>\n <td>1098</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 16:00</th>\n <td>16</td>\n <td>5</td>\n <td>1245</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 18:00</th>\n <td>18</td>\n <td>5</td>\n <td>873</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 20:00</th>\n <td>20</td>\n <td>5</td>\n <td>416</td>\n </tr>\n <tr>\n <th scope=\"row\">Fri 22:00</th>\n <td>22</td>\n <td>5</td>\n <td>225</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 00:00</th>\n <td>0</td>\n <td>6</td>\n <td>99</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 02:00</th>\n <td>2</td>\n <td>6</td>\n <td>163</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 04:00</th>\n <td>4</td>\n <td>6</td>\n <td>131</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 06:00</th>\n <td>6</td>\n <td>6</td>\n <td>213</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 08:00</th>\n <td>8</td>\n <td>6</td>\n <td>386</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 10:00</th>\n <td>10</td>\n <td>6</td>\n <td>503</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 12:00</th>\n <td>12</td>\n <td>6</td>\n <td>435</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 14:00</th>\n <td>14</td>\n <td>6</td>\n <td>399</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 16:00</th>\n <td>16</td>\n <td>6</td>\n <td>496</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 18:00</th>\n <td>18</td>\n <td>6</td>\n <td>431</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 20:00</th>\n <td>20</td>\n <td>6</td>\n <td>413</td>\n </tr>\n <tr>\n <th scope=\"row\">Sat 22:00</th>\n <td>22</td>\n <td>6</td>\n <td>283</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 00:00</th>\n <td>0</td>\n <td>7</td>\n <td>144</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 02:00</th>\n <td>2</td>\n <td>7</td>\n <td>76</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 04:00</th>\n <td>4</td>\n <td>7</td>\n <td>136</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 06:00</th>\n <td>6</td>\n <td>7</td>\n <td>201</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 08:00</th>\n <td>8</td>\n <td>7</td>\n <td>356</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 10:00</th>\n <td>10</td>\n <td>7</td>\n <td>528</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 12:00</th>\n <td>12</td>\n <td>7</td>\n <td>469</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 14:00</th>\n <td>14</td>\n <td>7</td>\n <td>439</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 16:00</th>\n <td>16</td>\n <td>7</td>\n <td>458</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 18:00</th>\n <td>18</td>\n <td>7</td>\n <td>440</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 20:00</th>\n <td>20</td>\n <td>7</td>\n <td>397</td>\n </tr>\n <tr>\n <th scope=\"row\">Sun 22:00</th>\n <td>22</td>\n <td>7</td>\n <td>274</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-surface-chart\n for=\"load\"\n label=\"Load over a week\"\n ></helix-headless-spatial-surface-chart>\n </>\n )\n}"}],"spatial-treemap":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-soft: light-dark(#b4b4ba, #5e5e65);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n}\n\n/* The table is the chart's reading, for screen readers, and a page with no\n Helix stylesheet hides it itself: `data-hidden-visually` is a Helix rule. */\n[data-hidden-visually] {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n/* Fixed, as the base layer has it: the 1px box does not bind on a table, and\n an absolutely positioned one lengthened the page by its full height. */\ntable[data-hidden-visually] {\n position: fixed;\n}\n\nhelix-headless-spatial-treemap {\n display: block;\n\n --chart-series-1: var(--_gray-strong);\n --chart-series-2: var(--_gray-mark);\n --chart-series-3: var(--_gray-soft);\n --chart-series-4: var(--_gray-line);\n}\n\nhelix-headless-spatial-treemap::part(plot) {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: 0.5rem;\n position: relative;\n}\n\nhelix-headless-spatial-treemap::part(plot):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\n/* The chart's own drawing: the box and its grid, see-through, its names and\n numbers, and the ring on the reading the pointer or the keys rest on. */\nhelix-headless-spatial-treemap::part(fallback) {\n inset: 1rem;\n position: absolute;\n}\n\nhelix-headless-spatial-treemap::part(drawing) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n overflow: visible;\n touch-action: pan-y;\n user-select: none;\n}\n\nhelix-headless-spatial-treemap::part(grid) {\n fill: none;\n opacity: 0.4;\n stroke: var(--_gray-mark);\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-treemap::part(tick) {\n fill: var(--_gray-mark);\n}\n\nhelix-headless-spatial-treemap::part(axis-name) {\n fill: var(--_gray-strong);\n font-weight: 600;\n}\n\nhelix-headless-spatial-treemap::part(ring) {\n fill: none;\n stroke: var(--_gray-strong);\n stroke-width: 2px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The same outline over everything, faint and dashed, where others hide it. */\nhelix-headless-spatial-treemap::part(ring-behind) {\n fill: none;\n opacity: 0.6;\n stroke: var(--_gray-strong);\n stroke-dasharray: 3px 2px;\n stroke-width: 1px;\n vector-effect: non-scaling-stroke;\n}\n\n/* The tooltip's mark, centered on the reading it marks. */\nhelix-headless-spatial-treemap::part(mark) {\n block-size: 1px;\n inline-size: 1px;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-spatial-treemap::part(tooltip-surface) {\n background-color: var(--_gray-strong);\n border-radius: 0.375rem;\n color: var(--_gray-subtle);\n padding: 0.5rem;\n}\n\n/* Each face in its group's gray, a step less light by how far it turns from\n the light, which the component writes on it. */\nhelix-headless-spatial-treemap::part(face) {\n fill: oklch(from var(--chart-series) calc(l - var(--spatial-treemap-shade) * 0.5) c h);\n stroke: var(--_gray-line);\n stroke-width: 0.5px;\n vector-effect: non-scaling-stroke;\n}\n\nhelix-headless-spatial-treemap::part(live),\nhelix-headless-spatial-treemap::part(summary) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n margin: 0;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}","description":"Requests a minute and response time for fifteen services in four teams, drawn in 3D in SVG: each block as large as its requests and as tall as its response time, in its team's gray. Drag to turn the blocks, or press Shift with an arrow.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<table\n data-hidden-visually\n id=\"services\"\n>\n <caption>Requests and response time by service</caption>\n <thead>\n <tr>\n <th scope=\"col\">Service</th>\n <th scope=\"col\">Team</th>\n <th scope=\"col\">Requests a minute</th>\n <th scope=\"col\">p95 response (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Gateway</th>\n <td>Platform</td>\n <td>4200</td>\n <td>85</td>\n </tr>\n <tr>\n <th scope=\"row\">Auth</th>\n <td>Platform</td>\n <td>2600</td>\n <td>40</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td>Platform</td>\n <td>1800</td>\n <td>210</td>\n </tr>\n <tr>\n <th scope=\"row\">Config</th>\n <td>Platform</td>\n <td>400</td>\n <td>25</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td>Payments</td>\n <td>1500</td>\n <td>320</td>\n </tr>\n <tr>\n <th scope=\"row\">Billing</th>\n <td>Payments</td>\n <td>900</td>\n <td>180</td>\n </tr>\n <tr>\n <th scope=\"row\">Ledger</th>\n <td>Payments</td>\n <td>600</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Refunds</th>\n <td>Payments</td>\n <td>200</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Recommendations</th>\n <td>Growth</td>\n <td>1300</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">Email</th>\n <td>Growth</td>\n <td>500</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Experiments</th>\n <td>Growth</td>\n <td>350</td>\n <td>60</td>\n </tr>\n <tr>\n <th scope=\"row\">Ingest</th>\n <td>Data</td>\n <td>2100</td>\n <td>120</td>\n </tr>\n <tr>\n <th scope=\"row\">Warehouse</th>\n <td>Data</td>\n <td>800</td>\n <td>190</td>\n </tr>\n <tr>\n <th scope=\"row\">Reports</th>\n <td>Data</td>\n <td>450</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Exports</th>\n <td>Data</td>\n <td>250</td>\n <td>300</td>\n </tr>\n </tbody>\n</table>\n\n<helix-headless-spatial-treemap\n for=\"services\"\n group-by=\"Team\"\n label=\"Requests and response time by service\"\n></helix-headless-spatial-treemap>","imports":["import '@fusion.dev/helix-headless/spatial-treemap'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <table\n data-hidden-visually\n id=\"services\"\n >\n <caption>Requests and response time by service</caption>\n <thead>\n <tr>\n <th scope=\"col\">Service</th>\n <th scope=\"col\">Team</th>\n <th scope=\"col\">Requests a minute</th>\n <th scope=\"col\">p95 response (ms)</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Gateway</th>\n <td>Platform</td>\n <td>4200</td>\n <td>85</td>\n </tr>\n <tr>\n <th scope=\"row\">Auth</th>\n <td>Platform</td>\n <td>2600</td>\n <td>40</td>\n </tr>\n <tr>\n <th scope=\"row\">Search</th>\n <td>Platform</td>\n <td>1800</td>\n <td>210</td>\n </tr>\n <tr>\n <th scope=\"row\">Config</th>\n <td>Platform</td>\n <td>400</td>\n <td>25</td>\n </tr>\n <tr>\n <th scope=\"row\">Checkout</th>\n <td>Payments</td>\n <td>1500</td>\n <td>320</td>\n </tr>\n <tr>\n <th scope=\"row\">Billing</th>\n <td>Payments</td>\n <td>900</td>\n <td>180</td>\n </tr>\n <tr>\n <th scope=\"row\">Ledger</th>\n <td>Payments</td>\n <td>600</td>\n <td>140</td>\n </tr>\n <tr>\n <th scope=\"row\">Refunds</th>\n <td>Payments</td>\n <td>200</td>\n <td>260</td>\n </tr>\n <tr>\n <th scope=\"row\">Recommendations</th>\n <td>Growth</td>\n <td>1300</td>\n <td>240</td>\n </tr>\n <tr>\n <th scope=\"row\">Email</th>\n <td>Growth</td>\n <td>500</td>\n <td>90</td>\n </tr>\n <tr>\n <th scope=\"row\">Experiments</th>\n <td>Growth</td>\n <td>350</td>\n <td>60</td>\n </tr>\n <tr>\n <th scope=\"row\">Ingest</th>\n <td>Data</td>\n <td>2100</td>\n <td>120</td>\n </tr>\n <tr>\n <th scope=\"row\">Warehouse</th>\n <td>Data</td>\n <td>800</td>\n <td>190</td>\n </tr>\n <tr>\n <th scope=\"row\">Reports</th>\n <td>Data</td>\n <td>450</td>\n <td>410</td>\n </tr>\n <tr>\n <th scope=\"row\">Exports</th>\n <td>Data</td>\n <td>250</td>\n <td>300</td>\n </tr>\n </tbody>\n </table>\n <helix-headless-spatial-treemap\n for=\"services\"\n group-by=\"Team\"\n label=\"Requests and response time by service\"\n ></helix-headless-spatial-treemap>\n </>\n )\n}"}],"speed-dial":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n.page {\n background-color: var(--_gray-subtle);\n block-size: 20rem;\n border-radius: var(--_radius-surface);\n position: relative;\n}\n\nhelix-headless-speed-dial[data-dock-within] {\n display: inline-flex;\n inset-block-end: 1.5rem;\n inset-inline-end: 1.5rem;\n position: absolute;\n}\n\nhelix-headless-icon-button {\n display: inline-flex;\n}\n\nhelix-headless-icon-button[slot=\"trigger\"]::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-strong);\n block-size: 3rem;\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-size: 1.25rem;\n inline-size: 3rem;\n justify-content: center;\n}\n\nhelix-headless-speed-dial::part(trigger) {\n all: unset;\n box-sizing: border-box;\n cursor: pointer;\n}\n\nhelix-headless-speed-dial:state(open) > [slot=\"trigger\"] helix-headless-icon {\n rotate: 45deg;\n}\n\nhelix-headless-icon-button[slot=\"trigger\"]::part(button):focus-visible,\nhelix-headless-speed-dial::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-speed-dial::part(actions) {\n align-items: flex-end;\n background-color: transparent;\n border: none;\n flex-direction: column;\n gap: 0.75rem;\n margin: 0;\n overflow: visible;\n padding: 0;\n}\n\nhelix-headless-speed-dial::part(actions):popover-open {\n display: flex;\n}\n\nhelix-headless-speed-dial-item::part(item) {\n align-items: center;\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n flex-direction: row-reverse;\n font: inherit;\n gap: 0.75rem;\n padding: 0;\n}\n\nhelix-headless-speed-dial-item::part(item):focus-visible {\n outline: none;\n}\n\nhelix-headless-speed-dial-item:focus-within::part(icon) {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-speed-dial-item::part(icon) {\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 1.25rem;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-speed-dial-item::part(label) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n padding: 0.25rem 0.5rem;\n white-space: nowrap;\n}","description":"The speed dial on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"page\">\n <helix-headless-speed-dial\n data-dock=\"bottom-end\"\n data-dock-within\n label=\"Actions\"\n >\n <helix-headless-icon-button\n label=\"Actions\"\n slot=\"trigger\"\n >\n <helix-headless-icon name=\"plus\"></helix-headless-icon>\n </helix-headless-icon-button>\n\n <helix-headless-speed-dial-item value=\"share\">\n Share\n <helix-headless-icon\n name=\"share-network\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"copy\">\n Duplicate\n <helix-headless-icon\n name=\"copy\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"delete\">\n Delete\n <helix-headless-icon\n name=\"trash\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n </helix-headless-speed-dial>\n</div>","imports":["import '@fusion.dev/helix-headless/speed-dial'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"page\">\n <helix-headless-speed-dial\n data-dock=\"bottom-end\"\n data-dock-within\n label=\"Actions\"\n >\n <helix-headless-icon-button\n label=\"Actions\"\n slot=\"trigger\"\n >\n <helix-headless-icon name=\"plus\"></helix-headless-icon>\n </helix-headless-icon-button>\n\n <helix-headless-speed-dial-item value=\"share\">\n Share\n <helix-headless-icon\n name=\"share-network\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"copy\">\n Duplicate\n <helix-headless-icon\n name=\"copy\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n <helix-headless-speed-dial-item value=\"delete\">\n Delete\n <helix-headless-icon\n name=\"trash\"\n slot=\"icon\"\n ></helix-headless-icon>\n </helix-headless-speed-dial-item>\n </helix-headless-speed-dial>\n </div>\n )\n}"}],"splitter":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-splitter {\n block-size: 12rem;\n display: flex;\n min-block-size: 0;\n min-inline-size: 0;\n position: relative;\n}\n\nhelix-headless-splitter::part(start) {\n flex: 0 0 var(--splitter-position, 50%);\n min-block-size: 0;\n min-inline-size: 0;\n overflow: auto;\n}\n\nhelix-headless-splitter::part(end) {\n flex: 1 1 0;\n min-block-size: 0;\n min-inline-size: 0;\n overflow: auto;\n}\n\nhelix-headless-splitter::part(separator) {\n background-color: transparent;\n box-sizing: border-box;\n cursor: col-resize;\n flex: none;\n inline-size: 0.5rem;\n margin-inline: -0.25rem;\n position: relative;\n touch-action: none;\n user-select: none;\n z-index: 1;\n}\n\nhelix-headless-splitter::part(separator)::before {\n background-color: var(--_gray-line);\n content: \"\";\n inline-size: 1px;\n inset-block: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.5px;\n position: absolute;\n}\n\nhelix-headless-splitter::part(separator):hover::before,\nhelix-headless-splitter::part(separator):focus-visible::before {\n background-color: var(--_gray-muted);\n inline-size: 2px;\n margin-inline-start: -1px;\n}\n\nhelix-headless-splitter::part(separator):focus-visible {\n outline: none;\n}\n\nhelix-headless-card {\n align-content: start;\n color: var(--_gray-muted);\n display: grid;\n gap: 0.75rem;\n line-height: 1.5;\n padding: 1rem;\n}\n\nhelix-headless-card p {\n font-size: 0.875rem;\n margin: 0;\n}","description":"The same splitter on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-splitter default-position=\"40\">\n <helix-headless-card slot=\"start\">\n <p>Files</p>\n </helix-headless-card>\n <helix-headless-card slot=\"end\">\n <p>Editor</p>\n </helix-headless-card>\n</helix-headless-splitter>","imports":["import '@fusion.dev/helix-headless/splitter'","import '@fusion.dev/helix-headless/card'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-splitter default-position=\"40\">\n <helix-headless-card slot=\"start\">\n <p>Files</p>\n </helix-headless-card>\n <helix-headless-card slot=\"end\">\n <p>Editor</p>\n </helix-headless-card>\n </helix-headless-splitter>\n )\n}"}],"stat":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-stat-group {\n column-gap: 6rem;\n display: flex;\n flex-wrap: wrap;\n overflow-x: clip;\n row-gap: 3rem;\n}\n\nhelix-headless-stat-group > * {\n border-inline-start: 1px solid var(--_gray-line);\n margin-inline-start: calc(-3rem - 1px);\n padding-inline-start: 3rem;\n}\n\nhelix-headless-stat {\n align-content: start;\n align-items: baseline;\n color: var(--_gray-strong);\n display: grid;\n font-size: 2.75rem;\n font-weight: 600;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n letter-spacing: -0.01em;\n line-height: 1.2;\n}\n\nhelix-headless-stat [slot=\"label\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n grid-column: 1 / -1;\n letter-spacing: 0.02em;\n line-height: 1.5;\n}\n\nhelix-headless-stat [slot=\"unit\"] {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n font-weight: 500;\n letter-spacing: 0;\n line-height: 1.5;\n}","description":"The stat on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-stat-group>\n <helix-headless-stat>\n 1,284\n <span slot=\"label\">Active users</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 98.2\n <span slot=\"label\">Uptime</span>\n <span slot=\"unit\">%</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 4.7\n <span slot=\"label\">Average rating</span>\n </helix-headless-stat>\n</helix-headless-stat-group>","imports":["import '@fusion.dev/helix-headless/stat'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-stat-group>\n <helix-headless-stat>\n 1,284\n <span slot=\"label\">Active users</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 98.2\n <span slot=\"label\">Uptime</span>\n <span slot=\"unit\">%</span>\n </helix-headless-stat>\n <helix-headless-stat>\n 4.7\n <span slot=\"label\">Average rating</span>\n </helix-headless-stat>\n </helix-headless-stat-group>\n )\n}"}],"steps":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-steps {\n display: flex;\n gap: 1rem;\n}\n\nhelix-headless-step {\n align-items: start;\n display: grid;\n flex: 1 1 0;\n grid-template-columns: minmax(0, 1fr);\n min-inline-size: 0;\n position: relative;\n row-gap: 0.5rem;\n}\n\n/* The two half lines either side of the mark, drawn on the step rather than\n slotted into it. The tier renders no box for these: a consumer who wants them\n writes them, and a pseudo-element is the cheapest way to write them. */\nhelix-headless-step::before,\nhelix-headless-step::after {\n background-color: var(--_gray-line);\n block-size: 1px;\n content: \"\";\n inline-size: calc(50% - 0.375rem);\n inset-block-start: 0.625rem;\n position: absolute;\n}\n\nhelix-headless-step::before {\n inset-inline-start: -0.5rem;\n}\n\nhelix-headless-step::after {\n inset-inline-start: calc(50% + 0.875rem);\n}\n\nhelix-headless-step:first-child::before,\nhelix-headless-step:last-child::after {\n display: none;\n}\n\n/* An upcoming step's mark in the mark's gray: it is the only sign a step is\n there, so it answers to a graphic's 3:1, which the line's gray missed at\n 1.65:1 in light and 2.21:1 in dark. */\nhelix-headless-step::part(marker) {\n align-items: center;\n block-size: 1.25rem;\n color: var(--_gray-mark);\n display: inline-flex;\n grid-column: 1;\n grid-row: 1;\n inline-size: 1.25rem;\n justify-content: center;\n justify-self: center;\n position: relative;\n z-index: 1;\n}\n\nhelix-headless-step[complete]::part(marker),\nhelix-headless-step[current]::part(marker) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-step::part(mark) {\n block-size: 1.25rem;\n flex: none;\n inline-size: 1.25rem;\n}\n\nhelix-headless-step::part(body) {\n align-items: center;\n display: flex;\n flex-direction: column;\n grid-column: 1;\n grid-row: 2;\n min-inline-size: 0;\n}\n\nhelix-headless-step::part(label) {\n display: inline-flex;\n max-inline-size: 100%;\n}\n\nhelix-headless-step::part(label-button) {\n align-items: center;\n background-color: transparent;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-step[complete]::part(label-button),\nhelix-headless-step[current]::part(label-button) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-step::part(label-button):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-step::part(label-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-step::part(description) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n padding-inline: 0.75rem;\n}\n\nhelix-headless-step::part(content) {\n display: none;\n}","description":"The same steps on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-steps label=\"Checkout\">\n <helix-headless-step complete>Details</helix-headless-step>\n <helix-headless-step current>Payment</helix-headless-step>\n <helix-headless-step>Review</helix-headless-step>\n</helix-headless-steps>","imports":["import '@fusion.dev/helix-headless/steps'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-steps label=\"Checkout\">\n <helix-headless-step complete>Details</helix-headless-step>\n <helix-headless-step current>Payment</helix-headless-step>\n <helix-headless-step>Review</helix-headless-step>\n </helix-headless-steps>\n )\n}"}],"switch":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-switch {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-switch::part(field) {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: 0.5rem;\n}\n\nhelix-headless-switch::part(label) {\n color: var(--_gray-strong);\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n}\n\nhelix-headless-switch::part(hint),\nhelix-headless-switch::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n padding-inline-start: 3.125rem;\n}\n\nhelix-headless-switch::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-switch::part(track) {\n background-color: var(--_gray-subtle);\n block-size: 1.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 9999px;\n box-sizing: border-box;\n display: inline-block;\n flex: none;\n inline-size: 2.625rem;\n position: relative;\n}\n\nhelix-headless-switch::part(control) {\n appearance: none;\n background-color: transparent;\n block-size: 100%;\n border: 0;\n border-radius: 9999px;\n cursor: inherit;\n inline-size: 100%;\n inset: 0;\n margin: 0;\n position: absolute;\n}\n\n/* The thumb, drawn on the groove rather than slotted into it. The tier renders\n no box for this: a consumer who wants one writes it, and a pseudo-element is\n the cheapest way to write it. */\nhelix-headless-switch::part(track)::after {\n background-color: light-dark(var(--_gray-surface), var(--_gray-fill));\n block-size: 1.25rem;\n border: 1px solid var(--_gray-edge);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n inline-size: 1.25rem;\n inset-block-start: 50%;\n inset-inline-start: calc(0.125rem - 1px);\n pointer-events: none;\n position: absolute;\n translate: 0 -50%;\n}\n\nhelix-headless-switch::part(control):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-switch:state(checked)::part(track) {\n background-color: var(--_gray-strong);\n border-color: var(--_gray-strong);\n}\n\nhelix-headless-switch:state(checked)::part(track)::after {\n border-color: transparent;\n translate: 1.125rem -50%;\n}","description":"The switch on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-switch\n hint=\"Get an email when someone mentions you\"\n label=\"Email notifications\"\n name=\"option\"\n></helix-headless-switch>","imports":["import '@fusion.dev/helix-headless/switch'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-switch\n hint=\"Get an email when someone mentions you\"\n label=\"Email notifications\"\n name=\"option\"\n ></helix-headless-switch>\n )\n}"}],"table":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-table {\n display: block;\n overflow-x: auto;\n}\n\nhelix-headless-table-cell:not([hidden]) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n font-size: 0.8125rem;\n justify-content: var(--table-cell-align);\n min-block-size: 2.5rem;\n min-inline-size: 0;\n overflow-wrap: anywhere;\n padding-block: 0.5rem;\n padding-inline: 0 1rem;\n text-align: var(--table-cell-align);\n}\n\nhelix-headless-table-cell[header] {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-table::part(table) {\n display: grid;\n grid-template-columns: var(--table-template, minmax(0, 1fr));\n inline-size: 100%;\n}\n\nhelix-headless-table::part(head),\nhelix-headless-table-column:not([hidden]),\nhelix-headless-table-row:not([hidden]) {\n display: contents;\n}\n\nhelix-headless-table-column::part(column) {\n align-items: center;\n border-block-end: 1px solid var(--_gray-line);\n box-sizing: border-box;\n color: var(--_gray-muted);\n display: flex;\n font-size: 0.8125rem;\n font-weight: 600;\n min-block-size: 3rem;\n min-inline-size: 0;\n padding-inline-end: 1rem;\n}\n\nhelix-headless-table-column[text-align=\"center\"]::part(column) {\n justify-content: center;\n}\n\nhelix-headless-table-column[text-align=\"end\"]::part(column) {\n justify-content: flex-end;\n}","description":"The table on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-table label=\"Deployments\">\n <helix-headless-table-column width=\"12rem\">Service</helix-headless-table-column>\n <helix-headless-table-column>Region</helix-headless-table-column>\n <helix-headless-table-column>Status</helix-headless-table-column>\n\n <helix-headless-table-row>\n <helix-headless-table-cell header>web-app</helix-headless-table-cell>\n <helix-headless-table-cell>us-east-1</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n <helix-headless-table-row>\n <helix-headless-table-cell header>billing-api</helix-headless-table-cell>\n <helix-headless-table-cell>eu-west-2</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n</helix-headless-table>","imports":["import '@fusion.dev/helix-headless/table'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-table label=\"Deployments\">\n <helix-headless-table-column width=\"12rem\">Service</helix-headless-table-column>\n <helix-headless-table-column>Region</helix-headless-table-column>\n <helix-headless-table-column>Status</helix-headless-table-column>\n\n <helix-headless-table-row>\n <helix-headless-table-cell header>web-app</helix-headless-table-cell>\n <helix-headless-table-cell>us-east-1</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n <helix-headless-table-row>\n <helix-headless-table-cell header>billing-api</helix-headless-table-cell>\n <helix-headless-table-cell>eu-west-2</helix-headless-table-cell>\n <helix-headless-table-cell>Healthy</helix-headless-table-cell>\n </helix-headless-table-row>\n </helix-headless-table>\n )\n}"}],"tabs":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tabs {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n min-block-size: 0;\n}\n\nhelix-headless-tabs::part(tabs) {\n display: flex;\n gap: 0.25rem;\n overflow-x: auto;\n position: relative;\n}\n\nhelix-headless-tab {\n display: inline-flex;\n position: relative;\n z-index: 10;\n}\n\nhelix-headless-tab::part(tab) {\n align-items: center;\n background-color: transparent;\n block-size: 2.5rem;\n border: 0;\n border-block-end: 2px solid transparent;\n border-radius: var(--_radius-control);\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n font: inherit;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-tab:state(selected)::part(tab) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-tab-panel {\n display: contents;\n}\n\nhelix-headless-tab-panel::part(panel) {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n min-inline-size: 0;\n outline: none;\n padding-block-start: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tab::part(tab):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-tabs::part(indicator) {\n background-color: var(--_gray-surface);\n block-size: var(--indicator-block-size, 0);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.08));\n box-sizing: border-box;\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) var(--indicator-y, 0px);\n}","description":"The same tabs on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tabs\n default-active=\"one\"\n label=\"Project\"\n>\n <helix-headless-tab value=\"one\">Overview</helix-headless-tab>\n <helix-headless-tab value=\"two\">Activity</helix-headless-tab>\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"one\"\n >\n A summary of the project and the people on it.\n </helix-headless-tab-panel>\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"two\"\n >\n Recent changes to the project and its files.\n </helix-headless-tab-panel>\n</helix-headless-tabs>","imports":["import '@fusion.dev/helix-headless/tabs'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-tabs\n default-active=\"one\"\n label=\"Project\"\n >\n {' '}\n <helix-headless-tab value=\"one\">Overview</helix-headless-tab>{' '}\n <helix-headless-tab value=\"two\">Activity</helix-headless-tab>{' '}\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"one\"\n >\n {' '}\n A summary of the project and the people on it.{' '}\n </helix-headless-tab-panel>{' '}\n <helix-headless-tab-panel\n slot=\"panels\"\n value=\"two\"\n >\n {' '}\n Recent changes to the project and its files.{' '}\n </helix-headless-tab-panel>{' '}\n </helix-headless-tabs>\n )\n}"}],"tag":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tag::part(dismiss) {\n all: unset;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: inline-flex;\n margin-inline-end: -0.25rem;\n padding: 0.25rem;\n}\n\nhelix-headless-tag::part(dismiss):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tag::part(dismiss-mark) {\n block-size: 0.85em;\n flex: none;\n inline-size: 0.85em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tag {\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: inline-flex;\n font-size: 0.75rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n padding-inline: 0.5rem;\n white-space: nowrap;\n}","description":"The same tag on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tag>Complete</helix-headless-tag>","imports":["import '@fusion.dev/helix-headless/tag'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-tag>Complete</helix-headless-tag>\n}"}],"terminal":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n}\n\n/* The ground and the ink the connector themes the terminal in, so the grid\n and the frame around it are one surface. */\nhelix-headless-terminal {\n --terminal-background-color: var(--_gray-surface);\n --terminal-color: var(--_gray-strong);\n}\n\nhelix-headless-terminal::part(region) {\n background-color: var(--_gray-surface);\n block-size: 18rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n box-sizing: border-box;\n display: grid;\n grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;\n overflow: hidden;\n}\n\nhelix-headless-terminal::part(header),\nhelix-headless-terminal::part(find-bar),\nhelix-headless-terminal::part(status) {\n align-items: center;\n background-color: var(--_gray-subtle);\n display: flex;\n gap: 0.25rem;\n padding: 0.25rem 0.25rem 0.25rem 0.5rem;\n}\n\n/* The find bar and the status line show only while the host says so: an\n author `display` outranks the browser's own rule for `hidden`. */\nhelix-headless-terminal:not(:state(find-open))::part(find-bar),\nhelix-headless-terminal:not(:state(exited)):not(:state(tab-moves-focus))::part(status) {\n display: none;\n}\n\nhelix-headless-terminal::part(header) {\n grid-row: header;\n border-block-end: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-terminal::part(label) {\n display: block;\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n/* Each toolbar lays its buttons out in the box it draws inside it. */\nhelix-headless-terminal::part(controls-toolbar),\nhelix-headless-terminal::part(find-controls-toolbar) {\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-terminal::part(find-button),\nhelix-headless-terminal::part(copy-button),\nhelix-headless-terminal::part(clear-button),\nhelix-headless-terminal::part(fullscreen-button),\nhelix-headless-terminal::part(find-previous-button),\nhelix-headless-terminal::part(find-next-button),\nhelix-headless-terminal::part(find-close-button),\nhelix-headless-terminal::part(find-match-case-button),\nhelix-headless-terminal::part(find-whole-word-button),\nhelix-headless-terminal::part(find-regex-button),\nhelix-headless-terminal::part(restart-button) {\n align-items: center;\n background-color: var(--_gray-surface);\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n gap: 0.25rem;\n justify-content: center;\n line-height: 1rem;\n min-inline-size: 1.75rem;\n padding: 0.3125rem;\n}\n\n/* Restart has words beside its glyph, and a glyph sized by nothing shrinks to\n nothing beside them: a column of its own gives it the size of the text. */\nhelix-headless-terminal::part(restart-button) {\n display: inline-grid;\n grid-template-columns: 1rem auto;\n padding-inline: 0.375rem 0.5rem;\n}\n\nhelix-headless-terminal::part(find-field) {\n block-size: 1.75rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n flex: 1 1 auto;\n}\n\nhelix-headless-terminal::part(find-bar) {\n grid-row: find;\n}\n\nhelix-headless-terminal::part(find-count) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n}\n\nhelix-headless-terminal::part(viewport) {\n grid-row: viewport;\n font-family: ui-monospace, monospace;\n min-block-size: 0;\n overflow: hidden;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-terminal::part(status) {\n grid-row: status;\n border-block-start: 1px solid var(--_gray-edge);\n font-size: 0.875rem;\n}\n\nhelix-headless-terminal::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-preview-terminal-canvas] {\n block-size: 100%;\n}","description":"The terminal frame on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<!-- Preview frame: data-preview-terminal has the frame connect xterm.js; on your page, connectTerminal does. -->\n<helix-headless-terminal\n data-preview-terminal\n id=\"shell\"\n label=\"~/fusion\"\n>\n <div data-preview-terminal-canvas></div>\n</helix-headless-terminal>\n\n<script type=\"module\">\n document\n .getElementById('shell')\n .write('$ echo \"Hello from the headless tier\"\\r\\nHello from the headless tier\\r\\n$ ')\n</script>","imports":["import '@fusion.dev/helix-headless/terminal'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import type { HelixHeadlessTerminal } from '@fusion.dev/helix-headless'\nimport { useEffect, useRef } from 'react'\nimport './preview.css'\n\nexport function Example() {\n const shell = useRef<HelixHeadlessTerminal>(null)\n\n useEffect(() => {\n void shell.current?.write(\n '$ echo \"Hello from the headless tier\"\\r\\nHello from the headless tier\\r\\n$ ',\n )\n }, [])\n\n return (\n <>\n {/* Preview frame: data-preview-terminal has the frame connect xterm.js; on your page, connectTerminal does. */}\n <helix-headless-terminal\n data-preview-terminal\n label=\"~/fusion\"\n ref={shell}\n >\n <div data-preview-terminal-canvas />\n </helix-headless-terminal>\n </>\n )\n}"}],"textarea":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-textarea {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-textarea::part(field) {\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n display: flex;\n padding: 0.5rem;\n}\n\nhelix-headless-textarea::part(field):hover {\n border-color: var(--_gray-line);\n}\n\n/* Reset by name: `all: unset` would also undo the height the resize grip writes. */\nhelix-headless-textarea::part(control) {\n appearance: none;\n background: none;\n border: 0;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n min-inline-size: 0;\n outline: none;\n overflow-wrap: break-word;\n padding: 0;\n resize: vertical;\n white-space: pre-wrap;\n}\n\nhelix-headless-textarea::part(control)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-textarea::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-textarea::part(hint),\nhelix-headless-textarea::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-textarea::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-textarea::part(field):focus-within {\n outline: 2px solid var(--_gray-mark);\n}","description":"The textarea on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-textarea\n hint=\"Shown to everyone on the project\"\n label=\"Project description\"\n placeholder=\"What is the project about?\"\n></helix-headless-textarea>","imports":["import '@fusion.dev/helix-headless/textarea'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-textarea\n hint=\"Shown to everyone on the project\"\n label=\"Project description\"\n placeholder=\"What is the project about?\"\n ></helix-headless-textarea>\n )\n}"}],"time-input":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-time-input::part(field) {\n align-items: center;\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: flex;\n gap: 0.25rem;\n min-block-size: 2.5rem;\n padding: 0.25rem 0.5rem;\n}\n\nhelix-headless-time-input::part(field):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-time-input::part(control) {\n all: unset;\n box-sizing: border-box;\n color: var(--_gray-strong);\n flex: 1 1 auto;\n font-size: 0.875rem;\n font-weight: 500;\n min-inline-size: 0;\n}\n\nhelix-headless-time-input::part(control)::placeholder {\n color: var(--_gray-muted);\n}\n\nhelix-headless-time-input::part(trigger) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n flex: none;\n}\n\nhelix-headless-time-input::part(trigger-icon) {\n block-size: 1.25rem;\n inline-size: 1.25rem;\n}\n\nhelix-headless-time-input::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n inline-size: var(--floating-anchor-inline-size, 100%);\n inset: auto;\n margin: 0;\n min-inline-size: max-content;\n overflow: hidden;\n padding: 0.25rem 0;\n}\n\nhelix-headless-time-input::part(picker) {\n display: block;\n}\n\nhelix-headless-time-input::part(picker-list-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-time-input::part(picker-list-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n}\n\nhelix-headless-time-input::part(picker-option) {\n display: block;\n}\n\nhelix-headless-time-input::part(picker-option-item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-time-input::part(picker-option-item):hover,\nhelix-headless-time-input::part(picker-option-item-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-time-input::part(picker-option-label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-time-input::part(picker-option-item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-time-input::part(time-dismiss-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(picker-column-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(picker-list-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-time-input::part(hint),\nhelix-headless-time-input::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-time-input::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-input::part(field):focus-within {\n outline: 2px solid var(--_gray-mark);\n}\n\nhelix-headless-time-input::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The same time input on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-time-input\n hint=\"Choose a time or type one\"\n label=\"Starts\"\n name=\"starts\"\n></helix-headless-time-input>","imports":["import '@fusion.dev/helix-headless/time-input'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-time-input\n hint=\"Choose a time or type one\"\n label=\"Starts\"\n name=\"starts\"\n ></helix-headless-time-input>\n )\n}"}],"time-picker":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker {\n display: block;\n}\n\nhelix-headless-time-picker::part(list-label) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-time-picker::part(option) {\n display: block;\n}\n\nhelix-headless-time-picker::part(option-item) {\n align-items: center;\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n min-block-size: 2rem;\n padding: 0.25rem 0.5rem;\n user-select: none;\n}\n\nhelix-headless-time-picker::part(option-item):hover,\nhelix-headless-time-picker::part(option-item-active) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-time-picker::part(option-label) {\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-time-picker::part(option-item-selected)::after {\n background-color: currentColor;\n block-size: 1rem;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n margin-inline-start: auto;\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E\");\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n}\n\nhelix-headless-time-picker::part(column-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker::part(list-filter-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-time-picker::part(list-items):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-time-picker::part(list-items),\nhelix-headless-time-picker::part(column-items) {\n display: flex;\n flex-direction: column;\n max-block-size: 14rem;\n overflow-y: auto;\n}","description":"The time picker on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-time-picker default-value=\"09:30\"></helix-headless-time-picker>","imports":["import '@fusion.dev/helix-headless/time-picker'"],"label":"Preview","layout":"hug","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return <helix-headless-time-picker default-value=\"09:30\"></helix-headless-time-picker>\n}"}],"timeline":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-timeline {\n display: flex;\n flex-direction: column;\n}\n\nhelix-headless-timeline-item {\n column-gap: 1rem;\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n grid-template-rows: auto minmax(0, 1fr);\n}\n\nhelix-headless-timeline-item::part(rail) {\n display: grid;\n grid-column: 1;\n grid-row: 1 / -1;\n grid-template-rows: subgrid;\n justify-items: center;\n}\n\n/* The half of the line above the mark, drawn on the rail like the half below it.\n The tier renders no box for either: a consumer who wants them writes them. */\nhelix-headless-timeline-item::part(rail)::before {\n background-color: var(--_gray-line);\n block-size: 100%;\n content: \"\";\n grid-column: 1;\n grid-row: 1;\n inline-size: 1px;\n}\n\nhelix-headless-timeline-item:first-child::part(rail)::before {\n visibility: hidden;\n}\n\nhelix-headless-timeline-item::part(rail)::after {\n align-self: stretch;\n background-color: var(--_gray-line);\n content: \"\";\n grid-column: 1;\n grid-row: 2;\n inline-size: 1px;\n margin-block-start: 1.25rem;\n}\n\nhelix-headless-timeline-item:last-child::part(rail)::after {\n visibility: hidden;\n}\n\nhelix-headless-timeline-item::part(marker) {\n align-items: center;\n align-self: start;\n block-size: 1.25rem;\n color: var(--_gray-mark);\n display: flex;\n grid-column: 1;\n grid-row: 2;\n inline-size: 1.25rem;\n justify-content: center;\n}\n\nhelix-headless-timeline-item[tone]::part(marker) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-timeline-item > [slot=\"marker\"],\nhelix-headless-timeline-item > [slot=\"marker\"]::part(svg) {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-timeline-item::part(dot) {\n block-size: 1rem;\n display: block;\n inline-size: 1rem;\n}\n\nhelix-headless-timeline-item::part(time) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n grid-column: 2;\n grid-row: 1;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-timeline-item::part(content) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n grid-column: 2;\n grid-row: 2;\n min-inline-size: 0;\n padding-block-end: 1.5rem;\n}\n\nhelix-headless-timeline-item:last-child::part(content) {\n padding-block-end: 0;\n}\n\nhelix-headless-timeline-item > p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-timeline-item > p + p {\n color: var(--_gray-muted);\n font-size: 0.8125rem;\n font-weight: 400;\n}","description":"The timeline on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-timeline label=\"Deployment history\">\n <helix-headless-timeline-item\n datetime=\"2026-08-19T09:12\"\n tone=\"success\"\n >\n <helix-headless-icon\n name=\"check\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">09:12</span>\n <p>Deployed to production</p>\n <p>Version 4.2.0, by the release job.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:47\"\n tone=\"danger\"\n >\n <helix-headless-icon\n name=\"x\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">08:47</span>\n <p>Rolled back</p>\n <p>Error rate above the threshold for four minutes.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:30\"\n tone=\"primary\"\n >\n <span slot=\"time\">08:30</span>\n <p>Build passed</p>\n <p>1,089 tests across 75 packages.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item datetime=\"2026-08-19T08:04\">\n <span slot=\"time\">08:04</span>\n <p>Pull request opened</p>\n <p>A new branch with its first commit.</p>\n </helix-headless-timeline-item>\n</helix-headless-timeline>","imports":["import '@fusion.dev/helix-headless/timeline'","import '@fusion.dev/helix-headless/icon'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-timeline label=\"Deployment history\">\n <helix-headless-timeline-item\n datetime=\"2026-08-19T09:12\"\n tone=\"success\"\n >\n <helix-headless-icon\n name=\"check\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">09:12</span>\n <p>Deployed to production</p>\n <p>Version 4.2.0, by the release job.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:47\"\n tone=\"danger\"\n >\n <helix-headless-icon\n name=\"x\"\n slot=\"marker\"\n ></helix-headless-icon>\n <span slot=\"time\">08:47</span>\n <p>Rolled back</p>\n <p>Error rate above the threshold for four minutes.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item\n datetime=\"2026-08-19T08:30\"\n tone=\"primary\"\n >\n <span slot=\"time\">08:30</span>\n <p>Build passed</p>\n <p>1,089 tests across 75 packages.</p>\n </helix-headless-timeline-item>\n <helix-headless-timeline-item datetime=\"2026-08-19T08:04\">\n <span slot=\"time\">08:04</span>\n <p>Pull request opened</p>\n <p>A new branch with its first commit.</p>\n </helix-headless-timeline-item>\n </helix-headless-timeline>\n )\n}"}],"toast":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The region is a popover in the top layer, so it is the box to place, and the\n UA's centered, bordered, fit-content popover box is undone: at fit-content it\n would hug the inline start, where the stack belongs at the end. */\nhelix-headless-toast::part(region) {\n align-items: flex-end;\n background: none;\n border: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n inline-size: auto;\n inset: auto;\n inset-block-end: 1.5rem;\n inset-inline: 1.5rem;\n margin: 0;\n max-inline-size: none;\n overflow: visible;\n padding: 0;\n pointer-events: none;\n position: fixed;\n}\n\n/* The two regions that say each message as it arrives are heard and not\n drawn: clipped, never `display: none`, which would take them out of the\n accessibility tree too. */\nhelix-headless-toast::part(live) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-toast-item {\n display: grid;\n inline-size: 22rem;\n margin-block-start: 0.5rem;\n max-inline-size: calc(100vw - 2rem);\n pointer-events: auto;\n}\n\nhelix-headless-toast-item::part(item) {\n align-items: start;\n background-color: var(--_gray-strong);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-surface);\n display: grid;\n font-size: 0.8125rem;\n grid-template-columns: auto 1fr;\n line-height: 1.5;\n min-block-size: 0;\n overflow: hidden;\n padding: 0.75rem 3rem 0.75rem 0.75rem;\n position: relative;\n}\n\nhelix-headless-toast-item::part(icon) {\n display: inline-flex;\n grid-area: 1 / 1;\n margin-block-start: calc((1.21875rem - 1rem) / 2);\n margin-inline-end: 0.75rem;\n}\n\nhelix-headless-toast-item::part(icon-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-toast-item::part(content) {\n grid-area: 1 / 2;\n min-inline-size: 0;\n}\n\nhelix-headless-toast-item::part(actions) {\n display: flex;\n gap: 0.25rem;\n grid-area: 2 / 2;\n}\n\nhelix-headless-toast-item > [slot=\"actions\"] {\n margin-block-start: 0.5rem;\n}\n\nhelix-headless-toast-item::part(dismiss) {\n all: unset;\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n /* The toast is the inverse of the page, light in dark mode, so its mark\n takes the darker gray there: the page's mark gray read 2.98:1 on it. */\n color: light-dark(#8e8e96, #63636b);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n inset-block-start: calc(0.75rem + (1.21875rem - 2rem) / 2);\n inset-inline-end: 0.75rem;\n place-content: center;\n place-items: center;\n position: absolute;\n}\n\nhelix-headless-toast-item::part(dismiss-mark) {\n block-size: 1rem;\n flex: none;\n inline-size: 1rem;\n}\n\nhelix-headless-toast-item::part(timer) {\n background-color: var(--_gray-mark);\n block-size: 0.25rem;\n inset-block-start: 0;\n inset-inline: 0;\n position: absolute;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-surface) 12%, transparent);\n block-size: 2rem;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-toast-item::part(dismiss):hover,\nhelix-headless-button::part(button):hover {\n background-color: color-mix(in srgb, var(--_gray-surface) 20%, transparent);\n color: var(--_gray-surface);\n}\n\nhelix-headless-toast-item::part(dismiss):focus-visible,\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toast on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toast\n label=\"Notifications\"\n placement=\"bottom-end\"\n>\n <helix-headless-toast-item\n dismissible\n tone=\"success\"\n >\n Project saved.\n </helix-headless-toast-item>\n <helix-headless-toast-item\n dismissible\n tone=\"danger\"\n >\n Could not reach the server.\n <helix-headless-button slot=\"actions\">Retry</helix-headless-button>\n </helix-headless-toast-item>\n</helix-headless-toast>","imports":["import '@fusion.dev/helix-headless/toast'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toast\n label=\"Notifications\"\n placement=\"bottom-end\"\n >\n <helix-headless-toast-item\n dismissible\n tone=\"success\"\n >\n Project saved.\n </helix-headless-toast-item>\n <helix-headless-toast-item\n dismissible\n tone=\"danger\"\n >\n Could not reach the server.\n <helix-headless-button slot=\"actions\">Retry</helix-headless-button>\n </helix-headless-toast-item>\n </helix-headless-toast>\n )\n}"}],"toggle":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-toggle-group {\n display: inline-flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-toggle-group::part(label) {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.8125rem;\n font-weight: 500;\n line-height: 1.2;\n padding-block-end: 0.25rem;\n}\n\nhelix-headless-toggle-group::part(hint),\nhelix-headless-toggle-group::part(feedback) {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n line-height: 1.5;\n margin: 0.25rem 0 0;\n}\n\nhelix-headless-toggle-group::part(feedback) {\n font-weight: 500;\n}\n\nhelix-headless-toggle-group::part(row) {\n align-items: center;\n display: flex;\n gap: 0.75rem;\n}\n\nhelix-headless-toggle-group::part(track) {\n background-color: var(--_gray-subtle);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n display: inline-flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n min-block-size: 2.5rem;\n padding: 0.25rem;\n position: relative;\n}\n\nhelix-headless-toggle-group::part(indicator) {\n background-color: light-dark(#fff, var(--_gray-fill));\n block-size: var(--indicator-block-size, 0);\n border-radius: calc(var(--_radius-control) - 1px);\n box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3));\n box-sizing: border-box;\n inline-size: var(--indicator-inline-size, 0);\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n translate: var(--indicator-x, 0) var(--indicator-y, 0);\n}\n\nhelix-headless-toggle {\n block-size: calc(2rem - 2px);\n display: inline-flex;\n flex: 1 1 auto;\n position: relative;\n z-index: 10;\n}\n\nhelix-headless-toggle::part(item) {\n all: unset;\n align-items: center;\n block-size: calc(2rem - 2px);\n border-radius: calc(var(--_radius-control) - 1px);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n flex: 1 1 auto;\n font-size: 0.8125rem;\n font-weight: 500;\n justify-content: center;\n padding-inline: 0.75rem;\n white-space: nowrap;\n}\n\nhelix-headless-toggle:state(selected)::part(item) {\n color: var(--_gray-strong);\n}\n\nhelix-headless-toggle::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toggle on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toggle-group\n default-value=\"one\"\n hint=\"How the results are laid out\"\n label=\"View\"\n>\n <helix-headless-toggle value=\"one\">List</helix-headless-toggle>\n <helix-headless-toggle value=\"two\">Grid</helix-headless-toggle>\n <helix-headless-toggle value=\"three\">Board</helix-headless-toggle>\n</helix-headless-toggle-group>","imports":["import '@fusion.dev/helix-headless/toggle'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toggle-group\n default-value=\"one\"\n hint=\"How the results are laid out\"\n label=\"View\"\n >\n {' '}\n <helix-headless-toggle value=\"one\">List</helix-headless-toggle>{' '}\n <helix-headless-toggle value=\"two\">Grid</helix-headless-toggle>{' '}\n <helix-headless-toggle value=\"three\">Board</helix-headless-toggle>{' '}\n </helix-headless-toggle-group>\n )\n}"}],"toolbar":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-toolbar {\n display: inline-flex;\n}\n\nhelix-headless-toolbar::part(toolbar) {\n align-items: center;\n display: flex;\n gap: 0.25rem;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button::part(button):hover {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-toolbar helix-headless-icon {\n block-size: 1rem;\n inline-size: 1rem;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n flex: none;\n inline-size: 100%;\n}\n\nhelix-headless-icon-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}","description":"The toolbar on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-toolbar label=\"Text formatting\">\n <helix-headless-icon-button label=\"Bold\">\n <helix-headless-icon name=\"text-b\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Italic\">\n <helix-headless-icon name=\"text-italic\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Link\">\n <helix-headless-icon name=\"link\"></helix-headless-icon>\n </helix-headless-icon-button>\n</helix-headless-toolbar>","imports":["import '@fusion.dev/helix-headless/toolbar'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-toolbar label=\"Text formatting\">\n <helix-headless-icon-button label=\"Bold\">\n <helix-headless-icon name=\"text-b\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Italic\">\n <helix-headless-icon name=\"text-italic\"></helix-headless-icon>\n </helix-headless-icon-button>\n <helix-headless-icon-button label=\"Link\">\n <helix-headless-icon name=\"link\"></helix-headless-icon>\n </helix-headless-icon-button>\n </helix-headless-toolbar>\n )\n}"}],"tooltip":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover {\n border-color: var(--_gray-line);\n}\n\nhelix-headless-button::part(button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tooltip::part(surface) {\n align-items: center;\n background-color: var(--_gray-strong);\n border: 0;\n border-radius: var(--_radius-control);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.75rem;\n font-weight: 400;\n gap: 0.25rem;\n inline-size: max-content;\n line-height: 1.2;\n margin: 0;\n max-inline-size: 16rem;\n overflow: visible;\n padding: 0.25rem 0.5rem;\n position: fixed;\n}\n\nhelix-headless-tooltip::part(surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-tooltip::part(arrow) {\n background-color: var(--_gray-strong);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}","description":"The tooltip on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-button\n aria-describedby=\"save-tip\"\n id=\"save\"\n>Save changes</helix-headless-button>\n<helix-headless-tooltip\n content=\"Save your changes to the file\"\n for=\"save\"\n id=\"save-tip\"\n></helix-headless-tooltip>","imports":["import '@fusion.dev/helix-headless/tooltip'","import '@fusion.dev/helix-headless/button'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <>\n <helix-headless-button\n aria-describedby=\"save-tip\"\n id=\"save\"\n >\n Save changes\n </helix-headless-button>\n <helix-headless-tooltip\n content=\"Save your changes to the file\"\n for=\"save\"\n id=\"save-tip\"\n ></helix-headless-tooltip>\n </>\n )\n}"}],"tour":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 100%;\n flex: none;\n inline-size: 100%;\n}\n\nhelix-headless-tour-stop helix-headless-card {\n display: grid;\n gap: 0.75rem;\n padding: 1rem;\n}\n\nhelix-headless-tour-stop h3,\nhelix-headless-tour-stop p {\n margin: 0;\n}\n\nhelix-headless-tour-stop h3 {\n color: var(--_gray-strong);\n font-size: 1.5rem;\n font-weight: 600;\n line-height: calc(0.99em + 0.5rem);\n}\n\nhelix-headless-tour-stop p {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\n.app {\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-surface);\n display: grid;\n grid-template-columns: 11rem minmax(0, 1fr);\n margin-block-end: 1.5rem;\n overflow: hidden;\n}\n\n.rail {\n background-color: var(--_gray-subtle);\n border-inline-end: 1px solid var(--_gray-edge);\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 1rem;\n}\n\n.rail p {\n color: var(--_gray-strong);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\n.rail p:first-child {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n}\n\n.bar {\n align-items: center;\n border-block-end: 1px solid var(--_gray-edge);\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n padding: 0.75rem 1rem;\n}\n\n@media (width < 32rem) {\n .app {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .rail {\n border-block-end: 1px solid var(--_gray-edge);\n border-inline-end: 0;\n }\n}\n\n.sheet {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 1.5rem 1rem;\n}\n\n.sheet h2 {\n color: var(--_gray-strong);\n font-size: 2rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: calc(0.99em + 0.5rem);\n margin: 0;\n}\n\n.sheet p {\n color: var(--_gray-muted);\n font-size: 0.875rem;\n line-height: 1.5;\n margin: 0;\n}\n\nhelix-headless-button {\n display: inline-flex;\n}\n\nhelix-headless-button::part(button),\nhelix-headless-tour-stop::part(back-button),\nhelix-headless-tour-stop::part(next-button),\nhelix-headless-tour-stop::part(skip-button) {\n all: unset;\n align-items: center;\n background-color: var(--_gray-subtle);\n block-size: 2.5rem;\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-strong);\n cursor: pointer;\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.5rem;\n justify-content: center;\n line-height: 1.2;\n padding-inline: 1rem;\n white-space: nowrap;\n}\n\nhelix-headless-button::part(button):hover,\nhelix-headless-tour-stop::part(back-button):hover {\n border-color: var(--_gray-line);\n}\n\n#publish::part(button),\nhelix-headless-tour-stop::part(next-button) {\n background-color: var(--_gray-strong);\n border-color: transparent;\n color: var(--_gray-surface);\n}\n\nhelix-headless-tour-stop::part(skip-button) {\n background-color: transparent;\n border-color: transparent;\n}\n\nhelix-headless-icon-button::part(button) {\n all: unset;\n align-items: center;\n block-size: 2.5rem;\n border: 1px solid transparent;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: inline-flex;\n inline-size: 2.5rem;\n justify-content: center;\n}\n\nhelix-headless-icon-button helix-headless-icon {\n block-size: 1.25rem;\n inline-size: 1.25rem;\n}\n\nhelix-headless-button::part(button):focus-visible,\nhelix-headless-icon-button::part(button):focus-visible,\nhelix-headless-tour-stop::part(back-button):focus-visible,\nhelix-headless-tour-stop::part(next-button):focus-visible,\nhelix-headless-tour-stop::part(skip-button):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tour,\nhelix-headless-tour-stop {\n display: contents;\n}\n\n/* Placed by the box the tour publishes, which is where it also writes it. */\nhelix-headless-tour::part(spotlight) {\n block-size: var(--tour-spotlight-height);\n border-radius: var(--_radius-surface);\n box-shadow: 0 0 0 100vmax light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.64));\n inline-size: var(--tour-spotlight-width);\n left: var(--tour-spotlight-x);\n pointer-events: none;\n position: fixed;\n top: var(--tour-spotlight-y);\n z-index: 1000;\n}\n\nhelix-headless-tour-stop::part(surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n box-shadow: 0 12px 32px light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.14));\n box-sizing: border-box;\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n inline-size: max-content;\n margin: 0;\n max-inline-size: 22rem;\n overflow: visible;\n padding: 1rem;\n position: fixed;\n}\n\nhelix-headless-tour-stop::part(surface):not(:popover-open) {\n display: none;\n}\n\nhelix-headless-tour-stop::part(arrow) {\n background-color: var(--_gray-surface);\n block-size: 0.5rem;\n inline-size: 0.5rem;\n position: absolute;\n rotate: 45deg;\n}\n\nhelix-headless-tour-stop::part(arrow-bottom) {\n border-left: 1px solid var(--_gray-edge);\n border-top: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-top) {\n border-bottom: 1px solid var(--_gray-edge);\n border-right: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-right) {\n border-bottom: 1px solid var(--_gray-edge);\n border-left: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(arrow-left) {\n border-right: 1px solid var(--_gray-edge);\n border-top: 1px solid var(--_gray-edge);\n}\n\nhelix-headless-tour-stop::part(content) {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\nhelix-headless-tour-stop::part(actions) {\n align-items: center;\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n}\n\nhelix-headless-tour-stop::part(skip) {\n margin-inline-end: auto;\n}","description":"The tour on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"app\">\n <aside\n class=\"rail\"\n id=\"rail\"\n >\n <p>Project</p>\n <p>Drafts</p>\n <p>Published</p>\n <p>Archive</p>\n </aside>\n\n <div class=\"main\">\n <header class=\"bar\">\n <helix-headless-button id=\"publish\">Publish</helix-headless-button>\n <helix-headless-button id=\"preview\">Preview</helix-headless-button>\n <helix-headless-icon-button\n id=\"settings\"\n label=\"Settings\"\n >\n <helix-headless-icon name=\"gear\"></helix-headless-icon>\n </helix-headless-icon-button>\n </header>\n\n <section\n class=\"sheet\"\n id=\"sheet\"\n >\n <h2>Quarterly review</h2>\n <p>\n A draft of the third quarter report. Add a summary and the results for\n each team before you publish.\n </p>\n </section>\n </div>\n</div>\n\n<helix-headless-button id=\"begin\">Take the tour</helix-headless-button>\n\n<helix-headless-tour\n id=\"tour\"\n label=\"Getting started\"\n>\n <helix-headless-tour-stop\n for=\"rail\"\n placement=\"right-start\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Find your documents</h3>\n <p>\n Drafts, published documents, and archived documents are listed here.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop for=\"sheet\">\n <helix-headless-card>\n <h3 slot=\"header\">Write your document</h3>\n <p>\n Your changes are saved as you type. You can close the page at any time.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop\n for=\"preview\"\n placement=\"bottom\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Preview your document</h3>\n <p>\n See the document as it looks to people with the link.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n\n <helix-headless-tour-stop\n for=\"publish\"\n placement=\"bottom-start\"\n >\n <helix-headless-card>\n <h3 slot=\"header\">Publish when you are ready</h3>\n <p>\n You can unpublish at any time. The archive keeps every earlier version.\n </p>\n </helix-headless-card>\n </helix-headless-tour-stop>\n</helix-headless-tour>\n\n<script type=\"module\">\n /* Preview frame: the button opens the tour at its first stop. A real page\n would also remember that the tour was taken. */\n const tour = document.querySelector('#tour')\n document.querySelector('#begin').addEventListener('click', () => {\n tour.index = 0\n tour.open = true\n })\n tour.addEventListener('helix-before-activate', (event) => {\n tour.index = Number(event.detail.value)\n })\n</script>","imports":["import '@fusion.dev/helix-headless/tour'","import '@fusion.dev/helix-headless/button'","import '@fusion.dev/helix-headless/card'","import '@fusion.dev/helix-headless/icon'","import '@fusion.dev/helix-headless/icon-button'"],"label":"Preview","min":420,"renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nimport { useState } from 'react'\n\nexport function Example() {\n /* Preview frame: the button opens the tour at its first stop. A real page\n would also remember that the tour was taken. */\n const [index, setIndex] = useState(0)\n const [open, setOpen] = useState(false)\n\n return (\n <>\n <div className=\"app\">\n {' '}\n <aside\n className=\"rail\"\n id=\"rail\"\n >\n {' '}\n <p>Project</p> <p>Drafts</p> <p>Published</p> <p>Archive</p>{' '}\n </aside>{' '}\n <div className=\"main\">\n {' '}\n <header className=\"bar\">\n {' '}\n <helix-headless-button id=\"publish\">Publish</helix-headless-button>{' '}\n <helix-headless-button id=\"preview\">Preview</helix-headless-button>{' '}\n <helix-headless-icon-button\n id=\"settings\"\n label=\"Settings\"\n >\n {' '}\n <helix-headless-icon name=\"gear\"></helix-headless-icon>{' '}\n </helix-headless-icon-button>{' '}\n </header>{' '}\n <section\n className=\"sheet\"\n id=\"sheet\"\n >\n {' '}\n <h2>Quarterly review</h2>{' '}\n <p>\n {' '}\n A draft of the third quarter report. Add a summary and the results for each team\n before you publish.{' '}\n </p>{' '}\n </section>{' '}\n </div>{' '}\n </div>{' '}\n <helix-headless-button\n onClick={() => {\n setIndex(0)\n setOpen(true)\n }}\n >\n Take the tour\n </helix-headless-button>{' '}\n <helix-headless-tour\n index={index}\n label=\"Getting started\"\n onhelix-before-activate={(event) => setIndex(Number(event.detail.value))}\n onhelix-before-close={() => setOpen(false)}\n open={open}\n >\n {' '}\n <helix-headless-tour-stop\n for=\"rail\"\n placement=\"right-start\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Find your documents</h3>{' '}\n <p> Drafts, published documents, and archived documents are listed here. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop for=\"sheet\">\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Write your document</h3>{' '}\n <p> Your changes are saved as you type. You can close the page at any time. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop\n for=\"preview\"\n placement=\"bottom\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Preview your document</h3>{' '}\n <p> See the document as it looks to people with the link. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n <helix-headless-tour-stop\n for=\"publish\"\n placement=\"bottom-start\"\n >\n {' '}\n <helix-headless-card>\n {' '}\n <h3 slot=\"header\">Publish when you are ready</h3>{' '}\n <p> You can unpublish at any time. The archive keeps every earlier version. </p>{' '}\n </helix-headless-card>{' '}\n </helix-headless-tour-stop>{' '}\n </helix-headless-tour>\n </>\n )\n}"}],"tree":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-tree,\nhelix-headless-tree-item {\n display: block;\n}\n\nhelix-headless-tree-item::part(item) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item::part(row) {\n align-items: center;\n block-size: max(2rem, calc(1lh + 1rem));\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.5;\n padding: 0.5rem;\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem);\n user-select: none;\n}\n\nhelix-headless-tree-item:not(:has(> [slot=\"children\"]))::part(row) {\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem + 1.25rem);\n}\n\nhelix-headless-tree-item:state(selected)::part(row) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-tree-item::part(label) {\n align-self: stretch;\n flex: 1;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-tree-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tree::part(tree),\nhelix-headless-tree-item::part(group) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item:not(:state(open))::part(group) {\n display: none;\n}\n\nhelix-headless-tree-item::part(toggle) {\n align-self: center;\n block-size: 1rem;\n color: var(--_gray-mark);\n cursor: pointer;\n flex: none;\n inline-size: 1rem;\n rotate: -90deg;\n}\n\nhelix-headless-tree-item:dir(rtl)::part(toggle) {\n rotate: 90deg;\n}\n\nhelix-headless-tree-item:state(open)::part(toggle) {\n rotate: 0deg;\n}","description":"The tree on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-tree\n default-active=\"two\"\n label=\"Files\"\n>\n <helix-headless-tree-item\n default-open\n value=\"one\"\n >\n Documents\n <helix-headless-tree-item\n slot=\"children\"\n value=\"two\"\n >Budget.xlsx</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"three\"\n >Notes.txt</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"four\">Invoice-1042.pdf</helix-headless-tree-item>\n</helix-headless-tree>","imports":["import '@fusion.dev/helix-headless/tree'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-tree\n default-active=\"two\"\n label=\"Files\"\n >\n <helix-headless-tree-item\n default-open\n value=\"one\"\n >\n Documents\n <helix-headless-tree-item\n slot=\"children\"\n value=\"two\"\n >\n Budget.xlsx\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"three\"\n >\n Notes.txt\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"four\">Invoice-1042.pdf</helix-headless-tree-item>\n </helix-headless-tree>\n )\n}"},{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.stack {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\nhelix-headless-tree,\nhelix-headless-tree-item {\n display: block;\n}\n\nhelix-headless-tree-item::part(item) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item::part(row) {\n align-items: center;\n block-size: max(2rem, calc(1lh + 1rem));\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n color: var(--_gray-muted);\n cursor: pointer;\n display: flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.5;\n padding: 0.5rem;\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem);\n user-select: none;\n}\n\nhelix-headless-tree[nesting=\"subordinate\"] [slot=\"children\"]::part(row) {\n font-size: 0.75rem;\n}\n\n/* The other answer, and the whole of it: the branch is relabeled and the rows\n under it are not touched. Nothing here is the styled tier's, which is the\n point of writing it out. */\nhelix-headless-tree[nesting=\"heading\"] :has(> [slot=\"children\"])::part(row) {\n color: var(--_gray-mark);\n font-size: 0.75rem;\n letter-spacing: 0.02em;\n}\n\nhelix-headless-tree-item:not(:has(> [slot=\"children\"]))::part(row) {\n padding-inline-start: calc(0.5rem + (var(--tree-level, 1) - 1) * 1.25rem + 1.25rem);\n}\n\nhelix-headless-tree-item:state(selected)::part(row) {\n background-color: var(--_gray-subtle);\n color: var(--_gray-strong);\n}\n\nhelix-headless-tree-item::part(label) {\n align-self: stretch;\n flex: 1;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nhelix-headless-tree-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-tree::part(tree),\nhelix-headless-tree-item::part(group) {\n align-items: stretch;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\nhelix-headless-tree-item:not(:state(open))::part(group) {\n display: none;\n}\n\nhelix-headless-tree-item::part(toggle) {\n align-self: center;\n block-size: 1rem;\n color: var(--_gray-mark);\n cursor: pointer;\n flex: none;\n inline-size: 1rem;\n rotate: -90deg;\n}\n\nhelix-headless-tree-item:dir(rtl)::part(toggle) {\n rotate: 90deg;\n}\n\nhelix-headless-tree-item:state(open)::part(toggle) {\n rotate: 0deg;\n}","description":"Depth as a position, depth as a rank, and a branch that is a heading, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"stack\">\n <helix-headless-tree label=\"Project files\">\n <helix-headless-tree-item\n default-open\n value=\"helix\"\n >\n src\n <helix-headless-tree-item\n slot=\"children\"\n value=\"headless\"\n >components</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"styled\"\n >styles</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"readme\">README.md</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Filters\"\n nesting=\"subordinate\"\n >\n <helix-headless-tree-item\n default-open\n value=\"status\"\n >\n Status\n <helix-headless-tree-item\n slot=\"children\"\n value=\"open\"\n >Open</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"merged\"\n >Merged</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"mine\">Assigned to me</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Documentation\"\n nesting=\"heading\"\n >\n <helix-headless-tree-item\n default-open\n value=\"start\"\n >\n Getting started\n <helix-headless-tree-item\n default-open\n slot=\"children\"\n value=\"install\"\n >\n Installation\n <helix-headless-tree-item\n slot=\"children\"\n value=\"any-framework\"\n >Windows</helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"react\"\n >macOS</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"theming\"\n >Configuration</helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"changelog\">Changelog</helix-headless-tree-item>\n </helix-headless-tree>\n</div>","imports":["import '@fusion.dev/helix-headless/tree'"],"label":"Nesting","renders":[],"slug":"nesting","tier":"headless","tsx":"import './nesting.css'\n\nexport function Example() {\n return (\n <div className=\"stack\">\n <helix-headless-tree label=\"Project files\">\n <helix-headless-tree-item\n default-open\n value=\"helix\"\n >\n src\n <helix-headless-tree-item\n slot=\"children\"\n value=\"headless\"\n >\n components\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"styled\"\n >\n styles\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"readme\">README.md</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Filters\"\n nesting=\"subordinate\"\n >\n <helix-headless-tree-item\n default-open\n value=\"status\"\n >\n Status\n <helix-headless-tree-item\n slot=\"children\"\n value=\"open\"\n >\n Open\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"merged\"\n >\n Merged\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"mine\">Assigned to me</helix-headless-tree-item>\n </helix-headless-tree>\n\n <helix-headless-tree\n label=\"Documentation\"\n nesting=\"heading\"\n >\n <helix-headless-tree-item\n default-open\n value=\"start\"\n >\n Getting started\n <helix-headless-tree-item\n default-open\n slot=\"children\"\n value=\"install\"\n >\n Installation\n <helix-headless-tree-item\n slot=\"children\"\n value=\"any-framework\"\n >\n Windows\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"react\"\n >\n macOS\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item\n slot=\"children\"\n value=\"theming\"\n >\n Configuration\n </helix-headless-tree-item>\n </helix-headless-tree-item>\n <helix-headless-tree-item value=\"changelog\">Changelog</helix-headless-tree-item>\n </helix-headless-tree>\n </div>\n )\n}"}],"trend":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\n.row {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem 2rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-trend {\n align-items: center;\n color: var(--_gray-muted);\n display: inline-flex;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n}\n\nhelix-headless-trend[good=\"up\"],\nhelix-headless-trend[good=\"down\"] {\n color: var(--_gray-strong);\n}\n\nhelix-headless-trend > [slot=\"label\"] {\n color: var(--_gray-muted);\n font-weight: 400;\n}\n\nhelix-headless-trend::part(icon) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-trend::part(direction) {\n block-size: 1px;\n clip-path: inset(50%);\n inline-size: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The same trend on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<div class=\"row\">\n <helix-headless-trend\n good=\"up\"\n movement=\"up\"\n >\n 12.4%\n <span slot=\"label\">Revenue</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"down\"\n >\n 0.4pt\n <span slot=\"label\">Churn</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"up\"\n movement=\"down\"\n >\n 0.6pt\n <span slot=\"label\">Conversion</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"up\"\n >\n 40ms\n <span slot=\"label\">Response time</span>\n </helix-headless-trend>\n <helix-headless-trend movement=\"neutral\">\n 0\n <span slot=\"label\">Open incidents</span>\n </helix-headless-trend>\n</div>","imports":["import '@fusion.dev/helix-headless/trend'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <div className=\"row\">\n <helix-headless-trend\n good=\"up\"\n movement=\"up\"\n >\n 12.4%\n <span slot=\"label\">Revenue</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"down\"\n >\n 0.4pt\n <span slot=\"label\">Churn</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"up\"\n movement=\"down\"\n >\n 0.6pt\n <span slot=\"label\">Conversion</span>\n </helix-headless-trend>\n <helix-headless-trend\n good=\"down\"\n movement=\"up\"\n >\n 40ms\n <span slot=\"label\">Response time</span>\n </helix-headless-trend>\n <helix-headless-trend movement=\"neutral\">\n 0<span slot=\"label\">Open incidents</span>\n </helix-headless-trend>\n </div>\n )\n}"}],"video":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The host turns and the loading mark reads the angle: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_spin {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-video {\n animation: video-spin 0.8s linear infinite;\n display: block;\n position: relative;\n}\n\nhelix-headless-video::part(stage) {\n border-radius: var(--_radius-surface);\n color-scheme: light;\n display: block;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-video::part(stage):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video::part(video) {\n aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));\n background-color: var(--_gray-strong);\n block-size: auto;\n display: block;\n inline-size: 100%;\n object-fit: contain;\n}\n\nhelix-headless-video::part(poster) {\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(loading),\nhelix-headless-video::part(failure) {\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-strong) 72%, transparent);\n border-radius: var(--_radius-surface);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n padding: 0.5rem 0.75rem;\n position: absolute;\n translate: -50% -50%;\n}\n\n/* The ring that turns, drawn on the message rather than slotted into it. The\n tier renders no box for this: a consumer who wants one writes it. */\nhelix-headless-video::part(loading)::before {\n block-size: 1rem;\n border: 2px solid var(--_gray-muted);\n border-block-start-color: var(--_gray-surface);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n rotate: var(--_spin);\n}\n\n@keyframes video-spin {\n to {\n --_spin: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-video {\n animation: none;\n }\n}\n\nhelix-headless-video::part(start) {\n all: unset;\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-muted);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: flex;\n inline-size: clamp(2.5rem, 15%, 4.5rem);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n justify-content: center;\n padding: 1.25rem;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-video::part(cue) {\n background-color: var(--_gray-strong);\n color: var(--_gray-surface);\n font-size: 0.875rem;\n inline-size: max-content;\n inset-block-end: 3rem;\n inset-inline-start: 50%;\n margin: 0;\n max-inline-size: min(80%, 36rem);\n padding: 0.25rem 0.5rem;\n position: absolute;\n text-align: center;\n translate: -50% 0;\n}\n\nhelix-headless-video::part(header) {\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: absolute;\n z-index: 10;\n}\n\nhelix-headless-video::part(stage)::before {\n background-image: linear-gradient(\n to top,\n color-mix(in srgb, var(--_gray-strong) 64%, transparent),\n transparent\n );\n block-size: 4.5rem;\n content: \"\";\n inset-block-end: 0;\n inset-inline: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(controls) {\n align-items: center;\n color: var(--_gray-surface);\n display: flex;\n gap: 0.5rem;\n inset-block-end: 0;\n inset-inline: 0;\n padding: 0.5rem 0.75rem;\n position: absolute;\n}\n\nhelix-headless-video::part(play),\nhelix-headless-video::part(rewind),\nhelix-headless-video::part(forward),\nhelix-headless-video::part(previous),\nhelix-headless-video::part(next),\nhelix-headless-video::part(mute),\nhelix-headless-video::part(captions),\nhelix-headless-video::part(speed),\nhelix-headless-video::part(pip),\nhelix-headless-video::part(remote),\nhelix-headless-video::part(download),\nhelix-headless-video::part(more),\nhelix-headless-video::part(fullscreen) {\n all: unset;\n block-size: 1.5rem;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-inline-size: 1.5rem;\n padding: 0.25rem;\n}\n\nhelix-headless-video::part(speed) {\n align-items: center;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 2.5rem;\n}\n\nhelix-headless-video::part(time) {\n flex: none;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-video::part(scrubber),\nhelix-headless-video::part(volume) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb, so the accent grays its own thumb. */\n accent-color: var(--_gray-surface);\n appearance: none;\n background-color: var(--_gray-muted);\n block-size: 4px;\n cursor: pointer;\n margin: 0;\n}\n\nhelix-headless-video::part(scrubber) {\n background-image: linear-gradient(\n to right,\n var(--_gray-surface) calc(var(--video-progress, 0) * 100%),\n transparent calc(var(--video-progress, 0) * 100%)\n );\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\nhelix-headless-video::part(scrubber)::-webkit-slider-thumb,\nhelix-headless-video::part(volume)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(scrubber)::-moz-range-thumb,\nhelix-headless-video::part(volume)::-moz-range-thumb {\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(sound) {\n align-items: center;\n display: flex;\n flex: none;\n position: relative;\n}\n\nhelix-headless-video::part(volume) {\n background-image: linear-gradient(\n to top,\n var(--_gray-surface) calc(var(--video-level, 1) * 100%),\n transparent calc(var(--video-level, 1) * 100%)\n );\n bottom: calc(100% + 0.25rem);\n direction: rtl;\n inline-size: 4.5rem;\n left: 50%;\n opacity: 0;\n padding: 0;\n position: absolute;\n translate: -50% 0;\n writing-mode: vertical-rl;\n}\n\nhelix-headless-video::part(volume):hover,\nhelix-headless-video::part(volume):focus-visible {\n opacity: 1;\n}\n\nhelix-headless-video::part(overflow) {\n display: contents;\n}\n\nhelix-headless-video::part(play):focus-visible,\nhelix-headless-video::part(rewind):focus-visible,\nhelix-headless-video::part(forward):focus-visible,\nhelix-headless-video::part(previous):focus-visible,\nhelix-headless-video::part(next):focus-visible,\nhelix-headless-video::part(mute):focus-visible,\nhelix-headless-video::part(captions):focus-visible,\nhelix-headless-video::part(speed):focus-visible,\nhelix-headless-video::part(pip):focus-visible,\nhelix-headless-video::part(remote):focus-visible,\nhelix-headless-video::part(download):focus-visible,\nhelix-headless-video::part(more):focus-visible,\nhelix-headless-video::part(fullscreen):focus-visible,\nhelix-headless-video::part(start):focus-visible,\nhelix-headless-video::part(scrubber):focus-visible,\nhelix-headless-video::part(volume):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video::part(captions-menu-back-mark),\nhelix-headless-video::part(entry-mark),\nhelix-headless-video::part(overflow-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}","description":"The video player on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-video\n label=\"Product walkthrough\"\n poster=\"https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=960\"\n src=\"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4\"\n></helix-headless-video>","imports":["import '@fusion.dev/helix-headless/video'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-video\n label=\"Product walkthrough\"\n poster=\"https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=960\"\n src=\"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4\"\n ></helix-headless-video>\n )\n}"}],"video-playlist":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* The host turns and the loading mark reads the angle: Chromium 132 finds no keyframes from a ::part() rule. */\n@property --_spin {\n inherits: true;\n initial-value: 0deg;\n syntax: \"<angle>\";\n}\n\nhelix-headless-video {\n animation: video-spin 0.8s linear infinite;\n display: block;\n position: relative;\n}\n\nhelix-headless-video::part(stage) {\n border-radius: var(--_radius-surface);\n color-scheme: light;\n display: block;\n overflow: hidden;\n position: relative;\n}\n\nhelix-headless-video::part(stage):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video::part(video) {\n aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));\n background-color: var(--_gray-strong);\n block-size: auto;\n display: block;\n inline-size: 100%;\n object-fit: contain;\n}\n\nhelix-headless-video::part(poster) {\n display: block;\n inset: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(loading),\nhelix-headless-video::part(failure) {\n align-items: center;\n background-color: color-mix(in srgb, var(--_gray-strong) 72%, transparent);\n border-radius: var(--_radius-surface);\n color: var(--_gray-surface);\n display: flex;\n font-size: 0.8125rem;\n gap: 0.5rem;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n padding: 0.5rem 0.75rem;\n position: absolute;\n translate: -50% -50%;\n}\n\n/* The ring that turns, drawn on the message rather than slotted into it. The\n tier renders no box for this: a consumer who wants one writes it. */\nhelix-headless-video::part(loading)::before {\n block-size: 1rem;\n border: 2px solid var(--_gray-muted);\n border-block-start-color: var(--_gray-surface);\n border-radius: 50%;\n box-sizing: border-box;\n content: \"\";\n flex: none;\n inline-size: 1rem;\n rotate: var(--_spin);\n}\n\n@keyframes video-spin {\n to {\n --_spin: 1turn;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n helix-headless-video {\n animation: none;\n }\n}\n\nhelix-headless-video::part(start) {\n all: unset;\n align-items: center;\n aspect-ratio: 1;\n background-color: var(--_gray-muted);\n border-radius: 50%;\n box-sizing: border-box;\n color: var(--_gray-surface);\n cursor: pointer;\n display: flex;\n inline-size: clamp(2.5rem, 15%, 4.5rem);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n justify-content: center;\n padding: 1.25rem;\n position: absolute;\n translate: -50% -50%;\n}\n\nhelix-headless-video::part(cue) {\n background-color: var(--_gray-strong);\n color: var(--_gray-surface);\n font-size: 0.875rem;\n inline-size: max-content;\n inset-block-end: 3rem;\n inset-inline-start: 50%;\n margin: 0;\n max-inline-size: min(80%, 36rem);\n padding: 0.25rem 0.5rem;\n position: absolute;\n text-align: center;\n translate: -50% 0;\n}\n\nhelix-headless-video::part(header) {\n inset-block-start: 0.75rem;\n inset-inline-start: 0.75rem;\n position: absolute;\n z-index: 10;\n}\n\nhelix-headless-video::part(stage)::before {\n background-image: linear-gradient(\n to top,\n color-mix(in srgb, var(--_gray-strong) 64%, transparent),\n transparent\n );\n block-size: 4.5rem;\n content: \"\";\n inset-block-end: 0;\n inset-inline: 0;\n pointer-events: none;\n position: absolute;\n}\n\nhelix-headless-video::part(controls) {\n align-items: center;\n color: var(--_gray-surface);\n display: flex;\n gap: 0.5rem;\n inset-block-end: 0;\n inset-inline: 0;\n padding: 0.5rem 0.75rem;\n position: absolute;\n}\n\nhelix-headless-video::part(play),\nhelix-headless-video::part(rewind),\nhelix-headless-video::part(forward),\nhelix-headless-video::part(previous),\nhelix-headless-video::part(next),\nhelix-headless-video::part(mute),\nhelix-headless-video::part(captions),\nhelix-headless-video::part(speed),\nhelix-headless-video::part(pip),\nhelix-headless-video::part(remote),\nhelix-headless-video::part(download),\nhelix-headless-video::part(more),\nhelix-headless-video::part(fullscreen) {\n all: unset;\n block-size: 1.5rem;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-inline-size: 1.5rem;\n padding: 0.25rem;\n}\n\nhelix-headless-video::part(speed) {\n align-items: center;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n min-inline-size: 2.5rem;\n}\n\nhelix-headless-video::part(time) {\n flex: none;\n font-size: 0.75rem;\n font-variant-numeric: tabular-nums;\n}\n\nhelix-headless-video::part(scrubber),\nhelix-headless-video::part(volume) {\n /* Chromium 132 ignores ::part()::-webkit-slider-thumb, so the accent grays its own thumb. */\n accent-color: var(--_gray-surface);\n appearance: none;\n background-color: var(--_gray-muted);\n block-size: 4px;\n cursor: pointer;\n margin: 0;\n}\n\nhelix-headless-video::part(scrubber) {\n background-image: linear-gradient(\n to right,\n var(--_gray-surface) calc(var(--video-progress, 0) * 100%),\n transparent calc(var(--video-progress, 0) * 100%)\n );\n flex: 1 1 auto;\n min-inline-size: 0;\n}\n\nhelix-headless-video::part(scrubber)::-webkit-slider-thumb,\nhelix-headless-video::part(volume)::-webkit-slider-thumb {\n appearance: none;\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(scrubber)::-moz-range-thumb,\nhelix-headless-video::part(volume)::-moz-range-thumb {\n background-color: var(--_gray-surface);\n block-size: 12px;\n border: 0;\n border-radius: 50%;\n inline-size: 12px;\n}\n\nhelix-headless-video::part(sound) {\n align-items: center;\n display: flex;\n flex: none;\n position: relative;\n}\n\nhelix-headless-video::part(volume) {\n background-image: linear-gradient(\n to top,\n var(--_gray-surface) calc(var(--video-level, 1) * 100%),\n transparent calc(var(--video-level, 1) * 100%)\n );\n bottom: calc(100% + 0.25rem);\n direction: rtl;\n inline-size: 4.5rem;\n left: 50%;\n opacity: 0;\n padding: 0;\n position: absolute;\n translate: -50% 0;\n writing-mode: vertical-rl;\n}\n\nhelix-headless-video::part(volume):hover,\nhelix-headless-video::part(volume):focus-visible {\n opacity: 1;\n}\n\nhelix-headless-video::part(overflow) {\n display: contents;\n}\n\nhelix-headless-video::part(play):focus-visible,\nhelix-headless-video::part(rewind):focus-visible,\nhelix-headless-video::part(forward):focus-visible,\nhelix-headless-video::part(previous):focus-visible,\nhelix-headless-video::part(next):focus-visible,\nhelix-headless-video::part(mute):focus-visible,\nhelix-headless-video::part(captions):focus-visible,\nhelix-headless-video::part(speed):focus-visible,\nhelix-headless-video::part(pip):focus-visible,\nhelix-headless-video::part(remote):focus-visible,\nhelix-headless-video::part(download):focus-visible,\nhelix-headless-video::part(more):focus-visible,\nhelix-headless-video::part(fullscreen):focus-visible,\nhelix-headless-video::part(start):focus-visible,\nhelix-headless-video::part(scrubber):focus-visible,\nhelix-headless-video::part(volume):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video::part(captions-menu-back-mark),\nhelix-headless-video::part(entry-mark),\nhelix-headless-video::part(overflow-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-video-playlist-menu::part(entry-mark),\nhelix-headless-video-playlist-menu::part(menu-back-mark) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-video-playlist {\n display: grid;\n gap: 1rem;\n grid-template-columns: 1fr;\n}\n\nhelix-headless-video-playlist::part(items) {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n max-block-size: 26rem;\n overflow-y: auto;\n}\n\nhelix-headless-video-playlist::part(live) {\n clip-path: inset(50%);\n position: absolute;\n}\n\nhelix-headless-video-playlist-item {\n display: block;\n}\n\nhelix-headless-video-playlist-item::part(item) {\n all: unset;\n align-items: center;\n border-radius: var(--_radius-control);\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n gap: 0.75rem;\n inline-size: 100%;\n padding: 0.25rem 0.25rem 0.25rem 0.75rem;\n position: relative;\n text-align: start;\n}\n\nhelix-headless-video-playlist-item::part(item-current) {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-video-playlist-item::part(item-current)::before {\n background-color: var(--_gray-strong);\n border-radius: 9999px;\n content: \"\";\n inline-size: 2px;\n inset-block: 0.25rem;\n inset-inline-start: 0.25rem;\n position: absolute;\n}\n\nhelix-headless-video-playlist-item:not([disabled])::part(item):hover {\n background-color: var(--_gray-subtle);\n}\n\nhelix-headless-video-playlist-item[disabled]::part(item) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\nhelix-headless-video-playlist-item::part(media) {\n aspect-ratio: 16 / 9;\n border-radius: var(--_radius-control);\n flex: none;\n inline-size: 5rem;\n overflow: hidden;\n}\n\nhelix-headless-video-playlist-item::part(thumbnail) {\n block-size: 100%;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}\n\nhelix-headless-video-playlist-item::part(label) {\n color: var(--_gray-strong);\n display: flex;\n flex-direction: column;\n font-size: 0.8125rem;\n font-weight: 500;\n gap: 0.25rem;\n line-height: 1.2;\n min-inline-size: 0;\n}\n\nhelix-headless-video-playlist-item > [slot=\"meta\"] {\n color: var(--_gray-muted);\n font-size: 0.75rem;\n font-weight: 400;\n}\n\nhelix-headless-video-playlist-item::part(item):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: -2px;\n}\n\nhelix-headless-video-playlist-menu {\n display: flex;\n flex: none;\n}\n\nhelix-headless-video-playlist-menu::part(trigger) {\n all: unset;\n align-items: center;\n box-sizing: border-box;\n color: inherit;\n cursor: pointer;\n display: flex;\n flex: none;\n justify-content: center;\n min-block-size: 1.5rem;\n min-inline-size: 1.5rem;\n}\n\nhelix-headless-video-playlist-menu::part(trigger):focus-visible {\n outline: 2px solid var(--_gray-mark);\n outline-offset: 2px;\n}\n\nhelix-headless-video-playlist-menu::part(menu-surface) {\n background-color: var(--_gray-surface);\n border: 1px solid var(--_gray-edge);\n border-radius: var(--_radius-control);\n color: var(--_gray-strong);\n padding: 0.25rem 0;\n}\n\nhelix-headless-video-playlist-menu::part(poster) {\n aspect-ratio: 16 / 9;\n display: block;\n inline-size: 100%;\n object-fit: cover;\n}","description":"The video playlist on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-video-playlist\n default-active=\"sintel\"\n label=\"Episodes\"\n>\n <helix-headless-video\n extra-controls=\"previous next\"\n label=\"Episode player\"\n slot=\"player\"\n ></helix-headless-video>\n\n <helix-headless-video-playlist-item\n poster=\"/media/sintel-short.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/sintel-short.mp4\"\n value=\"sintel\"\n >\n Sintel\n <span slot=\"meta\">2:00</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"tears\"\n >\n Tears of Steel\n <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n disabled\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"unavailable\"\n >\n Not available in your region\n <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n</helix-headless-video-playlist>","imports":["import '@fusion.dev/helix-headless/video-playlist'","import '@fusion.dev/helix-headless/video'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\nexport function Example() {\n return (\n <helix-headless-video-playlist\n default-active=\"sintel\"\n label=\"Episodes\"\n >\n <helix-headless-video\n extra-controls=\"previous next\"\n label=\"Episode player\"\n slot=\"player\"\n ></helix-headless-video>\n <helix-headless-video-playlist-item\n poster=\"/media/sintel-short.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/sintel-short.mp4\"\n value=\"sintel\"\n >\n Sintel <span slot=\"meta\">2:00</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"tears\"\n >\n Tears of Steel <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n <helix-headless-video-playlist-item\n disabled\n poster=\"/media/tears-of-steel.jpg\"\n src=\"https://mdn.github.io/shared-assets/videos/tears-of-steel-battle-clip-medium.mp4\"\n value=\"unavailable\"\n >\n Not available in your region <span slot=\"meta\">1:10</span>\n </helix-headless-video-playlist-item>\n </helix-headless-video-playlist>\n )\n}"}],"virtual-list":[{"css":":root {\n color-scheme: light dark;\n font-family: system-ui, sans-serif;\n --_gray-surface: light-dark(#fafafa, #18181b);\n --_gray-subtle: light-dark(#f0f0f1, #232326);\n --_gray-edge: light-dark(#e6e6e8, #313136);\n --_gray-fill: light-dark(#e2e2e5, #2f2f33);\n --_gray-line: light-dark(#c9c9ce, #45454b);\n --_gray-mark: light-dark(#8e8e96, #86868f);\n --_gray-muted: light-dark(#63636b, #a1a1aa);\n --_gray-strong: light-dark(#2a2a2e, #e9e9ec);\n --_radius-control: 0.25rem;\n --_radius-surface: 0.5rem;\n --_radius-panel: 0.75rem;\n}\n\nhelix-headless-icon {\n block-size: 1em;\n display: inline-flex;\n flex: none;\n inline-size: 1em;\n}\n\nhelix-headless-virtual-list {\n color: var(--_gray-strong);\n display: block;\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\nhelix-headless-icon::part(svg) {\n block-size: 1em;\n flex: none;\n inline-size: 1em;\n}\n\n/* A height, because how tall a list is, is a decision. No `overflow`: the\n component marks this box as a scroller and `core` gives it one. */\nhelix-headless-virtual-list::part(viewport) {\n block-size: 20em;\n margin-inline: -4px;\n overscroll-behavior: contain;\n padding-inline: 4px;\n}","description":"The same virtual list on the headless tier, with every style written by hand.","html":"<link\n href=\"styles.css\"\n rel=\"stylesheet\"\n/>\n\n<helix-headless-virtual-list\n estimate=\"32\"\n for=\"people\"\n label=\"Two thousand rows\"\n>\n <template>\n <div class=\"virtualRow\">\n <strong data-field=\"name\"></strong>\n <span data-field=\"note\"></span>\n </div>\n </template>\n</helix-headless-virtual-list>\n\n<script\n id=\"people\"\n type=\"application/json\"\n>[{\"name\":\"Row 1\",\"note\":\"the 1st of two thousand\"},{\"name\":\"Row 2\",\"note\":\"the 2nd of two thousand\"},{\"name\":\"Row 3\",\"note\":\"the 3rd of two thousand\"},{\"name\":\"Row 4\",\"note\":\"the 4th of two thousand\"},{\"name\":\"Row 5\",\"note\":\"the 5th of two thousand\"},{\"name\":\"Row 6\",\"note\":\"the 6th of two thousand\"},{\"name\":\"Row 7\",\"note\":\"the 7th of two thousand\"},{\"name\":\"Row 8\",\"note\":\"the 8th of two thousand\"},{\"name\":\"Row 9\",\"note\":\"the 9th of two thousand\"},{\"name\":\"Row 10\",\"note\":\"the 10th of two thousand\"},{\"name\":\"Row 11\",\"note\":\"the 11th of two thousand\"},{\"name\":\"Row 12\",\"note\":\"the 12th of two thousand\"},{\"name\":\"Row 13\",\"note\":\"the 13th of two thousand\"},{\"name\":\"Row 14\",\"note\":\"the 14th of two thousand\"},{\"name\":\"Row 15\",\"note\":\"the 15th of two thousand\"},{\"name\":\"Row 16\",\"note\":\"the 16th of two thousand\"},{\"name\":\"Row 17\",\"note\":\"the 17th of two thousand\"},{\"name\":\"Row 18\",\"note\":\"the 18th of two thousand\"},{\"name\":\"Row 19\",\"note\":\"the 19th of two thousand\"},{\"name\":\"Row 20\",\"note\":\"the 20th of two thousand\"},{\"name\":\"Row 21\",\"note\":\"the 21st of two thousand\"},{\"name\":\"Row 22\",\"note\":\"the 22nd of two thousand\"},{\"name\":\"Row 23\",\"note\":\"the 23rd of two thousand\"},{\"name\":\"Row 24\",\"note\":\"the 24th of two thousand\"},{\"name\":\"Row 25\",\"note\":\"the 25th of two thousand\"},{\"name\":\"Row 26\",\"note\":\"the 26th of two thousand\"},{\"name\":\"Row 27\",\"note\":\"the 27th of two thousand\"},{\"name\":\"Row 28\",\"note\":\"the 28th of two thousand\"},{\"name\":\"Row 29\",\"note\":\"the 29th of two thousand\"},{\"name\":\"Row 30\",\"note\":\"the 30th of two thousand\"},{\"name\":\"Row 31\",\"note\":\"the 31st of two thousand\"},{\"name\":\"Row 32\",\"note\":\"the 32nd of two thousand\"},{\"name\":\"Row 33\",\"note\":\"the 33rd of two thousand\"},{\"name\":\"Row 34\",\"note\":\"the 34th of two thousand\"},{\"name\":\"Row 35\",\"note\":\"the 35th of two thousand\"},{\"name\":\"Row 36\",\"note\":\"the 36th of two thousand\"},{\"name\":\"Row 37\",\"note\":\"the 37th of two thousand\"},{\"name\":\"Row 38\",\"note\":\"the 38th of two thousand\"},{\"name\":\"Row 39\",\"note\":\"the 39th of two thousand\"},{\"name\":\"Row 40\",\"note\":\"the 40th of two thousand\"},{\"name\":\"Row 41\",\"note\":\"the 41st of two thousand\"},{\"name\":\"Row 42\",\"note\":\"the 42nd of two thousand\"},{\"name\":\"Row 43\",\"note\":\"the 43rd of two thousand\"},{\"name\":\"Row 44\",\"note\":\"the 44th of two thousand\"},{\"name\":\"Row 45\",\"note\":\"the 45th of two thousand\"},{\"name\":\"Row 46\",\"note\":\"the 46th of two thousand\"},{\"name\":\"Row 47\",\"note\":\"the 47th of two thousand\"},{\"name\":\"Row 48\",\"note\":\"the 48th of two thousand\"},{\"name\":\"Row 49\",\"note\":\"the 49th of two thousand\"},{\"name\":\"Row 50\",\"note\":\"the 50th of two thousand\"},{\"name\":\"Row 51\",\"note\":\"the 51st of two thousand\"},{\"name\":\"Row 52\",\"note\":\"the 52nd of two thousand\"},{\"name\":\"Row 53\",\"note\":\"the 53rd of two thousand\"},{\"name\":\"Row 54\",\"note\":\"the 54th of two thousand\"},{\"name\":\"Row 55\",\"note\":\"the 55th of two thousand\"},{\"name\":\"Row 56\",\"note\":\"the 56th of two thousand\"},{\"name\":\"Row 57\",\"note\":\"the 57th of two thousand\"},{\"name\":\"Row 58\",\"note\":\"the 58th of two thousand\"},{\"name\":\"Row 59\",\"note\":\"the 59th of two thousand\"},{\"name\":\"Row 60\",\"note\":\"the 60th of two thousand\"},{\"name\":\"Row 61\",\"note\":\"the 61st of two thousand\"},{\"name\":\"Row 62\",\"note\":\"the 62nd of two thousand\"},{\"name\":\"Row 63\",\"note\":\"the 63rd of two thousand\"},{\"name\":\"Row 64\",\"note\":\"the 64th of two thousand\"},{\"name\":\"Row 65\",\"note\":\"the 65th of two thousand\"},{\"name\":\"Row 66\",\"note\":\"the 66th of two thousand\"},{\"name\":\"Row 67\",\"note\":\"the 67th of two thousand\"},{\"name\":\"Row 68\",\"note\":\"the 68th of two thousand\"},{\"name\":\"Row 69\",\"note\":\"the 69th of two thousand\"},{\"name\":\"Row 70\",\"note\":\"the 70th of two thousand\"},{\"name\":\"Row 71\",\"note\":\"the 71st of two thousand\"},{\"name\":\"Row 72\",\"note\":\"the 72nd of two thousand\"},{\"name\":\"Row 73\",\"note\":\"the 73rd of two thousand\"},{\"name\":\"Row 74\",\"note\":\"the 74th of two thousand\"},{\"name\":\"Row 75\",\"note\":\"the 75th of two thousand\"},{\"name\":\"Row 76\",\"note\":\"the 76th of two thousand\"},{\"name\":\"Row 77\",\"note\":\"the 77th of two thousand\"},{\"name\":\"Row 78\",\"note\":\"the 78th of two thousand\"},{\"name\":\"Row 79\",\"note\":\"the 79th of two thousand\"},{\"name\":\"Row 80\",\"note\":\"the 80th of two thousand\"},{\"name\":\"Row 81\",\"note\":\"the 81st of two thousand\"},{\"name\":\"Row 82\",\"note\":\"the 82nd of two thousand\"},{\"name\":\"Row 83\",\"note\":\"the 83rd of two thousand\"},{\"name\":\"Row 84\",\"note\":\"the 84th of two thousand\"},{\"name\":\"Row 85\",\"note\":\"the 85th of two thousand\"},{\"name\":\"Row 86\",\"note\":\"the 86th of two thousand\"},{\"name\":\"Row 87\",\"note\":\"the 87th of two thousand\"},{\"name\":\"Row 88\",\"note\":\"the 88th of two thousand\"},{\"name\":\"Row 89\",\"note\":\"the 89th of two thousand\"},{\"name\":\"Row 90\",\"note\":\"the 90th of two thousand\"},{\"name\":\"Row 91\",\"note\":\"the 91st of two thousand\"},{\"name\":\"Row 92\",\"note\":\"the 92nd of two thousand\"},{\"name\":\"Row 93\",\"note\":\"the 93rd of two thousand\"},{\"name\":\"Row 94\",\"note\":\"the 94th of two thousand\"},{\"name\":\"Row 95\",\"note\":\"the 95th of two thousand\"},{\"name\":\"Row 96\",\"note\":\"the 96th of two thousand\"},{\"name\":\"Row 97\",\"note\":\"the 97th of two thousand\"},{\"name\":\"Row 98\",\"note\":\"the 98th of two thousand\"},{\"name\":\"Row 99\",\"note\":\"the 99th of two thousand\"},{\"name\":\"Row 100\",\"note\":\"the 100th of two thousand\"},{\"name\":\"Row 101\",\"note\":\"the 101st of two thousand\"},{\"name\":\"Row 102\",\"note\":\"the 102nd of two thousand\"},{\"name\":\"Row 103\",\"note\":\"the 103rd of two thousand\"},{\"name\":\"Row 104\",\"note\":\"the 104th of two thousand\"},{\"name\":\"Row 105\",\"note\":\"the 105th of two thousand\"},{\"name\":\"Row 106\",\"note\":\"the 106th of two thousand\"},{\"name\":\"Row 107\",\"note\":\"the 107th of two thousand\"},{\"name\":\"Row 108\",\"note\":\"the 108th of two thousand\"},{\"name\":\"Row 109\",\"note\":\"the 109th of two thousand\"},{\"name\":\"Row 110\",\"note\":\"the 110th of two thousand\"},{\"name\":\"Row 111\",\"note\":\"the 111th of two thousand\"},{\"name\":\"Row 112\",\"note\":\"the 112th of two thousand\"},{\"name\":\"Row 113\",\"note\":\"the 113th of two thousand\"},{\"name\":\"Row 114\",\"note\":\"the 114th of two thousand\"},{\"name\":\"Row 115\",\"note\":\"the 115th of two thousand\"},{\"name\":\"Row 116\",\"note\":\"the 116th of two thousand\"},{\"name\":\"Row 117\",\"note\":\"the 117th of two thousand\"},{\"name\":\"Row 118\",\"note\":\"the 118th of two thousand\"},{\"name\":\"Row 119\",\"note\":\"the 119th of two thousand\"},{\"name\":\"Row 120\",\"note\":\"the 120th of two thousand\"},{\"name\":\"Row 121\",\"note\":\"the 121st of two thousand\"},{\"name\":\"Row 122\",\"note\":\"the 122nd of two thousand\"},{\"name\":\"Row 123\",\"note\":\"the 123rd of two thousand\"},{\"name\":\"Row 124\",\"note\":\"the 124th of two thousand\"},{\"name\":\"Row 125\",\"note\":\"the 125th of two thousand\"},{\"name\":\"Row 126\",\"note\":\"the 126th of two thousand\"},{\"name\":\"Row 127\",\"note\":\"the 127th of two thousand\"},{\"name\":\"Row 128\",\"note\":\"the 128th of two thousand\"},{\"name\":\"Row 129\",\"note\":\"the 129th of two thousand\"},{\"name\":\"Row 130\",\"note\":\"the 130th of two thousand\"},{\"name\":\"Row 131\",\"note\":\"the 131st of two thousand\"},{\"name\":\"Row 132\",\"note\":\"the 132nd of two thousand\"},{\"name\":\"Row 133\",\"note\":\"the 133rd of two thousand\"},{\"name\":\"Row 134\",\"note\":\"the 134th of two thousand\"},{\"name\":\"Row 135\",\"note\":\"the 135th of two thousand\"},{\"name\":\"Row 136\",\"note\":\"the 136th of two thousand\"},{\"name\":\"Row 137\",\"note\":\"the 137th of two thousand\"},{\"name\":\"Row 138\",\"note\":\"the 138th of two thousand\"},{\"name\":\"Row 139\",\"note\":\"the 139th of two thousand\"},{\"name\":\"Row 140\",\"note\":\"the 140th of two thousand\"},{\"name\":\"Row 141\",\"note\":\"the 141st of two thousand\"},{\"name\":\"Row 142\",\"note\":\"the 142nd of two thousand\"},{\"name\":\"Row 143\",\"note\":\"the 143rd of two thousand\"},{\"name\":\"Row 144\",\"note\":\"the 144th of two thousand\"},{\"name\":\"Row 145\",\"note\":\"the 145th of two thousand\"},{\"name\":\"Row 146\",\"note\":\"the 146th of two thousand\"},{\"name\":\"Row 147\",\"note\":\"the 147th of two thousand\"},{\"name\":\"Row 148\",\"note\":\"the 148th of two thousand\"},{\"name\":\"Row 149\",\"note\":\"the 149th of two thousand\"},{\"name\":\"Row 150\",\"note\":\"the 150th of two thousand\"},{\"name\":\"Row 151\",\"note\":\"the 151st of two thousand\"},{\"name\":\"Row 152\",\"note\":\"the 152nd of two thousand\"},{\"name\":\"Row 153\",\"note\":\"the 153rd of two thousand\"},{\"name\":\"Row 154\",\"note\":\"the 154th of two thousand\"},{\"name\":\"Row 155\",\"note\":\"the 155th of two thousand\"},{\"name\":\"Row 156\",\"note\":\"the 156th of two thousand\"},{\"name\":\"Row 157\",\"note\":\"the 157th of two thousand\"},{\"name\":\"Row 158\",\"note\":\"the 158th of two thousand\"},{\"name\":\"Row 159\",\"note\":\"the 159th of two thousand\"},{\"name\":\"Row 160\",\"note\":\"the 160th of two thousand\"},{\"name\":\"Row 161\",\"note\":\"the 161st of two thousand\"},{\"name\":\"Row 162\",\"note\":\"the 162nd of two thousand\"},{\"name\":\"Row 163\",\"note\":\"the 163rd of two thousand\"},{\"name\":\"Row 164\",\"note\":\"the 164th of two thousand\"},{\"name\":\"Row 165\",\"note\":\"the 165th of two thousand\"},{\"name\":\"Row 166\",\"note\":\"the 166th of two thousand\"},{\"name\":\"Row 167\",\"note\":\"the 167th of two thousand\"},{\"name\":\"Row 168\",\"note\":\"the 168th of two thousand\"},{\"name\":\"Row 169\",\"note\":\"the 169th of two thousand\"},{\"name\":\"Row 170\",\"note\":\"the 170th of two thousand\"},{\"name\":\"Row 171\",\"note\":\"the 171st of two thousand\"},{\"name\":\"Row 172\",\"note\":\"the 172nd of two thousand\"},{\"name\":\"Row 173\",\"note\":\"the 173rd of two thousand\"},{\"name\":\"Row 174\",\"note\":\"the 174th of two thousand\"},{\"name\":\"Row 175\",\"note\":\"the 175th of two thousand\"},{\"name\":\"Row 176\",\"note\":\"the 176th of two thousand\"},{\"name\":\"Row 177\",\"note\":\"the 177th of two thousand\"},{\"name\":\"Row 178\",\"note\":\"the 178th of two thousand\"},{\"name\":\"Row 179\",\"note\":\"the 179th of two thousand\"},{\"name\":\"Row 180\",\"note\":\"the 180th of two thousand\"},{\"name\":\"Row 181\",\"note\":\"the 181st of two thousand\"},{\"name\":\"Row 182\",\"note\":\"the 182nd of two thousand\"},{\"name\":\"Row 183\",\"note\":\"the 183rd of two thousand\"},{\"name\":\"Row 184\",\"note\":\"the 184th of two thousand\"},{\"name\":\"Row 185\",\"note\":\"the 185th of two thousand\"},{\"name\":\"Row 186\",\"note\":\"the 186th of two thousand\"},{\"name\":\"Row 187\",\"note\":\"the 187th of two thousand\"},{\"name\":\"Row 188\",\"note\":\"the 188th of two thousand\"},{\"name\":\"Row 189\",\"note\":\"the 189th of two thousand\"},{\"name\":\"Row 190\",\"note\":\"the 190th of two thousand\"},{\"name\":\"Row 191\",\"note\":\"the 191st of two thousand\"},{\"name\":\"Row 192\",\"note\":\"the 192nd of two thousand\"},{\"name\":\"Row 193\",\"note\":\"the 193rd of two thousand\"},{\"name\":\"Row 194\",\"note\":\"the 194th of two thousand\"},{\"name\":\"Row 195\",\"note\":\"the 195th of two thousand\"},{\"name\":\"Row 196\",\"note\":\"the 196th of two thousand\"},{\"name\":\"Row 197\",\"note\":\"the 197th of two thousand\"},{\"name\":\"Row 198\",\"note\":\"the 198th of two thousand\"},{\"name\":\"Row 199\",\"note\":\"the 199th of two thousand\"},{\"name\":\"Row 200\",\"note\":\"the 200th of two thousand\"},{\"name\":\"Row 201\",\"note\":\"the 201st of two thousand\"},{\"name\":\"Row 202\",\"note\":\"the 202nd of two thousand\"},{\"name\":\"Row 203\",\"note\":\"the 203rd of two thousand\"},{\"name\":\"Row 204\",\"note\":\"the 204th of two thousand\"},{\"name\":\"Row 205\",\"note\":\"the 205th of two thousand\"},{\"name\":\"Row 206\",\"note\":\"the 206th of two thousand\"},{\"name\":\"Row 207\",\"note\":\"the 207th of two thousand\"},{\"name\":\"Row 208\",\"note\":\"the 208th of two thousand\"},{\"name\":\"Row 209\",\"note\":\"the 209th of two thousand\"},{\"name\":\"Row 210\",\"note\":\"the 210th of two thousand\"},{\"name\":\"Row 211\",\"note\":\"the 211th of two thousand\"},{\"name\":\"Row 212\",\"note\":\"the 212th of two thousand\"},{\"name\":\"Row 213\",\"note\":\"the 213th of two thousand\"},{\"name\":\"Row 214\",\"note\":\"the 214th of two thousand\"},{\"name\":\"Row 215\",\"note\":\"the 215th of two thousand\"},{\"name\":\"Row 216\",\"note\":\"the 216th of two thousand\"},{\"name\":\"Row 217\",\"note\":\"the 217th of two thousand\"},{\"name\":\"Row 218\",\"note\":\"the 218th of two thousand\"},{\"name\":\"Row 219\",\"note\":\"the 219th of two thousand\"},{\"name\":\"Row 220\",\"note\":\"the 220th of two thousand\"},{\"name\":\"Row 221\",\"note\":\"the 221st of two thousand\"},{\"name\":\"Row 222\",\"note\":\"the 222nd of two thousand\"},{\"name\":\"Row 223\",\"note\":\"the 223rd of two thousand\"},{\"name\":\"Row 224\",\"note\":\"the 224th of two thousand\"},{\"name\":\"Row 225\",\"note\":\"the 225th of two thousand\"},{\"name\":\"Row 226\",\"note\":\"the 226th of two thousand\"},{\"name\":\"Row 227\",\"note\":\"the 227th of two thousand\"},{\"name\":\"Row 228\",\"note\":\"the 228th of two thousand\"},{\"name\":\"Row 229\",\"note\":\"the 229th of two thousand\"},{\"name\":\"Row 230\",\"note\":\"the 230th of two thousand\"},{\"name\":\"Row 231\",\"note\":\"the 231st of two thousand\"},{\"name\":\"Row 232\",\"note\":\"the 232nd of two thousand\"},{\"name\":\"Row 233\",\"note\":\"the 233rd of two thousand\"},{\"name\":\"Row 234\",\"note\":\"the 234th of two thousand\"},{\"name\":\"Row 235\",\"note\":\"the 235th of two thousand\"},{\"name\":\"Row 236\",\"note\":\"the 236th of two thousand\"},{\"name\":\"Row 237\",\"note\":\"the 237th of two thousand\"},{\"name\":\"Row 238\",\"note\":\"the 238th of two thousand\"},{\"name\":\"Row 239\",\"note\":\"the 239th of two thousand\"},{\"name\":\"Row 240\",\"note\":\"the 240th of two thousand\"},{\"name\":\"Row 241\",\"note\":\"the 241st of two thousand\"},{\"name\":\"Row 242\",\"note\":\"the 242nd of two thousand\"},{\"name\":\"Row 243\",\"note\":\"the 243rd of two thousand\"},{\"name\":\"Row 244\",\"note\":\"the 244th of two thousand\"},{\"name\":\"Row 245\",\"note\":\"the 245th of two thousand\"},{\"name\":\"Row 246\",\"note\":\"the 246th of two thousand\"},{\"name\":\"Row 247\",\"note\":\"the 247th of two thousand\"},{\"name\":\"Row 248\",\"note\":\"the 248th of two thousand\"},{\"name\":\"Row 249\",\"note\":\"the 249th of two thousand\"},{\"name\":\"Row 250\",\"note\":\"the 250th of two thousand\"},{\"name\":\"Row 251\",\"note\":\"the 251st of two thousand\"},{\"name\":\"Row 252\",\"note\":\"the 252nd of two thousand\"},{\"name\":\"Row 253\",\"note\":\"the 253rd of two thousand\"},{\"name\":\"Row 254\",\"note\":\"the 254th of two thousand\"},{\"name\":\"Row 255\",\"note\":\"the 255th of two thousand\"},{\"name\":\"Row 256\",\"note\":\"the 256th of two thousand\"},{\"name\":\"Row 257\",\"note\":\"the 257th of two thousand\"},{\"name\":\"Row 258\",\"note\":\"the 258th of two thousand\"},{\"name\":\"Row 259\",\"note\":\"the 259th of two thousand\"},{\"name\":\"Row 260\",\"note\":\"the 260th of two thousand\"},{\"name\":\"Row 261\",\"note\":\"the 261st of two thousand\"},{\"name\":\"Row 262\",\"note\":\"the 262nd of two thousand\"},{\"name\":\"Row 263\",\"note\":\"the 263rd of two thousand\"},{\"name\":\"Row 264\",\"note\":\"the 264th of two thousand\"},{\"name\":\"Row 265\",\"note\":\"the 265th of two thousand\"},{\"name\":\"Row 266\",\"note\":\"the 266th of two thousand\"},{\"name\":\"Row 267\",\"note\":\"the 267th of two thousand\"},{\"name\":\"Row 268\",\"note\":\"the 268th of two thousand\"},{\"name\":\"Row 269\",\"note\":\"the 269th of two thousand\"},{\"name\":\"Row 270\",\"note\":\"the 270th of two thousand\"},{\"name\":\"Row 271\",\"note\":\"the 271st of two thousand\"},{\"name\":\"Row 272\",\"note\":\"the 272nd of two thousand\"},{\"name\":\"Row 273\",\"note\":\"the 273rd of two thousand\"},{\"name\":\"Row 274\",\"note\":\"the 274th of two thousand\"},{\"name\":\"Row 275\",\"note\":\"the 275th of two thousand\"},{\"name\":\"Row 276\",\"note\":\"the 276th of two thousand\"},{\"name\":\"Row 277\",\"note\":\"the 277th of two thousand\"},{\"name\":\"Row 278\",\"note\":\"the 278th of two thousand\"},{\"name\":\"Row 279\",\"note\":\"the 279th of two thousand\"},{\"name\":\"Row 280\",\"note\":\"the 280th of two thousand\"},{\"name\":\"Row 281\",\"note\":\"the 281st of two thousand\"},{\"name\":\"Row 282\",\"note\":\"the 282nd of two thousand\"},{\"name\":\"Row 283\",\"note\":\"the 283rd of two thousand\"},{\"name\":\"Row 284\",\"note\":\"the 284th of two thousand\"},{\"name\":\"Row 285\",\"note\":\"the 285th of two thousand\"},{\"name\":\"Row 286\",\"note\":\"the 286th of two thousand\"},{\"name\":\"Row 287\",\"note\":\"the 287th of two thousand\"},{\"name\":\"Row 288\",\"note\":\"the 288th of two thousand\"},{\"name\":\"Row 289\",\"note\":\"the 289th of two thousand\"},{\"name\":\"Row 290\",\"note\":\"the 290th of two thousand\"},{\"name\":\"Row 291\",\"note\":\"the 291st of two thousand\"},{\"name\":\"Row 292\",\"note\":\"the 292nd of two thousand\"},{\"name\":\"Row 293\",\"note\":\"the 293rd of two thousand\"},{\"name\":\"Row 294\",\"note\":\"the 294th of two thousand\"},{\"name\":\"Row 295\",\"note\":\"the 295th of two thousand\"},{\"name\":\"Row 296\",\"note\":\"the 296th of two thousand\"},{\"name\":\"Row 297\",\"note\":\"the 297th of two thousand\"},{\"name\":\"Row 298\",\"note\":\"the 298th of two thousand\"},{\"name\":\"Row 299\",\"note\":\"the 299th of two thousand\"},{\"name\":\"Row 300\",\"note\":\"the 300th of two thousand\"},{\"name\":\"Row 301\",\"note\":\"the 301st of two thousand\"},{\"name\":\"Row 302\",\"note\":\"the 302nd of two thousand\"},{\"name\":\"Row 303\",\"note\":\"the 303rd of two thousand\"},{\"name\":\"Row 304\",\"note\":\"the 304th of two thousand\"},{\"name\":\"Row 305\",\"note\":\"the 305th of two thousand\"},{\"name\":\"Row 306\",\"note\":\"the 306th of two thousand\"},{\"name\":\"Row 307\",\"note\":\"the 307th of two thousand\"},{\"name\":\"Row 308\",\"note\":\"the 308th of two thousand\"},{\"name\":\"Row 309\",\"note\":\"the 309th of two thousand\"},{\"name\":\"Row 310\",\"note\":\"the 310th of two thousand\"},{\"name\":\"Row 311\",\"note\":\"the 311th of two thousand\"},{\"name\":\"Row 312\",\"note\":\"the 312th of two thousand\"},{\"name\":\"Row 313\",\"note\":\"the 313th of two thousand\"},{\"name\":\"Row 314\",\"note\":\"the 314th of two thousand\"},{\"name\":\"Row 315\",\"note\":\"the 315th of two thousand\"},{\"name\":\"Row 316\",\"note\":\"the 316th of two thousand\"},{\"name\":\"Row 317\",\"note\":\"the 317th of two thousand\"},{\"name\":\"Row 318\",\"note\":\"the 318th of two thousand\"},{\"name\":\"Row 319\",\"note\":\"the 319th of two thousand\"},{\"name\":\"Row 320\",\"note\":\"the 320th of two thousand\"},{\"name\":\"Row 321\",\"note\":\"the 321st of two thousand\"},{\"name\":\"Row 322\",\"note\":\"the 322nd of two thousand\"},{\"name\":\"Row 323\",\"note\":\"the 323rd of two thousand\"},{\"name\":\"Row 324\",\"note\":\"the 324th of two thousand\"},{\"name\":\"Row 325\",\"note\":\"the 325th of two thousand\"},{\"name\":\"Row 326\",\"note\":\"the 326th of two thousand\"},{\"name\":\"Row 327\",\"note\":\"the 327th of two thousand\"},{\"name\":\"Row 328\",\"note\":\"the 328th of two thousand\"},{\"name\":\"Row 329\",\"note\":\"the 329th of two thousand\"},{\"name\":\"Row 330\",\"note\":\"the 330th of two thousand\"},{\"name\":\"Row 331\",\"note\":\"the 331st of two thousand\"},{\"name\":\"Row 332\",\"note\":\"the 332nd of two thousand\"},{\"name\":\"Row 333\",\"note\":\"the 333rd of two thousand\"},{\"name\":\"Row 334\",\"note\":\"the 334th of two thousand\"},{\"name\":\"Row 335\",\"note\":\"the 335th of two thousand\"},{\"name\":\"Row 336\",\"note\":\"the 336th of two thousand\"},{\"name\":\"Row 337\",\"note\":\"the 337th of two thousand\"},{\"name\":\"Row 338\",\"note\":\"the 338th of two thousand\"},{\"name\":\"Row 339\",\"note\":\"the 339th of two thousand\"},{\"name\":\"Row 340\",\"note\":\"the 340th of two thousand\"},{\"name\":\"Row 341\",\"note\":\"the 341st of two thousand\"},{\"name\":\"Row 342\",\"note\":\"the 342nd of two thousand\"},{\"name\":\"Row 343\",\"note\":\"the 343rd of two thousand\"},{\"name\":\"Row 344\",\"note\":\"the 344th of two thousand\"},{\"name\":\"Row 345\",\"note\":\"the 345th of two thousand\"},{\"name\":\"Row 346\",\"note\":\"the 346th of two thousand\"},{\"name\":\"Row 347\",\"note\":\"the 347th of two thousand\"},{\"name\":\"Row 348\",\"note\":\"the 348th of two thousand\"},{\"name\":\"Row 349\",\"note\":\"the 349th of two thousand\"},{\"name\":\"Row 350\",\"note\":\"the 350th of two thousand\"},{\"name\":\"Row 351\",\"note\":\"the 351st of two thousand\"},{\"name\":\"Row 352\",\"note\":\"the 352nd of two thousand\"},{\"name\":\"Row 353\",\"note\":\"the 353rd of two thousand\"},{\"name\":\"Row 354\",\"note\":\"the 354th of two thousand\"},{\"name\":\"Row 355\",\"note\":\"the 355th of two thousand\"},{\"name\":\"Row 356\",\"note\":\"the 356th of two thousand\"},{\"name\":\"Row 357\",\"note\":\"the 357th of two thousand\"},{\"name\":\"Row 358\",\"note\":\"the 358th of two thousand\"},{\"name\":\"Row 359\",\"note\":\"the 359th of two thousand\"},{\"name\":\"Row 360\",\"note\":\"the 360th of two thousand\"},{\"name\":\"Row 361\",\"note\":\"the 361st of two thousand\"},{\"name\":\"Row 362\",\"note\":\"the 362nd of two thousand\"},{\"name\":\"Row 363\",\"note\":\"the 363rd of two thousand\"},{\"name\":\"Row 364\",\"note\":\"the 364th of two thousand\"},{\"name\":\"Row 365\",\"note\":\"the 365th of two thousand\"},{\"name\":\"Row 366\",\"note\":\"the 366th of two thousand\"},{\"name\":\"Row 367\",\"note\":\"the 367th of two thousand\"},{\"name\":\"Row 368\",\"note\":\"the 368th of two thousand\"},{\"name\":\"Row 369\",\"note\":\"the 369th of two thousand\"},{\"name\":\"Row 370\",\"note\":\"the 370th of two thousand\"},{\"name\":\"Row 371\",\"note\":\"the 371st of two thousand\"},{\"name\":\"Row 372\",\"note\":\"the 372nd of two thousand\"},{\"name\":\"Row 373\",\"note\":\"the 373rd of two thousand\"},{\"name\":\"Row 374\",\"note\":\"the 374th of two thousand\"},{\"name\":\"Row 375\",\"note\":\"the 375th of two thousand\"},{\"name\":\"Row 376\",\"note\":\"the 376th of two thousand\"},{\"name\":\"Row 377\",\"note\":\"the 377th of two thousand\"},{\"name\":\"Row 378\",\"note\":\"the 378th of two thousand\"},{\"name\":\"Row 379\",\"note\":\"the 379th of two thousand\"},{\"name\":\"Row 380\",\"note\":\"the 380th of two thousand\"},{\"name\":\"Row 381\",\"note\":\"the 381st of two thousand\"},{\"name\":\"Row 382\",\"note\":\"the 382nd of two thousand\"},{\"name\":\"Row 383\",\"note\":\"the 383rd of two thousand\"},{\"name\":\"Row 384\",\"note\":\"the 384th of two thousand\"},{\"name\":\"Row 385\",\"note\":\"the 385th of two thousand\"},{\"name\":\"Row 386\",\"note\":\"the 386th of two thousand\"},{\"name\":\"Row 387\",\"note\":\"the 387th of two thousand\"},{\"name\":\"Row 388\",\"note\":\"the 388th of two thousand\"},{\"name\":\"Row 389\",\"note\":\"the 389th of two thousand\"},{\"name\":\"Row 390\",\"note\":\"the 390th of two thousand\"},{\"name\":\"Row 391\",\"note\":\"the 391st of two thousand\"},{\"name\":\"Row 392\",\"note\":\"the 392nd of two thousand\"},{\"name\":\"Row 393\",\"note\":\"the 393rd of two thousand\"},{\"name\":\"Row 394\",\"note\":\"the 394th of two thousand\"},{\"name\":\"Row 395\",\"note\":\"the 395th of two thousand\"},{\"name\":\"Row 396\",\"note\":\"the 396th of two thousand\"},{\"name\":\"Row 397\",\"note\":\"the 397th of two thousand\"},{\"name\":\"Row 398\",\"note\":\"the 398th of two thousand\"},{\"name\":\"Row 399\",\"note\":\"the 399th of two thousand\"},{\"name\":\"Row 400\",\"note\":\"the 400th of two thousand\"},{\"name\":\"Row 401\",\"note\":\"the 401st of two thousand\"},{\"name\":\"Row 402\",\"note\":\"the 402nd of two thousand\"},{\"name\":\"Row 403\",\"note\":\"the 403rd of two thousand\"},{\"name\":\"Row 404\",\"note\":\"the 404th of two thousand\"},{\"name\":\"Row 405\",\"note\":\"the 405th of two thousand\"},{\"name\":\"Row 406\",\"note\":\"the 406th of two thousand\"},{\"name\":\"Row 407\",\"note\":\"the 407th of two thousand\"},{\"name\":\"Row 408\",\"note\":\"the 408th of two thousand\"},{\"name\":\"Row 409\",\"note\":\"the 409th of two thousand\"},{\"name\":\"Row 410\",\"note\":\"the 410th of two thousand\"},{\"name\":\"Row 411\",\"note\":\"the 411th of two thousand\"},{\"name\":\"Row 412\",\"note\":\"the 412th of two thousand\"},{\"name\":\"Row 413\",\"note\":\"the 413th of two thousand\"},{\"name\":\"Row 414\",\"note\":\"the 414th of two thousand\"},{\"name\":\"Row 415\",\"note\":\"the 415th of two thousand\"},{\"name\":\"Row 416\",\"note\":\"the 416th of two thousand\"},{\"name\":\"Row 417\",\"note\":\"the 417th of two thousand\"},{\"name\":\"Row 418\",\"note\":\"the 418th of two thousand\"},{\"name\":\"Row 419\",\"note\":\"the 419th of two thousand\"},{\"name\":\"Row 420\",\"note\":\"the 420th of two thousand\"},{\"name\":\"Row 421\",\"note\":\"the 421st of two thousand\"},{\"name\":\"Row 422\",\"note\":\"the 422nd of two thousand\"},{\"name\":\"Row 423\",\"note\":\"the 423rd of two thousand\"},{\"name\":\"Row 424\",\"note\":\"the 424th of two thousand\"},{\"name\":\"Row 425\",\"note\":\"the 425th of two thousand\"},{\"name\":\"Row 426\",\"note\":\"the 426th of two thousand\"},{\"name\":\"Row 427\",\"note\":\"the 427th of two thousand\"},{\"name\":\"Row 428\",\"note\":\"the 428th of two thousand\"},{\"name\":\"Row 429\",\"note\":\"the 429th of two thousand\"},{\"name\":\"Row 430\",\"note\":\"the 430th of two thousand\"},{\"name\":\"Row 431\",\"note\":\"the 431st of two thousand\"},{\"name\":\"Row 432\",\"note\":\"the 432nd of two thousand\"},{\"name\":\"Row 433\",\"note\":\"the 433rd of two thousand\"},{\"name\":\"Row 434\",\"note\":\"the 434th of two thousand\"},{\"name\":\"Row 435\",\"note\":\"the 435th of two thousand\"},{\"name\":\"Row 436\",\"note\":\"the 436th of two thousand\"},{\"name\":\"Row 437\",\"note\":\"the 437th of two thousand\"},{\"name\":\"Row 438\",\"note\":\"the 438th of two thousand\"},{\"name\":\"Row 439\",\"note\":\"the 439th of two thousand\"},{\"name\":\"Row 440\",\"note\":\"the 440th of two thousand\"},{\"name\":\"Row 441\",\"note\":\"the 441st of two thousand\"},{\"name\":\"Row 442\",\"note\":\"the 442nd of two thousand\"},{\"name\":\"Row 443\",\"note\":\"the 443rd of two thousand\"},{\"name\":\"Row 444\",\"note\":\"the 444th of two thousand\"},{\"name\":\"Row 445\",\"note\":\"the 445th of two thousand\"},{\"name\":\"Row 446\",\"note\":\"the 446th of two thousand\"},{\"name\":\"Row 447\",\"note\":\"the 447th of two thousand\"},{\"name\":\"Row 448\",\"note\":\"the 448th of two thousand\"},{\"name\":\"Row 449\",\"note\":\"the 449th of two thousand\"},{\"name\":\"Row 450\",\"note\":\"the 450th of two thousand\"},{\"name\":\"Row 451\",\"note\":\"the 451st of two thousand\"},{\"name\":\"Row 452\",\"note\":\"the 452nd of two thousand\"},{\"name\":\"Row 453\",\"note\":\"the 453rd of two thousand\"},{\"name\":\"Row 454\",\"note\":\"the 454th of two thousand\"},{\"name\":\"Row 455\",\"note\":\"the 455th of two thousand\"},{\"name\":\"Row 456\",\"note\":\"the 456th of two thousand\"},{\"name\":\"Row 457\",\"note\":\"the 457th of two thousand\"},{\"name\":\"Row 458\",\"note\":\"the 458th of two thousand\"},{\"name\":\"Row 459\",\"note\":\"the 459th of two thousand\"},{\"name\":\"Row 460\",\"note\":\"the 460th of two thousand\"},{\"name\":\"Row 461\",\"note\":\"the 461st of two thousand\"},{\"name\":\"Row 462\",\"note\":\"the 462nd of two thousand\"},{\"name\":\"Row 463\",\"note\":\"the 463rd of two thousand\"},{\"name\":\"Row 464\",\"note\":\"the 464th of two thousand\"},{\"name\":\"Row 465\",\"note\":\"the 465th of two thousand\"},{\"name\":\"Row 466\",\"note\":\"the 466th of two thousand\"},{\"name\":\"Row 467\",\"note\":\"the 467th of two thousand\"},{\"name\":\"Row 468\",\"note\":\"the 468th of two thousand\"},{\"name\":\"Row 469\",\"note\":\"the 469th of two thousand\"},{\"name\":\"Row 470\",\"note\":\"the 470th of two thousand\"},{\"name\":\"Row 471\",\"note\":\"the 471st of two thousand\"},{\"name\":\"Row 472\",\"note\":\"the 472nd of two thousand\"},{\"name\":\"Row 473\",\"note\":\"the 473rd of two thousand\"},{\"name\":\"Row 474\",\"note\":\"the 474th of two thousand\"},{\"name\":\"Row 475\",\"note\":\"the 475th of two thousand\"},{\"name\":\"Row 476\",\"note\":\"the 476th of two thousand\"},{\"name\":\"Row 477\",\"note\":\"the 477th of two thousand\"},{\"name\":\"Row 478\",\"note\":\"the 478th of two thousand\"},{\"name\":\"Row 479\",\"note\":\"the 479th of two thousand\"},{\"name\":\"Row 480\",\"note\":\"the 480th of two thousand\"},{\"name\":\"Row 481\",\"note\":\"the 481st of two thousand\"},{\"name\":\"Row 482\",\"note\":\"the 482nd of two thousand\"},{\"name\":\"Row 483\",\"note\":\"the 483rd of two thousand\"},{\"name\":\"Row 484\",\"note\":\"the 484th of two thousand\"},{\"name\":\"Row 485\",\"note\":\"the 485th of two thousand\"},{\"name\":\"Row 486\",\"note\":\"the 486th of two thousand\"},{\"name\":\"Row 487\",\"note\":\"the 487th of two thousand\"},{\"name\":\"Row 488\",\"note\":\"the 488th of two thousand\"},{\"name\":\"Row 489\",\"note\":\"the 489th of two thousand\"},{\"name\":\"Row 490\",\"note\":\"the 490th of two thousand\"},{\"name\":\"Row 491\",\"note\":\"the 491st of two thousand\"},{\"name\":\"Row 492\",\"note\":\"the 492nd of two thousand\"},{\"name\":\"Row 493\",\"note\":\"the 493rd of two thousand\"},{\"name\":\"Row 494\",\"note\":\"the 494th of two thousand\"},{\"name\":\"Row 495\",\"note\":\"the 495th of two thousand\"},{\"name\":\"Row 496\",\"note\":\"the 496th of two thousand\"},{\"name\":\"Row 497\",\"note\":\"the 497th of two thousand\"},{\"name\":\"Row 498\",\"note\":\"the 498th of two thousand\"},{\"name\":\"Row 499\",\"note\":\"the 499th of two thousand\"},{\"name\":\"Row 500\",\"note\":\"the 500th of two thousand\"},{\"name\":\"Row 501\",\"note\":\"the 501st of two thousand\"},{\"name\":\"Row 502\",\"note\":\"the 502nd of two thousand\"},{\"name\":\"Row 503\",\"note\":\"the 503rd of two thousand\"},{\"name\":\"Row 504\",\"note\":\"the 504th of two thousand\"},{\"name\":\"Row 505\",\"note\":\"the 505th of two thousand\"},{\"name\":\"Row 506\",\"note\":\"the 506th of two thousand\"},{\"name\":\"Row 507\",\"note\":\"the 507th of two thousand\"},{\"name\":\"Row 508\",\"note\":\"the 508th of two thousand\"},{\"name\":\"Row 509\",\"note\":\"the 509th of two thousand\"},{\"name\":\"Row 510\",\"note\":\"the 510th of two thousand\"},{\"name\":\"Row 511\",\"note\":\"the 511th of two thousand\"},{\"name\":\"Row 512\",\"note\":\"the 512th of two thousand\"},{\"name\":\"Row 513\",\"note\":\"the 513th of two thousand\"},{\"name\":\"Row 514\",\"note\":\"the 514th of two thousand\"},{\"name\":\"Row 515\",\"note\":\"the 515th of two thousand\"},{\"name\":\"Row 516\",\"note\":\"the 516th of two thousand\"},{\"name\":\"Row 517\",\"note\":\"the 517th of two thousand\"},{\"name\":\"Row 518\",\"note\":\"the 518th of two thousand\"},{\"name\":\"Row 519\",\"note\":\"the 519th of two thousand\"},{\"name\":\"Row 520\",\"note\":\"the 520th of two thousand\"},{\"name\":\"Row 521\",\"note\":\"the 521st of two thousand\"},{\"name\":\"Row 522\",\"note\":\"the 522nd of two thousand\"},{\"name\":\"Row 523\",\"note\":\"the 523rd of two thousand\"},{\"name\":\"Row 524\",\"note\":\"the 524th of two thousand\"},{\"name\":\"Row 525\",\"note\":\"the 525th of two thousand\"},{\"name\":\"Row 526\",\"note\":\"the 526th of two thousand\"},{\"name\":\"Row 527\",\"note\":\"the 527th of two thousand\"},{\"name\":\"Row 528\",\"note\":\"the 528th of two thousand\"},{\"name\":\"Row 529\",\"note\":\"the 529th of two thousand\"},{\"name\":\"Row 530\",\"note\":\"the 530th of two thousand\"},{\"name\":\"Row 531\",\"note\":\"the 531st of two thousand\"},{\"name\":\"Row 532\",\"note\":\"the 532nd of two thousand\"},{\"name\":\"Row 533\",\"note\":\"the 533rd of two thousand\"},{\"name\":\"Row 534\",\"note\":\"the 534th of two thousand\"},{\"name\":\"Row 535\",\"note\":\"the 535th of two thousand\"},{\"name\":\"Row 536\",\"note\":\"the 536th of two thousand\"},{\"name\":\"Row 537\",\"note\":\"the 537th of two thousand\"},{\"name\":\"Row 538\",\"note\":\"the 538th of two thousand\"},{\"name\":\"Row 539\",\"note\":\"the 539th of two thousand\"},{\"name\":\"Row 540\",\"note\":\"the 540th of two thousand\"},{\"name\":\"Row 541\",\"note\":\"the 541st of two thousand\"},{\"name\":\"Row 542\",\"note\":\"the 542nd of two thousand\"},{\"name\":\"Row 543\",\"note\":\"the 543rd of two thousand\"},{\"name\":\"Row 544\",\"note\":\"the 544th of two thousand\"},{\"name\":\"Row 545\",\"note\":\"the 545th of two thousand\"},{\"name\":\"Row 546\",\"note\":\"the 546th of two thousand\"},{\"name\":\"Row 547\",\"note\":\"the 547th of two thousand\"},{\"name\":\"Row 548\",\"note\":\"the 548th of two thousand\"},{\"name\":\"Row 549\",\"note\":\"the 549th of two thousand\"},{\"name\":\"Row 550\",\"note\":\"the 550th of two thousand\"},{\"name\":\"Row 551\",\"note\":\"the 551st of two thousand\"},{\"name\":\"Row 552\",\"note\":\"the 552nd of two thousand\"},{\"name\":\"Row 553\",\"note\":\"the 553rd of two thousand\"},{\"name\":\"Row 554\",\"note\":\"the 554th of two thousand\"},{\"name\":\"Row 555\",\"note\":\"the 555th of two thousand\"},{\"name\":\"Row 556\",\"note\":\"the 556th of two thousand\"},{\"name\":\"Row 557\",\"note\":\"the 557th of two thousand\"},{\"name\":\"Row 558\",\"note\":\"the 558th of two thousand\"},{\"name\":\"Row 559\",\"note\":\"the 559th of two thousand\"},{\"name\":\"Row 560\",\"note\":\"the 560th of two thousand\"},{\"name\":\"Row 561\",\"note\":\"the 561st of two thousand\"},{\"name\":\"Row 562\",\"note\":\"the 562nd of two thousand\"},{\"name\":\"Row 563\",\"note\":\"the 563rd of two thousand\"},{\"name\":\"Row 564\",\"note\":\"the 564th of two thousand\"},{\"name\":\"Row 565\",\"note\":\"the 565th of two thousand\"},{\"name\":\"Row 566\",\"note\":\"the 566th of two thousand\"},{\"name\":\"Row 567\",\"note\":\"the 567th of two thousand\"},{\"name\":\"Row 568\",\"note\":\"the 568th of two thousand\"},{\"name\":\"Row 569\",\"note\":\"the 569th of two thousand\"},{\"name\":\"Row 570\",\"note\":\"the 570th of two thousand\"},{\"name\":\"Row 571\",\"note\":\"the 571st of two thousand\"},{\"name\":\"Row 572\",\"note\":\"the 572nd of two thousand\"},{\"name\":\"Row 573\",\"note\":\"the 573rd of two thousand\"},{\"name\":\"Row 574\",\"note\":\"the 574th of two thousand\"},{\"name\":\"Row 575\",\"note\":\"the 575th of two thousand\"},{\"name\":\"Row 576\",\"note\":\"the 576th of two thousand\"},{\"name\":\"Row 577\",\"note\":\"the 577th of two thousand\"},{\"name\":\"Row 578\",\"note\":\"the 578th of two thousand\"},{\"name\":\"Row 579\",\"note\":\"the 579th of two thousand\"},{\"name\":\"Row 580\",\"note\":\"the 580th of two thousand\"},{\"name\":\"Row 581\",\"note\":\"the 581st of two thousand\"},{\"name\":\"Row 582\",\"note\":\"the 582nd of two thousand\"},{\"name\":\"Row 583\",\"note\":\"the 583rd of two thousand\"},{\"name\":\"Row 584\",\"note\":\"the 584th of two thousand\"},{\"name\":\"Row 585\",\"note\":\"the 585th of two thousand\"},{\"name\":\"Row 586\",\"note\":\"the 586th of two thousand\"},{\"name\":\"Row 587\",\"note\":\"the 587th of two thousand\"},{\"name\":\"Row 588\",\"note\":\"the 588th of two thousand\"},{\"name\":\"Row 589\",\"note\":\"the 589th of two thousand\"},{\"name\":\"Row 590\",\"note\":\"the 590th of two thousand\"},{\"name\":\"Row 591\",\"note\":\"the 591st of two thousand\"},{\"name\":\"Row 592\",\"note\":\"the 592nd of two thousand\"},{\"name\":\"Row 593\",\"note\":\"the 593rd of two thousand\"},{\"name\":\"Row 594\",\"note\":\"the 594th of two thousand\"},{\"name\":\"Row 595\",\"note\":\"the 595th of two thousand\"},{\"name\":\"Row 596\",\"note\":\"the 596th of two thousand\"},{\"name\":\"Row 597\",\"note\":\"the 597th of two thousand\"},{\"name\":\"Row 598\",\"note\":\"the 598th of two thousand\"},{\"name\":\"Row 599\",\"note\":\"the 599th of two thousand\"},{\"name\":\"Row 600\",\"note\":\"the 600th of two thousand\"},{\"name\":\"Row 601\",\"note\":\"the 601st of two thousand\"},{\"name\":\"Row 602\",\"note\":\"the 602nd of two thousand\"},{\"name\":\"Row 603\",\"note\":\"the 603rd of two thousand\"},{\"name\":\"Row 604\",\"note\":\"the 604th of two thousand\"},{\"name\":\"Row 605\",\"note\":\"the 605th of two thousand\"},{\"name\":\"Row 606\",\"note\":\"the 606th of two thousand\"},{\"name\":\"Row 607\",\"note\":\"the 607th of two thousand\"},{\"name\":\"Row 608\",\"note\":\"the 608th of two thousand\"},{\"name\":\"Row 609\",\"note\":\"the 609th of two thousand\"},{\"name\":\"Row 610\",\"note\":\"the 610th of two thousand\"},{\"name\":\"Row 611\",\"note\":\"the 611th of two thousand\"},{\"name\":\"Row 612\",\"note\":\"the 612th of two thousand\"},{\"name\":\"Row 613\",\"note\":\"the 613th of two thousand\"},{\"name\":\"Row 614\",\"note\":\"the 614th of two thousand\"},{\"name\":\"Row 615\",\"note\":\"the 615th of two thousand\"},{\"name\":\"Row 616\",\"note\":\"the 616th of two thousand\"},{\"name\":\"Row 617\",\"note\":\"the 617th of two thousand\"},{\"name\":\"Row 618\",\"note\":\"the 618th of two thousand\"},{\"name\":\"Row 619\",\"note\":\"the 619th of two thousand\"},{\"name\":\"Row 620\",\"note\":\"the 620th of two thousand\"},{\"name\":\"Row 621\",\"note\":\"the 621st of two thousand\"},{\"name\":\"Row 622\",\"note\":\"the 622nd of two thousand\"},{\"name\":\"Row 623\",\"note\":\"the 623rd of two thousand\"},{\"name\":\"Row 624\",\"note\":\"the 624th of two thousand\"},{\"name\":\"Row 625\",\"note\":\"the 625th of two thousand\"},{\"name\":\"Row 626\",\"note\":\"the 626th of two thousand\"},{\"name\":\"Row 627\",\"note\":\"the 627th of two thousand\"},{\"name\":\"Row 628\",\"note\":\"the 628th of two thousand\"},{\"name\":\"Row 629\",\"note\":\"the 629th of two thousand\"},{\"name\":\"Row 630\",\"note\":\"the 630th of two thousand\"},{\"name\":\"Row 631\",\"note\":\"the 631st of two thousand\"},{\"name\":\"Row 632\",\"note\":\"the 632nd of two thousand\"},{\"name\":\"Row 633\",\"note\":\"the 633rd of two thousand\"},{\"name\":\"Row 634\",\"note\":\"the 634th of two thousand\"},{\"name\":\"Row 635\",\"note\":\"the 635th of two thousand\"},{\"name\":\"Row 636\",\"note\":\"the 636th of two thousand\"},{\"name\":\"Row 637\",\"note\":\"the 637th of two thousand\"},{\"name\":\"Row 638\",\"note\":\"the 638th of two thousand\"},{\"name\":\"Row 639\",\"note\":\"the 639th of two thousand\"},{\"name\":\"Row 640\",\"note\":\"the 640th of two thousand\"},{\"name\":\"Row 641\",\"note\":\"the 641st of two thousand\"},{\"name\":\"Row 642\",\"note\":\"the 642nd of two thousand\"},{\"name\":\"Row 643\",\"note\":\"the 643rd of two thousand\"},{\"name\":\"Row 644\",\"note\":\"the 644th of two thousand\"},{\"name\":\"Row 645\",\"note\":\"the 645th of two thousand\"},{\"name\":\"Row 646\",\"note\":\"the 646th of two thousand\"},{\"name\":\"Row 647\",\"note\":\"the 647th of two thousand\"},{\"name\":\"Row 648\",\"note\":\"the 648th of two thousand\"},{\"name\":\"Row 649\",\"note\":\"the 649th of two thousand\"},{\"name\":\"Row 650\",\"note\":\"the 650th of two thousand\"},{\"name\":\"Row 651\",\"note\":\"the 651st of two thousand\"},{\"name\":\"Row 652\",\"note\":\"the 652nd of two thousand\"},{\"name\":\"Row 653\",\"note\":\"the 653rd of two thousand\"},{\"name\":\"Row 654\",\"note\":\"the 654th of two thousand\"},{\"name\":\"Row 655\",\"note\":\"the 655th of two thousand\"},{\"name\":\"Row 656\",\"note\":\"the 656th of two thousand\"},{\"name\":\"Row 657\",\"note\":\"the 657th of two thousand\"},{\"name\":\"Row 658\",\"note\":\"the 658th of two thousand\"},{\"name\":\"Row 659\",\"note\":\"the 659th of two thousand\"},{\"name\":\"Row 660\",\"note\":\"the 660th of two thousand\"},{\"name\":\"Row 661\",\"note\":\"the 661st of two thousand\"},{\"name\":\"Row 662\",\"note\":\"the 662nd of two thousand\"},{\"name\":\"Row 663\",\"note\":\"the 663rd of two thousand\"},{\"name\":\"Row 664\",\"note\":\"the 664th of two thousand\"},{\"name\":\"Row 665\",\"note\":\"the 665th of two thousand\"},{\"name\":\"Row 666\",\"note\":\"the 666th of two thousand\"},{\"name\":\"Row 667\",\"note\":\"the 667th of two thousand\"},{\"name\":\"Row 668\",\"note\":\"the 668th of two thousand\"},{\"name\":\"Row 669\",\"note\":\"the 669th of two thousand\"},{\"name\":\"Row 670\",\"note\":\"the 670th of two thousand\"},{\"name\":\"Row 671\",\"note\":\"the 671st of two thousand\"},{\"name\":\"Row 672\",\"note\":\"the 672nd of two thousand\"},{\"name\":\"Row 673\",\"note\":\"the 673rd of two thousand\"},{\"name\":\"Row 674\",\"note\":\"the 674th of two thousand\"},{\"name\":\"Row 675\",\"note\":\"the 675th of two thousand\"},{\"name\":\"Row 676\",\"note\":\"the 676th of two thousand\"},{\"name\":\"Row 677\",\"note\":\"the 677th of two thousand\"},{\"name\":\"Row 678\",\"note\":\"the 678th of two thousand\"},{\"name\":\"Row 679\",\"note\":\"the 679th of two thousand\"},{\"name\":\"Row 680\",\"note\":\"the 680th of two thousand\"},{\"name\":\"Row 681\",\"note\":\"the 681st of two thousand\"},{\"name\":\"Row 682\",\"note\":\"the 682nd of two thousand\"},{\"name\":\"Row 683\",\"note\":\"the 683rd of two thousand\"},{\"name\":\"Row 684\",\"note\":\"the 684th of two thousand\"},{\"name\":\"Row 685\",\"note\":\"the 685th of two thousand\"},{\"name\":\"Row 686\",\"note\":\"the 686th of two thousand\"},{\"name\":\"Row 687\",\"note\":\"the 687th of two thousand\"},{\"name\":\"Row 688\",\"note\":\"the 688th of two thousand\"},{\"name\":\"Row 689\",\"note\":\"the 689th of two thousand\"},{\"name\":\"Row 690\",\"note\":\"the 690th of two thousand\"},{\"name\":\"Row 691\",\"note\":\"the 691st of two thousand\"},{\"name\":\"Row 692\",\"note\":\"the 692nd of two thousand\"},{\"name\":\"Row 693\",\"note\":\"the 693rd of two thousand\"},{\"name\":\"Row 694\",\"note\":\"the 694th of two thousand\"},{\"name\":\"Row 695\",\"note\":\"the 695th of two thousand\"},{\"name\":\"Row 696\",\"note\":\"the 696th of two thousand\"},{\"name\":\"Row 697\",\"note\":\"the 697th of two thousand\"},{\"name\":\"Row 698\",\"note\":\"the 698th of two thousand\"},{\"name\":\"Row 699\",\"note\":\"the 699th of two thousand\"},{\"name\":\"Row 700\",\"note\":\"the 700th of two thousand\"},{\"name\":\"Row 701\",\"note\":\"the 701st of two thousand\"},{\"name\":\"Row 702\",\"note\":\"the 702nd of two thousand\"},{\"name\":\"Row 703\",\"note\":\"the 703rd of two thousand\"},{\"name\":\"Row 704\",\"note\":\"the 704th of two thousand\"},{\"name\":\"Row 705\",\"note\":\"the 705th of two thousand\"},{\"name\":\"Row 706\",\"note\":\"the 706th of two thousand\"},{\"name\":\"Row 707\",\"note\":\"the 707th of two thousand\"},{\"name\":\"Row 708\",\"note\":\"the 708th of two thousand\"},{\"name\":\"Row 709\",\"note\":\"the 709th of two thousand\"},{\"name\":\"Row 710\",\"note\":\"the 710th of two thousand\"},{\"name\":\"Row 711\",\"note\":\"the 711th of two thousand\"},{\"name\":\"Row 712\",\"note\":\"the 712th of two thousand\"},{\"name\":\"Row 713\",\"note\":\"the 713th of two thousand\"},{\"name\":\"Row 714\",\"note\":\"the 714th of two thousand\"},{\"name\":\"Row 715\",\"note\":\"the 715th of two thousand\"},{\"name\":\"Row 716\",\"note\":\"the 716th of two thousand\"},{\"name\":\"Row 717\",\"note\":\"the 717th of two thousand\"},{\"name\":\"Row 718\",\"note\":\"the 718th of two thousand\"},{\"name\":\"Row 719\",\"note\":\"the 719th of two thousand\"},{\"name\":\"Row 720\",\"note\":\"the 720th of two thousand\"},{\"name\":\"Row 721\",\"note\":\"the 721st of two thousand\"},{\"name\":\"Row 722\",\"note\":\"the 722nd of two thousand\"},{\"name\":\"Row 723\",\"note\":\"the 723rd of two thousand\"},{\"name\":\"Row 724\",\"note\":\"the 724th of two thousand\"},{\"name\":\"Row 725\",\"note\":\"the 725th of two thousand\"},{\"name\":\"Row 726\",\"note\":\"the 726th of two thousand\"},{\"name\":\"Row 727\",\"note\":\"the 727th of two thousand\"},{\"name\":\"Row 728\",\"note\":\"the 728th of two thousand\"},{\"name\":\"Row 729\",\"note\":\"the 729th of two thousand\"},{\"name\":\"Row 730\",\"note\":\"the 730th of two thousand\"},{\"name\":\"Row 731\",\"note\":\"the 731st of two thousand\"},{\"name\":\"Row 732\",\"note\":\"the 732nd of two thousand\"},{\"name\":\"Row 733\",\"note\":\"the 733rd of two thousand\"},{\"name\":\"Row 734\",\"note\":\"the 734th of two thousand\"},{\"name\":\"Row 735\",\"note\":\"the 735th of two thousand\"},{\"name\":\"Row 736\",\"note\":\"the 736th of two thousand\"},{\"name\":\"Row 737\",\"note\":\"the 737th of two thousand\"},{\"name\":\"Row 738\",\"note\":\"the 738th of two thousand\"},{\"name\":\"Row 739\",\"note\":\"the 739th of two thousand\"},{\"name\":\"Row 740\",\"note\":\"the 740th of two thousand\"},{\"name\":\"Row 741\",\"note\":\"the 741st of two thousand\"},{\"name\":\"Row 742\",\"note\":\"the 742nd of two thousand\"},{\"name\":\"Row 743\",\"note\":\"the 743rd of two thousand\"},{\"name\":\"Row 744\",\"note\":\"the 744th of two thousand\"},{\"name\":\"Row 745\",\"note\":\"the 745th of two thousand\"},{\"name\":\"Row 746\",\"note\":\"the 746th of two thousand\"},{\"name\":\"Row 747\",\"note\":\"the 747th of two thousand\"},{\"name\":\"Row 748\",\"note\":\"the 748th of two thousand\"},{\"name\":\"Row 749\",\"note\":\"the 749th of two thousand\"},{\"name\":\"Row 750\",\"note\":\"the 750th of two thousand\"},{\"name\":\"Row 751\",\"note\":\"the 751st of two thousand\"},{\"name\":\"Row 752\",\"note\":\"the 752nd of two thousand\"},{\"name\":\"Row 753\",\"note\":\"the 753rd of two thousand\"},{\"name\":\"Row 754\",\"note\":\"the 754th of two thousand\"},{\"name\":\"Row 755\",\"note\":\"the 755th of two thousand\"},{\"name\":\"Row 756\",\"note\":\"the 756th of two thousand\"},{\"name\":\"Row 757\",\"note\":\"the 757th of two thousand\"},{\"name\":\"Row 758\",\"note\":\"the 758th of two thousand\"},{\"name\":\"Row 759\",\"note\":\"the 759th of two thousand\"},{\"name\":\"Row 760\",\"note\":\"the 760th of two thousand\"},{\"name\":\"Row 761\",\"note\":\"the 761st of two thousand\"},{\"name\":\"Row 762\",\"note\":\"the 762nd of two thousand\"},{\"name\":\"Row 763\",\"note\":\"the 763rd of two thousand\"},{\"name\":\"Row 764\",\"note\":\"the 764th of two thousand\"},{\"name\":\"Row 765\",\"note\":\"the 765th of two thousand\"},{\"name\":\"Row 766\",\"note\":\"the 766th of two thousand\"},{\"name\":\"Row 767\",\"note\":\"the 767th of two thousand\"},{\"name\":\"Row 768\",\"note\":\"the 768th of two thousand\"},{\"name\":\"Row 769\",\"note\":\"the 769th of two thousand\"},{\"name\":\"Row 770\",\"note\":\"the 770th of two thousand\"},{\"name\":\"Row 771\",\"note\":\"the 771st of two thousand\"},{\"name\":\"Row 772\",\"note\":\"the 772nd of two thousand\"},{\"name\":\"Row 773\",\"note\":\"the 773rd of two thousand\"},{\"name\":\"Row 774\",\"note\":\"the 774th of two thousand\"},{\"name\":\"Row 775\",\"note\":\"the 775th of two thousand\"},{\"name\":\"Row 776\",\"note\":\"the 776th of two thousand\"},{\"name\":\"Row 777\",\"note\":\"the 777th of two thousand\"},{\"name\":\"Row 778\",\"note\":\"the 778th of two thousand\"},{\"name\":\"Row 779\",\"note\":\"the 779th of two thousand\"},{\"name\":\"Row 780\",\"note\":\"the 780th of two thousand\"},{\"name\":\"Row 781\",\"note\":\"the 781st of two thousand\"},{\"name\":\"Row 782\",\"note\":\"the 782nd of two thousand\"},{\"name\":\"Row 783\",\"note\":\"the 783rd of two thousand\"},{\"name\":\"Row 784\",\"note\":\"the 784th of two thousand\"},{\"name\":\"Row 785\",\"note\":\"the 785th of two thousand\"},{\"name\":\"Row 786\",\"note\":\"the 786th of two thousand\"},{\"name\":\"Row 787\",\"note\":\"the 787th of two thousand\"},{\"name\":\"Row 788\",\"note\":\"the 788th of two thousand\"},{\"name\":\"Row 789\",\"note\":\"the 789th of two thousand\"},{\"name\":\"Row 790\",\"note\":\"the 790th of two thousand\"},{\"name\":\"Row 791\",\"note\":\"the 791st of two thousand\"},{\"name\":\"Row 792\",\"note\":\"the 792nd of two thousand\"},{\"name\":\"Row 793\",\"note\":\"the 793rd of two thousand\"},{\"name\":\"Row 794\",\"note\":\"the 794th of two thousand\"},{\"name\":\"Row 795\",\"note\":\"the 795th of two thousand\"},{\"name\":\"Row 796\",\"note\":\"the 796th of two thousand\"},{\"name\":\"Row 797\",\"note\":\"the 797th of two thousand\"},{\"name\":\"Row 798\",\"note\":\"the 798th of two thousand\"},{\"name\":\"Row 799\",\"note\":\"the 799th of two thousand\"},{\"name\":\"Row 800\",\"note\":\"the 800th of two thousand\"},{\"name\":\"Row 801\",\"note\":\"the 801st of two thousand\"},{\"name\":\"Row 802\",\"note\":\"the 802nd of two thousand\"},{\"name\":\"Row 803\",\"note\":\"the 803rd of two thousand\"},{\"name\":\"Row 804\",\"note\":\"the 804th of two thousand\"},{\"name\":\"Row 805\",\"note\":\"the 805th of two thousand\"},{\"name\":\"Row 806\",\"note\":\"the 806th of two thousand\"},{\"name\":\"Row 807\",\"note\":\"the 807th of two thousand\"},{\"name\":\"Row 808\",\"note\":\"the 808th of two thousand\"},{\"name\":\"Row 809\",\"note\":\"the 809th of two thousand\"},{\"name\":\"Row 810\",\"note\":\"the 810th of two thousand\"},{\"name\":\"Row 811\",\"note\":\"the 811th of two thousand\"},{\"name\":\"Row 812\",\"note\":\"the 812th of two thousand\"},{\"name\":\"Row 813\",\"note\":\"the 813th of two thousand\"},{\"name\":\"Row 814\",\"note\":\"the 814th of two thousand\"},{\"name\":\"Row 815\",\"note\":\"the 815th of two thousand\"},{\"name\":\"Row 816\",\"note\":\"the 816th of two thousand\"},{\"name\":\"Row 817\",\"note\":\"the 817th of two thousand\"},{\"name\":\"Row 818\",\"note\":\"the 818th of two thousand\"},{\"name\":\"Row 819\",\"note\":\"the 819th of two thousand\"},{\"name\":\"Row 820\",\"note\":\"the 820th of two thousand\"},{\"name\":\"Row 821\",\"note\":\"the 821st of two thousand\"},{\"name\":\"Row 822\",\"note\":\"the 822nd of two thousand\"},{\"name\":\"Row 823\",\"note\":\"the 823rd of two thousand\"},{\"name\":\"Row 824\",\"note\":\"the 824th of two thousand\"},{\"name\":\"Row 825\",\"note\":\"the 825th of two thousand\"},{\"name\":\"Row 826\",\"note\":\"the 826th of two thousand\"},{\"name\":\"Row 827\",\"note\":\"the 827th of two thousand\"},{\"name\":\"Row 828\",\"note\":\"the 828th of two thousand\"},{\"name\":\"Row 829\",\"note\":\"the 829th of two thousand\"},{\"name\":\"Row 830\",\"note\":\"the 830th of two thousand\"},{\"name\":\"Row 831\",\"note\":\"the 831st of two thousand\"},{\"name\":\"Row 832\",\"note\":\"the 832nd of two thousand\"},{\"name\":\"Row 833\",\"note\":\"the 833rd of two thousand\"},{\"name\":\"Row 834\",\"note\":\"the 834th of two thousand\"},{\"name\":\"Row 835\",\"note\":\"the 835th of two thousand\"},{\"name\":\"Row 836\",\"note\":\"the 836th of two thousand\"},{\"name\":\"Row 837\",\"note\":\"the 837th of two thousand\"},{\"name\":\"Row 838\",\"note\":\"the 838th of two thousand\"},{\"name\":\"Row 839\",\"note\":\"the 839th of two thousand\"},{\"name\":\"Row 840\",\"note\":\"the 840th of two thousand\"},{\"name\":\"Row 841\",\"note\":\"the 841st of two thousand\"},{\"name\":\"Row 842\",\"note\":\"the 842nd of two thousand\"},{\"name\":\"Row 843\",\"note\":\"the 843rd of two thousand\"},{\"name\":\"Row 844\",\"note\":\"the 844th of two thousand\"},{\"name\":\"Row 845\",\"note\":\"the 845th of two thousand\"},{\"name\":\"Row 846\",\"note\":\"the 846th of two thousand\"},{\"name\":\"Row 847\",\"note\":\"the 847th of two thousand\"},{\"name\":\"Row 848\",\"note\":\"the 848th of two thousand\"},{\"name\":\"Row 849\",\"note\":\"the 849th of two thousand\"},{\"name\":\"Row 850\",\"note\":\"the 850th of two thousand\"},{\"name\":\"Row 851\",\"note\":\"the 851st of two thousand\"},{\"name\":\"Row 852\",\"note\":\"the 852nd of two thousand\"},{\"name\":\"Row 853\",\"note\":\"the 853rd of two thousand\"},{\"name\":\"Row 854\",\"note\":\"the 854th of two thousand\"},{\"name\":\"Row 855\",\"note\":\"the 855th of two thousand\"},{\"name\":\"Row 856\",\"note\":\"the 856th of two thousand\"},{\"name\":\"Row 857\",\"note\":\"the 857th of two thousand\"},{\"name\":\"Row 858\",\"note\":\"the 858th of two thousand\"},{\"name\":\"Row 859\",\"note\":\"the 859th of two thousand\"},{\"name\":\"Row 860\",\"note\":\"the 860th of two thousand\"},{\"name\":\"Row 861\",\"note\":\"the 861st of two thousand\"},{\"name\":\"Row 862\",\"note\":\"the 862nd of two thousand\"},{\"name\":\"Row 863\",\"note\":\"the 863rd of two thousand\"},{\"name\":\"Row 864\",\"note\":\"the 864th of two thousand\"},{\"name\":\"Row 865\",\"note\":\"the 865th of two thousand\"},{\"name\":\"Row 866\",\"note\":\"the 866th of two thousand\"},{\"name\":\"Row 867\",\"note\":\"the 867th of two thousand\"},{\"name\":\"Row 868\",\"note\":\"the 868th of two thousand\"},{\"name\":\"Row 869\",\"note\":\"the 869th of two thousand\"},{\"name\":\"Row 870\",\"note\":\"the 870th of two thousand\"},{\"name\":\"Row 871\",\"note\":\"the 871st of two thousand\"},{\"name\":\"Row 872\",\"note\":\"the 872nd of two thousand\"},{\"name\":\"Row 873\",\"note\":\"the 873rd of two thousand\"},{\"name\":\"Row 874\",\"note\":\"the 874th of two thousand\"},{\"name\":\"Row 875\",\"note\":\"the 875th of two thousand\"},{\"name\":\"Row 876\",\"note\":\"the 876th of two thousand\"},{\"name\":\"Row 877\",\"note\":\"the 877th of two thousand\"},{\"name\":\"Row 878\",\"note\":\"the 878th of two thousand\"},{\"name\":\"Row 879\",\"note\":\"the 879th of two thousand\"},{\"name\":\"Row 880\",\"note\":\"the 880th of two thousand\"},{\"name\":\"Row 881\",\"note\":\"the 881st of two thousand\"},{\"name\":\"Row 882\",\"note\":\"the 882nd of two thousand\"},{\"name\":\"Row 883\",\"note\":\"the 883rd of two thousand\"},{\"name\":\"Row 884\",\"note\":\"the 884th of two thousand\"},{\"name\":\"Row 885\",\"note\":\"the 885th of two thousand\"},{\"name\":\"Row 886\",\"note\":\"the 886th of two thousand\"},{\"name\":\"Row 887\",\"note\":\"the 887th of two thousand\"},{\"name\":\"Row 888\",\"note\":\"the 888th of two thousand\"},{\"name\":\"Row 889\",\"note\":\"the 889th of two thousand\"},{\"name\":\"Row 890\",\"note\":\"the 890th of two thousand\"},{\"name\":\"Row 891\",\"note\":\"the 891st of two thousand\"},{\"name\":\"Row 892\",\"note\":\"the 892nd of two thousand\"},{\"name\":\"Row 893\",\"note\":\"the 893rd of two thousand\"},{\"name\":\"Row 894\",\"note\":\"the 894th of two thousand\"},{\"name\":\"Row 895\",\"note\":\"the 895th of two thousand\"},{\"name\":\"Row 896\",\"note\":\"the 896th of two thousand\"},{\"name\":\"Row 897\",\"note\":\"the 897th of two thousand\"},{\"name\":\"Row 898\",\"note\":\"the 898th of two thousand\"},{\"name\":\"Row 899\",\"note\":\"the 899th of two thousand\"},{\"name\":\"Row 900\",\"note\":\"the 900th of two thousand\"},{\"name\":\"Row 901\",\"note\":\"the 901st of two thousand\"},{\"name\":\"Row 902\",\"note\":\"the 902nd of two thousand\"},{\"name\":\"Row 903\",\"note\":\"the 903rd of two thousand\"},{\"name\":\"Row 904\",\"note\":\"the 904th of two thousand\"},{\"name\":\"Row 905\",\"note\":\"the 905th of two thousand\"},{\"name\":\"Row 906\",\"note\":\"the 906th of two thousand\"},{\"name\":\"Row 907\",\"note\":\"the 907th of two thousand\"},{\"name\":\"Row 908\",\"note\":\"the 908th of two thousand\"},{\"name\":\"Row 909\",\"note\":\"the 909th of two thousand\"},{\"name\":\"Row 910\",\"note\":\"the 910th of two thousand\"},{\"name\":\"Row 911\",\"note\":\"the 911th of two thousand\"},{\"name\":\"Row 912\",\"note\":\"the 912th of two thousand\"},{\"name\":\"Row 913\",\"note\":\"the 913th of two thousand\"},{\"name\":\"Row 914\",\"note\":\"the 914th of two thousand\"},{\"name\":\"Row 915\",\"note\":\"the 915th of two thousand\"},{\"name\":\"Row 916\",\"note\":\"the 916th of two thousand\"},{\"name\":\"Row 917\",\"note\":\"the 917th of two thousand\"},{\"name\":\"Row 918\",\"note\":\"the 918th of two thousand\"},{\"name\":\"Row 919\",\"note\":\"the 919th of two thousand\"},{\"name\":\"Row 920\",\"note\":\"the 920th of two thousand\"},{\"name\":\"Row 921\",\"note\":\"the 921st of two thousand\"},{\"name\":\"Row 922\",\"note\":\"the 922nd of two thousand\"},{\"name\":\"Row 923\",\"note\":\"the 923rd of two thousand\"},{\"name\":\"Row 924\",\"note\":\"the 924th of two thousand\"},{\"name\":\"Row 925\",\"note\":\"the 925th of two thousand\"},{\"name\":\"Row 926\",\"note\":\"the 926th of two thousand\"},{\"name\":\"Row 927\",\"note\":\"the 927th of two thousand\"},{\"name\":\"Row 928\",\"note\":\"the 928th of two thousand\"},{\"name\":\"Row 929\",\"note\":\"the 929th of two thousand\"},{\"name\":\"Row 930\",\"note\":\"the 930th of two thousand\"},{\"name\":\"Row 931\",\"note\":\"the 931st of two thousand\"},{\"name\":\"Row 932\",\"note\":\"the 932nd of two thousand\"},{\"name\":\"Row 933\",\"note\":\"the 933rd of two thousand\"},{\"name\":\"Row 934\",\"note\":\"the 934th of two thousand\"},{\"name\":\"Row 935\",\"note\":\"the 935th of two thousand\"},{\"name\":\"Row 936\",\"note\":\"the 936th of two thousand\"},{\"name\":\"Row 937\",\"note\":\"the 937th of two thousand\"},{\"name\":\"Row 938\",\"note\":\"the 938th of two thousand\"},{\"name\":\"Row 939\",\"note\":\"the 939th of two thousand\"},{\"name\":\"Row 940\",\"note\":\"the 940th of two thousand\"},{\"name\":\"Row 941\",\"note\":\"the 941st of two thousand\"},{\"name\":\"Row 942\",\"note\":\"the 942nd of two thousand\"},{\"name\":\"Row 943\",\"note\":\"the 943rd of two thousand\"},{\"name\":\"Row 944\",\"note\":\"the 944th of two thousand\"},{\"name\":\"Row 945\",\"note\":\"the 945th of two thousand\"},{\"name\":\"Row 946\",\"note\":\"the 946th of two thousand\"},{\"name\":\"Row 947\",\"note\":\"the 947th of two thousand\"},{\"name\":\"Row 948\",\"note\":\"the 948th of two thousand\"},{\"name\":\"Row 949\",\"note\":\"the 949th of two thousand\"},{\"name\":\"Row 950\",\"note\":\"the 950th of two thousand\"},{\"name\":\"Row 951\",\"note\":\"the 951st of two thousand\"},{\"name\":\"Row 952\",\"note\":\"the 952nd of two thousand\"},{\"name\":\"Row 953\",\"note\":\"the 953rd of two thousand\"},{\"name\":\"Row 954\",\"note\":\"the 954th of two thousand\"},{\"name\":\"Row 955\",\"note\":\"the 955th of two thousand\"},{\"name\":\"Row 956\",\"note\":\"the 956th of two thousand\"},{\"name\":\"Row 957\",\"note\":\"the 957th of two thousand\"},{\"name\":\"Row 958\",\"note\":\"the 958th of two thousand\"},{\"name\":\"Row 959\",\"note\":\"the 959th of two thousand\"},{\"name\":\"Row 960\",\"note\":\"the 960th of two thousand\"},{\"name\":\"Row 961\",\"note\":\"the 961st of two thousand\"},{\"name\":\"Row 962\",\"note\":\"the 962nd of two thousand\"},{\"name\":\"Row 963\",\"note\":\"the 963rd of two thousand\"},{\"name\":\"Row 964\",\"note\":\"the 964th of two thousand\"},{\"name\":\"Row 965\",\"note\":\"the 965th of two thousand\"},{\"name\":\"Row 966\",\"note\":\"the 966th of two thousand\"},{\"name\":\"Row 967\",\"note\":\"the 967th of two thousand\"},{\"name\":\"Row 968\",\"note\":\"the 968th of two thousand\"},{\"name\":\"Row 969\",\"note\":\"the 969th of two thousand\"},{\"name\":\"Row 970\",\"note\":\"the 970th of two thousand\"},{\"name\":\"Row 971\",\"note\":\"the 971st of two thousand\"},{\"name\":\"Row 972\",\"note\":\"the 972nd of two thousand\"},{\"name\":\"Row 973\",\"note\":\"the 973rd of two thousand\"},{\"name\":\"Row 974\",\"note\":\"the 974th of two thousand\"},{\"name\":\"Row 975\",\"note\":\"the 975th of two thousand\"},{\"name\":\"Row 976\",\"note\":\"the 976th of two thousand\"},{\"name\":\"Row 977\",\"note\":\"the 977th of two thousand\"},{\"name\":\"Row 978\",\"note\":\"the 978th of two thousand\"},{\"name\":\"Row 979\",\"note\":\"the 979th of two thousand\"},{\"name\":\"Row 980\",\"note\":\"the 980th of two thousand\"},{\"name\":\"Row 981\",\"note\":\"the 981st of two thousand\"},{\"name\":\"Row 982\",\"note\":\"the 982nd of two thousand\"},{\"name\":\"Row 983\",\"note\":\"the 983rd of two thousand\"},{\"name\":\"Row 984\",\"note\":\"the 984th of two thousand\"},{\"name\":\"Row 985\",\"note\":\"the 985th of two thousand\"},{\"name\":\"Row 986\",\"note\":\"the 986th of two thousand\"},{\"name\":\"Row 987\",\"note\":\"the 987th of two thousand\"},{\"name\":\"Row 988\",\"note\":\"the 988th of two thousand\"},{\"name\":\"Row 989\",\"note\":\"the 989th of two thousand\"},{\"name\":\"Row 990\",\"note\":\"the 990th of two thousand\"},{\"name\":\"Row 991\",\"note\":\"the 991st of two thousand\"},{\"name\":\"Row 992\",\"note\":\"the 992nd of two thousand\"},{\"name\":\"Row 993\",\"note\":\"the 993rd of two thousand\"},{\"name\":\"Row 994\",\"note\":\"the 994th of two thousand\"},{\"name\":\"Row 995\",\"note\":\"the 995th of two thousand\"},{\"name\":\"Row 996\",\"note\":\"the 996th of two thousand\"},{\"name\":\"Row 997\",\"note\":\"the 997th of two thousand\"},{\"name\":\"Row 998\",\"note\":\"the 998th of two thousand\"},{\"name\":\"Row 999\",\"note\":\"the 999th of two thousand\"},{\"name\":\"Row 1000\",\"note\":\"the 1,000th of two thousand\"},{\"name\":\"Row 1001\",\"note\":\"the 1,001st of two thousand\"},{\"name\":\"Row 1002\",\"note\":\"the 1,002nd of two thousand\"},{\"name\":\"Row 1003\",\"note\":\"the 1,003rd of two thousand\"},{\"name\":\"Row 1004\",\"note\":\"the 1,004th of two thousand\"},{\"name\":\"Row 1005\",\"note\":\"the 1,005th of two thousand\"},{\"name\":\"Row 1006\",\"note\":\"the 1,006th of two thousand\"},{\"name\":\"Row 1007\",\"note\":\"the 1,007th of two thousand\"},{\"name\":\"Row 1008\",\"note\":\"the 1,008th of two thousand\"},{\"name\":\"Row 1009\",\"note\":\"the 1,009th of two thousand\"},{\"name\":\"Row 1010\",\"note\":\"the 1,010th of two thousand\"},{\"name\":\"Row 1011\",\"note\":\"the 1,011th of two thousand\"},{\"name\":\"Row 1012\",\"note\":\"the 1,012th of two thousand\"},{\"name\":\"Row 1013\",\"note\":\"the 1,013th of two thousand\"},{\"name\":\"Row 1014\",\"note\":\"the 1,014th of two thousand\"},{\"name\":\"Row 1015\",\"note\":\"the 1,015th of two thousand\"},{\"name\":\"Row 1016\",\"note\":\"the 1,016th of two thousand\"},{\"name\":\"Row 1017\",\"note\":\"the 1,017th of two thousand\"},{\"name\":\"Row 1018\",\"note\":\"the 1,018th of two thousand\"},{\"name\":\"Row 1019\",\"note\":\"the 1,019th of two thousand\"},{\"name\":\"Row 1020\",\"note\":\"the 1,020th of two thousand\"},{\"name\":\"Row 1021\",\"note\":\"the 1,021st of two thousand\"},{\"name\":\"Row 1022\",\"note\":\"the 1,022nd of two thousand\"},{\"name\":\"Row 1023\",\"note\":\"the 1,023rd of two thousand\"},{\"name\":\"Row 1024\",\"note\":\"the 1,024th of two thousand\"},{\"name\":\"Row 1025\",\"note\":\"the 1,025th of two thousand\"},{\"name\":\"Row 1026\",\"note\":\"the 1,026th of two thousand\"},{\"name\":\"Row 1027\",\"note\":\"the 1,027th of two thousand\"},{\"name\":\"Row 1028\",\"note\":\"the 1,028th of two thousand\"},{\"name\":\"Row 1029\",\"note\":\"the 1,029th of two thousand\"},{\"name\":\"Row 1030\",\"note\":\"the 1,030th of two thousand\"},{\"name\":\"Row 1031\",\"note\":\"the 1,031st of two thousand\"},{\"name\":\"Row 1032\",\"note\":\"the 1,032nd of two thousand\"},{\"name\":\"Row 1033\",\"note\":\"the 1,033rd of two thousand\"},{\"name\":\"Row 1034\",\"note\":\"the 1,034th of two thousand\"},{\"name\":\"Row 1035\",\"note\":\"the 1,035th of two thousand\"},{\"name\":\"Row 1036\",\"note\":\"the 1,036th of two thousand\"},{\"name\":\"Row 1037\",\"note\":\"the 1,037th of two thousand\"},{\"name\":\"Row 1038\",\"note\":\"the 1,038th of two thousand\"},{\"name\":\"Row 1039\",\"note\":\"the 1,039th of two thousand\"},{\"name\":\"Row 1040\",\"note\":\"the 1,040th of two thousand\"},{\"name\":\"Row 1041\",\"note\":\"the 1,041st of two thousand\"},{\"name\":\"Row 1042\",\"note\":\"the 1,042nd of two thousand\"},{\"name\":\"Row 1043\",\"note\":\"the 1,043rd of two thousand\"},{\"name\":\"Row 1044\",\"note\":\"the 1,044th of two thousand\"},{\"name\":\"Row 1045\",\"note\":\"the 1,045th of two thousand\"},{\"name\":\"Row 1046\",\"note\":\"the 1,046th of two thousand\"},{\"name\":\"Row 1047\",\"note\":\"the 1,047th of two thousand\"},{\"name\":\"Row 1048\",\"note\":\"the 1,048th of two thousand\"},{\"name\":\"Row 1049\",\"note\":\"the 1,049th of two thousand\"},{\"name\":\"Row 1050\",\"note\":\"the 1,050th of two thousand\"},{\"name\":\"Row 1051\",\"note\":\"the 1,051st of two thousand\"},{\"name\":\"Row 1052\",\"note\":\"the 1,052nd of two thousand\"},{\"name\":\"Row 1053\",\"note\":\"the 1,053rd of two thousand\"},{\"name\":\"Row 1054\",\"note\":\"the 1,054th of two thousand\"},{\"name\":\"Row 1055\",\"note\":\"the 1,055th of two thousand\"},{\"name\":\"Row 1056\",\"note\":\"the 1,056th of two thousand\"},{\"name\":\"Row 1057\",\"note\":\"the 1,057th of two thousand\"},{\"name\":\"Row 1058\",\"note\":\"the 1,058th of two thousand\"},{\"name\":\"Row 1059\",\"note\":\"the 1,059th of two thousand\"},{\"name\":\"Row 1060\",\"note\":\"the 1,060th of two thousand\"},{\"name\":\"Row 1061\",\"note\":\"the 1,061st of two thousand\"},{\"name\":\"Row 1062\",\"note\":\"the 1,062nd of two thousand\"},{\"name\":\"Row 1063\",\"note\":\"the 1,063rd of two thousand\"},{\"name\":\"Row 1064\",\"note\":\"the 1,064th of two thousand\"},{\"name\":\"Row 1065\",\"note\":\"the 1,065th of two thousand\"},{\"name\":\"Row 1066\",\"note\":\"the 1,066th of two thousand\"},{\"name\":\"Row 1067\",\"note\":\"the 1,067th of two thousand\"},{\"name\":\"Row 1068\",\"note\":\"the 1,068th of two thousand\"},{\"name\":\"Row 1069\",\"note\":\"the 1,069th of two thousand\"},{\"name\":\"Row 1070\",\"note\":\"the 1,070th of two thousand\"},{\"name\":\"Row 1071\",\"note\":\"the 1,071st of two thousand\"},{\"name\":\"Row 1072\",\"note\":\"the 1,072nd of two thousand\"},{\"name\":\"Row 1073\",\"note\":\"the 1,073rd of two thousand\"},{\"name\":\"Row 1074\",\"note\":\"the 1,074th of two thousand\"},{\"name\":\"Row 1075\",\"note\":\"the 1,075th of two thousand\"},{\"name\":\"Row 1076\",\"note\":\"the 1,076th of two thousand\"},{\"name\":\"Row 1077\",\"note\":\"the 1,077th of two thousand\"},{\"name\":\"Row 1078\",\"note\":\"the 1,078th of two thousand\"},{\"name\":\"Row 1079\",\"note\":\"the 1,079th of two thousand\"},{\"name\":\"Row 1080\",\"note\":\"the 1,080th of two thousand\"},{\"name\":\"Row 1081\",\"note\":\"the 1,081st of two thousand\"},{\"name\":\"Row 1082\",\"note\":\"the 1,082nd of two thousand\"},{\"name\":\"Row 1083\",\"note\":\"the 1,083rd of two thousand\"},{\"name\":\"Row 1084\",\"note\":\"the 1,084th of two thousand\"},{\"name\":\"Row 1085\",\"note\":\"the 1,085th of two thousand\"},{\"name\":\"Row 1086\",\"note\":\"the 1,086th of two thousand\"},{\"name\":\"Row 1087\",\"note\":\"the 1,087th of two thousand\"},{\"name\":\"Row 1088\",\"note\":\"the 1,088th of two thousand\"},{\"name\":\"Row 1089\",\"note\":\"the 1,089th of two thousand\"},{\"name\":\"Row 1090\",\"note\":\"the 1,090th of two thousand\"},{\"name\":\"Row 1091\",\"note\":\"the 1,091st of two thousand\"},{\"name\":\"Row 1092\",\"note\":\"the 1,092nd of two thousand\"},{\"name\":\"Row 1093\",\"note\":\"the 1,093rd of two thousand\"},{\"name\":\"Row 1094\",\"note\":\"the 1,094th of two thousand\"},{\"name\":\"Row 1095\",\"note\":\"the 1,095th of two thousand\"},{\"name\":\"Row 1096\",\"note\":\"the 1,096th of two thousand\"},{\"name\":\"Row 1097\",\"note\":\"the 1,097th of two thousand\"},{\"name\":\"Row 1098\",\"note\":\"the 1,098th of two thousand\"},{\"name\":\"Row 1099\",\"note\":\"the 1,099th of two thousand\"},{\"name\":\"Row 1100\",\"note\":\"the 1,100th of two thousand\"},{\"name\":\"Row 1101\",\"note\":\"the 1,101st of two thousand\"},{\"name\":\"Row 1102\",\"note\":\"the 1,102nd of two thousand\"},{\"name\":\"Row 1103\",\"note\":\"the 1,103rd of two thousand\"},{\"name\":\"Row 1104\",\"note\":\"the 1,104th of two thousand\"},{\"name\":\"Row 1105\",\"note\":\"the 1,105th of two thousand\"},{\"name\":\"Row 1106\",\"note\":\"the 1,106th of two thousand\"},{\"name\":\"Row 1107\",\"note\":\"the 1,107th of two thousand\"},{\"name\":\"Row 1108\",\"note\":\"the 1,108th of two thousand\"},{\"name\":\"Row 1109\",\"note\":\"the 1,109th of two thousand\"},{\"name\":\"Row 1110\",\"note\":\"the 1,110th of two thousand\"},{\"name\":\"Row 1111\",\"note\":\"the 1,111th of two thousand\"},{\"name\":\"Row 1112\",\"note\":\"the 1,112th of two thousand\"},{\"name\":\"Row 1113\",\"note\":\"the 1,113th of two thousand\"},{\"name\":\"Row 1114\",\"note\":\"the 1,114th of two thousand\"},{\"name\":\"Row 1115\",\"note\":\"the 1,115th of two thousand\"},{\"name\":\"Row 1116\",\"note\":\"the 1,116th of two thousand\"},{\"name\":\"Row 1117\",\"note\":\"the 1,117th of two thousand\"},{\"name\":\"Row 1118\",\"note\":\"the 1,118th of two thousand\"},{\"name\":\"Row 1119\",\"note\":\"the 1,119th of two thousand\"},{\"name\":\"Row 1120\",\"note\":\"the 1,120th of two thousand\"},{\"name\":\"Row 1121\",\"note\":\"the 1,121st of two thousand\"},{\"name\":\"Row 1122\",\"note\":\"the 1,122nd of two thousand\"},{\"name\":\"Row 1123\",\"note\":\"the 1,123rd of two thousand\"},{\"name\":\"Row 1124\",\"note\":\"the 1,124th of two thousand\"},{\"name\":\"Row 1125\",\"note\":\"the 1,125th of two thousand\"},{\"name\":\"Row 1126\",\"note\":\"the 1,126th of two thousand\"},{\"name\":\"Row 1127\",\"note\":\"the 1,127th of two thousand\"},{\"name\":\"Row 1128\",\"note\":\"the 1,128th of two thousand\"},{\"name\":\"Row 1129\",\"note\":\"the 1,129th of two thousand\"},{\"name\":\"Row 1130\",\"note\":\"the 1,130th of two thousand\"},{\"name\":\"Row 1131\",\"note\":\"the 1,131st of two thousand\"},{\"name\":\"Row 1132\",\"note\":\"the 1,132nd of two thousand\"},{\"name\":\"Row 1133\",\"note\":\"the 1,133rd of two thousand\"},{\"name\":\"Row 1134\",\"note\":\"the 1,134th of two thousand\"},{\"name\":\"Row 1135\",\"note\":\"the 1,135th of two thousand\"},{\"name\":\"Row 1136\",\"note\":\"the 1,136th of two thousand\"},{\"name\":\"Row 1137\",\"note\":\"the 1,137th of two thousand\"},{\"name\":\"Row 1138\",\"note\":\"the 1,138th of two thousand\"},{\"name\":\"Row 1139\",\"note\":\"the 1,139th of two thousand\"},{\"name\":\"Row 1140\",\"note\":\"the 1,140th of two thousand\"},{\"name\":\"Row 1141\",\"note\":\"the 1,141st of two thousand\"},{\"name\":\"Row 1142\",\"note\":\"the 1,142nd of two thousand\"},{\"name\":\"Row 1143\",\"note\":\"the 1,143rd of two thousand\"},{\"name\":\"Row 1144\",\"note\":\"the 1,144th of two thousand\"},{\"name\":\"Row 1145\",\"note\":\"the 1,145th of two thousand\"},{\"name\":\"Row 1146\",\"note\":\"the 1,146th of two thousand\"},{\"name\":\"Row 1147\",\"note\":\"the 1,147th of two thousand\"},{\"name\":\"Row 1148\",\"note\":\"the 1,148th of two thousand\"},{\"name\":\"Row 1149\",\"note\":\"the 1,149th of two thousand\"},{\"name\":\"Row 1150\",\"note\":\"the 1,150th of two thousand\"},{\"name\":\"Row 1151\",\"note\":\"the 1,151st of two thousand\"},{\"name\":\"Row 1152\",\"note\":\"the 1,152nd of two thousand\"},{\"name\":\"Row 1153\",\"note\":\"the 1,153rd of two thousand\"},{\"name\":\"Row 1154\",\"note\":\"the 1,154th of two thousand\"},{\"name\":\"Row 1155\",\"note\":\"the 1,155th of two thousand\"},{\"name\":\"Row 1156\",\"note\":\"the 1,156th of two thousand\"},{\"name\":\"Row 1157\",\"note\":\"the 1,157th of two thousand\"},{\"name\":\"Row 1158\",\"note\":\"the 1,158th of two thousand\"},{\"name\":\"Row 1159\",\"note\":\"the 1,159th of two thousand\"},{\"name\":\"Row 1160\",\"note\":\"the 1,160th of two thousand\"},{\"name\":\"Row 1161\",\"note\":\"the 1,161st of two thousand\"},{\"name\":\"Row 1162\",\"note\":\"the 1,162nd of two thousand\"},{\"name\":\"Row 1163\",\"note\":\"the 1,163rd of two thousand\"},{\"name\":\"Row 1164\",\"note\":\"the 1,164th of two thousand\"},{\"name\":\"Row 1165\",\"note\":\"the 1,165th of two thousand\"},{\"name\":\"Row 1166\",\"note\":\"the 1,166th of two thousand\"},{\"name\":\"Row 1167\",\"note\":\"the 1,167th of two thousand\"},{\"name\":\"Row 1168\",\"note\":\"the 1,168th of two thousand\"},{\"name\":\"Row 1169\",\"note\":\"the 1,169th of two thousand\"},{\"name\":\"Row 1170\",\"note\":\"the 1,170th of two thousand\"},{\"name\":\"Row 1171\",\"note\":\"the 1,171st of two thousand\"},{\"name\":\"Row 1172\",\"note\":\"the 1,172nd of two thousand\"},{\"name\":\"Row 1173\",\"note\":\"the 1,173rd of two thousand\"},{\"name\":\"Row 1174\",\"note\":\"the 1,174th of two thousand\"},{\"name\":\"Row 1175\",\"note\":\"the 1,175th of two thousand\"},{\"name\":\"Row 1176\",\"note\":\"the 1,176th of two thousand\"},{\"name\":\"Row 1177\",\"note\":\"the 1,177th of two thousand\"},{\"name\":\"Row 1178\",\"note\":\"the 1,178th of two thousand\"},{\"name\":\"Row 1179\",\"note\":\"the 1,179th of two thousand\"},{\"name\":\"Row 1180\",\"note\":\"the 1,180th of two thousand\"},{\"name\":\"Row 1181\",\"note\":\"the 1,181st of two thousand\"},{\"name\":\"Row 1182\",\"note\":\"the 1,182nd of two thousand\"},{\"name\":\"Row 1183\",\"note\":\"the 1,183rd of two thousand\"},{\"name\":\"Row 1184\",\"note\":\"the 1,184th of two thousand\"},{\"name\":\"Row 1185\",\"note\":\"the 1,185th of two thousand\"},{\"name\":\"Row 1186\",\"note\":\"the 1,186th of two thousand\"},{\"name\":\"Row 1187\",\"note\":\"the 1,187th of two thousand\"},{\"name\":\"Row 1188\",\"note\":\"the 1,188th of two thousand\"},{\"name\":\"Row 1189\",\"note\":\"the 1,189th of two thousand\"},{\"name\":\"Row 1190\",\"note\":\"the 1,190th of two thousand\"},{\"name\":\"Row 1191\",\"note\":\"the 1,191st of two thousand\"},{\"name\":\"Row 1192\",\"note\":\"the 1,192nd of two thousand\"},{\"name\":\"Row 1193\",\"note\":\"the 1,193rd of two thousand\"},{\"name\":\"Row 1194\",\"note\":\"the 1,194th of two thousand\"},{\"name\":\"Row 1195\",\"note\":\"the 1,195th of two thousand\"},{\"name\":\"Row 1196\",\"note\":\"the 1,196th of two thousand\"},{\"name\":\"Row 1197\",\"note\":\"the 1,197th of two thousand\"},{\"name\":\"Row 1198\",\"note\":\"the 1,198th of two thousand\"},{\"name\":\"Row 1199\",\"note\":\"the 1,199th of two thousand\"},{\"name\":\"Row 1200\",\"note\":\"the 1,200th of two thousand\"},{\"name\":\"Row 1201\",\"note\":\"the 1,201st of two thousand\"},{\"name\":\"Row 1202\",\"note\":\"the 1,202nd of two thousand\"},{\"name\":\"Row 1203\",\"note\":\"the 1,203rd of two thousand\"},{\"name\":\"Row 1204\",\"note\":\"the 1,204th of two thousand\"},{\"name\":\"Row 1205\",\"note\":\"the 1,205th of two thousand\"},{\"name\":\"Row 1206\",\"note\":\"the 1,206th of two thousand\"},{\"name\":\"Row 1207\",\"note\":\"the 1,207th of two thousand\"},{\"name\":\"Row 1208\",\"note\":\"the 1,208th of two thousand\"},{\"name\":\"Row 1209\",\"note\":\"the 1,209th of two thousand\"},{\"name\":\"Row 1210\",\"note\":\"the 1,210th of two thousand\"},{\"name\":\"Row 1211\",\"note\":\"the 1,211th of two thousand\"},{\"name\":\"Row 1212\",\"note\":\"the 1,212th of two thousand\"},{\"name\":\"Row 1213\",\"note\":\"the 1,213th of two thousand\"},{\"name\":\"Row 1214\",\"note\":\"the 1,214th of two thousand\"},{\"name\":\"Row 1215\",\"note\":\"the 1,215th of two thousand\"},{\"name\":\"Row 1216\",\"note\":\"the 1,216th of two thousand\"},{\"name\":\"Row 1217\",\"note\":\"the 1,217th of two thousand\"},{\"name\":\"Row 1218\",\"note\":\"the 1,218th of two thousand\"},{\"name\":\"Row 1219\",\"note\":\"the 1,219th of two thousand\"},{\"name\":\"Row 1220\",\"note\":\"the 1,220th of two thousand\"},{\"name\":\"Row 1221\",\"note\":\"the 1,221st of two thousand\"},{\"name\":\"Row 1222\",\"note\":\"the 1,222nd of two thousand\"},{\"name\":\"Row 1223\",\"note\":\"the 1,223rd of two thousand\"},{\"name\":\"Row 1224\",\"note\":\"the 1,224th of two thousand\"},{\"name\":\"Row 1225\",\"note\":\"the 1,225th of two thousand\"},{\"name\":\"Row 1226\",\"note\":\"the 1,226th of two thousand\"},{\"name\":\"Row 1227\",\"note\":\"the 1,227th of two thousand\"},{\"name\":\"Row 1228\",\"note\":\"the 1,228th of two thousand\"},{\"name\":\"Row 1229\",\"note\":\"the 1,229th of two thousand\"},{\"name\":\"Row 1230\",\"note\":\"the 1,230th of two thousand\"},{\"name\":\"Row 1231\",\"note\":\"the 1,231st of two thousand\"},{\"name\":\"Row 1232\",\"note\":\"the 1,232nd of two thousand\"},{\"name\":\"Row 1233\",\"note\":\"the 1,233rd of two thousand\"},{\"name\":\"Row 1234\",\"note\":\"the 1,234th of two thousand\"},{\"name\":\"Row 1235\",\"note\":\"the 1,235th of two thousand\"},{\"name\":\"Row 1236\",\"note\":\"the 1,236th of two thousand\"},{\"name\":\"Row 1237\",\"note\":\"the 1,237th of two thousand\"},{\"name\":\"Row 1238\",\"note\":\"the 1,238th of two thousand\"},{\"name\":\"Row 1239\",\"note\":\"the 1,239th of two thousand\"},{\"name\":\"Row 1240\",\"note\":\"the 1,240th of two thousand\"},{\"name\":\"Row 1241\",\"note\":\"the 1,241st of two thousand\"},{\"name\":\"Row 1242\",\"note\":\"the 1,242nd of two thousand\"},{\"name\":\"Row 1243\",\"note\":\"the 1,243rd of two thousand\"},{\"name\":\"Row 1244\",\"note\":\"the 1,244th of two thousand\"},{\"name\":\"Row 1245\",\"note\":\"the 1,245th of two thousand\"},{\"name\":\"Row 1246\",\"note\":\"the 1,246th of two thousand\"},{\"name\":\"Row 1247\",\"note\":\"the 1,247th of two thousand\"},{\"name\":\"Row 1248\",\"note\":\"the 1,248th of two thousand\"},{\"name\":\"Row 1249\",\"note\":\"the 1,249th of two thousand\"},{\"name\":\"Row 1250\",\"note\":\"the 1,250th of two thousand\"},{\"name\":\"Row 1251\",\"note\":\"the 1,251st of two thousand\"},{\"name\":\"Row 1252\",\"note\":\"the 1,252nd of two thousand\"},{\"name\":\"Row 1253\",\"note\":\"the 1,253rd of two thousand\"},{\"name\":\"Row 1254\",\"note\":\"the 1,254th of two thousand\"},{\"name\":\"Row 1255\",\"note\":\"the 1,255th of two thousand\"},{\"name\":\"Row 1256\",\"note\":\"the 1,256th of two thousand\"},{\"name\":\"Row 1257\",\"note\":\"the 1,257th of two thousand\"},{\"name\":\"Row 1258\",\"note\":\"the 1,258th of two thousand\"},{\"name\":\"Row 1259\",\"note\":\"the 1,259th of two thousand\"},{\"name\":\"Row 1260\",\"note\":\"the 1,260th of two thousand\"},{\"name\":\"Row 1261\",\"note\":\"the 1,261st of two thousand\"},{\"name\":\"Row 1262\",\"note\":\"the 1,262nd of two thousand\"},{\"name\":\"Row 1263\",\"note\":\"the 1,263rd of two thousand\"},{\"name\":\"Row 1264\",\"note\":\"the 1,264th of two thousand\"},{\"name\":\"Row 1265\",\"note\":\"the 1,265th of two thousand\"},{\"name\":\"Row 1266\",\"note\":\"the 1,266th of two thousand\"},{\"name\":\"Row 1267\",\"note\":\"the 1,267th of two thousand\"},{\"name\":\"Row 1268\",\"note\":\"the 1,268th of two thousand\"},{\"name\":\"Row 1269\",\"note\":\"the 1,269th of two thousand\"},{\"name\":\"Row 1270\",\"note\":\"the 1,270th of two thousand\"},{\"name\":\"Row 1271\",\"note\":\"the 1,271st of two thousand\"},{\"name\":\"Row 1272\",\"note\":\"the 1,272nd of two thousand\"},{\"name\":\"Row 1273\",\"note\":\"the 1,273rd of two thousand\"},{\"name\":\"Row 1274\",\"note\":\"the 1,274th of two thousand\"},{\"name\":\"Row 1275\",\"note\":\"the 1,275th of two thousand\"},{\"name\":\"Row 1276\",\"note\":\"the 1,276th of two thousand\"},{\"name\":\"Row 1277\",\"note\":\"the 1,277th of two thousand\"},{\"name\":\"Row 1278\",\"note\":\"the 1,278th of two thousand\"},{\"name\":\"Row 1279\",\"note\":\"the 1,279th of two thousand\"},{\"name\":\"Row 1280\",\"note\":\"the 1,280th of two thousand\"},{\"name\":\"Row 1281\",\"note\":\"the 1,281st of two thousand\"},{\"name\":\"Row 1282\",\"note\":\"the 1,282nd of two thousand\"},{\"name\":\"Row 1283\",\"note\":\"the 1,283rd of two thousand\"},{\"name\":\"Row 1284\",\"note\":\"the 1,284th of two thousand\"},{\"name\":\"Row 1285\",\"note\":\"the 1,285th of two thousand\"},{\"name\":\"Row 1286\",\"note\":\"the 1,286th of two thousand\"},{\"name\":\"Row 1287\",\"note\":\"the 1,287th of two thousand\"},{\"name\":\"Row 1288\",\"note\":\"the 1,288th of two thousand\"},{\"name\":\"Row 1289\",\"note\":\"the 1,289th of two thousand\"},{\"name\":\"Row 1290\",\"note\":\"the 1,290th of two thousand\"},{\"name\":\"Row 1291\",\"note\":\"the 1,291st of two thousand\"},{\"name\":\"Row 1292\",\"note\":\"the 1,292nd of two thousand\"},{\"name\":\"Row 1293\",\"note\":\"the 1,293rd of two thousand\"},{\"name\":\"Row 1294\",\"note\":\"the 1,294th of two thousand\"},{\"name\":\"Row 1295\",\"note\":\"the 1,295th of two thousand\"},{\"name\":\"Row 1296\",\"note\":\"the 1,296th of two thousand\"},{\"name\":\"Row 1297\",\"note\":\"the 1,297th of two thousand\"},{\"name\":\"Row 1298\",\"note\":\"the 1,298th of two thousand\"},{\"name\":\"Row 1299\",\"note\":\"the 1,299th of two thousand\"},{\"name\":\"Row 1300\",\"note\":\"the 1,300th of two thousand\"},{\"name\":\"Row 1301\",\"note\":\"the 1,301st of two thousand\"},{\"name\":\"Row 1302\",\"note\":\"the 1,302nd of two thousand\"},{\"name\":\"Row 1303\",\"note\":\"the 1,303rd of two thousand\"},{\"name\":\"Row 1304\",\"note\":\"the 1,304th of two thousand\"},{\"name\":\"Row 1305\",\"note\":\"the 1,305th of two thousand\"},{\"name\":\"Row 1306\",\"note\":\"the 1,306th of two thousand\"},{\"name\":\"Row 1307\",\"note\":\"the 1,307th of two thousand\"},{\"name\":\"Row 1308\",\"note\":\"the 1,308th of two thousand\"},{\"name\":\"Row 1309\",\"note\":\"the 1,309th of two thousand\"},{\"name\":\"Row 1310\",\"note\":\"the 1,310th of two thousand\"},{\"name\":\"Row 1311\",\"note\":\"the 1,311th of two thousand\"},{\"name\":\"Row 1312\",\"note\":\"the 1,312th of two thousand\"},{\"name\":\"Row 1313\",\"note\":\"the 1,313th of two thousand\"},{\"name\":\"Row 1314\",\"note\":\"the 1,314th of two thousand\"},{\"name\":\"Row 1315\",\"note\":\"the 1,315th of two thousand\"},{\"name\":\"Row 1316\",\"note\":\"the 1,316th of two thousand\"},{\"name\":\"Row 1317\",\"note\":\"the 1,317th of two thousand\"},{\"name\":\"Row 1318\",\"note\":\"the 1,318th of two thousand\"},{\"name\":\"Row 1319\",\"note\":\"the 1,319th of two thousand\"},{\"name\":\"Row 1320\",\"note\":\"the 1,320th of two thousand\"},{\"name\":\"Row 1321\",\"note\":\"the 1,321st of two thousand\"},{\"name\":\"Row 1322\",\"note\":\"the 1,322nd of two thousand\"},{\"name\":\"Row 1323\",\"note\":\"the 1,323rd of two thousand\"},{\"name\":\"Row 1324\",\"note\":\"the 1,324th of two thousand\"},{\"name\":\"Row 1325\",\"note\":\"the 1,325th of two thousand\"},{\"name\":\"Row 1326\",\"note\":\"the 1,326th of two thousand\"},{\"name\":\"Row 1327\",\"note\":\"the 1,327th of two thousand\"},{\"name\":\"Row 1328\",\"note\":\"the 1,328th of two thousand\"},{\"name\":\"Row 1329\",\"note\":\"the 1,329th of two thousand\"},{\"name\":\"Row 1330\",\"note\":\"the 1,330th of two thousand\"},{\"name\":\"Row 1331\",\"note\":\"the 1,331st of two thousand\"},{\"name\":\"Row 1332\",\"note\":\"the 1,332nd of two thousand\"},{\"name\":\"Row 1333\",\"note\":\"the 1,333rd of two thousand\"},{\"name\":\"Row 1334\",\"note\":\"the 1,334th of two thousand\"},{\"name\":\"Row 1335\",\"note\":\"the 1,335th of two thousand\"},{\"name\":\"Row 1336\",\"note\":\"the 1,336th of two thousand\"},{\"name\":\"Row 1337\",\"note\":\"the 1,337th of two thousand\"},{\"name\":\"Row 1338\",\"note\":\"the 1,338th of two thousand\"},{\"name\":\"Row 1339\",\"note\":\"the 1,339th of two thousand\"},{\"name\":\"Row 1340\",\"note\":\"the 1,340th of two thousand\"},{\"name\":\"Row 1341\",\"note\":\"the 1,341st of two thousand\"},{\"name\":\"Row 1342\",\"note\":\"the 1,342nd of two thousand\"},{\"name\":\"Row 1343\",\"note\":\"the 1,343rd of two thousand\"},{\"name\":\"Row 1344\",\"note\":\"the 1,344th of two thousand\"},{\"name\":\"Row 1345\",\"note\":\"the 1,345th of two thousand\"},{\"name\":\"Row 1346\",\"note\":\"the 1,346th of two thousand\"},{\"name\":\"Row 1347\",\"note\":\"the 1,347th of two thousand\"},{\"name\":\"Row 1348\",\"note\":\"the 1,348th of two thousand\"},{\"name\":\"Row 1349\",\"note\":\"the 1,349th of two thousand\"},{\"name\":\"Row 1350\",\"note\":\"the 1,350th of two thousand\"},{\"name\":\"Row 1351\",\"note\":\"the 1,351st of two thousand\"},{\"name\":\"Row 1352\",\"note\":\"the 1,352nd of two thousand\"},{\"name\":\"Row 1353\",\"note\":\"the 1,353rd of two thousand\"},{\"name\":\"Row 1354\",\"note\":\"the 1,354th of two thousand\"},{\"name\":\"Row 1355\",\"note\":\"the 1,355th of two thousand\"},{\"name\":\"Row 1356\",\"note\":\"the 1,356th of two thousand\"},{\"name\":\"Row 1357\",\"note\":\"the 1,357th of two thousand\"},{\"name\":\"Row 1358\",\"note\":\"the 1,358th of two thousand\"},{\"name\":\"Row 1359\",\"note\":\"the 1,359th of two thousand\"},{\"name\":\"Row 1360\",\"note\":\"the 1,360th of two thousand\"},{\"name\":\"Row 1361\",\"note\":\"the 1,361st of two thousand\"},{\"name\":\"Row 1362\",\"note\":\"the 1,362nd of two thousand\"},{\"name\":\"Row 1363\",\"note\":\"the 1,363rd of two thousand\"},{\"name\":\"Row 1364\",\"note\":\"the 1,364th of two thousand\"},{\"name\":\"Row 1365\",\"note\":\"the 1,365th of two thousand\"},{\"name\":\"Row 1366\",\"note\":\"the 1,366th of two thousand\"},{\"name\":\"Row 1367\",\"note\":\"the 1,367th of two thousand\"},{\"name\":\"Row 1368\",\"note\":\"the 1,368th of two thousand\"},{\"name\":\"Row 1369\",\"note\":\"the 1,369th of two thousand\"},{\"name\":\"Row 1370\",\"note\":\"the 1,370th of two thousand\"},{\"name\":\"Row 1371\",\"note\":\"the 1,371st of two thousand\"},{\"name\":\"Row 1372\",\"note\":\"the 1,372nd of two thousand\"},{\"name\":\"Row 1373\",\"note\":\"the 1,373rd of two thousand\"},{\"name\":\"Row 1374\",\"note\":\"the 1,374th of two thousand\"},{\"name\":\"Row 1375\",\"note\":\"the 1,375th of two thousand\"},{\"name\":\"Row 1376\",\"note\":\"the 1,376th of two thousand\"},{\"name\":\"Row 1377\",\"note\":\"the 1,377th of two thousand\"},{\"name\":\"Row 1378\",\"note\":\"the 1,378th of two thousand\"},{\"name\":\"Row 1379\",\"note\":\"the 1,379th of two thousand\"},{\"name\":\"Row 1380\",\"note\":\"the 1,380th of two thousand\"},{\"name\":\"Row 1381\",\"note\":\"the 1,381st of two thousand\"},{\"name\":\"Row 1382\",\"note\":\"the 1,382nd of two thousand\"},{\"name\":\"Row 1383\",\"note\":\"the 1,383rd of two thousand\"},{\"name\":\"Row 1384\",\"note\":\"the 1,384th of two thousand\"},{\"name\":\"Row 1385\",\"note\":\"the 1,385th of two thousand\"},{\"name\":\"Row 1386\",\"note\":\"the 1,386th of two thousand\"},{\"name\":\"Row 1387\",\"note\":\"the 1,387th of two thousand\"},{\"name\":\"Row 1388\",\"note\":\"the 1,388th of two thousand\"},{\"name\":\"Row 1389\",\"note\":\"the 1,389th of two thousand\"},{\"name\":\"Row 1390\",\"note\":\"the 1,390th of two thousand\"},{\"name\":\"Row 1391\",\"note\":\"the 1,391st of two thousand\"},{\"name\":\"Row 1392\",\"note\":\"the 1,392nd of two thousand\"},{\"name\":\"Row 1393\",\"note\":\"the 1,393rd of two thousand\"},{\"name\":\"Row 1394\",\"note\":\"the 1,394th of two thousand\"},{\"name\":\"Row 1395\",\"note\":\"the 1,395th of two thousand\"},{\"name\":\"Row 1396\",\"note\":\"the 1,396th of two thousand\"},{\"name\":\"Row 1397\",\"note\":\"the 1,397th of two thousand\"},{\"name\":\"Row 1398\",\"note\":\"the 1,398th of two thousand\"},{\"name\":\"Row 1399\",\"note\":\"the 1,399th of two thousand\"},{\"name\":\"Row 1400\",\"note\":\"the 1,400th of two thousand\"},{\"name\":\"Row 1401\",\"note\":\"the 1,401st of two thousand\"},{\"name\":\"Row 1402\",\"note\":\"the 1,402nd of two thousand\"},{\"name\":\"Row 1403\",\"note\":\"the 1,403rd of two thousand\"},{\"name\":\"Row 1404\",\"note\":\"the 1,404th of two thousand\"},{\"name\":\"Row 1405\",\"note\":\"the 1,405th of two thousand\"},{\"name\":\"Row 1406\",\"note\":\"the 1,406th of two thousand\"},{\"name\":\"Row 1407\",\"note\":\"the 1,407th of two thousand\"},{\"name\":\"Row 1408\",\"note\":\"the 1,408th of two thousand\"},{\"name\":\"Row 1409\",\"note\":\"the 1,409th of two thousand\"},{\"name\":\"Row 1410\",\"note\":\"the 1,410th of two thousand\"},{\"name\":\"Row 1411\",\"note\":\"the 1,411th of two thousand\"},{\"name\":\"Row 1412\",\"note\":\"the 1,412th of two thousand\"},{\"name\":\"Row 1413\",\"note\":\"the 1,413th of two thousand\"},{\"name\":\"Row 1414\",\"note\":\"the 1,414th of two thousand\"},{\"name\":\"Row 1415\",\"note\":\"the 1,415th of two thousand\"},{\"name\":\"Row 1416\",\"note\":\"the 1,416th of two thousand\"},{\"name\":\"Row 1417\",\"note\":\"the 1,417th of two thousand\"},{\"name\":\"Row 1418\",\"note\":\"the 1,418th of two thousand\"},{\"name\":\"Row 1419\",\"note\":\"the 1,419th of two thousand\"},{\"name\":\"Row 1420\",\"note\":\"the 1,420th of two thousand\"},{\"name\":\"Row 1421\",\"note\":\"the 1,421st of two thousand\"},{\"name\":\"Row 1422\",\"note\":\"the 1,422nd of two thousand\"},{\"name\":\"Row 1423\",\"note\":\"the 1,423rd of two thousand\"},{\"name\":\"Row 1424\",\"note\":\"the 1,424th of two thousand\"},{\"name\":\"Row 1425\",\"note\":\"the 1,425th of two thousand\"},{\"name\":\"Row 1426\",\"note\":\"the 1,426th of two thousand\"},{\"name\":\"Row 1427\",\"note\":\"the 1,427th of two thousand\"},{\"name\":\"Row 1428\",\"note\":\"the 1,428th of two thousand\"},{\"name\":\"Row 1429\",\"note\":\"the 1,429th of two thousand\"},{\"name\":\"Row 1430\",\"note\":\"the 1,430th of two thousand\"},{\"name\":\"Row 1431\",\"note\":\"the 1,431st of two thousand\"},{\"name\":\"Row 1432\",\"note\":\"the 1,432nd of two thousand\"},{\"name\":\"Row 1433\",\"note\":\"the 1,433rd of two thousand\"},{\"name\":\"Row 1434\",\"note\":\"the 1,434th of two thousand\"},{\"name\":\"Row 1435\",\"note\":\"the 1,435th of two thousand\"},{\"name\":\"Row 1436\",\"note\":\"the 1,436th of two thousand\"},{\"name\":\"Row 1437\",\"note\":\"the 1,437th of two thousand\"},{\"name\":\"Row 1438\",\"note\":\"the 1,438th of two thousand\"},{\"name\":\"Row 1439\",\"note\":\"the 1,439th of two thousand\"},{\"name\":\"Row 1440\",\"note\":\"the 1,440th of two thousand\"},{\"name\":\"Row 1441\",\"note\":\"the 1,441st of two thousand\"},{\"name\":\"Row 1442\",\"note\":\"the 1,442nd of two thousand\"},{\"name\":\"Row 1443\",\"note\":\"the 1,443rd of two thousand\"},{\"name\":\"Row 1444\",\"note\":\"the 1,444th of two thousand\"},{\"name\":\"Row 1445\",\"note\":\"the 1,445th of two thousand\"},{\"name\":\"Row 1446\",\"note\":\"the 1,446th of two thousand\"},{\"name\":\"Row 1447\",\"note\":\"the 1,447th of two thousand\"},{\"name\":\"Row 1448\",\"note\":\"the 1,448th of two thousand\"},{\"name\":\"Row 1449\",\"note\":\"the 1,449th of two thousand\"},{\"name\":\"Row 1450\",\"note\":\"the 1,450th of two thousand\"},{\"name\":\"Row 1451\",\"note\":\"the 1,451st of two thousand\"},{\"name\":\"Row 1452\",\"note\":\"the 1,452nd of two thousand\"},{\"name\":\"Row 1453\",\"note\":\"the 1,453rd of two thousand\"},{\"name\":\"Row 1454\",\"note\":\"the 1,454th of two thousand\"},{\"name\":\"Row 1455\",\"note\":\"the 1,455th of two thousand\"},{\"name\":\"Row 1456\",\"note\":\"the 1,456th of two thousand\"},{\"name\":\"Row 1457\",\"note\":\"the 1,457th of two thousand\"},{\"name\":\"Row 1458\",\"note\":\"the 1,458th of two thousand\"},{\"name\":\"Row 1459\",\"note\":\"the 1,459th of two thousand\"},{\"name\":\"Row 1460\",\"note\":\"the 1,460th of two thousand\"},{\"name\":\"Row 1461\",\"note\":\"the 1,461st of two thousand\"},{\"name\":\"Row 1462\",\"note\":\"the 1,462nd of two thousand\"},{\"name\":\"Row 1463\",\"note\":\"the 1,463rd of two thousand\"},{\"name\":\"Row 1464\",\"note\":\"the 1,464th of two thousand\"},{\"name\":\"Row 1465\",\"note\":\"the 1,465th of two thousand\"},{\"name\":\"Row 1466\",\"note\":\"the 1,466th of two thousand\"},{\"name\":\"Row 1467\",\"note\":\"the 1,467th of two thousand\"},{\"name\":\"Row 1468\",\"note\":\"the 1,468th of two thousand\"},{\"name\":\"Row 1469\",\"note\":\"the 1,469th of two thousand\"},{\"name\":\"Row 1470\",\"note\":\"the 1,470th of two thousand\"},{\"name\":\"Row 1471\",\"note\":\"the 1,471st of two thousand\"},{\"name\":\"Row 1472\",\"note\":\"the 1,472nd of two thousand\"},{\"name\":\"Row 1473\",\"note\":\"the 1,473rd of two thousand\"},{\"name\":\"Row 1474\",\"note\":\"the 1,474th of two thousand\"},{\"name\":\"Row 1475\",\"note\":\"the 1,475th of two thousand\"},{\"name\":\"Row 1476\",\"note\":\"the 1,476th of two thousand\"},{\"name\":\"Row 1477\",\"note\":\"the 1,477th of two thousand\"},{\"name\":\"Row 1478\",\"note\":\"the 1,478th of two thousand\"},{\"name\":\"Row 1479\",\"note\":\"the 1,479th of two thousand\"},{\"name\":\"Row 1480\",\"note\":\"the 1,480th of two thousand\"},{\"name\":\"Row 1481\",\"note\":\"the 1,481st of two thousand\"},{\"name\":\"Row 1482\",\"note\":\"the 1,482nd of two thousand\"},{\"name\":\"Row 1483\",\"note\":\"the 1,483rd of two thousand\"},{\"name\":\"Row 1484\",\"note\":\"the 1,484th of two thousand\"},{\"name\":\"Row 1485\",\"note\":\"the 1,485th of two thousand\"},{\"name\":\"Row 1486\",\"note\":\"the 1,486th of two thousand\"},{\"name\":\"Row 1487\",\"note\":\"the 1,487th of two thousand\"},{\"name\":\"Row 1488\",\"note\":\"the 1,488th of two thousand\"},{\"name\":\"Row 1489\",\"note\":\"the 1,489th of two thousand\"},{\"name\":\"Row 1490\",\"note\":\"the 1,490th of two thousand\"},{\"name\":\"Row 1491\",\"note\":\"the 1,491st of two thousand\"},{\"name\":\"Row 1492\",\"note\":\"the 1,492nd of two thousand\"},{\"name\":\"Row 1493\",\"note\":\"the 1,493rd of two thousand\"},{\"name\":\"Row 1494\",\"note\":\"the 1,494th of two thousand\"},{\"name\":\"Row 1495\",\"note\":\"the 1,495th of two thousand\"},{\"name\":\"Row 1496\",\"note\":\"the 1,496th of two thousand\"},{\"name\":\"Row 1497\",\"note\":\"the 1,497th of two thousand\"},{\"name\":\"Row 1498\",\"note\":\"the 1,498th of two thousand\"},{\"name\":\"Row 1499\",\"note\":\"the 1,499th of two thousand\"},{\"name\":\"Row 1500\",\"note\":\"the 1,500th of two thousand\"},{\"name\":\"Row 1501\",\"note\":\"the 1,501st of two thousand\"},{\"name\":\"Row 1502\",\"note\":\"the 1,502nd of two thousand\"},{\"name\":\"Row 1503\",\"note\":\"the 1,503rd of two thousand\"},{\"name\":\"Row 1504\",\"note\":\"the 1,504th of two thousand\"},{\"name\":\"Row 1505\",\"note\":\"the 1,505th of two thousand\"},{\"name\":\"Row 1506\",\"note\":\"the 1,506th of two thousand\"},{\"name\":\"Row 1507\",\"note\":\"the 1,507th of two thousand\"},{\"name\":\"Row 1508\",\"note\":\"the 1,508th of two thousand\"},{\"name\":\"Row 1509\",\"note\":\"the 1,509th of two thousand\"},{\"name\":\"Row 1510\",\"note\":\"the 1,510th of two thousand\"},{\"name\":\"Row 1511\",\"note\":\"the 1,511th of two thousand\"},{\"name\":\"Row 1512\",\"note\":\"the 1,512th of two thousand\"},{\"name\":\"Row 1513\",\"note\":\"the 1,513th of two thousand\"},{\"name\":\"Row 1514\",\"note\":\"the 1,514th of two thousand\"},{\"name\":\"Row 1515\",\"note\":\"the 1,515th of two thousand\"},{\"name\":\"Row 1516\",\"note\":\"the 1,516th of two thousand\"},{\"name\":\"Row 1517\",\"note\":\"the 1,517th of two thousand\"},{\"name\":\"Row 1518\",\"note\":\"the 1,518th of two thousand\"},{\"name\":\"Row 1519\",\"note\":\"the 1,519th of two thousand\"},{\"name\":\"Row 1520\",\"note\":\"the 1,520th of two thousand\"},{\"name\":\"Row 1521\",\"note\":\"the 1,521st of two thousand\"},{\"name\":\"Row 1522\",\"note\":\"the 1,522nd of two thousand\"},{\"name\":\"Row 1523\",\"note\":\"the 1,523rd of two thousand\"},{\"name\":\"Row 1524\",\"note\":\"the 1,524th of two thousand\"},{\"name\":\"Row 1525\",\"note\":\"the 1,525th of two thousand\"},{\"name\":\"Row 1526\",\"note\":\"the 1,526th of two thousand\"},{\"name\":\"Row 1527\",\"note\":\"the 1,527th of two thousand\"},{\"name\":\"Row 1528\",\"note\":\"the 1,528th of two thousand\"},{\"name\":\"Row 1529\",\"note\":\"the 1,529th of two thousand\"},{\"name\":\"Row 1530\",\"note\":\"the 1,530th of two thousand\"},{\"name\":\"Row 1531\",\"note\":\"the 1,531st of two thousand\"},{\"name\":\"Row 1532\",\"note\":\"the 1,532nd of two thousand\"},{\"name\":\"Row 1533\",\"note\":\"the 1,533rd of two thousand\"},{\"name\":\"Row 1534\",\"note\":\"the 1,534th of two thousand\"},{\"name\":\"Row 1535\",\"note\":\"the 1,535th of two thousand\"},{\"name\":\"Row 1536\",\"note\":\"the 1,536th of two thousand\"},{\"name\":\"Row 1537\",\"note\":\"the 1,537th of two thousand\"},{\"name\":\"Row 1538\",\"note\":\"the 1,538th of two thousand\"},{\"name\":\"Row 1539\",\"note\":\"the 1,539th of two thousand\"},{\"name\":\"Row 1540\",\"note\":\"the 1,540th of two thousand\"},{\"name\":\"Row 1541\",\"note\":\"the 1,541st of two thousand\"},{\"name\":\"Row 1542\",\"note\":\"the 1,542nd of two thousand\"},{\"name\":\"Row 1543\",\"note\":\"the 1,543rd of two thousand\"},{\"name\":\"Row 1544\",\"note\":\"the 1,544th of two thousand\"},{\"name\":\"Row 1545\",\"note\":\"the 1,545th of two thousand\"},{\"name\":\"Row 1546\",\"note\":\"the 1,546th of two thousand\"},{\"name\":\"Row 1547\",\"note\":\"the 1,547th of two thousand\"},{\"name\":\"Row 1548\",\"note\":\"the 1,548th of two thousand\"},{\"name\":\"Row 1549\",\"note\":\"the 1,549th of two thousand\"},{\"name\":\"Row 1550\",\"note\":\"the 1,550th of two thousand\"},{\"name\":\"Row 1551\",\"note\":\"the 1,551st of two thousand\"},{\"name\":\"Row 1552\",\"note\":\"the 1,552nd of two thousand\"},{\"name\":\"Row 1553\",\"note\":\"the 1,553rd of two thousand\"},{\"name\":\"Row 1554\",\"note\":\"the 1,554th of two thousand\"},{\"name\":\"Row 1555\",\"note\":\"the 1,555th of two thousand\"},{\"name\":\"Row 1556\",\"note\":\"the 1,556th of two thousand\"},{\"name\":\"Row 1557\",\"note\":\"the 1,557th of two thousand\"},{\"name\":\"Row 1558\",\"note\":\"the 1,558th of two thousand\"},{\"name\":\"Row 1559\",\"note\":\"the 1,559th of two thousand\"},{\"name\":\"Row 1560\",\"note\":\"the 1,560th of two thousand\"},{\"name\":\"Row 1561\",\"note\":\"the 1,561st of two thousand\"},{\"name\":\"Row 1562\",\"note\":\"the 1,562nd of two thousand\"},{\"name\":\"Row 1563\",\"note\":\"the 1,563rd of two thousand\"},{\"name\":\"Row 1564\",\"note\":\"the 1,564th of two thousand\"},{\"name\":\"Row 1565\",\"note\":\"the 1,565th of two thousand\"},{\"name\":\"Row 1566\",\"note\":\"the 1,566th of two thousand\"},{\"name\":\"Row 1567\",\"note\":\"the 1,567th of two thousand\"},{\"name\":\"Row 1568\",\"note\":\"the 1,568th of two thousand\"},{\"name\":\"Row 1569\",\"note\":\"the 1,569th of two thousand\"},{\"name\":\"Row 1570\",\"note\":\"the 1,570th of two thousand\"},{\"name\":\"Row 1571\",\"note\":\"the 1,571st of two thousand\"},{\"name\":\"Row 1572\",\"note\":\"the 1,572nd of two thousand\"},{\"name\":\"Row 1573\",\"note\":\"the 1,573rd of two thousand\"},{\"name\":\"Row 1574\",\"note\":\"the 1,574th of two thousand\"},{\"name\":\"Row 1575\",\"note\":\"the 1,575th of two thousand\"},{\"name\":\"Row 1576\",\"note\":\"the 1,576th of two thousand\"},{\"name\":\"Row 1577\",\"note\":\"the 1,577th of two thousand\"},{\"name\":\"Row 1578\",\"note\":\"the 1,578th of two thousand\"},{\"name\":\"Row 1579\",\"note\":\"the 1,579th of two thousand\"},{\"name\":\"Row 1580\",\"note\":\"the 1,580th of two thousand\"},{\"name\":\"Row 1581\",\"note\":\"the 1,581st of two thousand\"},{\"name\":\"Row 1582\",\"note\":\"the 1,582nd of two thousand\"},{\"name\":\"Row 1583\",\"note\":\"the 1,583rd of two thousand\"},{\"name\":\"Row 1584\",\"note\":\"the 1,584th of two thousand\"},{\"name\":\"Row 1585\",\"note\":\"the 1,585th of two thousand\"},{\"name\":\"Row 1586\",\"note\":\"the 1,586th of two thousand\"},{\"name\":\"Row 1587\",\"note\":\"the 1,587th of two thousand\"},{\"name\":\"Row 1588\",\"note\":\"the 1,588th of two thousand\"},{\"name\":\"Row 1589\",\"note\":\"the 1,589th of two thousand\"},{\"name\":\"Row 1590\",\"note\":\"the 1,590th of two thousand\"},{\"name\":\"Row 1591\",\"note\":\"the 1,591st of two thousand\"},{\"name\":\"Row 1592\",\"note\":\"the 1,592nd of two thousand\"},{\"name\":\"Row 1593\",\"note\":\"the 1,593rd of two thousand\"},{\"name\":\"Row 1594\",\"note\":\"the 1,594th of two thousand\"},{\"name\":\"Row 1595\",\"note\":\"the 1,595th of two thousand\"},{\"name\":\"Row 1596\",\"note\":\"the 1,596th of two thousand\"},{\"name\":\"Row 1597\",\"note\":\"the 1,597th of two thousand\"},{\"name\":\"Row 1598\",\"note\":\"the 1,598th of two thousand\"},{\"name\":\"Row 1599\",\"note\":\"the 1,599th of two thousand\"},{\"name\":\"Row 1600\",\"note\":\"the 1,600th of two thousand\"},{\"name\":\"Row 1601\",\"note\":\"the 1,601st of two thousand\"},{\"name\":\"Row 1602\",\"note\":\"the 1,602nd of two thousand\"},{\"name\":\"Row 1603\",\"note\":\"the 1,603rd of two thousand\"},{\"name\":\"Row 1604\",\"note\":\"the 1,604th of two thousand\"},{\"name\":\"Row 1605\",\"note\":\"the 1,605th of two thousand\"},{\"name\":\"Row 1606\",\"note\":\"the 1,606th of two thousand\"},{\"name\":\"Row 1607\",\"note\":\"the 1,607th of two thousand\"},{\"name\":\"Row 1608\",\"note\":\"the 1,608th of two thousand\"},{\"name\":\"Row 1609\",\"note\":\"the 1,609th of two thousand\"},{\"name\":\"Row 1610\",\"note\":\"the 1,610th of two thousand\"},{\"name\":\"Row 1611\",\"note\":\"the 1,611th of two thousand\"},{\"name\":\"Row 1612\",\"note\":\"the 1,612th of two thousand\"},{\"name\":\"Row 1613\",\"note\":\"the 1,613th of two thousand\"},{\"name\":\"Row 1614\",\"note\":\"the 1,614th of two thousand\"},{\"name\":\"Row 1615\",\"note\":\"the 1,615th of two thousand\"},{\"name\":\"Row 1616\",\"note\":\"the 1,616th of two thousand\"},{\"name\":\"Row 1617\",\"note\":\"the 1,617th of two thousand\"},{\"name\":\"Row 1618\",\"note\":\"the 1,618th of two thousand\"},{\"name\":\"Row 1619\",\"note\":\"the 1,619th of two thousand\"},{\"name\":\"Row 1620\",\"note\":\"the 1,620th of two thousand\"},{\"name\":\"Row 1621\",\"note\":\"the 1,621st of two thousand\"},{\"name\":\"Row 1622\",\"note\":\"the 1,622nd of two thousand\"},{\"name\":\"Row 1623\",\"note\":\"the 1,623rd of two thousand\"},{\"name\":\"Row 1624\",\"note\":\"the 1,624th of two thousand\"},{\"name\":\"Row 1625\",\"note\":\"the 1,625th of two thousand\"},{\"name\":\"Row 1626\",\"note\":\"the 1,626th of two thousand\"},{\"name\":\"Row 1627\",\"note\":\"the 1,627th of two thousand\"},{\"name\":\"Row 1628\",\"note\":\"the 1,628th of two thousand\"},{\"name\":\"Row 1629\",\"note\":\"the 1,629th of two thousand\"},{\"name\":\"Row 1630\",\"note\":\"the 1,630th of two thousand\"},{\"name\":\"Row 1631\",\"note\":\"the 1,631st of two thousand\"},{\"name\":\"Row 1632\",\"note\":\"the 1,632nd of two thousand\"},{\"name\":\"Row 1633\",\"note\":\"the 1,633rd of two thousand\"},{\"name\":\"Row 1634\",\"note\":\"the 1,634th of two thousand\"},{\"name\":\"Row 1635\",\"note\":\"the 1,635th of two thousand\"},{\"name\":\"Row 1636\",\"note\":\"the 1,636th of two thousand\"},{\"name\":\"Row 1637\",\"note\":\"the 1,637th of two thousand\"},{\"name\":\"Row 1638\",\"note\":\"the 1,638th of two thousand\"},{\"name\":\"Row 1639\",\"note\":\"the 1,639th of two thousand\"},{\"name\":\"Row 1640\",\"note\":\"the 1,640th of two thousand\"},{\"name\":\"Row 1641\",\"note\":\"the 1,641st of two thousand\"},{\"name\":\"Row 1642\",\"note\":\"the 1,642nd of two thousand\"},{\"name\":\"Row 1643\",\"note\":\"the 1,643rd of two thousand\"},{\"name\":\"Row 1644\",\"note\":\"the 1,644th of two thousand\"},{\"name\":\"Row 1645\",\"note\":\"the 1,645th of two thousand\"},{\"name\":\"Row 1646\",\"note\":\"the 1,646th of two thousand\"},{\"name\":\"Row 1647\",\"note\":\"the 1,647th of two thousand\"},{\"name\":\"Row 1648\",\"note\":\"the 1,648th of two thousand\"},{\"name\":\"Row 1649\",\"note\":\"the 1,649th of two thousand\"},{\"name\":\"Row 1650\",\"note\":\"the 1,650th of two thousand\"},{\"name\":\"Row 1651\",\"note\":\"the 1,651st of two thousand\"},{\"name\":\"Row 1652\",\"note\":\"the 1,652nd of two thousand\"},{\"name\":\"Row 1653\",\"note\":\"the 1,653rd of two thousand\"},{\"name\":\"Row 1654\",\"note\":\"the 1,654th of two thousand\"},{\"name\":\"Row 1655\",\"note\":\"the 1,655th of two thousand\"},{\"name\":\"Row 1656\",\"note\":\"the 1,656th of two thousand\"},{\"name\":\"Row 1657\",\"note\":\"the 1,657th of two thousand\"},{\"name\":\"Row 1658\",\"note\":\"the 1,658th of two thousand\"},{\"name\":\"Row 1659\",\"note\":\"the 1,659th of two thousand\"},{\"name\":\"Row 1660\",\"note\":\"the 1,660th of two thousand\"},{\"name\":\"Row 1661\",\"note\":\"the 1,661st of two thousand\"},{\"name\":\"Row 1662\",\"note\":\"the 1,662nd of two thousand\"},{\"name\":\"Row 1663\",\"note\":\"the 1,663rd of two thousand\"},{\"name\":\"Row 1664\",\"note\":\"the 1,664th of two thousand\"},{\"name\":\"Row 1665\",\"note\":\"the 1,665th of two thousand\"},{\"name\":\"Row 1666\",\"note\":\"the 1,666th of two thousand\"},{\"name\":\"Row 1667\",\"note\":\"the 1,667th of two thousand\"},{\"name\":\"Row 1668\",\"note\":\"the 1,668th of two thousand\"},{\"name\":\"Row 1669\",\"note\":\"the 1,669th of two thousand\"},{\"name\":\"Row 1670\",\"note\":\"the 1,670th of two thousand\"},{\"name\":\"Row 1671\",\"note\":\"the 1,671st of two thousand\"},{\"name\":\"Row 1672\",\"note\":\"the 1,672nd of two thousand\"},{\"name\":\"Row 1673\",\"note\":\"the 1,673rd of two thousand\"},{\"name\":\"Row 1674\",\"note\":\"the 1,674th of two thousand\"},{\"name\":\"Row 1675\",\"note\":\"the 1,675th of two thousand\"},{\"name\":\"Row 1676\",\"note\":\"the 1,676th of two thousand\"},{\"name\":\"Row 1677\",\"note\":\"the 1,677th of two thousand\"},{\"name\":\"Row 1678\",\"note\":\"the 1,678th of two thousand\"},{\"name\":\"Row 1679\",\"note\":\"the 1,679th of two thousand\"},{\"name\":\"Row 1680\",\"note\":\"the 1,680th of two thousand\"},{\"name\":\"Row 1681\",\"note\":\"the 1,681st of two thousand\"},{\"name\":\"Row 1682\",\"note\":\"the 1,682nd of two thousand\"},{\"name\":\"Row 1683\",\"note\":\"the 1,683rd of two thousand\"},{\"name\":\"Row 1684\",\"note\":\"the 1,684th of two thousand\"},{\"name\":\"Row 1685\",\"note\":\"the 1,685th of two thousand\"},{\"name\":\"Row 1686\",\"note\":\"the 1,686th of two thousand\"},{\"name\":\"Row 1687\",\"note\":\"the 1,687th of two thousand\"},{\"name\":\"Row 1688\",\"note\":\"the 1,688th of two thousand\"},{\"name\":\"Row 1689\",\"note\":\"the 1,689th of two thousand\"},{\"name\":\"Row 1690\",\"note\":\"the 1,690th of two thousand\"},{\"name\":\"Row 1691\",\"note\":\"the 1,691st of two thousand\"},{\"name\":\"Row 1692\",\"note\":\"the 1,692nd of two thousand\"},{\"name\":\"Row 1693\",\"note\":\"the 1,693rd of two thousand\"},{\"name\":\"Row 1694\",\"note\":\"the 1,694th of two thousand\"},{\"name\":\"Row 1695\",\"note\":\"the 1,695th of two thousand\"},{\"name\":\"Row 1696\",\"note\":\"the 1,696th of two thousand\"},{\"name\":\"Row 1697\",\"note\":\"the 1,697th of two thousand\"},{\"name\":\"Row 1698\",\"note\":\"the 1,698th of two thousand\"},{\"name\":\"Row 1699\",\"note\":\"the 1,699th of two thousand\"},{\"name\":\"Row 1700\",\"note\":\"the 1,700th of two thousand\"},{\"name\":\"Row 1701\",\"note\":\"the 1,701st of two thousand\"},{\"name\":\"Row 1702\",\"note\":\"the 1,702nd of two thousand\"},{\"name\":\"Row 1703\",\"note\":\"the 1,703rd of two thousand\"},{\"name\":\"Row 1704\",\"note\":\"the 1,704th of two thousand\"},{\"name\":\"Row 1705\",\"note\":\"the 1,705th of two thousand\"},{\"name\":\"Row 1706\",\"note\":\"the 1,706th of two thousand\"},{\"name\":\"Row 1707\",\"note\":\"the 1,707th of two thousand\"},{\"name\":\"Row 1708\",\"note\":\"the 1,708th of two thousand\"},{\"name\":\"Row 1709\",\"note\":\"the 1,709th of two thousand\"},{\"name\":\"Row 1710\",\"note\":\"the 1,710th of two thousand\"},{\"name\":\"Row 1711\",\"note\":\"the 1,711th of two thousand\"},{\"name\":\"Row 1712\",\"note\":\"the 1,712th of two thousand\"},{\"name\":\"Row 1713\",\"note\":\"the 1,713th of two thousand\"},{\"name\":\"Row 1714\",\"note\":\"the 1,714th of two thousand\"},{\"name\":\"Row 1715\",\"note\":\"the 1,715th of two thousand\"},{\"name\":\"Row 1716\",\"note\":\"the 1,716th of two thousand\"},{\"name\":\"Row 1717\",\"note\":\"the 1,717th of two thousand\"},{\"name\":\"Row 1718\",\"note\":\"the 1,718th of two thousand\"},{\"name\":\"Row 1719\",\"note\":\"the 1,719th of two thousand\"},{\"name\":\"Row 1720\",\"note\":\"the 1,720th of two thousand\"},{\"name\":\"Row 1721\",\"note\":\"the 1,721st of two thousand\"},{\"name\":\"Row 1722\",\"note\":\"the 1,722nd of two thousand\"},{\"name\":\"Row 1723\",\"note\":\"the 1,723rd of two thousand\"},{\"name\":\"Row 1724\",\"note\":\"the 1,724th of two thousand\"},{\"name\":\"Row 1725\",\"note\":\"the 1,725th of two thousand\"},{\"name\":\"Row 1726\",\"note\":\"the 1,726th of two thousand\"},{\"name\":\"Row 1727\",\"note\":\"the 1,727th of two thousand\"},{\"name\":\"Row 1728\",\"note\":\"the 1,728th of two thousand\"},{\"name\":\"Row 1729\",\"note\":\"the 1,729th of two thousand\"},{\"name\":\"Row 1730\",\"note\":\"the 1,730th of two thousand\"},{\"name\":\"Row 1731\",\"note\":\"the 1,731st of two thousand\"},{\"name\":\"Row 1732\",\"note\":\"the 1,732nd of two thousand\"},{\"name\":\"Row 1733\",\"note\":\"the 1,733rd of two thousand\"},{\"name\":\"Row 1734\",\"note\":\"the 1,734th of two thousand\"},{\"name\":\"Row 1735\",\"note\":\"the 1,735th of two thousand\"},{\"name\":\"Row 1736\",\"note\":\"the 1,736th of two thousand\"},{\"name\":\"Row 1737\",\"note\":\"the 1,737th of two thousand\"},{\"name\":\"Row 1738\",\"note\":\"the 1,738th of two thousand\"},{\"name\":\"Row 1739\",\"note\":\"the 1,739th of two thousand\"},{\"name\":\"Row 1740\",\"note\":\"the 1,740th of two thousand\"},{\"name\":\"Row 1741\",\"note\":\"the 1,741st of two thousand\"},{\"name\":\"Row 1742\",\"note\":\"the 1,742nd of two thousand\"},{\"name\":\"Row 1743\",\"note\":\"the 1,743rd of two thousand\"},{\"name\":\"Row 1744\",\"note\":\"the 1,744th of two thousand\"},{\"name\":\"Row 1745\",\"note\":\"the 1,745th of two thousand\"},{\"name\":\"Row 1746\",\"note\":\"the 1,746th of two thousand\"},{\"name\":\"Row 1747\",\"note\":\"the 1,747th of two thousand\"},{\"name\":\"Row 1748\",\"note\":\"the 1,748th of two thousand\"},{\"name\":\"Row 1749\",\"note\":\"the 1,749th of two thousand\"},{\"name\":\"Row 1750\",\"note\":\"the 1,750th of two thousand\"},{\"name\":\"Row 1751\",\"note\":\"the 1,751st of two thousand\"},{\"name\":\"Row 1752\",\"note\":\"the 1,752nd of two thousand\"},{\"name\":\"Row 1753\",\"note\":\"the 1,753rd of two thousand\"},{\"name\":\"Row 1754\",\"note\":\"the 1,754th of two thousand\"},{\"name\":\"Row 1755\",\"note\":\"the 1,755th of two thousand\"},{\"name\":\"Row 1756\",\"note\":\"the 1,756th of two thousand\"},{\"name\":\"Row 1757\",\"note\":\"the 1,757th of two thousand\"},{\"name\":\"Row 1758\",\"note\":\"the 1,758th of two thousand\"},{\"name\":\"Row 1759\",\"note\":\"the 1,759th of two thousand\"},{\"name\":\"Row 1760\",\"note\":\"the 1,760th of two thousand\"},{\"name\":\"Row 1761\",\"note\":\"the 1,761st of two thousand\"},{\"name\":\"Row 1762\",\"note\":\"the 1,762nd of two thousand\"},{\"name\":\"Row 1763\",\"note\":\"the 1,763rd of two thousand\"},{\"name\":\"Row 1764\",\"note\":\"the 1,764th of two thousand\"},{\"name\":\"Row 1765\",\"note\":\"the 1,765th of two thousand\"},{\"name\":\"Row 1766\",\"note\":\"the 1,766th of two thousand\"},{\"name\":\"Row 1767\",\"note\":\"the 1,767th of two thousand\"},{\"name\":\"Row 1768\",\"note\":\"the 1,768th of two thousand\"},{\"name\":\"Row 1769\",\"note\":\"the 1,769th of two thousand\"},{\"name\":\"Row 1770\",\"note\":\"the 1,770th of two thousand\"},{\"name\":\"Row 1771\",\"note\":\"the 1,771st of two thousand\"},{\"name\":\"Row 1772\",\"note\":\"the 1,772nd of two thousand\"},{\"name\":\"Row 1773\",\"note\":\"the 1,773rd of two thousand\"},{\"name\":\"Row 1774\",\"note\":\"the 1,774th of two thousand\"},{\"name\":\"Row 1775\",\"note\":\"the 1,775th of two thousand\"},{\"name\":\"Row 1776\",\"note\":\"the 1,776th of two thousand\"},{\"name\":\"Row 1777\",\"note\":\"the 1,777th of two thousand\"},{\"name\":\"Row 1778\",\"note\":\"the 1,778th of two thousand\"},{\"name\":\"Row 1779\",\"note\":\"the 1,779th of two thousand\"},{\"name\":\"Row 1780\",\"note\":\"the 1,780th of two thousand\"},{\"name\":\"Row 1781\",\"note\":\"the 1,781st of two thousand\"},{\"name\":\"Row 1782\",\"note\":\"the 1,782nd of two thousand\"},{\"name\":\"Row 1783\",\"note\":\"the 1,783rd of two thousand\"},{\"name\":\"Row 1784\",\"note\":\"the 1,784th of two thousand\"},{\"name\":\"Row 1785\",\"note\":\"the 1,785th of two thousand\"},{\"name\":\"Row 1786\",\"note\":\"the 1,786th of two thousand\"},{\"name\":\"Row 1787\",\"note\":\"the 1,787th of two thousand\"},{\"name\":\"Row 1788\",\"note\":\"the 1,788th of two thousand\"},{\"name\":\"Row 1789\",\"note\":\"the 1,789th of two thousand\"},{\"name\":\"Row 1790\",\"note\":\"the 1,790th of two thousand\"},{\"name\":\"Row 1791\",\"note\":\"the 1,791st of two thousand\"},{\"name\":\"Row 1792\",\"note\":\"the 1,792nd of two thousand\"},{\"name\":\"Row 1793\",\"note\":\"the 1,793rd of two thousand\"},{\"name\":\"Row 1794\",\"note\":\"the 1,794th of two thousand\"},{\"name\":\"Row 1795\",\"note\":\"the 1,795th of two thousand\"},{\"name\":\"Row 1796\",\"note\":\"the 1,796th of two thousand\"},{\"name\":\"Row 1797\",\"note\":\"the 1,797th of two thousand\"},{\"name\":\"Row 1798\",\"note\":\"the 1,798th of two thousand\"},{\"name\":\"Row 1799\",\"note\":\"the 1,799th of two thousand\"},{\"name\":\"Row 1800\",\"note\":\"the 1,800th of two thousand\"},{\"name\":\"Row 1801\",\"note\":\"the 1,801st of two thousand\"},{\"name\":\"Row 1802\",\"note\":\"the 1,802nd of two thousand\"},{\"name\":\"Row 1803\",\"note\":\"the 1,803rd of two thousand\"},{\"name\":\"Row 1804\",\"note\":\"the 1,804th of two thousand\"},{\"name\":\"Row 1805\",\"note\":\"the 1,805th of two thousand\"},{\"name\":\"Row 1806\",\"note\":\"the 1,806th of two thousand\"},{\"name\":\"Row 1807\",\"note\":\"the 1,807th of two thousand\"},{\"name\":\"Row 1808\",\"note\":\"the 1,808th of two thousand\"},{\"name\":\"Row 1809\",\"note\":\"the 1,809th of two thousand\"},{\"name\":\"Row 1810\",\"note\":\"the 1,810th of two thousand\"},{\"name\":\"Row 1811\",\"note\":\"the 1,811th of two thousand\"},{\"name\":\"Row 1812\",\"note\":\"the 1,812th of two thousand\"},{\"name\":\"Row 1813\",\"note\":\"the 1,813th of two thousand\"},{\"name\":\"Row 1814\",\"note\":\"the 1,814th of two thousand\"},{\"name\":\"Row 1815\",\"note\":\"the 1,815th of two thousand\"},{\"name\":\"Row 1816\",\"note\":\"the 1,816th of two thousand\"},{\"name\":\"Row 1817\",\"note\":\"the 1,817th of two thousand\"},{\"name\":\"Row 1818\",\"note\":\"the 1,818th of two thousand\"},{\"name\":\"Row 1819\",\"note\":\"the 1,819th of two thousand\"},{\"name\":\"Row 1820\",\"note\":\"the 1,820th of two thousand\"},{\"name\":\"Row 1821\",\"note\":\"the 1,821st of two thousand\"},{\"name\":\"Row 1822\",\"note\":\"the 1,822nd of two thousand\"},{\"name\":\"Row 1823\",\"note\":\"the 1,823rd of two thousand\"},{\"name\":\"Row 1824\",\"note\":\"the 1,824th of two thousand\"},{\"name\":\"Row 1825\",\"note\":\"the 1,825th of two thousand\"},{\"name\":\"Row 1826\",\"note\":\"the 1,826th of two thousand\"},{\"name\":\"Row 1827\",\"note\":\"the 1,827th of two thousand\"},{\"name\":\"Row 1828\",\"note\":\"the 1,828th of two thousand\"},{\"name\":\"Row 1829\",\"note\":\"the 1,829th of two thousand\"},{\"name\":\"Row 1830\",\"note\":\"the 1,830th of two thousand\"},{\"name\":\"Row 1831\",\"note\":\"the 1,831st of two thousand\"},{\"name\":\"Row 1832\",\"note\":\"the 1,832nd of two thousand\"},{\"name\":\"Row 1833\",\"note\":\"the 1,833rd of two thousand\"},{\"name\":\"Row 1834\",\"note\":\"the 1,834th of two thousand\"},{\"name\":\"Row 1835\",\"note\":\"the 1,835th of two thousand\"},{\"name\":\"Row 1836\",\"note\":\"the 1,836th of two thousand\"},{\"name\":\"Row 1837\",\"note\":\"the 1,837th of two thousand\"},{\"name\":\"Row 1838\",\"note\":\"the 1,838th of two thousand\"},{\"name\":\"Row 1839\",\"note\":\"the 1,839th of two thousand\"},{\"name\":\"Row 1840\",\"note\":\"the 1,840th of two thousand\"},{\"name\":\"Row 1841\",\"note\":\"the 1,841st of two thousand\"},{\"name\":\"Row 1842\",\"note\":\"the 1,842nd of two thousand\"},{\"name\":\"Row 1843\",\"note\":\"the 1,843rd of two thousand\"},{\"name\":\"Row 1844\",\"note\":\"the 1,844th of two thousand\"},{\"name\":\"Row 1845\",\"note\":\"the 1,845th of two thousand\"},{\"name\":\"Row 1846\",\"note\":\"the 1,846th of two thousand\"},{\"name\":\"Row 1847\",\"note\":\"the 1,847th of two thousand\"},{\"name\":\"Row 1848\",\"note\":\"the 1,848th of two thousand\"},{\"name\":\"Row 1849\",\"note\":\"the 1,849th of two thousand\"},{\"name\":\"Row 1850\",\"note\":\"the 1,850th of two thousand\"},{\"name\":\"Row 1851\",\"note\":\"the 1,851st of two thousand\"},{\"name\":\"Row 1852\",\"note\":\"the 1,852nd of two thousand\"},{\"name\":\"Row 1853\",\"note\":\"the 1,853rd of two thousand\"},{\"name\":\"Row 1854\",\"note\":\"the 1,854th of two thousand\"},{\"name\":\"Row 1855\",\"note\":\"the 1,855th of two thousand\"},{\"name\":\"Row 1856\",\"note\":\"the 1,856th of two thousand\"},{\"name\":\"Row 1857\",\"note\":\"the 1,857th of two thousand\"},{\"name\":\"Row 1858\",\"note\":\"the 1,858th of two thousand\"},{\"name\":\"Row 1859\",\"note\":\"the 1,859th of two thousand\"},{\"name\":\"Row 1860\",\"note\":\"the 1,860th of two thousand\"},{\"name\":\"Row 1861\",\"note\":\"the 1,861st of two thousand\"},{\"name\":\"Row 1862\",\"note\":\"the 1,862nd of two thousand\"},{\"name\":\"Row 1863\",\"note\":\"the 1,863rd of two thousand\"},{\"name\":\"Row 1864\",\"note\":\"the 1,864th of two thousand\"},{\"name\":\"Row 1865\",\"note\":\"the 1,865th of two thousand\"},{\"name\":\"Row 1866\",\"note\":\"the 1,866th of two thousand\"},{\"name\":\"Row 1867\",\"note\":\"the 1,867th of two thousand\"},{\"name\":\"Row 1868\",\"note\":\"the 1,868th of two thousand\"},{\"name\":\"Row 1869\",\"note\":\"the 1,869th of two thousand\"},{\"name\":\"Row 1870\",\"note\":\"the 1,870th of two thousand\"},{\"name\":\"Row 1871\",\"note\":\"the 1,871st of two thousand\"},{\"name\":\"Row 1872\",\"note\":\"the 1,872nd of two thousand\"},{\"name\":\"Row 1873\",\"note\":\"the 1,873rd of two thousand\"},{\"name\":\"Row 1874\",\"note\":\"the 1,874th of two thousand\"},{\"name\":\"Row 1875\",\"note\":\"the 1,875th of two thousand\"},{\"name\":\"Row 1876\",\"note\":\"the 1,876th of two thousand\"},{\"name\":\"Row 1877\",\"note\":\"the 1,877th of two thousand\"},{\"name\":\"Row 1878\",\"note\":\"the 1,878th of two thousand\"},{\"name\":\"Row 1879\",\"note\":\"the 1,879th of two thousand\"},{\"name\":\"Row 1880\",\"note\":\"the 1,880th of two thousand\"},{\"name\":\"Row 1881\",\"note\":\"the 1,881st of two thousand\"},{\"name\":\"Row 1882\",\"note\":\"the 1,882nd of two thousand\"},{\"name\":\"Row 1883\",\"note\":\"the 1,883rd of two thousand\"},{\"name\":\"Row 1884\",\"note\":\"the 1,884th of two thousand\"},{\"name\":\"Row 1885\",\"note\":\"the 1,885th of two thousand\"},{\"name\":\"Row 1886\",\"note\":\"the 1,886th of two thousand\"},{\"name\":\"Row 1887\",\"note\":\"the 1,887th of two thousand\"},{\"name\":\"Row 1888\",\"note\":\"the 1,888th of two thousand\"},{\"name\":\"Row 1889\",\"note\":\"the 1,889th of two thousand\"},{\"name\":\"Row 1890\",\"note\":\"the 1,890th of two thousand\"},{\"name\":\"Row 1891\",\"note\":\"the 1,891st of two thousand\"},{\"name\":\"Row 1892\",\"note\":\"the 1,892nd of two thousand\"},{\"name\":\"Row 1893\",\"note\":\"the 1,893rd of two thousand\"},{\"name\":\"Row 1894\",\"note\":\"the 1,894th of two thousand\"},{\"name\":\"Row 1895\",\"note\":\"the 1,895th of two thousand\"},{\"name\":\"Row 1896\",\"note\":\"the 1,896th of two thousand\"},{\"name\":\"Row 1897\",\"note\":\"the 1,897th of two thousand\"},{\"name\":\"Row 1898\",\"note\":\"the 1,898th of two thousand\"},{\"name\":\"Row 1899\",\"note\":\"the 1,899th of two thousand\"},{\"name\":\"Row 1900\",\"note\":\"the 1,900th of two thousand\"},{\"name\":\"Row 1901\",\"note\":\"the 1,901st of two thousand\"},{\"name\":\"Row 1902\",\"note\":\"the 1,902nd of two thousand\"},{\"name\":\"Row 1903\",\"note\":\"the 1,903rd of two thousand\"},{\"name\":\"Row 1904\",\"note\":\"the 1,904th of two thousand\"},{\"name\":\"Row 1905\",\"note\":\"the 1,905th of two thousand\"},{\"name\":\"Row 1906\",\"note\":\"the 1,906th of two thousand\"},{\"name\":\"Row 1907\",\"note\":\"the 1,907th of two thousand\"},{\"name\":\"Row 1908\",\"note\":\"the 1,908th of two thousand\"},{\"name\":\"Row 1909\",\"note\":\"the 1,909th of two thousand\"},{\"name\":\"Row 1910\",\"note\":\"the 1,910th of two thousand\"},{\"name\":\"Row 1911\",\"note\":\"the 1,911th of two thousand\"},{\"name\":\"Row 1912\",\"note\":\"the 1,912th of two thousand\"},{\"name\":\"Row 1913\",\"note\":\"the 1,913th of two thousand\"},{\"name\":\"Row 1914\",\"note\":\"the 1,914th of two thousand\"},{\"name\":\"Row 1915\",\"note\":\"the 1,915th of two thousand\"},{\"name\":\"Row 1916\",\"note\":\"the 1,916th of two thousand\"},{\"name\":\"Row 1917\",\"note\":\"the 1,917th of two thousand\"},{\"name\":\"Row 1918\",\"note\":\"the 1,918th of two thousand\"},{\"name\":\"Row 1919\",\"note\":\"the 1,919th of two thousand\"},{\"name\":\"Row 1920\",\"note\":\"the 1,920th of two thousand\"},{\"name\":\"Row 1921\",\"note\":\"the 1,921st of two thousand\"},{\"name\":\"Row 1922\",\"note\":\"the 1,922nd of two thousand\"},{\"name\":\"Row 1923\",\"note\":\"the 1,923rd of two thousand\"},{\"name\":\"Row 1924\",\"note\":\"the 1,924th of two thousand\"},{\"name\":\"Row 1925\",\"note\":\"the 1,925th of two thousand\"},{\"name\":\"Row 1926\",\"note\":\"the 1,926th of two thousand\"},{\"name\":\"Row 1927\",\"note\":\"the 1,927th of two thousand\"},{\"name\":\"Row 1928\",\"note\":\"the 1,928th of two thousand\"},{\"name\":\"Row 1929\",\"note\":\"the 1,929th of two thousand\"},{\"name\":\"Row 1930\",\"note\":\"the 1,930th of two thousand\"},{\"name\":\"Row 1931\",\"note\":\"the 1,931st of two thousand\"},{\"name\":\"Row 1932\",\"note\":\"the 1,932nd of two thousand\"},{\"name\":\"Row 1933\",\"note\":\"the 1,933rd of two thousand\"},{\"name\":\"Row 1934\",\"note\":\"the 1,934th of two thousand\"},{\"name\":\"Row 1935\",\"note\":\"the 1,935th of two thousand\"},{\"name\":\"Row 1936\",\"note\":\"the 1,936th of two thousand\"},{\"name\":\"Row 1937\",\"note\":\"the 1,937th of two thousand\"},{\"name\":\"Row 1938\",\"note\":\"the 1,938th of two thousand\"},{\"name\":\"Row 1939\",\"note\":\"the 1,939th of two thousand\"},{\"name\":\"Row 1940\",\"note\":\"the 1,940th of two thousand\"},{\"name\":\"Row 1941\",\"note\":\"the 1,941st of two thousand\"},{\"name\":\"Row 1942\",\"note\":\"the 1,942nd of two thousand\"},{\"name\":\"Row 1943\",\"note\":\"the 1,943rd of two thousand\"},{\"name\":\"Row 1944\",\"note\":\"the 1,944th of two thousand\"},{\"name\":\"Row 1945\",\"note\":\"the 1,945th of two thousand\"},{\"name\":\"Row 1946\",\"note\":\"the 1,946th of two thousand\"},{\"name\":\"Row 1947\",\"note\":\"the 1,947th of two thousand\"},{\"name\":\"Row 1948\",\"note\":\"the 1,948th of two thousand\"},{\"name\":\"Row 1949\",\"note\":\"the 1,949th of two thousand\"},{\"name\":\"Row 1950\",\"note\":\"the 1,950th of two thousand\"},{\"name\":\"Row 1951\",\"note\":\"the 1,951st of two thousand\"},{\"name\":\"Row 1952\",\"note\":\"the 1,952nd of two thousand\"},{\"name\":\"Row 1953\",\"note\":\"the 1,953rd of two thousand\"},{\"name\":\"Row 1954\",\"note\":\"the 1,954th of two thousand\"},{\"name\":\"Row 1955\",\"note\":\"the 1,955th of two thousand\"},{\"name\":\"Row 1956\",\"note\":\"the 1,956th of two thousand\"},{\"name\":\"Row 1957\",\"note\":\"the 1,957th of two thousand\"},{\"name\":\"Row 1958\",\"note\":\"the 1,958th of two thousand\"},{\"name\":\"Row 1959\",\"note\":\"the 1,959th of two thousand\"},{\"name\":\"Row 1960\",\"note\":\"the 1,960th of two thousand\"},{\"name\":\"Row 1961\",\"note\":\"the 1,961st of two thousand\"},{\"name\":\"Row 1962\",\"note\":\"the 1,962nd of two thousand\"},{\"name\":\"Row 1963\",\"note\":\"the 1,963rd of two thousand\"},{\"name\":\"Row 1964\",\"note\":\"the 1,964th of two thousand\"},{\"name\":\"Row 1965\",\"note\":\"the 1,965th of two thousand\"},{\"name\":\"Row 1966\",\"note\":\"the 1,966th of two thousand\"},{\"name\":\"Row 1967\",\"note\":\"the 1,967th of two thousand\"},{\"name\":\"Row 1968\",\"note\":\"the 1,968th of two thousand\"},{\"name\":\"Row 1969\",\"note\":\"the 1,969th of two thousand\"},{\"name\":\"Row 1970\",\"note\":\"the 1,970th of two thousand\"},{\"name\":\"Row 1971\",\"note\":\"the 1,971st of two thousand\"},{\"name\":\"Row 1972\",\"note\":\"the 1,972nd of two thousand\"},{\"name\":\"Row 1973\",\"note\":\"the 1,973rd of two thousand\"},{\"name\":\"Row 1974\",\"note\":\"the 1,974th of two thousand\"},{\"name\":\"Row 1975\",\"note\":\"the 1,975th of two thousand\"},{\"name\":\"Row 1976\",\"note\":\"the 1,976th of two thousand\"},{\"name\":\"Row 1977\",\"note\":\"the 1,977th of two thousand\"},{\"name\":\"Row 1978\",\"note\":\"the 1,978th of two thousand\"},{\"name\":\"Row 1979\",\"note\":\"the 1,979th of two thousand\"},{\"name\":\"Row 1980\",\"note\":\"the 1,980th of two thousand\"},{\"name\":\"Row 1981\",\"note\":\"the 1,981st of two thousand\"},{\"name\":\"Row 1982\",\"note\":\"the 1,982nd of two thousand\"},{\"name\":\"Row 1983\",\"note\":\"the 1,983rd of two thousand\"},{\"name\":\"Row 1984\",\"note\":\"the 1,984th of two thousand\"},{\"name\":\"Row 1985\",\"note\":\"the 1,985th of two thousand\"},{\"name\":\"Row 1986\",\"note\":\"the 1,986th of two thousand\"},{\"name\":\"Row 1987\",\"note\":\"the 1,987th of two thousand\"},{\"name\":\"Row 1988\",\"note\":\"the 1,988th of two thousand\"},{\"name\":\"Row 1989\",\"note\":\"the 1,989th of two thousand\"},{\"name\":\"Row 1990\",\"note\":\"the 1,990th of two thousand\"},{\"name\":\"Row 1991\",\"note\":\"the 1,991st of two thousand\"},{\"name\":\"Row 1992\",\"note\":\"the 1,992nd of two thousand\"},{\"name\":\"Row 1993\",\"note\":\"the 1,993rd of two thousand\"},{\"name\":\"Row 1994\",\"note\":\"the 1,994th of two thousand\"},{\"name\":\"Row 1995\",\"note\":\"the 1,995th of two thousand\"},{\"name\":\"Row 1996\",\"note\":\"the 1,996th of two thousand\"},{\"name\":\"Row 1997\",\"note\":\"the 1,997th of two thousand\"},{\"name\":\"Row 1998\",\"note\":\"the 1,998th of two thousand\"},{\"name\":\"Row 1999\",\"note\":\"the 1,999th of two thousand\"},{\"name\":\"Row 2000\",\"note\":\"the 2,000th of two thousand\"}]</script>\n\n<style>\n .virtualRow {\n align-content: center;\n align-items: baseline;\n block-size: 32px;\n display: grid;\n gap: 0.75rem;\n grid-template-columns: 4.5rem minmax(0, 1fr);\n padding-inline: 0.75rem;\n }\n</style>","imports":["import '@fusion.dev/helix-headless/virtual-list'"],"label":"Preview","renders":[{"file":"preview.dark.png","shot":"dark"},{"file":"preview.narrow.png","shot":"narrow"},{"file":"preview.png","shot":"wide"}],"slug":"preview","tier":"headless","tsx":"import './preview.css'\n\n/* The two thousand rows are generated here. The HTML example writes the same\n rows out as JSON.\n\n The row template is set with `innerHTML` because the component clones the\n template's `content`, and React puts JSX children on the `<template>` itself. */\nconst ORDINAL = new Intl.PluralRules('en-US', { type: 'ordinal' })\nconst SUFFIX: Record<string, string> = { few: 'rd', one: 'st', other: 'th', two: 'nd' }\nconst rows = Array.from({ length: 2000 }, (_, index) => ({\n name: `Row ${index + 1}`,\n note: `the ${(index + 1).toLocaleString('en-US')}${SUFFIX[ORDINAL.select(index + 1)]} of two thousand`,\n}))\n\n/* The same stylesheet as the HTML example's `<style>` block. It is set with\n `dangerouslySetInnerHTML` because JSX reads the braces in CSS as expressions. */\nconst SHEET = `\\n .virtualRow {\\n align-content: center;\\n align-items: baseline;\\n block-size: 32px;\\n display: grid;\\n gap: 0.75rem;\\n grid-template-columns: 4.5rem minmax(0, 1fr);\\n padding-inline: 0.75rem;\\n }\\n`\n\n/* The same markup as the HTML example's `<template>`, indentation included, so\n both examples clone the same nodes. */\nconst ROW = `\n <div class=\"virtualRow\">\n <strong data-field=\"name\"></strong>\n <span data-field=\"note\"></span>\n </div>\n `\n\nexport function Example() {\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: SHEET }} />\n\n <helix-headless-virtual-list\n estimate={32}\n for=\"people\"\n label=\"Two thousand rows\"\n >\n <template dangerouslySetInnerHTML={{ __html: ROW }} />\n </helix-headless-virtual-list>\n\n <script\n dangerouslySetInnerHTML={{ __html: JSON.stringify(rows) }}\n id=\"people\"\n type=\"application/json\"\n />\n </>\n )\n}"}]},"package":"@fusion.dev/helix-headless"}