@fusion.dev/helix-docs 0.108.1 → 0.109.0

package/content/metrics.mdx

@@ -58,10 +58,10 @@ either barrel. The per-component tables show what your page pays.
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
 | `@fusion.dev/helix-core` | 175,648 | 56,340 | 47,876 | The element base class, mixins, decorators, and floating positioning. |
-| `@fusion.dev/helix-headless` | 715,674 | 185,346 | 144,163 | Every headless family. The barrel entry includes all of them. |
+| `@fusion.dev/helix-headless` | 716,216 | 185,618 | 144,397 | Every headless family. The barrel entry includes all of them. |
 | `@fusion.dev/helix-icons` | 55,565 | 17,727 | 14,864 | The whole glyph set. |
 | `@fusion.dev/helix-theme` | 3,288 | 1,571 | 1,355 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| `@fusion.dev/helix` | 1,245,495 | 291,270 | 213,669 | Every styled family. |
+| `@fusion.dev/helix` | 1,246,037 | 291,522 | 213,793 | Every styled family. |
 | `lit` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -84,9 +84,9 @@ shows the whole cost of using the base layer on its own.
 
 **Most of your first component is the shared runtime.** The median styled family is 20,604 bytes gzipped alone, and it adds 2,233 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 103 styled components, the smallest is `code` at 9,782 bytes gzipped alone, and the largest is `data-table` at 62,714. Every family together is 291,270.
+Across the 103 styled components, the smallest is `code` at 9,782 bytes gzipped alone, and the largest is `data-table` at 62,990. Every family together is 291,522.
 
-No family imports a barrel. The `barrels` rule in `fusion workspace` enforces that. `@fusion.dev/helix-headless` marks every module in `dist` as having side effects, which is true of a file that calls `customElements.define`. A bundler can remove none of it. One `import { HelixHeadlessButton } from '@fusion.dev/helix-headless'` costs 185,346 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets `sideEffects`, whatever its name.
+No family imports a barrel. The `barrels` rule in `fusion workspace` enforces that. `@fusion.dev/helix-headless` marks every module in `dist` as having side effects, which is true of a file that calls `customElements.define`. A bundler can remove none of it. One `import { HelixHeadlessButton } from '@fusion.dev/helix-headless'` costs 185,618 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets `sideEffects`, whatever its name.
 
 The headless tier never had the problem, so it serves as the control. `@fusion.dev/helix-core` is `sideEffects: false`, and the median headless family is 21,055 bytes gzipped alone.
 
@@ -260,7 +260,7 @@ Structure, accessibility, state, and form participation. It has no presentation
 | `stat` | 31,990 | 9,962 | 8,782 | 1,148 | 213 | 119 |
 | `steps` | 95,678 | 30,919 | 25,246 | 6,177 | 1,502 | 1,164 |
 | `switch` | 39,809 | 12,087 | 10,643 | 1,550 | 472 | 410 |
-| `table` | 97,348 | 31,852 | 25,954 | 9,616 | 2,614 | 2,191 |
+| `table` | 97,890 | 32,123 | 26,195 | 10,158 | 2,842 | 2,351 |
 | `tabs` | 39,606 | 12,059 | 10,597 | 3,925 | 893 | 641 |
 | `tag` | 86,950 | 28,406 | 23,212 | 895 | 198 | 155 |
 | `textarea` | 42,350 | 12,677 | 11,152 | 3,953 | 1,090 | 749 |
@@ -310,7 +310,7 @@ The headless tier plus presentation. `bun add @fusion.dev/helix` installs this t
 | `combobox` | 159,990 | 48,783 | 41,021 | 36,020 | 7,936 | 6,553 |
 | `command` | 125,630 | 38,230 | 31,442 | 28,637 | 6,743 | 5,562 |
 | `copy-button` | 136,896 | 43,653 | 36,646 | 21,784 | 4,665 | 3,972 |
-| `data-table` | 220,801 | 62,714 | 52,791 | 92,882 | 20,663 | 16,995 |
+| `data-table` | 221,343 | 62,990 | 53,002 | 93,424 | 20,951 | 17,076 |
 | `date-input` | 159,249 | 48,641 | 41,040 | 35,034 | 7,876 | 6,501 |
 | `date-picker` | 104,346 | 33,365 | 27,288 | 15,499 | 3,909 | 3,160 |
 | `description-list` | 33,983 | 10,434 | 9,183 | 3,502 | 796 | 605 |
@@ -369,7 +369,7 @@ The headless tier plus presentation. `bun add @fusion.dev/helix` installs this t
 | `stat` | 34,806 | 10,587 | 9,343 | 3,954 | 849 | 744 |
 | `steps` | 109,296 | 33,391 | 27,447 | 19,784 | 3,926 | 3,283 |
 | `switch` | 44,077 | 13,135 | 11,529 | 5,803 | 1,545 | 1,370 |
-| `table` | 102,942 | 33,035 | 26,943 | 15,204 | 3,812 | 3,154 |
+| `table` | 103,484 | 33,304 | 27,192 | 15,746 | 4,038 | 3,406 |
 | `tabs` | 45,842 | 13,332 | 11,742 | 10,154 | 2,208 | 1,761 |
 | `tag` | 90,153 | 29,299 | 23,951 | 4,083 | 1,021 | 870 |
 | `text` | 34,466 | 10,420 | 9,152 | 3,987 | 846 | 651 |
@@ -399,11 +399,11 @@ stripped column shows the bytes we removed.
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
 | `@fusion.dev/helix-core` | 1,127,867 | 165 | 249,701 | `@floating-ui/dom`, `@fusion.dev/helix-icons` |
-| `@fusion.dev/helix-headless` | 13,046,911 | 504 | 1,032,260 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
+| `@fusion.dev/helix-headless` | 13,053,257 | 504 | 1,033,947 | `@fusion.dev/helix-core`, `@fusion.dev/helix-icons`, `uqr` |
 | `@fusion.dev/helix-icons` | 150,162 | 21 | 50,346 | `svgo` |
 | `@fusion.dev/helix-styles` | 102,108 | 6 | 0 | none |
 | `@fusion.dev/helix-theme` | 465,413 | 8 | 4,703 | none |
-| `@fusion.dev/helix` | 14,185,818 | 870 | 368,333 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
+| `@fusion.dev/helix` | 14,191,826 | 870 | 370,788 | `@fusion.dev/helix-core`, `@fusion.dev/helix-headless`, `@fusion.dev/helix-styles` |
 
 ## Not measured yet
 

package/content/recipes.mdx

@@ -112,7 +112,7 @@ In prose:
 
 See [Typography](./typography).
 
-Two Markdown constructs need components, because HTML alone cannot hold what
+Three Markdown constructs need components, because HTML alone cannot hold what
 they need:
 
 - **Fenced code** becomes `helix-code-block`, with the fence's language as its
@@ -121,8 +121,13 @@ they need:
   tone. `NOTE` becomes `tone="info"`, `TIP` becomes `success`, `WARNING` becomes
   `warning`, and `CAUTION` becomes `danger`. `IMPORTANT` has no tone. Each
   callout is headed by its kind, as GitHub shows it.
+- **Tables** become `helix-table`. A `<table>` squeezes its columns to fit, so
+  a narrow screen breaks a value such as `eu-central-1` across lines. The
+  header row becomes the table's columns, each aligned as the Markdown aligned
+  it. A column of short values stays whole, a column of sentences wraps, and a
+  table wider than the screen scrolls in its own box.
 
-The `rehype` plugin from `@fusion.dev/helix/rehype` makes both changes in the
+The `rehype` plugin from `@fusion.dev/helix/rehype` makes all three changes in the
 tree your Markdown library has already built. It parses nothing, so your
 library, its dialect, and your sanitizing stay yours. Add it to any pipeline
 that reaches rehype, such as `remark` with `remark-rehype`, `react-markdown`, or
@@ -141,10 +146,13 @@ const html = await unified()
 
 Code that a highlighter colored before the plugin ran keeps its colors. Pass
 `fences: false` if your page draws its own code blocks, `alerts: false` to keep
-alerts as quotes, and `headings` to name each kind in your page's language.
+alerts as quotes, `tables: false` to keep tables as HTML, and `headings` to
+name each kind in your page's language. A table with a caption, a cell that
+spans more than one column or row, or a heading cell outside its header row
+stays HTML, because the grid cannot draw it as written.
 
 > [!NOTE]
-> The plugin changes only these two constructs. If the Markdown comes from your
+> The plugin changes only these three constructs. If the Markdown comes from your
 > users, sanitize it in your pipeline before the plugin runs.
 
 Prose spaces each component the same as the element it replaces.

package/dist/sources.generated.js

@@ -2811,10 +2811,10 @@ either barrel. The per-component tables show what your page pays.
 | Package | Raw | Gzip | Brotli | |
 |---|---|---|---|---|
 | \`@fusion.dev/helix-core\` | 175,648 | 56,340 | 47,876 | The element base class, mixins, decorators, and floating positioning. |
-| \`@fusion.dev/helix-headless\` | 715,674 | 185,346 | 144,163 | Every headless family. The barrel entry includes all of them. |
+| \`@fusion.dev/helix-headless\` | 716,216 | 185,618 | 144,397 | Every headless family. The barrel entry includes all of them. |
 | \`@fusion.dev/helix-icons\` | 55,565 | 17,727 | 14,864 | The whole glyph set. |
 | \`@fusion.dev/helix-theme\` | 3,288 | 1,571 | 1,355 | The derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser. |
-| \`@fusion.dev/helix\` | 1,245,495 | 291,270 | 213,669 | Every styled family. |
+| \`@fusion.dev/helix\` | 1,246,037 | 291,522 | 213,793 | Every styled family. |
 | \`lit\` | 15,394 | 6,118 | 5,460 | Lit itself, listed so you can subtract it from every row above. |
 
 ## Stylesheets
@@ -2837,9 +2837,9 @@ shows the whole cost of using the base layer on its own.
 
 **Most of your first component is the shared runtime.** The median styled family is 20,604 bytes gzipped alone, and it adds 2,233 to a page that already has Helix. The shared runtime is 89 percent of the first component, and the component itself is 11 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components.
 
-Across the 103 styled components, the smallest is \`code\` at 9,782 bytes gzipped alone, and the largest is \`data-table\` at 62,714. Every family together is 291,270.
+Across the 103 styled components, the smallest is \`code\` at 9,782 bytes gzipped alone, and the largest is \`data-table\` at 62,990. Every family together is 291,522.
 
-No family imports a barrel. The \`barrels\` rule in \`fusion workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 185,346 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
+No family imports a barrel. The \`barrels\` rule in \`fusion workspace\` enforces that. \`@fusion.dev/helix-headless\` marks every module in \`dist\` as having side effects, which is true of a file that calls \`customElements.define\`. A bundler can remove none of it. One \`import { HelixHeadlessButton } from '@fusion.dev/helix-headless'\` costs 185,618 bytes gzipped, whatever else the page imports. That is 9 times the median family above. All 103 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets \`sideEffects\`, whatever its name.
 
 The headless tier never had the problem, so it serves as the control. \`@fusion.dev/helix-core\` is \`sideEffects: false\`, and the median headless family is 21,055 bytes gzipped alone.
 
@@ -3013,7 +3013,7 @@ Structure, accessibility, state, and form participation. It has no presentation
 | \`stat\` | 31,990 | 9,962 | 8,782 | 1,148 | 213 | 119 |
 | \`steps\` | 95,678 | 30,919 | 25,246 | 6,177 | 1,502 | 1,164 |
 | \`switch\` | 39,809 | 12,087 | 10,643 | 1,550 | 472 | 410 |
-| \`table\` | 97,348 | 31,852 | 25,954 | 9,616 | 2,614 | 2,191 |
+| \`table\` | 97,890 | 32,123 | 26,195 | 10,158 | 2,842 | 2,351 |
 | \`tabs\` | 39,606 | 12,059 | 10,597 | 3,925 | 893 | 641 |
 | \`tag\` | 86,950 | 28,406 | 23,212 | 895 | 198 | 155 |
 | \`textarea\` | 42,350 | 12,677 | 11,152 | 3,953 | 1,090 | 749 |
@@ -3063,7 +3063,7 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 | \`combobox\` | 159,990 | 48,783 | 41,021 | 36,020 | 7,936 | 6,553 |
 | \`command\` | 125,630 | 38,230 | 31,442 | 28,637 | 6,743 | 5,562 |
 | \`copy-button\` | 136,896 | 43,653 | 36,646 | 21,784 | 4,665 | 3,972 |
-| \`data-table\` | 220,801 | 62,714 | 52,791 | 92,882 | 20,663 | 16,995 |
+| \`data-table\` | 221,343 | 62,990 | 53,002 | 93,424 | 20,951 | 17,076 |
 | \`date-input\` | 159,249 | 48,641 | 41,040 | 35,034 | 7,876 | 6,501 |
 | \`date-picker\` | 104,346 | 33,365 | 27,288 | 15,499 | 3,909 | 3,160 |
 | \`description-list\` | 33,983 | 10,434 | 9,183 | 3,502 | 796 | 605 |
@@ -3122,7 +3122,7 @@ The headless tier plus presentation. \`bun add @fusion.dev/helix\` installs this
 | \`stat\` | 34,806 | 10,587 | 9,343 | 3,954 | 849 | 744 |
 | \`steps\` | 109,296 | 33,391 | 27,447 | 19,784 | 3,926 | 3,283 |
 | \`switch\` | 44,077 | 13,135 | 11,529 | 5,803 | 1,545 | 1,370 |
-| \`table\` | 102,942 | 33,035 | 26,943 | 15,204 | 3,812 | 3,154 |
+| \`table\` | 103,484 | 33,304 | 27,192 | 15,746 | 4,038 | 3,406 |
 | \`tabs\` | 45,842 | 13,332 | 11,742 | 10,154 | 2,208 | 1,761 |
 | \`tag\` | 90,153 | 29,299 | 23,951 | 4,083 | 1,021 | 870 |
 | \`text\` | 34,466 | 10,420 | 9,152 | 3,987 | 846 | 651 |
@@ -3152,11 +3152,11 @@ stripped column shows the bytes we removed.
 | Package | Unpacked | Files | Source maps stripped | Runtime dependencies |
 |---|---|---|---|---|
 | \`@fusion.dev/helix-core\` | 1,127,867 | 165 | 249,701 | \`@floating-ui/dom\`, \`@fusion.dev/helix-icons\` |
-| \`@fusion.dev/helix-headless\` | 13,046,911 | 504 | 1,032,260 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
+| \`@fusion.dev/helix-headless\` | 13,053,257 | 504 | 1,033,947 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-icons\`, \`uqr\` |
 | \`@fusion.dev/helix-icons\` | 150,162 | 21 | 50,346 | \`svgo\` |
 | \`@fusion.dev/helix-styles\` | 102,108 | 6 | 0 | none |
 | \`@fusion.dev/helix-theme\` | 465,413 | 8 | 4,703 | none |
-| \`@fusion.dev/helix\` | 14,185,818 | 870 | 368,333 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
+| \`@fusion.dev/helix\` | 14,191,826 | 870 | 370,788 | \`@fusion.dev/helix-core\`, \`@fusion.dev/helix-headless\`, \`@fusion.dev/helix-styles\` |
 
 ## Not measured yet
 
@@ -3904,7 +3904,7 @@ In prose:
 
 See [Typography](./typography).
 
-Two Markdown constructs need components, because HTML alone cannot hold what
+Three Markdown constructs need components, because HTML alone cannot hold what
 they need:
 
 - **Fenced code** becomes \`helix-code-block\`, with the fence's language as its
@@ -3913,8 +3913,13 @@ they need:
   tone. \`NOTE\` becomes \`tone="info"\`, \`TIP\` becomes \`success\`, \`WARNING\` becomes
   \`warning\`, and \`CAUTION\` becomes \`danger\`. \`IMPORTANT\` has no tone. Each
   callout is headed by its kind, as GitHub shows it.
+- **Tables** become \`helix-table\`. A \`<table>\` squeezes its columns to fit, so
+  a narrow screen breaks a value such as \`eu-central-1\` across lines. The
+  header row becomes the table's columns, each aligned as the Markdown aligned
+  it. A column of short values stays whole, a column of sentences wraps, and a
+  table wider than the screen scrolls in its own box.
 
-The \`rehype\` plugin from \`@fusion.dev/helix/rehype\` makes both changes in the
+The \`rehype\` plugin from \`@fusion.dev/helix/rehype\` makes all three changes in the
 tree your Markdown library has already built. It parses nothing, so your
 library, its dialect, and your sanitizing stay yours. Add it to any pipeline
 that reaches rehype, such as \`remark\` with \`remark-rehype\`, \`react-markdown\`, or
@@ -3933,10 +3938,13 @@ const html = await unified()
 
 Code that a highlighter colored before the plugin ran keeps its colors. Pass
 \`fences: false\` if your page draws its own code blocks, \`alerts: false\` to keep
-alerts as quotes, and \`headings\` to name each kind in your page's language.
+alerts as quotes, \`tables: false\` to keep tables as HTML, and \`headings\` to
+name each kind in your page's language. A table with a caption, a cell that
+spans more than one column or row, or a heading cell outside its header row
+stays HTML, because the grid cannot draw it as written.
 
 > [!NOTE]
-> The plugin changes only these two constructs. If the Markdown comes from your
+> The plugin changes only these three constructs. If the Markdown comes from your
 > users, sanitize it in your pipeline before the plugin runs.
 
 Prose spaces each component the same as the element it replaces.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-docs",
   "description": "Versioned documentation content and registry for Helix.",
-  "version": "0.108.1",
+  "version": "0.109.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -36,8 +36,8 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.108.1",
-    "@fusion.dev/helix-testing": "0.108.1",
+    "@fusion.dev/helix-cem": "0.109.0",
+    "@fusion.dev/helix-testing": "0.109.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "lit": "^3.2.1",
     "playwright": "^1.62.1"