@fusion.dev/helix-templates 0.139.0 → 0.141.0

package/templates/vue-vite/src/LandingPage.vue

@@ -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
@@ -24,13 +22,16 @@ const figure = new Intl.NumberFormat('en-US')
 <template>
   <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-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>
@@ -38,12 +39,13 @@ const figure = new Intl.NumberFormat('en-US')
         </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">
-        <helix-text as="h2" slot="header" variant="title">The roster, in three figures</helix-text>
-        <helix-stat-group divided>
+      <!-- **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. It has no link of its own:
+           the button beside it goes to the same page. -->
+      <helix-card class="specimen" material="glass" separation="outlined">
+        <helix-text as="h2" slot="header" variant="title">Roster</helix-text>
+        <helix-stat-group>
           <helix-stat>
             {{ roster.people }}
             <span slot="label">People</span>
@@ -57,83 +59,44 @@ const figure = new Intl.NumberFormat('en-US')
             <span slot="label">Reviews</span>
           </helix-stat>
         </helix-stat-group>
-        <a data-link href="#/overview" slot="footer">Open the data view</a>
       </helix-card>
     </header>
 
     <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" /></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" /></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>
 </template>

package/templates/vue-vite/src/OverviewPage.vue

@@ -60,8 +60,8 @@ import { DOCS } from './docs.ts'
 
       <!-- 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/vue-vite/src/SignupForm.vue

@@ -72,8 +72,8 @@ const dismiss = (id: number) => {
         <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"
@@ -105,22 +105,22 @@ const dismiss = (id: number) => {
 
       <aside class="notes">
         <!-- The one fact you need before typing your name into a page you have
-             had for five minutes, so it is a callout. `tone` is the meaning,
-             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.
+             had for five minutes, so it is a callout. `neutral` is a note that
+             reports no status, drawn in the muted ink with a bar on the inline
+             start, so it stays in the palette, ink or brand. -->
+        <helix-callout tone="neutral">
+          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/vue-vite/src/SiteFooter.vue

@@ -9,19 +9,16 @@ import { DOCS } from './docs.ts'
   and a caption, which on a tall window left the bottom third of the screen
   empty. The footer is also where the links you want once belong.
 
-  `data-link="subtle"` reads as body text until it is hovered, which suits a
-  row of links under a rule.
+  `data-link="quiet"` sets a link in the muted ink with no underline, and it
+  takes the foreground on hover, which suits a row of links under a rule.
 -->
 <template>
   <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.
-      </helix-text>
       <div class="footer-links">
-        <a data-link="subtle" :href="DOCS.gallery">Components</a>
-        <a data-link="subtle" :href="DOCS.elements">Documentation</a>
-        <a data-link="subtle" :href="DOCS.vue">Vue</a>
+        <a data-link="quiet" :href="DOCS.gallery">Components</a>
+        <a data-link="quiet" :href="DOCS.elements">Documentation</a>
+        <a data-link="quiet" :href="DOCS.vue">Vue</a>
       </div>
     </div>
   </footer>

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

@@ -11,8 +11,7 @@ type Mode = (typeof MODES)[number]
 const MARKS: Record<Mode, string> = { dark: 'moon', light: 'sun', system: 'monitor' }
 
 const path = usePathname()
-/* `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 = ref<Mode>('system')
 
 /**
@@ -24,7 +23,7 @@ const mode = ref<Mode>('system')
  * 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.value) + 1) % MODES.length] ?? 'system'
@@ -41,13 +40,10 @@ const cycle = () => {
 <template>
   <helix-app-header material="glass" sticky>
     <!-- The wordmark is the way back to the first page, so there is no third
-         destination in the bar saying the same thing. It is also the only name
-         of the project on the screen. The mark is a placeholder for your own,
-         drawn in `--helix-color-brand-mark`, the token for the brand as a
-         graphic. -->
+         destination in the bar saying the same thing. It names the library the
+         starter is built on, and it is the place for your own name or logo. -->
     <a class="wordmark" data-link="quiet" href="#/" slot="start">
-      <helix-icon name="cube" />
-      <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+      <helix-text variant="body-strong">Helix</helix-text>
     </a>
 
     <!-- The links are yours. Navigation owns the marker that travels between