@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/meter/meter.ts

@@ -7,8 +7,6 @@ import { LOCALE } from "../locale/locale.ts";
 import * as Mark from "../mark/mark.ts";
 import { slotView } from "../slot/slot.ts";
 
-// CELLS
-
 const METER_CELLS = 20;
 const HIGH_SHARE = 0.8;
 const PERCENT = 100;
@@ -32,13 +30,18 @@ export type CellsConfig = Readonly<{
 const cellRowView = <Message>(
   count: number,
   on: number,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> =>
-  Array.makeBy(count, (index) => h.span([h.Class(index < on ? "cell on" : "cell")]));
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
+  Array.makeBy(count, (index) =>
+    h.span([h.Class(index < on ? "cell on" : "cell")])
+  );
 
 /** A reading printed as ink cells in a 2px box: a `meter` (built on `@foldkit/ui`'s Meter)
  *  from none to `count`, named by `label` and read out as `valueText`. */
-export const cellsView = <Message>(config: CellsConfig, h: HtmlBuilder<Message>): Html => {
+export const cellsView = <Message>(
+  config: CellsConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, count, on, label, valueText, isShort = false } = config;
 
   return UiMeter.view(
@@ -52,15 +55,13 @@ export const cellsView = <Message>(config: CellsConfig, h: HtmlBuilder<Message>)
       toView: (groups) =>
         h.span(
           [...groups.meter, h.Class(isShort ? "cells short" : "cells")],
-          cellRowView(count, on, h),
+          cellRowView(count, on, h)
         ),
     },
-    h,
+    h
   );
 };
 
-// METER
-
 /** One meter in a `listView`. */
 export type MeterConfig = Readonly<{
   /** Unique in the document; names the meter's parts. */
@@ -93,20 +94,22 @@ export type MeterConfig = Readonly<{
   foot?: ReadonlyArray<Html | string>;
 }>;
 
-/** A reading scaled to `whole` (cells, percent), short of `whole` until the value reaches
- *  `max`: 49,999 of 50,000 rounds to 99%, never to a full meter without its red chip. */
 const scaled = (share: number, whole: number, isFull: boolean): number => {
   const rounded = Math.round(share * whole);
+
   return isFull ? rounded : Math.min(whole - 1, rounded);
 };
 
-const numbersText = (value: number, max: number, unit: string | undefined): string => {
+const numbersText = (
+  value: number,
+  max: number,
+  unit: string | undefined
+): string => {
   const numbers = `${value.toLocaleString(LOCALE)} / ${max.toLocaleString(LOCALE)}`;
+
   return unit === undefined ? numbers : `${numbers} ${unit}`;
 };
 
-/** How high a reading is: full at `max`, high from `HIGH_SHARE` of it, calm below. The
- *  percentage and a toned meter's cells both print it. */
 type Level = "Full" | "High" | "Calm";
 
 const levelOf = (value: number, max: number): Level => {
@@ -114,16 +117,16 @@ const levelOf = (value: number, max: number): Level => {
     return "Full";
   } else if (value >= max * HIGH_SHARE) {
     return "High";
-  } else {
-    return "Calm";
   }
+
+  return "Calm";
 };
 
 const percentView = <Message>(
   config: MeterConfig,
   percent: number,
   level: Level,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const percentText = `${percent}%`;
 
@@ -131,9 +134,9 @@ const percentView = <Message>(
     return Chip.view({ label: config.full ?? percentText, tone: "Blocked" }, h);
   } else if (level === "High") {
     return Mark.readingView({ label: percentText }, h);
-  } else {
-    return h.span([h.Class("pct")], [percentText]);
   }
+
+  return h.span([h.Class("pct")], [percentText]);
 };
 
 const TONE_CLASS: Readonly<Record<Level, string>> = {
@@ -142,7 +145,10 @@ const TONE_CLASS: Readonly<Record<Level, string>> = {
   Calm: " toned",
 };
 
-const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html => {
+const meterView = <Message>(
+  config: MeterConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     id,
     label,
@@ -154,6 +160,7 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
     hasNumbers = true,
     isToned = false,
   } = config;
+
   const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
   const level = levelOf(value, max);
   const isFull = level === "Full";
@@ -177,33 +184,44 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
               [
                 h.span(
                   [...groups.label, h.Class("meter-name")],
-                  [label, ...(isStale ? [h.span([h.Class("sr-only")], [" (stale)"])] : [])],
+                  [
+                    label,
+                    ...(isStale
+                      ? [h.span([h.Class("sr-only")], [" (stale)"])]
+                      : []),
+                  ]
                 ),
                 ...slotView("span", "meter-detail", detail, h),
-              ],
+              ]
             ),
             h.div(
               [h.Class("meter-line")],
               [
                 h.span(
                   [...groups.meter, h.Class("cells")],
-                  cellRowView(METER_CELLS, scaled(share, METER_CELLS, isFull), h),
+                  cellRowView(
+                    METER_CELLS,
+                    scaled(share, METER_CELLS, isFull),
+                    h
+                  )
                 ),
                 percentView(config, scaled(share, PERCENT, isFull), level, h),
-                ...(hasNumbers ? [h.span([h.Class("meter-num tnum")], [numbers])] : []),
-              ],
+                ...(hasNumbers
+                  ? [h.span([h.Class("meter-num tnum")], [numbers])]
+                  : []),
+              ]
             ),
             ...slotView("div", "meter-foot", foot, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };
 
 /** Configuration for rendering a list of meters with `listView`. */
 export type ListViewConfig = Readonly<{
-  meters: ReadonlyArray<MeterConfig>;
+  meters: readonly MeterConfig[];
 }>;
 
 /**
@@ -213,10 +231,11 @@ export type ListViewConfig = Readonly<{
  * the numbers in English, a foot line. The cells print ink unless the meter `isToned`. The cells are the `meter`, named by the printed label,
  * with the value, the maximum and the numbers in words for screen readers.
  */
-export const listView = <Message>(config: ListViewConfig, h: HtmlBuilder<Message>): Html =>
+export const listView = <Message>(
+  config: ListViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.ul(
-    // NOTE: Safari takes list semantics from a list printed without markers, so the list
-    // says it is one
     [h.Role("list"), h.Class("meters")],
-    Array.map(config.meters, (meter) => meterView(meter, h)),
+    Array.map(config.meters, (meter) => meterView(meter, h))
   );

package/src/monogram/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./monogram.ts";
+
 export type { ViewConfig } from "./monogram.ts";

package/src/monogram/monogram.ts

@@ -4,13 +4,9 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import { cellView } from "../glyph/glyph.ts";
 import { artRows, toCells } from "../glyph/glyphs.ts";
 
-// LETTERS
-
-const WORD_BREAK = /[\s._-]+/;
+const WORD_BREAK = /[\s._-]+/u;
 const LETTER_COUNT = 2;
 
-/** The letters a name prints as: the first letter of its first two words, or the first two
- *  letters of a one-word name. */
 const initials = (name: string): string =>
   pipe(
     name.split(WORD_BREAK),
@@ -22,21 +18,26 @@ const initials = (name: string): string =>
           ? pipe(
               Array.take(words, LETTER_COUNT),
               Array.map((word) => word.slice(0, 1)),
-              Array.join(""),
+              Array.join("")
             )
           : Array.headNonEmpty(words).slice(0, LETTER_COUNT),
-    }),
+    })
   );
 
-// DRAWING
-
-/** A drawing prints a pixel per cell, two in a large monogram, so its cells stay whole. */
 const DRAWN_CELL = 1;
 const LARGE_DRAWN_CELL = 2;
 
-const drawingView = <Message>(art: string, isLarge: boolean, h: HtmlBuilder<Message>): Html => {
+const drawingView = <Message>(
+  art: string,
+  isLarge: boolean,
+  h: HtmlBuilder<Message>
+): Html => {
   const rows = artRows(art);
-  const columns = Array.reduce(rows, 0, (widest, row) => Number.max(widest, row.length));
+
+  const columns = Array.reduce(rows, 0, (widest, row) =>
+    Number.max(widest, row.length)
+  );
+
   const cell = isLarge ? LARGE_DRAWN_CELL : DRAWN_CELL;
 
   return h.svg(
@@ -47,12 +48,10 @@ const drawingView = <Message>(art: string, isLarge: boolean, h: HtmlBuilder<Mess
       h.AriaHidden(true),
       h.Class("px-icon"),
     ],
-    Array.map(toCells(art, columns), cellView(h)),
+    Array.map(toCells(art, columns), cellView(h))
   );
 };
 
-// VIEW
-
 /** Configuration for rendering a monogram with `view`. */
 export type ViewConfig = Readonly<{
   /** Whose mark it is; screen readers read it, and it gives the letters. */
@@ -75,7 +74,10 @@ export type ViewConfig = Readonly<{
 
 /** Letters in an ink square, or a mark the product draws in cells: the identity of a person,
  *  a provider or a source. An image named by `label`, or hidden when `isDecorative`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     label,
     letters,
@@ -87,11 +89,17 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
 
   return h.span(
     [
-      ...(isDecorative ? [h.AriaHidden(true)] : [h.Role("img"), h.AriaLabel(label)]),
+      ...(isDecorative
+        ? [h.AriaHidden(true)]
+        : [h.Role("img"), h.AriaLabel(label)]),
       h.Class(
-        `monogram${drawing === undefined ? "" : " drawn"}${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`,
+        `monogram${drawing === undefined ? "" : " drawn"}${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`
       ),
     ],
-    [drawing === undefined ? (letters ?? initials(label)) : drawingView(drawing, isLarge, h)],
+    [
+      drawing === undefined
+        ? (letters ?? initials(label))
+        : drawingView(drawing, isLarge, h),
+    ]
   );
 };

package/src/nav-strip/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./nav-strip.ts";
+
+export type { NavItem, ViewConfig } from "./nav-strip.ts";

package/src/{navStrip/navStrip.ts → nav-strip/nav-strip.ts}

@@ -4,8 +4,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { LOCALE } from "../locale/locale.ts";
 
-// VIEW
-
 /** One segment of the strip: a link. */
 export type NavItem = Readonly<{
   href: string;
@@ -19,13 +17,13 @@ export type NavItem = Readonly<{
 export type ViewConfig = Readonly<{
   /** Names the navigation for screen readers. */
   label: string;
-  items: ReadonlyArray<NavItem>;
+  items: readonly NavItem[];
 }>;
 
-/** A segment's count after its label, which NavStrip and Tabs print alike. The space keeps the
- *  label and the count two words in the segment's name, and is not drawn: the gap is the
- *  badge's own margin. */
-export const countView = <Message>(count: number, h: HtmlBuilder<Message>): ReadonlyArray<Html> => [
+export const countView = <Message>(
+  count: number,
+  h: HtmlBuilder<Message>
+): readonly Html[] => [
   h.span([h.Class("sr-only")], [" "]),
   h.span([h.Class("navnum")], [count.toLocaleString(LOCALE)]),
 ];
@@ -33,14 +31,20 @@ export const countView = <Message>(count: number, h: HtmlBuilder<Message>): Read
 const linkView = <Message>(
   info: UiNav.ItemInfo,
   { label, count }: NavItem,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
-  h.keyed("a")(info.value, info.link, [label, ...(count === undefined ? [] : countView(count, h))]);
+  h.keyed("a")(info.value, info.link, [
+    label,
+    ...(count === undefined ? [] : countView(count, h)),
+  ]);
 
 /** One ink-bordered strip of link segments, built on `@foldkit/ui`'s Nav: a navigation
  *  landmark named by its label, the current page `aria-current="page"` and printed inverted.
  *  Its links route through the application as every link does. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, items } = config;
 
   return UiNav.view({
@@ -48,12 +52,16 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
     ariaLabel: label,
     toHref: (href) => href,
     isItemCurrent: (_href, index) =>
-      Option.exists(Array.get(items, index), ({ isCurrent = false }) => isCurrent),
+      Option.exists(
+        Array.get(items, index),
+        ({ isCurrent = false }) => isCurrent
+      ),
     toView: (render) =>
       h.nav(
         [...render.nav, h.Class("nav")],
-        // Nav renders one item per href it was given, in order, so each pairs with its own.
-        Array.zipWith(render.items, items, (info, item) => linkView(info, item, h)),
+        Array.zipWith(render.items, items, (info, item) =>
+          linkView(info, item, h)
+        )
       ),
   });
 };

package/src/notice/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./notice.ts";
+
 export type { Tone, ViewConfig } from "./notice.ts";

package/src/notice/notice.ts

@@ -2,15 +2,13 @@ import { Match, Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
-
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 
-// TONE
-
 /** `Warn`: amber, a question or a stop. `Error`: red, refused or failed. `Ok`: a committed
  *  change, in ink. `Quiet`: tinted, nothing wrong. */
 export const Tone = Schema.Literals(["Warn", "Error", "Ok", "Quiet"]);
+
 export type Tone = typeof Tone.Type;
 
 const toneGlyph = (tone: Tone): GlyphName =>
@@ -19,10 +17,9 @@ const toneGlyph = (tone: Tone): GlyphName =>
     Match.whenOr("Warn", "Error", () => "bang"),
     Match.when("Ok", () => "check"),
     Match.when("Quiet", () => "info"),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-/** The class a tone adds to a notice's, a toast's or a glyph box's own. */
 export const TONE_CLASS: Readonly<Record<Tone, string>> = {
   Warn: "",
   Error: " error",
@@ -30,22 +27,20 @@ export const TONE_CLASS: Readonly<Record<Tone, string>> = {
   Quiet: " quiet",
 };
 
-/** Configuration for the glyph box a Notice and an Outcome open with. */
 export type ToneGlyphConfig = Readonly<{
   tone: Tone;
-  /** Defaults to bang; check when `Ok`, info when `Quiet`. */
   glyph?: GlyphName;
 }>;
 
-/** The glyph box a Notice and an Outcome open with, filled in its tone. */
-export const toneGlyphView = <Message>(config: ToneGlyphConfig, h: HtmlBuilder<Message>): Html =>
+export const toneGlyphView = <Message>(
+  config: ToneGlyphConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.span(
     [h.Class(`glyph${TONE_CLASS[config.tone]}`)],
-    [Glyph.view({ name: config.glyph ?? toneGlyph(config.tone) }, h)],
+    [Glyph.view({ name: config.glyph ?? toneGlyph(config.tone) }, h)]
   );
 
-// VIEW
-
 /** Configuration for rendering a notice with `view`. */
 export type ViewConfig<Message> = Readonly<{
   tone?: Tone;
@@ -61,8 +56,18 @@ export type ViewConfig<Message> = Readonly<{
 
 /** One line in the product's own words, beside a glyph in a box. An `Error` notice is an
  *  alert (`role="alert"`), so a screen reader says it when it appears; the others are quiet. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { tone = "Warn", title, body, glyph, actions = [], attributes = [] } = config;
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    tone = "Warn",
+    title,
+    body,
+    glyph,
+    actions = [],
+    attributes = [],
+  } = config;
 
   return h.div(
     [
@@ -72,8 +77,11 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
     ],
     [
       toneGlyphView({ tone, ...(glyph !== undefined && { glyph }) }, h),
-      h.div([], [...(title === undefined ? [] : [h.strong([], [title])]), ...body]),
+      h.div(
+        [],
+        [...(title === undefined ? [] : [h.strong([], [title])]), ...body]
+      ),
       ...actions,
-    ],
+    ]
   );
 };

package/src/outcome/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./outcome.ts";
+
 export type { ViewConfig } from "./outcome.ts";

package/src/outcome/outcome.ts

@@ -4,8 +4,6 @@ import type { Attributes } from "../attributes/attributes.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 import * as Notice from "../notice/notice.ts";
 
-// VIEW
-
 /** Configuration for rendering an outcome with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Pixel caps: what happened, or what is asked (`"Session ended"`). */
@@ -23,8 +21,18 @@ export type ViewConfig<Message> = Readonly<{
 
 /** A state said in full: a 34px glyph box, a title, a sentence. The body of a confirm, and of
  *  a wall that stops the reader (session ended, access refused, service away). */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { title, body, tone = "Warn", glyph, detail = [], bodyAttributes = [] } = config;
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    title,
+    body,
+    tone = "Warn",
+    glyph,
+    detail = [],
+    bodyAttributes = [],
+  } = config;
 
   return h.div(
     [h.Class("outcome")],
@@ -32,8 +40,8 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       Notice.toneGlyphView({ tone, ...(glyph !== undefined && { glyph }) }, h),
       h.div(
         [...bodyAttributes, h.Class("outcome-body")],
-        [h.strong([], [title]), h.p([], body), ...detail],
+        [h.strong([], [title]), h.p([], body), ...detail]
       ),
-    ],
+    ]
   );
 };

package/src/page-head/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./page-head.ts";
+
+export type { ViewConfig } from "./page-head.ts";

package/src/{pageHead/pageHead.ts → page-head/page-head.ts}

@@ -2,8 +2,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a page head with `view`. */
 export type ViewConfig = Readonly<{
   /** The screen's name: its `h1`, in sans. A long one wraps; nothing is cut. */
@@ -16,7 +14,10 @@ export type ViewConfig = Readonly<{
 
 /** The heading of a working screen, above its panels: its name as the page's `h1`, a count
  *  beside it, and what the screen does. One per screen; the panels below it title in `h2`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { title, meta, actions = [] } = config;
 
   return h.div(
@@ -27,9 +28,9 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
         [
           h.h1([h.Class("page-title")], [title]),
           ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
-        ],
+        ]
       ),
       ...slotView("div", "page-acts", actions, h),
-    ],
+    ]
   );
 };

package/src/panel/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./panel.ts";
+
 export type { ViewConfig } from "./panel.ts";

package/src/panel/panel.ts

@@ -2,8 +2,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a panel with `view`. */
 export type ViewConfig = Readonly<{
   /** Unique in the document: the title's id is made from it, and names the panel. It is the
@@ -36,12 +34,14 @@ export type ViewConfig = Readonly<{
   isFlush?: boolean;
 }>;
 
-/** The id of a panel's title, which names it. */
 export const titleId = (id: string): string => `${id}-title`;
 
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
  *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     id,
     title,
@@ -70,11 +70,11 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
           h.h2([h.Id(titleId(id))], [title]),
           ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
           ...slotView("span", "panel-acts", actions, h),
-        ],
+        ]
       ),
       ...slotView("div", "panel-shelf", shelf, h),
       ...(isFlush ? body : [h.div([h.Class("panel-body")], body)]),
       ...slotView("div", "panel-foot", foot, h),
-    ],
+    ]
   );
 };

package/src/password-field/index.ts

@@ -0,0 +1,3 @@
+export { Strength, view } from "./password-field.ts";
+
+export type { ViewConfig } from "./password-field.ts";

package/src/{passwordField/passwordField.ts → password-field/password-field.ts}

@@ -4,13 +4,12 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { pressedAttribute } from "../button/button.ts";
 import { controlAttributes, errorView, helpView } from "../field/field.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 import * as Meter from "../meter/meter.ts";
 
-// STRENGTH
-
 /** How strong a new password is, 0 to 4, as the product measures it. */
 export const Strength = Schema.Literals([0, 1, 2, 3, 4]);
+
 export type Strength = typeof Strength.Type;
 
 const STRENGTH_CELLS = 4;
@@ -23,11 +22,9 @@ const strengthWord = (strength: Strength): string =>
     Match.when(2, () => "fair"),
     Match.when(3, () => "good"),
     Match.when(4, () => "strong"),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-// VIEW
-
 /** Configuration for rendering a password field with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document: the input's id. */
@@ -63,7 +60,10 @@ export type ViewConfig<Message> = Readonly<{
  *  `error` when it failed, and `aria-required` when the form is not sent without it. The
  *  toggle is a button named `toggleLabel` ("Show password"), `aria-pressed` while the
  *  password shows. For a new password, its strength is a meter. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     id,
     label,
@@ -108,9 +108,9 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                     onClick: onToggleShown,
                     attributes: [pressedAttribute(isShown, h)],
                   },
-                  h,
+                  h
                 ),
-              ],
+              ]
             ),
             ...errorView(id, error, h),
             ...(strength === undefined
@@ -128,16 +128,16 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                           label: "Password strength",
                           valueText: strengthWord(strength),
                         },
-                        h,
+                        h
                       ),
                       h.span([h.Class("age")], [strengthWord(strength)]),
-                    ],
+                    ]
                   ),
                 ]),
             ...helpView(help, groups.description, h),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };