@fusion.dev/helix-docs 0.104.0 → 0.105.0

package/dist/pages.generated.js

@@ -1,126 +1,132 @@
 export const docPages = [
     {
-        description: 'What the library guarantees, what it cannot, and where the line is.',
+        description: 'What Helix components handle for you, what you handle, and what we do not test.',
         section: 'Foundations',
         slug: 'accessibility',
         title: 'Accessibility',
     },
     {
-        description: 'The schema Angular needs before it will compile an unknown tag.',
+        description: 'The schema Angular needs to compile Helix tags, and how to bind properties and events.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'angular',
         title: 'Angular',
     },
     {
-        description: 'The platform features this is built on, and what is actually tested.',
+        description: 'The browser features Helix uses, and the browser we test in.',
         order: 5,
         section: 'Getting started',
         slug: 'browser-support',
         title: 'Browser support',
     },
     {
-        description: 'Using the headless tier as the foundation for a design system of your own.',
+        description: 'Build your own design system on the Helix headless tier, with your own tag names and styles.',
         section: 'Essentials',
         slug: 'building-on-the-headless-tier',
         title: 'Building on the headless tier',
     },
     {
-        description: 'The data channel nobody expects, and why it is a real table.',
+        description: 'Which chart to use, and how charts read their data from a table in the document.',
         section: 'Essentials',
         slug: 'charting',
         title: 'Charting',
     },
     {
-        description: 'Every surface here is readable by a machine, and where each one is.',
+        description: 'The files an AI agent can read to write Helix code, and where to find each one.',
         order: 4,
         section: 'Getting started',
         slug: 'coding-agents',
         title: 'Coding agents',
     },
     {
-        description: 'The roles, the ramps, and why the palette is solved rather than picked.',
+        description: 'The color roles, why Helix uses OKLCH, and how the engine meets contrast targets.',
         section: 'Foundations',
         slug: 'color',
         title: 'Color',
     },
     {
-        description: 'One attribute, two modes, and no token restated to honor it.',
+        description: 'Switch between light and dark mode with one attribute. Each token declares both values once.',
         section: 'Foundations',
         slug: 'color-modes',
         title: 'Color modes',
     },
     {
-        description: 'Families, parts and groups, and which to reach for.',
+        description: 'How Helix is organized into families, parts, and groups, and which one to use.',
         section: 'Essentials',
         slug: 'composition',
         title: 'Composition',
     },
     {
-        description: 'Five layers, four shadows, and the glass the material tokens make possible.',
+        description: 'The layer, shadow, and material tokens for stacking, lifting, and translucent surfaces.',
         section: 'Foundations',
         slug: 'elevation-and-material',
         title: 'Elevation and material',
     },
     {
-        description: 'The request and the notification, why one name is prefixed and the other is not.',
+        description: 'The two events each state change sends, and why one name has a prefix and the other does not.',
         section: 'Essentials',
         slug: 'events',
         title: 'Events',
     },
     {
-        description: 'Real form participation, labels that resolve across a shadow root, and the disabled trap.',
+        description: 'How Helix controls take part in forms, render their own labels, and handle disabled fieldsets.',
         section: 'Essentials',
         slug: 'forms',
         title: 'Forms and validation',
     },
     {
-        description: '105 glyphs, one geometry, and how to draw one that is not in the set.',
+        description: 'Draw icons from the Helix set, import glyphs directly, and build a set of your own.',
         section: 'Foundations',
         slug: 'iconography',
         title: 'Iconography',
     },
     {
-        description: 'What to install, the order the stylesheets go in, and how to check it worked.',
+        description: 'What to install, the order of the stylesheets, and how to check that the elements registered.',
         order: 3,
         section: 'Getting started',
         slug: 'installation',
         title: 'Installation',
     },
     {
-        description: 'Every input the theme engine takes, and what each one decides.',
+        description: 'Every input the theme engine takes, and what each one changes.',
         section: 'Theming',
         slug: 'intent-reference',
         title: 'Intent reference',
     },
     {
-        description: 'What Helix is, and the four packages it stacks into.',
+        description: 'What Helix is, and the packages it includes.',
         order: 1,
         section: 'Getting started',
         slug: 'introduction',
         title: 'Introduction',
     },
     {
-        description: 'Locale-aware controls, translatable strings, and a layout that already flips.',
+        description: 'Set the locale of date, time, and number controls, translate component strings, and lay out pages right to left.',
         section: 'Essentials',
         slug: 'localization',
         title: 'Localization and RTL',
     },
     {
-        description: 'What Helix costs a page, measured rather than claimed.',
+        description: 'Add interactive maps to your site, styled with your theme and drawn by MapLibre or Leaflet.',
+        section: 'Essentials',
+        slug: 'maps',
+        title: 'Maps',
+    },
+    {
+        description: 'How much Helix adds to a page, measured from the built packages.',
         order: 7,
         section: 'Getting started',
         slug: 'metrics',
         title: 'Metrics',
     },
     {
-        description: 'Four durations, five curves, and the rule every animating component has to answer.',
+        description: 'The duration and easing tokens, and how components handle reduced motion.',
         section: 'Foundations',
         slug: 'motion',
         title: 'Motion',
     },
     {
-        description: 'The three rules every framework reduces to, and what they look like in each.',
+        description: 'The three rules for using Helix in any framework, and how each framework applies them.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'other-frameworks',
@@ -128,93 +134,93 @@ export const docPages = [
         trailing: true,
     },
     {
-        description: 'The top layer, what dismisses what, and where focus goes.',
+        description: 'How overlays use the top layer, how they close, and where focus goes.',
         section: 'Essentials',
         slug: 'overlays',
         title: 'Overlays and layering',
     },
     {
-        description: 'The three ways in past a shadow root, and which one to reach for.',
+        description: "Change a component's styles with tokens, per-component hooks, or parts, and choose which one to use.",
         section: 'Theming',
         slug: 'overriding-a-component',
         title: 'Overriding a component',
     },
     {
-        description: 'The typings, the hydration bridge, and how state moves.',
+        description: 'The React typings, the hydration bridge, and how state moves between React and the elements.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'react',
         title: 'React',
     },
     {
-        description: 'Helix styling for markup this library does not render, with no JavaScript.',
+        description: 'Style your own HTML with Helix data attributes and no JavaScript.',
         section: 'Foundations',
         slug: 'recipes',
         title: 'Recipes',
     },
     {
-        description: 'Why a component renders its own anchor, and how to keep a router.',
+        description: "Make components navigate with real anchors, and use your framework's router with them.",
         section: 'Essentials',
         slug: 'routing',
         title: 'Routing and navigation',
     },
     {
-        description: 'The editor beside the preview, and how to build one of your own.',
+        description: 'The editable examples on each component page, and what you need to build an editor of your own.',
         section: 'Tooling',
         slug: 'sandbox',
         title: 'Sandbox',
     },
     {
-        description: 'What renders without a DOM, and what has to wait for one.',
+        description: 'How components render on a server with no DOM, and what waits for the browser.',
         section: 'Essentials',
         slug: 'server-rendering',
         title: 'Server rendering',
     },
     {
-        description: 'Five radii, two widths, and the two tokens that are a policy rather than a value.',
+        description: 'The corner radius and border width tokens, and how a theme changes them.',
         section: 'Foundations',
         slug: 'shape-and-borders',
         title: 'Shape and borders',
     },
     {
-        description: 'Why no control has a size, and what to write instead.',
+        description: 'Controls take their height from the density of the region they are in. Set the density once on the region.',
         section: 'Theming',
         slug: 'size-and-density',
         title: 'Size and density',
     },
     {
-        description: "One spacing scale, and why a control's height is not on it.",
+        description: 'Use the space scale for gaps and the size tokens for the height of controls.',
         section: 'Foundations',
         slug: 'space-and-size',
         title: 'Space and size',
     },
     {
-        description: 'Why a declared property is a seed, and how to take a decision when you want it.',
+        description: 'How a property you set becomes a starting value, and how to cancel or take over a change.',
         section: 'Essentials',
         slug: 'state-and-control',
         title: 'State and control',
     },
     {
-        description: 'The four ways a surface is told apart, and the ground a component is not.',
+        description: 'The four ways to separate a surface from what is behind it, and the tokens that choose between them.',
         section: 'Foundations',
         slug: 'surfaces-and-separation',
         title: 'Surfaces and separation',
     },
     {
-        description: 'Typed tags, and the framework that needs the least said about it.',
+        description: 'The Svelte typings, and how Svelte passes props and binds events.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'svelte',
         title: 'Svelte',
     },
     {
-        description: 'The tool that turns intent inputs into a token set you can see.',
+        description: 'Enter your theme inputs and see every token Helix computes from them.',
         section: 'Tooling',
         slug: 'theme-builder',
         title: 'Theme builder',
     },
     {
-        description: 'Deriving an accessible token set from intent inputs.',
+        description: 'Compute a complete token set from your brand color and a few other inputs.',
         section: 'Theming',
         slug: 'theming',
         title: 'Deriving a theme',
@@ -227,54 +233,54 @@ export const docPages = [
         title: 'Tiers',
     },
     {
-        description: 'The two layers, the surface ladder, and what is enforced.',
+        description: 'The two token layers, the surface tokens, and the rules the build enforces.',
         pinned: true,
         section: 'Theming',
         slug: 'tokens',
         title: 'Tokens',
     },
     {
-        description: 'Three families, one scale, and a heading that is a real heading.',
+        description: 'The font families, the type scale, and how Helix styles headings and prose.',
         section: 'Foundations',
         slug: 'typography',
         title: 'Typography',
     },
     {
-        description: 'The four things that look like a library bug and are not, and where an agent should read from.',
+        description: 'Four mistakes that look like Helix bugs, and the files an agent should read.',
         parent: 'coding-agents',
         section: 'Getting started',
         slug: 'using-helix-with-an-agent',
         title: 'Using Helix with an agent',
     },
     {
-        description: 'Binding events, registering elements, and the traps in both.',
+        description: 'Bind events, register the elements, and import the styles in a React app.',
         pinned: true,
         section: 'Essentials',
         slug: 'using-the-elements',
         title: 'Using the elements',
     },
     {
-        description: 'What a version number means here, and which packages move together.',
+        description: 'What a Helix version number means, and which packages are released together.',
         order: 6,
         section: 'Getting started',
         slug: 'versioning',
         title: 'Versioning',
     },
     {
-        description: 'Registered words with fixed vocabularies, one escape hatch, and the word that is refused.',
+        description: 'The attributes that set how a component looks, the values each one accepts, and what each value draws.',
         section: 'Theming',
         slug: 'visual-axes',
         title: 'Visual axes',
     },
     {
-        description: 'The one compiler setting Vue needs, and why props and events already work.',
+        description: 'The compiler setting Vue needs, and how Vue passes props and binds events.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'vue',
         title: 'Vue',
     },
     {
-        description: 'A page that uses Helix with no build step, and what that costs.',
+        description: 'Use the Helix styles on a page with no build step, and why the elements need a bundler for now.',
         parent: 'installation',
         section: 'Getting started',
         slug: 'without-a-bundler',