@fusion.dev/helix-templates 0.227.0 → 0.229.0

package/README.md

@@ -4,7 +4,7 @@ The Helix starter templates, as data. Read by `helix new` and by
 `npm create @fusion.dev/helix-app`, which are one capability behind two doors.
 
 ```sh
-npm create @fusion.dev/helix-app@latest my-app
+npm create @fusion.dev/helix-app@latest
 ```
 
 You are unlikely to install this package yourself. It exists so that the thing

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-templates",
   "description": "Starter templates for Helix, as data. Read by `helix new` and by `npm create @fusion.dev/helix-app`.",
-  "version": "0.227.0",
+  "version": "0.229.0",
   "license": "MIT",
   "author": "Fusion Development Group",
   "repository": {

package/templates/angular/angular.json

@@ -25,7 +25,7 @@
               "budgets": [
                 {
                   "maximumError": "5MB",
-                  "maximumWarning": "2MB",
+                  "maximumWarning": "3MB",
                   "type": "initial"
                 }
               ],

package/templates/angular/src/app/landing.html

@@ -3,7 +3,7 @@
        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>
+  <helix-aura class="first-light" [speed]="0.4" [terminus]="0.8" variant="braid"></helix-aura>
   <div class="hero">
     <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
     <helix-text as="h1" variant="display">Helix design system</helix-text>
@@ -46,7 +46,7 @@
        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">
+    <a data-card [href]="docs.elements">
       <helix-card separation="outlined">
         <span class="feature-mark"><helix-icon name="cube"></helix-icon></span>
         <helix-text as="h3" variant="title">Custom elements</helix-text>
@@ -55,7 +55,7 @@
         </helix-text>
       </helix-card>
     </a>
-    <a class="feature" data-card [href]="docs.tokens">
+    <a data-card [href]="docs.tokens">
       <helix-card separation="outlined">
         <span class="feature-mark"><helix-icon name="palette"></helix-icon></span>
         <helix-text as="h3" variant="title">One set of tokens</helix-text>
@@ -64,7 +64,7 @@
         </helix-text>
       </helix-card>
     </a>
-    <a class="feature" data-card [href]="docs.parts">
+    <a 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>

package/templates/angular/src/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}

package/templates/react-nextjs/app/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}

package/templates/react-nextjs/app/landing.tsx

@@ -30,7 +30,7 @@ export function Landing() {
             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 className="first-light" data-layer speed={0.4} terminus={0.8} variant="braid" />
+        <helix-aura className="first-light" speed={0.4} terminus={0.8} variant="braid" />
         <div className="hero">
           <helix-tag emphasis="subtle" tone="primary">
             Starter
@@ -83,7 +83,7 @@ export function Landing() {
             and leaves focus alone. Nothing inside may be interactive, since a
             link inside a link is neither valid nor reachable. */}
         <div className="features">
-          <a className="feature" data-card href={DOCS.elements}>
+          <a data-card href={DOCS.elements}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="cube" />
@@ -96,7 +96,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a className="feature" data-card href={DOCS.tokens}>
+          <a data-card href={DOCS.tokens}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="palette" />
@@ -109,7 +109,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a className="feature" data-card href={DOCS.parts}>
+          <a data-card href={DOCS.parts}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="sliders-horizontal" />

package/templates/react-vite/src/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}

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

@@ -30,7 +30,7 @@ export function Landing() {
             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 className="first-light" data-layer speed={0.4} terminus={0.8} variant="braid" />
+        <helix-aura className="first-light" speed={0.4} terminus={0.8} variant="braid" />
         <div className="hero">
           <helix-tag emphasis="subtle" tone="primary">
             Starter
@@ -83,7 +83,7 @@ export function Landing() {
             and leaves focus alone. Nothing inside may be interactive, since a
             link inside a link is neither valid nor reachable. */}
         <div className="features">
-          <a className="feature" data-card href={DOCS.elements}>
+          <a data-card href={DOCS.elements}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="cube" />
@@ -96,7 +96,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a className="feature" data-card href={DOCS.tokens}>
+          <a data-card href={DOCS.tokens}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="palette" />
@@ -109,7 +109,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a className="feature" data-card href={DOCS.parts}>
+          <a data-card href={DOCS.parts}>
             <helix-card separation="outlined">
               <span className="feature-mark">
                 <helix-icon name="sliders-horizontal" />

package/templates/solid-vite/src/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}

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

@@ -27,7 +27,7 @@ export function Landing() {
             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 class="first-light" speed={0.4} terminus={0.8} variant="braid" />
         <div class="hero">
           <helix-tag emphasis="subtle" tone="primary">
             Starter
@@ -80,7 +80,7 @@ export function Landing() {
             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}>
+          <a data-card href={DOCS.elements}>
             <helix-card separation="outlined">
               <span class="feature-mark">
                 <helix-icon name="cube" />
@@ -93,7 +93,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a class="feature" data-card href={DOCS.tokens}>
+          <a data-card href={DOCS.tokens}>
             <helix-card separation="outlined">
               <span class="feature-mark">
                 <helix-icon name="palette" />
@@ -106,7 +106,7 @@ export function Landing() {
               </helix-text>
             </helix-card>
           </a>
-          <a class="feature" data-card href={DOCS.parts}>
+          <a data-card href={DOCS.parts}>
             <helix-card separation="outlined">
               <span class="feature-mark">
                 <helix-icon name="sliders-horizontal" />

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

@@ -25,7 +25,7 @@
          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>
+    <helix-aura class="first-light" speed={0.4} terminus={0.8} variant="braid"></helix-aura>
     <div class="hero">
       <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
       <helix-text as="h1" variant="display">Helix design system</helix-text>
@@ -68,7 +68,7 @@
          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}>
+      <a data-card href={DOCS.elements}>
         <helix-card separation="outlined">
           <span class="feature-mark"><helix-icon name="cube"></helix-icon></span>
           <helix-text as="h3" variant="title">Custom elements</helix-text>
@@ -77,7 +77,7 @@
           </helix-text>
         </helix-card>
       </a>
-      <a class="feature" data-card href={DOCS.tokens}>
+      <a data-card href={DOCS.tokens}>
         <helix-card separation="outlined">
           <span class="feature-mark"><helix-icon name="palette"></helix-icon></span>
           <helix-text as="h3" variant="title">One set of tokens</helix-text>
@@ -86,7 +86,7 @@
           </helix-text>
         </helix-card>
       </a>
-      <a class="feature" data-card href={DOCS.parts}>
+      <a 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>

package/templates/svelte-vite/src/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}

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

@@ -26,7 +26,7 @@ const figure = new Intl.NumberFormat('en-US')
            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 class="first-light" :speed="0.4" :terminus="0.8" variant="braid" />
       <div class="hero">
         <helix-tag emphasis="subtle" tone="primary">Starter</helix-tag>
         <helix-text as="h1" variant="display">Helix design system</helix-text>
@@ -69,7 +69,7 @@ const figure = new Intl.NumberFormat('en-US')
            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">
+        <a data-card :href="DOCS.elements">
           <helix-card separation="outlined">
             <span class="feature-mark"><helix-icon name="cube" /></span>
             <helix-text as="h3" variant="title">Custom elements</helix-text>
@@ -78,7 +78,7 @@ const figure = new Intl.NumberFormat('en-US')
             </helix-text>
           </helix-card>
         </a>
-        <a class="feature" data-card :href="DOCS.tokens">
+        <a data-card :href="DOCS.tokens">
           <helix-card separation="outlined">
             <span class="feature-mark"><helix-icon name="palette" /></span>
             <helix-text as="h3" variant="title">One set of tokens</helix-text>
@@ -87,7 +87,7 @@ const figure = new Intl.NumberFormat('en-US')
             </helix-text>
           </helix-card>
         </a>
-        <a class="feature" data-card :href="DOCS.parts">
+        <a 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>

package/templates/vue-vite/src/app.css

@@ -43,10 +43,15 @@
  *
  * `flex-grow` gives the spare height to the page, and the footer keeps its own.
  */
+:root {
+  --page-measure: 56rem;
+}
+
 .page {
   flex-grow: 1;
+  inline-size: 100%;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
   padding-inline: var(--helix-space-lg);
 }
@@ -60,7 +65,7 @@
  */
 helix-app-header {
   --app-header-border-color: var(--helix-color-border);
-  --app-header-max-inline-size: 56rem;
+  --app-header-max-inline-size: var(--page-measure);
 }
 
 /* The wordmark, a word for now, in the foreground: a quiet link is muted until
@@ -296,7 +301,7 @@ helix-app-header {
   gap: var(--helix-space-md);
   justify-content: space-between;
   margin-inline: auto;
-  max-inline-size: 56rem;
+  max-inline-size: var(--page-measure);
   padding-block: var(--helix-space-lg);
   padding-inline: var(--helix-space-lg);
 }
@@ -326,6 +331,10 @@ helix-app-header {
   .footer-row {
     padding-inline: var(--helix-space-md);
   }
+
+  helix-app-header {
+    --app-header-padding: var(--helix-space-md);
+  }
 }
 
 /*
@@ -354,3 +363,8 @@ helix-data-table::part(select-selected) {
 helix-data-table::part(cell-selected) {
   font-weight: var(--helix-weight-semibold);
 }
+
+/* A path in a sentence stays whole. */
+helix-code {
+  white-space: nowrap;
+}