@fusion.dev/helix-templates 0.139.0 → 0.140.0

package/templates/solid-vite/src/landing.tsx

@@ -14,8 +14,6 @@ const figure = new Intl.NumberFormat('en-US')
  * Delete it once you know your way around: nothing else imports it, and the
  * route it answers becomes yours.
  *
- * **The heading says what this is, and the project's name stays in the bar.**
- *
  * **The calls to action are anchors.** A button that navigates is a link
  * dressed as a button, and the two are different things to a keyboard and to
  * a screen reader. The base stylesheet styles an anchor that asks with
@@ -25,15 +23,20 @@ export function Landing() {
   return (
     <div class="stack">
       <header class="first-screen">
+        {/* **The light behind the first screen**: a helix, drawn by the library
+            in the theme's colors, so a new brand color relights it. It shows
+            one still frame where motion is reduced, and a gradient where the
+            browser draws without a GPU. */}
+        <helix-aura class="first-light" data-layer speed={0.4} terminus={0.8} variant="braid" />
         <div class="hero">
-          <helix-text emphasis="muted" variant="label">
-            Helix starter
+          <helix-tag emphasis="subtle" tone="primary">
+            Starter
+          </helix-tag>
+          <helix-text as="h1" variant="display">
+            Helix design system
           </helix-text>
-          <helix-text as="h1">Every tag on this page is Helix</helix-text>
-          <helix-text as="p" class="lede" emphasis="muted" variant="body">
-            Nothing here is a wrapper: the tags are the library's own elements, and every color,
-            size and space inside them comes from one set of tokens. Three routes are laid down, and
-            all of them are yours.
+          <helix-text as="p" class="lede" variant="body">
+            Web components in your brand's colors, drawn from one set of tokens.
           </helix-text>
           <div class="actions">
             <a data-button="solid" data-button-tone="primary" href="#/overview">
@@ -45,11 +48,10 @@ export function Landing() {
           </div>
         </div>
 
-        {/* The figures are the roster the data view draws, read from the same
-            module, so the panel is the app at work. `helix-stat` sets the
-            number on the display face at a size the type scale does not
-            reach. */}
-        <helix-card class="specimen" separation="outlined">
+        {/* **The library at work, on the first screen.** The figures are the
+            roster the data view draws, read from the same module, so the panel
+            is the app itself, on glass over the light. */}
+        <helix-card class="specimen" material="glass" separation="outlined">
           <helix-text as="h2" slot="header" variant="title">
             The roster, in three figures
           </helix-text>
@@ -77,100 +79,51 @@ export function Landing() {
         <helix-text as="h2" variant="subheading">
           What you have
         </helix-text>
-        {/* Three paragraphs about one installed thing, so they take a rule each
-            and no box. `app.css` says why at more length. */}
-        <div class="facts">
-          <article class="fact">
-            <helix-text as="h3" variant="title">
-              Elements, not wrappers
-            </helix-text>
-            <helix-text as="p" emphasis="muted" variant="body">
-              They are custom elements, so you write the tags and there is no per-component import
-              to keep in step. One line in <helix-code>src/main.tsx</helix-code> registers all of
-              them, and a subpath like <helix-code>@fusion.dev/helix/tabs</helix-code> registers
-              one.
-            </helix-text>
-            <a data-link href={DOCS.elements}>
-              Using the elements
-            </a>
-          </article>
-
-          <article class="fact">
-            <helix-text as="h3" variant="title">
-              One set of tokens
-            </helix-text>
-            <helix-text as="p" emphasis="muted" variant="body">
-              Every color is written once as a light and dark pair, so the control in the bar moves
-              the whole page by setting a single attribute on the root. Type, spacing, radii and
-              control sizes come from the same place.
-            </helix-text>
-            <a data-link href={DOCS.tokens}>
-              Tokens
-            </a>
-          </article>
-
-          <article class="fact">
-            <helix-text as="h3" variant="title">
-              A short stylesheet
-            </helix-text>
-            <helix-text as="p" emphasis="muted" variant="body">
-              <helix-code>src/app.css</helix-code> holds this page's measure, the rhythm between its
-              blocks, and nothing a component already draws. Where a component leaves a decision
-              open it names a part: the data view reaches one to paint the row you tick.
-            </helix-text>
-            <a data-link href={DOCS.parts}>
-              Overriding a component
-            </a>
-          </article>
-        </div>
-      </section>
-
-      <section class="section">
-        <helix-text as="h2" variant="subheading">
-          Where to go next
-        </helix-text>
-        {/* **The whole card is the link, which is what `data-card` is for.** The
-            base layer draws the ring, moves the card's border to the brand on
-            hover, and leaves focus alone. Nothing inside may be interactive,
-            since a link inside a link is neither valid nor reachable. */}
-        <helix-grid columns={2} gap="md">
-          <a data-card href="#/overview">
+        {/* **Each tile is a link, which is what `data-card` is for.** The base
+            layer draws the ring, moves the card's border to the brand on hover,
+            and leaves focus alone. Nothing inside may be interactive, since a
+            link inside a link is neither valid nor reachable. */}
+        <div class="features">
+          <a class="feature" data-card href={DOCS.elements}>
             <helix-card separation="outlined">
-              {/* The route beside the name, on one baseline in the header. */}
-              <helix-flex align-items="baseline" gap="sm" justify-content="between" slot="header">
-                <helix-text as="h3" variant="title">
-                  The data view
-                </helix-text>
-                <helix-text emphasis="subtle" variant="code">
-                  /overview
-                </helix-text>
-              </helix-flex>
+              <span class="feature-mark">
+                <helix-icon name="cube" />
+              </span>
+              <helix-text as="h3" variant="title">
+                Custom elements
+              </helix-text>
               <helix-text as="p" emphasis="muted" variant="body">
-                Twelve people from a local module, sorted, paged and selected with nothing wired up.
-                The columns are markup you can read and the rows are one property, which is what
-                keeps the same component working at ten thousand.
+                One import in <helix-code>src/main.tsx</helix-code> registers every tag.
               </helix-text>
             </helix-card>
           </a>
-
-          <a data-card href="#/join">
+          <a class="feature" data-card href={DOCS.tokens}>
             <helix-card separation="outlined">
-              <helix-flex align-items="baseline" gap="sm" justify-content="between" slot="header">
-                <helix-text as="h3" variant="title">
-                  The form
-                </helix-text>
-                <helix-text emphasis="subtle" variant="code">
-                  /join
-                </helix-text>
-              </helix-flex>
+              <span class="feature-mark">
+                <helix-icon name="palette" />
+              </span>
+              <helix-text as="h3" variant="title">
+                One set of tokens
+              </helix-text>
               <helix-text as="p" emphasis="muted" variant="body">
-                Five controls a <helix-code>&lt;form&gt;</helix-code> reads with{' '}
-                <helix-code>FormData</helix-code>, because every one of them is a real form
-                participant. The email field's complaint is the browser's own.
+                Every color, size, and space, in light and dark.
               </helix-text>
             </helix-card>
           </a>
-        </helix-grid>
+          <a class="feature" data-card href={DOCS.parts}>
+            <helix-card separation="outlined">
+              <span class="feature-mark">
+                <helix-icon name="sliders-horizontal" />
+              </span>
+              <helix-text as="h3" variant="title">
+                Parts to style
+              </helix-text>
+              <helix-text as="p" emphasis="muted" variant="body">
+                Reach inside a component with <helix-code>::part()</helix-code>.
+              </helix-text>
+            </helix-card>
+          </a>
+        </div>
       </section>
     </div>
   )

package/templates/solid-vite/src/overview.tsx

@@ -65,8 +65,8 @@ export function Overview() {
 
         {/* A footnote to the table, so it takes the section's gap. */}
         <helix-text as="p" emphasis="muted" variant="caption">
-          Filtering, column reordering, resizing, virtualized rows and a server mode that asks you
-          for a page are all on{' '}
+          Filtering, column reordering, resizing, virtualized rows, and a server mode for large
+          results are on{' '}
           <a data-link href={DOCS.table}>
             the component's own page
           </a>

package/templates/solid-vite/src/routes.ts

@@ -2,16 +2,16 @@ import { type Accessor, createSignal } from 'solid-js'
 
 /* **The whole router, which is a hash and a listener.**
 
-   A starter should not pick your router for you, and three pages need
-   `location.hash` and one event. Swap this file for Solid Router when you want
-   nested routes or preloading: its `HashRouter` keeps these addresses.
+   Three pages need `location.hash` and one event, so the starter leaves the
+   router to you. Swap this file for Solid Router when you want nested routes or
+   preloading: its `HashRouter` keeps these addresses.
 
    A hash, because the History API wants a server that answers every path with
    the same document, and `vite preview` and wherever you deploy each have to be
-   told to. A hash asks nothing of either. Each link in the app is a plain anchor
-   to `#/` and a path. */
+   told to. A hash asks nothing of either. Each link in the app is a plain
+   anchor to `#/` and a path. */
 
-/** Where the reader is, as a path, so the first page is `/`. */
+/** The current path, read from the hash, so the first page is `/`. */
 const read = (): string => window.location.hash.slice(1) || '/'
 
 const [path, setPath] = createSignal(read())

package/templates/solid-vite/src/signup-form.tsx

@@ -56,8 +56,8 @@ export function SignupForm() {
         <helix-input autocomplete="name" label="Name" name="name" required />
 
         {/* Validation is the platform's: `type` and `required` are set on the
-            real input inside, and its own message shows once the reader has
-            touched the field. Set `feedback` to say it in your own words. */}
+            real input inside, and its own message shows once the field has been
+            touched. Set `feedback` to say it in your own words. */}
         <helix-input
           hint="Where we send the welcome note."
           label="Email"
@@ -102,20 +102,20 @@ export function SignupForm() {
               and the component draws it with a tint and a bar on the inline
               start, so it survives being read in grayscale. */}
           <helix-callout tone="info">
-            Nothing is posted anywhere. Submit it and the message shows exactly what a server would
-            have been handed.
+            The form posts nothing. Submit it, and a message shows exactly what a server would
+            receive.
           </helix-callout>
           <helix-text as="h2" variant="title">
-            What this is showing
+            What the form shows
           </helix-text>
           <helix-text as="p" emphasis="muted" variant="body">
-            Every control is a form-associated custom element, so the submit reads them with{' '}
-            <helix-code>new FormData(form)</helix-code> and nothing gathers the answers by hand.
-            Reset the form and they all go back, the way an <helix-code>input</helix-code> does.
+            Every control is a form-associated custom element, so the submit reads them all
+            with <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
+            the way an <helix-code>input</helix-code> does.
           </helix-text>
           <helix-text as="p" emphasis="muted" variant="body">
-            Leave the email wrong and the complaint is the browser's own, in the reader's language.
-            Handle is the controlled one: it refuses the change and writes back what it will accept.
+            Leave the email wrong and the browser shows its own message, in your language. Handle is
+            the controlled field: the page refuses each change and writes back a cleaned value.
           </helix-text>
           <a data-link href={DOCS.forms}>
             Forms

package/templates/solid-vite/src/site-footer.tsx

@@ -15,7 +15,7 @@ export function SiteFooter() {
     <footer class="site-footer">
       <div class="footer-row">
         <helix-text as="p" emphasis="subtle" variant="caption">
-          Every component in here, with its API, its parts and its examples, has a page.
+          Every component here has a page, with its API, its parts, and its examples.
         </helix-text>
         <div class="footer-links">
           <a data-link="subtle" href={DOCS.gallery}>

package/templates/solid-vite/src/site-header.tsx

@@ -13,8 +13,7 @@ const MARKS: Record<Mode, string> = { dark: 'moon', light: 'sun', system: 'monit
  * The bar across the top: the wordmark, the destinations, and the color mode.
  */
 export function SiteHeader() {
-  /* `system` is the resting state, so the control draws the same glyph before
-     and after the reader first touches it. */
+  /* `system` is the resting state, the mode the page follows until the control is pressed. */
   const [mode, setMode] = createSignal<Mode>('system')
 
   /**
@@ -26,7 +25,7 @@ export function SiteHeader() {
    * on a panel for a light preview inside a dark page.
    *
    * `system` removes the attribute. Writing out whichever mode is current would
-   * freeze the page there the moment the reader's machine changed.
+   * hold the page there when the system's own setting changed.
    */
   const cycle = () => {
     const next = MODES[(MODES.indexOf(mode()) + 1) % MODES.length] ?? 'system'

package/templates/svelte-vite/src/Landing.svelte

@@ -4,8 +4,6 @@
   Delete it once you know your way around: nothing else imports it, and the
   route it answers becomes yours.
 
-  **The heading says what this is, and the project's name stays in the bar.**
-
   **The calls to action are anchors.** A button that navigates is a link
   dressed as a button, and the two are different things to a keyboard and to
   a screen reader. The base stylesheet styles an anchor that asks with
@@ -23,13 +21,16 @@
 
 <div class="stack">
   <header class="first-screen">
+    <!-- **The light behind the first screen**: a helix, drawn by the library in
+         the theme's colors, so a new brand color relights it. It shows one still
+         frame where motion is reduced, and a gradient where the browser draws
+         without a GPU. -->
+    <helix-aura class="first-light" data-layer speed={0.4} terminus={0.8} variant="braid"></helix-aura>
     <div class="hero">
-      <helix-text emphasis="muted" variant="label">Helix starter</helix-text>
-      <helix-text as="h1">Every tag on this page is Helix</helix-text>
-      <helix-text as="p" class="lede" emphasis="muted" variant="body">
-        Nothing here is a wrapper: the tags are the library's own elements, and every color,
-        size and space inside them comes from one set of tokens. Three routes are laid down, and
-        all of them are yours.
+      <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
+      <helix-text as="h1" variant="display">Helix design system</helix-text>
+      <helix-text as="p" class="lede" variant="body">
+        Web components in your brand's colors, drawn from one set of tokens.
       </helix-text>
       <div class="actions">
         <a data-button="solid" data-button-tone="primary" href="#/overview">See the data view</a>
@@ -37,10 +38,10 @@
       </div>
     </div>
 
-    <!-- The figures are the roster the data view draws, read from the same
-         module, so the panel is the app at work. `helix-stat` sets the number
-         on the display face at a size the type scale does not reach. -->
-    <helix-card class="specimen" separation="outlined">
+    <!-- **The library at work, on the first screen.** The figures are the roster
+         the data view draws, read from the same module, so the panel is the app
+         itself, on glass over the light. -->
+    <helix-card class="specimen" material="glass" separation="outlined">
       <helix-text as="h2" slot="header" variant="title">The roster, in three figures</helix-text>
       <helix-stat-group divided>
         <helix-stat>
@@ -62,76 +63,38 @@
 
   <section class="section">
     <helix-text as="h2" variant="subheading">What you have</helix-text>
-    <!-- Three paragraphs about one installed thing, so they take a rule each
-         and no box. `app.css` says why at more length. -->
-    <div class="facts">
-      <article class="fact">
-        <helix-text as="h3" variant="title">Elements, not wrappers</helix-text>
-        <helix-text as="p" emphasis="muted" variant="body">
-          They are custom elements, so you write the tags and there is no per-component import
-          to keep in step. One line in <helix-code>src/main.ts</helix-code> registers all of
-          them, and a subpath like <helix-code>@fusion.dev/helix/tabs</helix-code> registers
-          one.
-        </helix-text>
-        <a data-link href={DOCS.elements}>Using the elements</a>
-      </article>
-
-      <article class="fact">
-        <helix-text as="h3" variant="title">One set of tokens</helix-text>
-        <helix-text as="p" emphasis="muted" variant="body">
-          Every color is written once as a light and dark pair, so the control in the bar moves
-          the whole page by setting a single attribute on the root. Type, spacing, radii and
-          control sizes come from the same place.
-        </helix-text>
-        <a data-link href={DOCS.tokens}>Tokens</a>
-      </article>
-
-      <article class="fact">
-        <helix-text as="h3" variant="title">A short stylesheet</helix-text>
-        <helix-text as="p" emphasis="muted" variant="body">
-          <helix-code>src/app.css</helix-code> holds this page's measure, the rhythm between its
-          blocks, and nothing a component already draws. Where a component leaves a decision
-          open it names a part: the data view reaches one to paint the row you tick.
-        </helix-text>
-        <a data-link href={DOCS.parts}>Overriding a component</a>
-      </article>
-    </div>
-  </section>
-
-  <section class="section">
-    <helix-text as="h2" variant="subheading">Where to go next</helix-text>
-    <!-- **The whole card is the link, which is what `data-card` is for.** The
-         base layer draws the ring, moves the card's border to the brand on
-         hover, and leaves focus alone. Nothing inside may be interactive,
-         since a link inside a link is neither valid nor reachable. -->
-    <helix-grid columns={2} gap="md">
-      <a data-card href="#/overview">
+    <!-- **Each tile is a link, which is what `data-card` is for.** The base layer
+         draws the ring, moves the card's border to the brand on hover, and leaves
+         focus alone. Nothing inside may be interactive, since a link inside a link
+         is neither valid nor reachable. -->
+    <div class="features">
+      <a class="feature" data-card href={DOCS.elements}>
         <helix-card separation="outlined">
-          <helix-flex align-items="baseline" gap="sm" justify-content="between" slot="header">
-            <helix-text as="h3" variant="title">The data view</helix-text>
-            <helix-text emphasis="subtle" variant="code">/overview</helix-text>
-          </helix-flex>
+          <span class="feature-mark"><helix-icon name="cube"></helix-icon></span>
+          <helix-text as="h3" variant="title">Custom elements</helix-text>
           <helix-text as="p" emphasis="muted" variant="body">
-            Twelve people from a local module, sorted, paged and selected with nothing wired up.
-            The columns are markup you can read and the rows are one property, which is what
-            keeps the same component working at ten thousand.
+            One import in <helix-code>src/main.ts</helix-code> registers every tag.
           </helix-text>
         </helix-card>
       </a>
-
-      <a data-card href="#/join">
+      <a class="feature" data-card href={DOCS.tokens}>
         <helix-card separation="outlined">
-          <helix-flex align-items="baseline" gap="sm" justify-content="between" slot="header">
-            <helix-text as="h3" variant="title">The form</helix-text>
-            <helix-text emphasis="subtle" variant="code">/join</helix-text>
-          </helix-flex>
+          <span class="feature-mark"><helix-icon name="palette"></helix-icon></span>
+          <helix-text as="h3" variant="title">One set of tokens</helix-text>
           <helix-text as="p" emphasis="muted" variant="body">
-            Five controls a <helix-code>&lt;form&gt;</helix-code> reads with
-            <helix-code>FormData</helix-code>, because every one of them is a real form
-            participant. The email field's complaint is the browser's own.
+            Every color, size, and space, in light and dark.
           </helix-text>
         </helix-card>
       </a>
-    </helix-grid>
+      <a class="feature" data-card href={DOCS.parts}>
+        <helix-card separation="outlined">
+          <span class="feature-mark"><helix-icon name="sliders-horizontal"></helix-icon></span>
+          <helix-text as="h3" variant="title">Parts to style</helix-text>
+          <helix-text as="p" emphasis="muted" variant="body">
+            Reach inside a component with <helix-code>::part()</helix-code>.
+          </helix-text>
+        </helix-card>
+      </a>
+    </div>
   </section>
 </div>

package/templates/svelte-vite/src/Overview.svelte

@@ -59,8 +59,8 @@
 
     <!-- A footnote to the table, so it takes the section's gap. -->
     <helix-text as="p" emphasis="muted" variant="caption">
-      Filtering, column reordering, resizing, virtualized rows and a server mode that asks you
-      for a page are all on
+      Filtering, column reordering, resizing, virtualized rows, and a server mode for large results
+      are on
       <a data-link href={DOCS.table}>the component's own page</a>.
     </helix-text>
   </section>

package/templates/svelte-vite/src/SignupForm.svelte

@@ -70,8 +70,8 @@
       <helix-input autocomplete="name" label="Name" name="name" required></helix-input>
 
       <!-- Validation is the platform's: `type` and `required` are set on the
-           real input inside, and its own message shows once the reader has
-           touched the field. Set `feedback` to say it in your own words. -->
+           real input inside, and its own message shows once the field has been
+           touched. Set `feedback` to say it in your own words. -->
       <helix-input
         hint="Where we send the welcome note."
         label="Email"
@@ -109,18 +109,17 @@
            and the component draws it with a tint and a bar on the inline
            start, so it survives being read in grayscale. -->
       <helix-callout tone="info">
-        Nothing is posted anywhere. Submit it and the message shows exactly what a server would
-        have been handed.
+        The form posts nothing. Submit it, and a message shows exactly what a server would receive.
       </helix-callout>
-      <helix-text as="h2" variant="title">What this is showing</helix-text>
+      <helix-text as="h2" variant="title">What the form shows</helix-text>
       <helix-text as="p" emphasis="muted" variant="body">
-        Every control is a form-associated custom element, so the submit reads them with
-        <helix-code>new FormData(form)</helix-code> and nothing gathers the answers by hand.
-        Reset the form and they all go back, the way an <helix-code>input</helix-code> does.
+        Every control is a form-associated custom element, so the submit reads them all with
+        <helix-code>new FormData(form)</helix-code>. Reset the form and they all go back,
+        the way an <helix-code>input</helix-code> does.
       </helix-text>
       <helix-text as="p" emphasis="muted" variant="body">
-        Leave the email wrong and the complaint is the browser's own, in the reader's language.
-        Handle is the controlled one: it refuses the change and writes back what it will accept.
+        Leave the email wrong and the browser shows its own message, in your language. Handle is the
+        controlled field: the page refuses each change and writes back a cleaned value.
       </helix-text>
       <a data-link href={DOCS.forms}>Forms</a>
     </aside>

package/templates/svelte-vite/src/SiteFooter.svelte

@@ -15,7 +15,7 @@
 <footer class="site-footer">
   <div class="footer-row">
     <helix-text as="p" emphasis="subtle" variant="caption">
-      Every component in here, with its API, its parts and its examples, has a page.
+      Every component here has a page, with its API, its parts, and its examples.
     </helix-text>
     <div class="footer-links">
       <a data-link="subtle" href={DOCS.gallery}>Components</a>

package/templates/svelte-vite/src/SiteHeader.svelte

@@ -10,8 +10,7 @@
   /** The glyph each mode is announced and drawn with. */
   const MARKS: Record<Mode, string> = { dark: 'moon', light: 'sun', system: 'monitor' }
 
-  /* `system` is the resting state, so the control draws the same glyph before
-     and after the reader first touches it. */
+  /* `system` is the resting state, the mode the page follows until the control is pressed. */
   let mode = $state<Mode>('system')
 
   /**
@@ -23,7 +22,7 @@
    * on a panel for a light preview inside a dark page.
    *
    * `system` removes the attribute. Writing out whichever mode is current would
-   * freeze the page there the moment the reader's machine changed.
+   * hold the page there when the system's own setting changed.
    */
   const cycle = () => {
     const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] ?? 'system'