@fusion.dev/helix-templates 0.138.0 → 0.140.0

package/templates/angular/src/app/signup-form.ts

@@ -0,0 +1,65 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core'
+import { teams } from './data'
+import { DOCS } from './docs'
+
+/** One message in the toast region, and what it says. */
+interface Message {
+  readonly id: number
+  readonly text: string
+}
+
+/**
+ * The form.
+ *
+ * **Every control here is a form-associated custom element**, so a `<form>`
+ * collects them, resets them, and validates them the way it does an `<input>`.
+ * The submit proves it: it reads the answers with `new FormData(form)`, and
+ * nothing gathers them by hand. No `FormsModule` is involved.
+ *
+ * There is no wrapping `Field` component. A label in one shadow root cannot
+ * name a control in another, so every control renders its own `label`, `hint`,
+ * and `feedback`.
+ */
+@Component({
+  host: { class: 'stack' },
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'div[app-signup-form]',
+  templateUrl: './signup-form.html',
+})
+export class SignupForm {
+  protected readonly docs = DOCS
+  protected readonly teams = teams
+  protected readonly handle = signal('')
+  protected readonly messages = signal<readonly Message[]>([])
+
+  /**
+   * The page takes the submit, so nothing navigates. Remove `preventDefault()`
+   * and the form posts to the server like any other, with the same names.
+   */
+  protected join(event: SubmitEvent): void {
+    event.preventDefault()
+    const answers = [...new FormData(event.currentTarget as HTMLFormElement).entries()]
+      .map(([field, value]) => `${field}=${value}`)
+      .join('  ')
+    this.messages.update((sent) => [...sent, { id: Date.now(), text: answers }])
+  }
+
+  /**
+   * **A controlled value, which is the one habit to unlearn.** A Helix element
+   * is not read-only: writing `value` seeds it, and the element goes on
+   * applying its own changes. So taking the decision means refusing the change
+   * with `preventDefault()`, then setting the value you want. Leaving `handle`
+   * as it was does not refuse anything.
+   *
+   * No typings ship for Angular, so the event's detail is named here.
+   */
+  protected takeHandle(event: Event): void {
+    event.preventDefault()
+    const { value } = (event as CustomEvent<{ value: string }>).detail
+    this.handle.set(value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+  }
+
+  protected dismiss(id: number): void {
+    this.messages.update((sent) => sent.filter((one) => one.id !== id))
+  }
+}

package/templates/angular/src/app/site-footer.html

@@ -0,0 +1,10 @@
+<div class="footer-row">
+  <helix-text as="p" emphasis="subtle" variant="caption">
+    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>
+    <a data-link="subtle" [href]="docs.elements">Documentation</a>
+    <a data-link="subtle" [href]="docs.angular">Angular</a>
+  </div>
+</div>

package/templates/angular/src/app/site-footer.ts

@@ -0,0 +1,22 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { DOCS } from './docs'
+
+/**
+ * The bar's counterpart, on every route.
+ *
+ * **It puts a floor under the content.** The overview is a heading, a table,
+ * 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.
+ */
+@Component({
+  host: { class: 'site-footer' },
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'footer[app-site-footer]',
+  templateUrl: './site-footer.html',
+})
+export class SiteFooter {
+  protected readonly docs = DOCS
+}

package/templates/angular/src/app/site-header.html

@@ -0,0 +1,30 @@
+<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. -->
+  <a class="wordmark" data-link="quiet" href="#/" slot="start">
+    <helix-icon name="cube"></helix-icon>
+    <helix-text variant="body-strong">__PROJECT_NAME__</helix-text>
+  </a>
+
+  <!-- The links are yours. Navigation owns the marker that travels between
+       them and renders no anchors of its own. The base layer styles them,
+       `aria-current="page"` included. -->
+  <helix-navigation label="Pages">
+    <a [attr.aria-current]="path() === '/overview' ? 'page' : null" href="#/overview">Overview</a>
+    <a [attr.aria-current]="path() === '/join' ? 'page' : null" href="#/join">Join</a>
+  </helix-navigation>
+
+  <!-- An icon with no words has no accessible name until it is given one,
+       which is why this is its own element. -->
+  <helix-icon-button
+    [label]="'Color mode: ' + mode()"
+    slot="end"
+    [title]="'Color mode: ' + mode()"
+    (click)="cycle()"
+  >
+    <helix-icon [name]="marks[mode()]"></helix-icon>
+  </helix-icon-button>
+</helix-app-header>

package/templates/angular/src/app/site-header.ts

@@ -0,0 +1,57 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core'
+import { Pathname } from './pathname'
+
+/** What the page can follow, in the order the control cycles them. */
+const MODES = ['system', 'light', 'dark'] as const
+
+type Mode = (typeof MODES)[number]
+
+/** The glyph each mode is announced and drawn with. */
+const MARKS: Record<Mode, string> = { dark: 'moon', light: 'sun', system: 'monitor' }
+
+/**
+ * The bar across the top: the wordmark, the destinations, and the color mode.
+ *
+ * `CUSTOM_ELEMENTS_SCHEMA` is what lets Angular compile a template holding
+ * tags it does not know. It turns off the unknown-element check for this
+ * template alone, so keep it on the components that render Helix.
+ *
+ * **A tag of its own, drawn as no box.** Selected by an attribute on
+ * `helix-app-header`, the component would leave that attribute on a Helix
+ * element, which Helix diagnostics reports as one the element does not take.
+ * `display: contents` makes the bar a child of the shell's column again, which
+ * a sticky header needs: it sticks only within its parent's box.
+ */
+@Component({
+  host: { style: 'display: contents' },
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'app-site-header',
+  templateUrl: './site-header.html',
+})
+export class SiteHeader {
+  protected readonly path = inject(Pathname).current
+  protected readonly marks = MARKS
+  /* `system` is the resting state, the mode the page follows until the control is pressed. */
+  protected readonly mode = signal<Mode>('system')
+
+  /**
+   * One attribute, two modes, and no second stylesheet.
+   *
+   * Every Helix token is written once as a `light-dark()` pair, so
+   * `color-scheme` decides which half resolves. `data-color-mode` sets it, and
+   * since `color-scheme` inherits, the attribute works on any element: put it
+   * on a panel for a light preview inside a dark page.
+   *
+   * `system` removes the attribute. Writing out whichever mode is current would
+   * hold the page there when the system's own setting changed.
+   */
+  protected cycle(): void {
+    const next = MODES[(MODES.indexOf(this.mode()) + 1) % MODES.length] ?? 'system'
+    this.mode.set(next)
+    if (next === 'system') {
+      delete document.documentElement.dataset['colorMode']
+      return
+    }
+    document.documentElement.dataset['colorMode'] = next
+  }
+}

package/templates/angular/src/app.css

@@ -0,0 +1,355 @@
+/*
+ * The page around the components.
+ *
+ * Helix draws the inside of each component, so an app stylesheet holds the
+ * measure, the rhythm between blocks, and the few decisions a component leaves
+ * open. Everything below is a Helix token or a documented hook, so a theme
+ * changes it, and both color modes follow from one copy.
+ *
+ * **Color appears in two places, and both are named.** The wordmark takes
+ * `--helix-color-brand-mark`, the token for the brand as a graphic, and a
+ * chosen row takes `--helix-color-primary-subtle` through the parts the table
+ * publishes. Everywhere else the page is ink on the background, and the
+ * components carry their own color.
+ */
+
+/*
+ * **The shell: a column the height of the window, with the footer at its end.**
+ * The overview is a header, a table, and a caption, which on a 1280 by 900
+ * window left about four hundred empty pixels under it. The column puts a floor
+ * under every route.
+ *
+ * **A flex column, because the bar is sticky.** A grid item's containing block
+ * is its own grid area, one row as tall as the bar, so a sticky header in a
+ * grid row has nowhere to stick. A flex item's containing block is the flex
+ * container, which here is the whole document.
+ */
+.shell {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100dvh;
+}
+
+/*
+ * **56rem, the width the widest block reads well at.** The widest block here is
+ * a four-column table: given the whole of a 1280 window, its first column came
+ * out 448 pixels across to hold a name, which reads as a stretched table. The
+ * bar and the footer are centered in the same width, so the wordmark sits over
+ * the first column of the page.
+ *
+ * `flex-grow` gives the spare height to the page, and the footer keeps its own.
+ */
+.page {
+  flex-grow: 1;
+  margin-inline: auto;
+  max-inline-size: 56rem;
+  padding-block: var(--helix-space-2xl) var(--helix-space-3xl);
+  padding-inline: var(--helix-space-lg);
+}
+
+/*
+ * Two documented hooks, both to match the page. The bar centers its row in the
+ * page's measure, so the wordmark sits over the first column. And the bar draws
+ * no line under itself by default, since a header over a page with its own
+ * surface needs none: this page has no such surface, so it sets one. The line
+ * is a token, so it follows the theme.
+ */
+helix-app-header {
+  --app-header-border-color: var(--helix-color-border);
+  --app-header-max-inline-size: 56rem;
+}
+
+/* The mark beside the project's name, the one graphic on the page and the
+   reason `--helix-color-brand-mark` exists. WCAG asks 3:1 of a graphic and 4.5:1
+   of text, so a mark can sit closer to a theme's brand color than any text
+   color can. Swap the glyph, or replace the whole element with your own logo. */
+.wordmark {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--helix-space-xs);
+}
+
+.wordmark helix-icon {
+  color: var(--helix-color-brand-mark);
+}
+
+/*
+ * One rhythm between the blocks of a page, so no page sets its own.
+ *
+ * **`minmax(0, 1fr)` for every column, the guard every grid here needs.** An
+ * implicit track is `auto`, and an `auto` track's minimum is its content's
+ * min-content size, so a child that scrolls itself widens the track and takes
+ * the page with it. Measured at 320: the table's columns floor at 344, the
+ * column it sits in should have been 288, and `documentElement.scrollWidth`
+ * came back 360 against a 320 viewport, so the whole page scrolled sideways. A
+ * minimum of zero leaves the overflow to the table, which scrolls its own box.
+ */
+.stack,
+.section,
+.hero,
+.first-screen,
+.features,
+.notes,
+.split {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* One step between the blocks of a page and a smaller one inside them, which is
+   the whole of the rhythm: `3xl` here, and the `md` a section puts between its
+   heading and its block. */
+.stack {
+  display: grid;
+  gap: var(--helix-space-3xl);
+}
+
+/*
+ * **The first screen: one lit panel, with what the starter is on the left and
+ * the library at work on the right.** Below 60rem two readable columns do not
+ * fit, so they become one, and the glass card follows the words.
+ *
+ * `isolation` makes the panel its own stacking context, so the light behind it
+ * sits under the content and above the page, and `overflow: clip` keeps the
+ * light inside the rounded corners.
+ */
+.first-screen {
+  align-items: center;
+  border: var(--helix-border-thin) solid var(--helix-color-border);
+  border-radius: var(--helix-radii-lg);
+  display: grid;
+  gap: var(--helix-space-2xl);
+  isolation: isolate;
+  overflow: clip;
+  padding: var(--helix-space-3xl) var(--helix-space-2xl);
+  position: relative;
+}
+
+@media (width >= 60rem) {
+  .first-screen {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
+  }
+}
+
+/* The light, under everything in the panel and out of the way of the pointer,
+   and faded out behind the words so they keep their contrast: it is at full
+   strength only behind the card, which is below the words in one column and
+   beside them in two. */
+.first-light {
+  block-size: auto;
+  inset: 0;
+  mask-image: linear-gradient(to bottom, transparent 40%, black 80%);
+  pointer-events: none;
+  position: absolute;
+  z-index: var(--helix-layer-beneath);
+}
+
+@media (width >= 60rem) {
+  .first-light {
+    mask-image: linear-gradient(to right, transparent 35%, black 70%);
+  }
+}
+
+/* A heading and the lines around it are one block, with a smaller gap than the
+   one between blocks. Every route opens with one. */
+.hero {
+  display: grid;
+  gap: var(--helix-space-xs);
+  justify-items: start;
+}
+
+/* The first screen's heading takes more room around it than a route's, and
+   its lede a step more size, wrapped to even lines. */
+.first-screen .hero {
+  gap: var(--helix-space-md);
+}
+
+.first-screen .lede {
+  font-size: var(--helix-text-lg);
+  text-wrap: balance;
+}
+
+/* **A measure for the lede, narrower than the page's.** A line of prose across
+   56rem is around 110 characters, and the readable range tops out near 75. The
+   heading above it keeps the page's measure, since a heading is scanned. */
+.lede {
+  max-inline-size: 42rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--helix-space-sm);
+  padding-block-start: var(--helix-space-md);
+}
+
+/*
+ * **The panel is the library at work**, so all it needs from here is room. Two
+ * documented hooks: the figures come down a step from the display size, which
+ * suits one figure on its own and is too loud for three in an 18rem column, and
+ * the gap around the rule between them comes in from `2xl`, which `divided`
+ * doubles, leaving no room for a number.
+ */
+.specimen {
+  --stat-group-gap: var(--helix-space-md);
+  --stat-value-size: var(--helix-text-xl);
+}
+
+/* A section is its heading and its one block, closer together than two sections
+   are. */
+.section {
+  display: grid;
+  gap: var(--helix-space-md);
+}
+
+/* Three tiles, side by side where there is room for three. */
+.features {
+  display: grid;
+  gap: var(--helix-space-lg);
+}
+
+@media (width >= 48rem) {
+  .features {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* The card fills the link that wraps it, so the row of tiles ends level: the
+   anchor is the grid item, which stretches, and the card takes its full height. */
+[data-card] > helix-card {
+  block-size: 100%;
+}
+
+/* Each tile's icon, on a tint of the brand. */
+.feature-mark {
+  --icon-size: 1.25rem;
+  background-color: var(--helix-color-primary-subtle);
+  border-radius: var(--helix-radii-md);
+  color: var(--helix-color-primary);
+  display: inline-flex;
+  inline-size: fit-content;
+  padding: var(--helix-space-xs);
+}
+
+/* A form is read straight down, and a field wider than about 28rem is hard to
+   scan, however much room the window has. */
+.form {
+  align-content: start;
+  display: grid;
+  gap: var(--helix-space-lg);
+  justify-items: start;
+  max-inline-size: 28rem;
+}
+
+/* Every control fills the column; the submit is as wide as its own words. */
+.form > :not(helix-button) {
+  inline-size: 100%;
+}
+
+/*
+ * **The form takes a column and the notes take the rest.** A 28rem form alone
+ * on a 1280 window fills a third of the page and leaves two thirds empty: the
+ * form has a right width, and the page keeps its own. Narrow, the two stack,
+ * and the notes read as a postscript, the order they are written in.
+ */
+.split {
+  display: grid;
+  gap: var(--helix-space-2xl);
+}
+
+@media (width >= 60rem) {
+  .split {
+    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
+  }
+}
+
+/* `start`, because a grid column stretches to its tallest sibling and a
+   stretched grid shares the difference out between its own rows: beside a form
+   half a page long, three paragraphs came out 140 pixels apart. */
+.notes {
+  align-content: start;
+  display: grid;
+  gap: var(--helix-space-sm);
+  justify-items: start;
+  max-inline-size: 32rem;
+}
+
+/* The callout takes the column, which `start` above would otherwise size to its
+   own words: a notice narrower than the paragraph under it reads as a stray. The
+   link beside it is meant to be its own width. */
+.notes > helix-callout {
+  inline-size: 100%;
+}
+
+/*
+ * **The counterpart to the bar, which gives every route an end.** The rule runs
+ * the width of the window while its contents keep the page's measure, as a
+ * footer under a centered page does. The shell above holds it to the bottom of a
+ * window a route does not fill.
+ */
+.site-footer {
+  border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+.footer-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--helix-space-md);
+  justify-content: space-between;
+  margin-inline: auto;
+  max-inline-size: 56rem;
+  padding-block: var(--helix-space-lg);
+  padding-inline: var(--helix-space-lg);
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--helix-space-md);
+}
+
+/*
+ * **Narrow, the gutter gives first.** 24 pixels either side of a 390 window
+ * spend 48 of 390 on margin, and the table needs 355 of what is left. At `md` it
+ * has 358 and fits; at `lg` it was 13 pixels short, and the last column sat
+ * outside the box until you scrolled the table sideways.
+ */
+@media (width < 40rem) {
+  .first-screen {
+    padding: var(--helix-space-2xl) var(--helix-space-lg);
+  }
+
+  .page {
+    padding-block: var(--helix-space-xl) var(--helix-space-2xl);
+    padding-inline: var(--helix-space-md);
+  }
+
+  .footer-row {
+    padding-inline: var(--helix-space-md);
+  }
+}
+
+/*
+ * **The escape hatch, and the reason a component names its parts.** The table
+ * tints a chosen row at the strength `Tag` rests at, and this page wants a
+ * ticked row easy to find from across the screen, a step past any token.
+ * `::part` reaches the boxes the component drew, with no fork, and a rule
+ * written out here beats the component's own, however specific that one is.
+ *
+ * **Two parts, because a row has no box.** The row is `display: contents`, so
+ * one grid can align every column across every row, and the cells are what a
+ * selection is painted on. The table names both: the data cells and the cell
+ * holding the checkbox. Naming only the first leaves a pale stripe down the
+ * left of every chosen row.
+ *
+ * The values are still the library's, so a theme carries them like everything
+ * else. `primary-subtle`, because `primary-surface` is the solid accent a
+ * button stands on, made for white text, so a row painted with it would put the
+ * table's own ink on a saturated fill.
+ */
+helix-data-table::part(cell-selected),
+helix-data-table::part(select-selected) {
+  background-color: var(--helix-color-primary-subtle);
+}
+
+helix-data-table::part(cell-selected) {
+  font-weight: var(--helix-weight-semibold);
+}

package/templates/angular/src/diagnostics.ts

@@ -0,0 +1,24 @@
+/**
+ * Helix diagnostics, which `main.ts` loads in development only.
+ *
+ * It finds the Helix mistakes that are valid CSS and therefore silent, such as
+ * a `::part()` naming a part nothing publishes, and an attribute value outside
+ * the set a component takes. Each finding prints once in DevTools, and a badge
+ * in the corner of the page lists them while there are any.
+ *
+ * **Checked against the Helix you installed**, from the lint data it ships, so
+ * nothing is loaded from the network.
+ *
+ * To print the findings in your terminal as well, run `npx helix diagnostics`
+ * from `@fusion.dev/helix-cli` beside the dev server, and add
+ * `sinks: { relay: true }` below.
+ */
+import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
+import lint from '@fusion.dev/helix/lint.json'
+
+initDiagnostics({
+  environment: 'development',
+  /* The route is in the hash, so each page's findings are kept apart. */
+  page: () => window.location.hash.slice(1) || '/',
+  tiers: [{ lint }],
+})

package/templates/angular/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__PROJECT_NAME__</title>
+    <base href="/" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/templates/angular/src/main.ts

@@ -0,0 +1,21 @@
+import { isDevMode } from '@angular/core'
+import { bootstrapApplication } from '@angular/platform-browser'
+
+/* A custom element registers as a side effect of being imported, so this line
+   makes every Helix tag in the app real. Import the whole library while you are
+   finding your feet. `@fusion.dev/helix/button` and its siblings are subpath
+   exports, for when you want to pay for only what you use. The stylesheets are
+   in `angular.json`, since Angular takes global styles there. */
+import '@fusion.dev/helix'
+
+import { App } from './app/app'
+import { appConfig } from './app/app.config'
+
+/* **Diagnostics in development only.** `ng serve` runs in development, and
+   `ng build` in production, where `isDevMode()` is false and the chunk this
+   imports is never requested. */
+if (isDevMode()) {
+  void import('./diagnostics')
+}
+
+bootstrapApplication(App, appConfig).catch((error: unknown) => console.error(error))

package/templates/angular/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/templates/angular/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "isolatedModules": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ES2023"
+    ],
+    "module": "preserve",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}