@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/sliderUpdate.ts

@@ -1,52 +1,52 @@
-// What a slider (Slider.tsx) does as its handles are moved, on the site (slider.script.ts) and in the editor (the
-// part's own input event): its tracks, its stops and the labels with its values follow the handles (the variables
-// --slider-start and --slider-end, 0–1, on .slider, and on a centered one data-below-center while its handle is on
-// the start's side of the middle), and a range's two handles cannot pass each other. The handles themselves are native
-// range inputs, so the arrow keys, Home, End, Page Up and Page Down move them.
-
-/** Where a value is between `min` and `max`, from 0 to 1. */
-const fractionOf = (value: number, min: number, max: number) => (max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0);
-
-/** Where a slider's active track starts and ends (0–1): a range's between its two handles, a centered one's between
- * the middle and its handle, else from the start. */
-export function sliderPlace(values: number[], min: number, max: number, centered = false) {
-  const end = fractionOf(values[values.length - 1], min, max);
-  if (centered) return { start: Math.min(0.5, end), end: Math.max(0.5, end) };
-  return { start: values.length > 1 ? fractionOf(values[0], min, max) : 0, end };
-}
-
-/** Whether a stop at `value` is on the active track, and whether a handle stands on it (it is hidden under it). */
-export function stopState(value: number, values: number[], min: number, max: number, centered = false) {
-  const last = values[values.length - 1];
-  const middle = (min + max) / 2;
-  const [from, to] = centered ? [Math.min(middle, last), Math.max(middle, last)] : [values.length > 1 ? values[0] : min, last];
-  return { active: value >= from && value <= to, under: values.includes(value) };
-}
-
-/** Puts a slider (its .slider element) where its handles are, after `moved` was moved. */
-export function updateSlider(root: HTMLElement, moved?: EventTarget | null) {
-  const inputs = [...root.querySelectorAll<HTMLInputElement>('[data-slider-input]')];
-  if (!inputs.length) return;
-  const first = inputs[0];
-  const last = inputs[inputs.length - 1];
-  if (first !== last && Number(first.value) > Number(last.value)) {
-    if (moved === first) first.value = last.value;
-    else last.value = first.value;
-  }
-  const values = inputs.map((i) => Number(i.value));
-  const min = Number(first.min);
-  const max = Number(first.max);
-  const centered = root.classList.contains('slider-centered');
-  const { start, end } = sliderPlace(values, min, max, centered);
-  root.style.setProperty('--slider-start', String(start));
-  root.style.setProperty('--slider-end', String(end));
-  // Two handles in the same place: the one that can still move is on top (the start's at the end of the track).
-  root.toggleAttribute('data-start-on-top', first !== last && start > 0.5);
-  root.toggleAttribute('data-below-center', centered && values[0] < (min + max) / 2);
-  root.querySelectorAll<HTMLElement>('[data-slider-value]').forEach((label, i) => (label.textContent = String(values[i])));
-  root.querySelectorAll<HTMLElement>('[data-slider-stop]').forEach((stop) => {
-    const { active, under } = stopState(Number(stop.dataset.sliderStop), values, min, max, centered);
-    stop.toggleAttribute('data-active', active);
-    stop.toggleAttribute('data-under', under);
-  });
-}
+// What a slider (Slider.tsx) does as its handles are moved, on the site (slider.script.ts) and in the editor (the
+// part's own input event): its tracks, its stops and the labels with its values follow the handles (the variables
+// --slider-start and --slider-end, 0–1, on .slider, and on a centered one data-below-center while its handle is on
+// the start's side of the middle), and a range's two handles cannot pass each other. The handles themselves are native
+// range inputs, so the arrow keys, Home, End, Page Up and Page Down move them.
+
+/** Where a value is between `min` and `max`, from 0 to 1. */
+const fractionOf = (value: number, min: number, max: number) => (max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0);
+
+/** Where a slider's active track starts and ends (0–1): a range's between its two handles, a centered one's between
+ * the middle and its handle, else from the start. */
+export function sliderPlace(values: number[], min: number, max: number, centered = false) {
+  const end = fractionOf(values[values.length - 1], min, max);
+  if (centered) return { start: Math.min(0.5, end), end: Math.max(0.5, end) };
+  return { start: values.length > 1 ? fractionOf(values[0], min, max) : 0, end };
+}
+
+/** Whether a stop at `value` is on the active track, and whether a handle stands on it (it is hidden under it). */
+export function stopState(value: number, values: number[], min: number, max: number, centered = false) {
+  const last = values[values.length - 1];
+  const middle = (min + max) / 2;
+  const [from, to] = centered ? [Math.min(middle, last), Math.max(middle, last)] : [values.length > 1 ? values[0] : min, last];
+  return { active: value >= from && value <= to, under: values.includes(value) };
+}
+
+/** Puts a slider (its .slider element) where its handles are, after `moved` was moved. */
+export function updateSlider(root: HTMLElement, moved?: EventTarget | null) {
+  const inputs = [...root.querySelectorAll<HTMLInputElement>('[data-slider-input]')];
+  if (!inputs.length) return;
+  const first = inputs[0];
+  const last = inputs[inputs.length - 1];
+  if (first !== last && Number(first.value) > Number(last.value)) {
+    if (moved === first) first.value = last.value;
+    else last.value = first.value;
+  }
+  const values = inputs.map((i) => Number(i.value));
+  const min = Number(first.min);
+  const max = Number(first.max);
+  const centered = root.classList.contains('slider-centered');
+  const { start, end } = sliderPlace(values, min, max, centered);
+  root.style.setProperty('--slider-start', String(start));
+  root.style.setProperty('--slider-end', String(end));
+  // Two handles in the same place: the one that can still move is on top (the start's at the end of the track).
+  root.toggleAttribute('data-start-on-top', first !== last && start > 0.5);
+  root.toggleAttribute('data-below-center', centered && values[0] < (min + max) / 2);
+  root.querySelectorAll<HTMLElement>('[data-slider-value]').forEach((label, i) => (label.textContent = String(values[i])));
+  root.querySelectorAll<HTMLElement>('[data-slider-stop]').forEach((stop) => {
+    const { active, under } = stopState(Number(stop.dataset.sliderStop), values, min, max, centered);
+    stop.toggleAttribute('data-active', active);
+    stop.toggleAttribute('data-under', under);
+  });
+}

package/theme/ui/snackbar.script.ts

@@ -1,16 +1,16 @@
-// What a snackbar (Snackbar.tsx) does on the site: one drawn in a <template data-snackbar> on the page (a new version
-// of a page, layouts/PageLayout.astro) is shown at the bottom when the page opens, with the editor's snackbar()
-// (@morphemecms/cms/lib/snackbar.ts: where it stands, how long it stays, `data-ms` on the template when longer, and how it
-// is swiped or tapped away). Its close button and Escape close it. Run on every page by the theme's Base.astro
-// (blockScripts, packages/editor/site/blockScripts.ts); without one on the page it does nothing.
-import { snackbar } from '@morphemecms/cms/lib/snackbar';
-
-export default function snackbars() {
-  document.querySelectorAll<HTMLTemplateElement>('template[data-snackbar]').forEach((template) => {
-    const element = template.content.firstElementChild?.cloneNode(true);
-    if (!(element instanceof HTMLElement)) return;
-    const text = element.querySelector('.snackbar-supporting-text')?.textContent?.trim() ?? '';
-    const ms = Number(template.dataset.ms) || undefined;
-    snackbar({ text, element, ms, error: element.getAttribute('role') === 'alert' });
-  });
-}
+// What a snackbar (Snackbar.tsx) does on the site: one drawn in a <template data-snackbar> on the page (a new version
+// of a page, layouts/PageLayout.astro) is shown at the bottom when the page opens, with the editor's snackbar()
+// (@morphemecms/cms/lib/snackbar.ts: where it stands, how long it stays, `data-ms` on the template when longer, and how it
+// is swiped or tapped away). Its close button and Escape close it. Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without one on the page it does nothing.
+import { snackbar } from '@morphemecms/cms/lib/snackbar';
+
+export default function snackbars() {
+  document.querySelectorAll<HTMLTemplateElement>('template[data-snackbar]').forEach((template) => {
+    const element = template.content.firstElementChild?.cloneNode(true);
+    if (!(element instanceof HTMLElement)) return;
+    const text = element.querySelector('.snackbar-supporting-text')?.textContent?.trim() ?? '';
+    const ms = Number(template.dataset.ms) || undefined;
+    snackbar({ text, element, ms, error: element.getAttribute('role') === 'alert' });
+  });
+}

package/theme/ui/splitButton.script.ts

@@ -1,63 +1,63 @@
-// What a split button (SplitButton.tsx) does on the site: its arrow opens and closes its menu (aria-expanded, the menu's
-// hidden). The arrow keys open it from the arrow (down on the first item, up on the last) and go between its items, Home
-// and End to the first and the last; Escape closes it and goes back to the arrow, and so does a choice; a tap outside it
-// or the focus moving out closes it. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts);
-// without a split button on the page it does nothing.
-export default function splitButton() {
-  document.querySelectorAll<HTMLElement>('[data-split-button]').forEach((root) => {
-    const toggle = root.querySelector<HTMLButtonElement>('[data-split-button-toggle]');
-    const menu = root.querySelector<HTMLElement>('[data-split-button-menu]');
-    if (!toggle || !menu) return;
-    const items = () => [...menu.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
-    const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
-
-    const outside = (e: PointerEvent) => {
-      if (!root.contains(e.target as Node)) set(false);
-    };
-    function set(open: boolean, focus?: 'first' | 'last' | 'toggle') {
-      toggle!.setAttribute('aria-expanded', String(open));
-      menu!.hidden = !open;
-      if (open) document.addEventListener('pointerdown', outside, true);
-      else document.removeEventListener('pointerdown', outside, true);
-      if (focus === 'toggle') toggle!.focus();
-      else if (focus) {
-        const list = items();
-        list[focus === 'first' ? 0 : list.length - 1]?.focus();
-      }
-    }
-
-    // Opened with a key (a click without a pointer: Enter, Space), the focus goes to the first item.
-    toggle.addEventListener('click', (e) => {
-      const open = !isOpen();
-      set(open, open && e.detail === 0 ? 'first' : undefined);
-    });
-    root.addEventListener('keydown', (e) => {
-      if (e.target === toggle && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-        e.preventDefault();
-        set(true, e.key === 'ArrowDown' ? 'first' : 'last');
-        return;
-      }
-      if (!isOpen()) return;
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        set(false, 'toggle');
-        return;
-      }
-      const list = items();
-      const at = list.indexOf(document.activeElement as HTMLElement);
-      if (at < 0) return;
-      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: list.length - 1 }[e.key];
-      if (to === undefined) return;
-      e.preventDefault();
-      list[(to + list.length) % list.length].focus();
-    });
-    menu.addEventListener('click', (e) => {
-      if ((e.target as HTMLElement).closest('a[href], button')) set(false, 'toggle');
-    });
-    // The focus moving to something outside it (Tab); a tap outside is `outside`.
-    root.addEventListener('focusout', (e) => {
-      const to = e.relatedTarget as Node | null;
-      if (isOpen() && to && !root.contains(to)) set(false);
-    });
-  });
-}
+// What a split button (SplitButton.tsx) does on the site: its arrow opens and closes its menu (aria-expanded, the menu's
+// hidden). The arrow keys open it from the arrow (down on the first item, up on the last) and go between its items, Home
+// and End to the first and the last; Escape closes it and goes back to the arrow, and so does a choice; a tap outside it
+// or the focus moving out closes it. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts);
+// without a split button on the page it does nothing.
+export default function splitButton() {
+  document.querySelectorAll<HTMLElement>('[data-split-button]').forEach((root) => {
+    const toggle = root.querySelector<HTMLButtonElement>('[data-split-button-toggle]');
+    const menu = root.querySelector<HTMLElement>('[data-split-button-menu]');
+    if (!toggle || !menu) return;
+    const items = () => [...menu.querySelectorAll<HTMLElement>('a[href], button:not(:disabled)')];
+    const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
+
+    const outside = (e: PointerEvent) => {
+      if (!root.contains(e.target as Node)) set(false);
+    };
+    function set(open: boolean, focus?: 'first' | 'last' | 'toggle') {
+      toggle!.setAttribute('aria-expanded', String(open));
+      menu!.hidden = !open;
+      if (open) document.addEventListener('pointerdown', outside, true);
+      else document.removeEventListener('pointerdown', outside, true);
+      if (focus === 'toggle') toggle!.focus();
+      else if (focus) {
+        const list = items();
+        list[focus === 'first' ? 0 : list.length - 1]?.focus();
+      }
+    }
+
+    // Opened with a key (a click without a pointer: Enter, Space), the focus goes to the first item.
+    toggle.addEventListener('click', (e) => {
+      const open = !isOpen();
+      set(open, open && e.detail === 0 ? 'first' : undefined);
+    });
+    root.addEventListener('keydown', (e) => {
+      if (e.target === toggle && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        e.preventDefault();
+        set(true, e.key === 'ArrowDown' ? 'first' : 'last');
+        return;
+      }
+      if (!isOpen()) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        set(false, 'toggle');
+        return;
+      }
+      const list = items();
+      const at = list.indexOf(document.activeElement as HTMLElement);
+      if (at < 0) return;
+      const to = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: list.length - 1 }[e.key];
+      if (to === undefined) return;
+      e.preventDefault();
+      list[(to + list.length) % list.length].focus();
+    });
+    menu.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('a[href], button')) set(false, 'toggle');
+    });
+    // The focus moving to something outside it (Tab); a tap outside is `outside`.
+    root.addEventListener('focusout', (e) => {
+      const to = e.relatedTarget as Node | null;
+      if (isOpen() && to && !root.contains(to)) set(false);
+    });
+  });
+}

package/theme/ui/tabs.script.ts

@@ -1,48 +1,48 @@
-// What a tab list (Tabs.tsx with `label`, a role="tablist" of <button role="tab">) does on the site: a tab shows its
-// panel (aria-controls, the panel's id) and hides the others' (hidden), and is the open one (aria-selected); the row is
-// one stop for Tab, and the arrow keys, Home and End move to another tab and open it (WAI-ARIA's tabs pattern), which
-// is scrolled into view when the row is scrollable. Tabs that are links (the bar of "Mobilmenu") lead to their pages and
-// are left alone. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a tab list it
-// does nothing.
-export default function tabs() {
-  document.querySelectorAll<HTMLElement>('.tabs[role="tablist"]').forEach((list) => {
-    const all = () =>
-      [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')].filter((tab) => tab.closest('[role="tablist"]') === list);
-    const open = (to: HTMLButtonElement, scroll = true) => {
-      for (const tab of all()) {
-        const on = tab === to;
-        tab.setAttribute('aria-selected', String(on));
-        tab.tabIndex = on ? 0 : -1;
-        const panel = tab.getAttribute('aria-controls');
-        if (panel) document.getElementById(panel)?.toggleAttribute('hidden', !on);
-      }
-      // Only the row scrolls, never the page.
-      if (!scroll) return;
-      const tab = to.getBoundingClientRect();
-      const row = list.getBoundingClientRect();
-      if (tab.left < row.left) list.scrollLeft -= row.left - tab.left;
-      else if (tab.right > row.right) list.scrollLeft += tab.right - row.right;
-    };
-    // As drawn: the panels of the tabs that are not open hidden.
-    const first = all().find((tab) => tab.getAttribute('aria-selected') === 'true') ?? all()[0];
-    if (first) open(first, false);
-
-    list.addEventListener('click', (e) => {
-      const tab = (e.target as HTMLElement).closest<HTMLButtonElement>('[role="tab"]');
-      if (tab && all().includes(tab)) open(tab);
-    });
-    list.addEventListener('keydown', (e) => {
-      const tabs = all();
-      const at = tabs.indexOf(document.activeElement as HTMLButtonElement);
-      if (at < 0) return;
-      const rtl = getComputedStyle(list).direction === 'rtl';
-      const step = { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 }[e.key];
-      const to =
-        step !== undefined ? (at + step + tabs.length) % tabs.length : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : -1;
-      if (to < 0) return;
-      e.preventDefault();
-      open(tabs[to]);
-      tabs[to].focus();
-    });
-  });
-}
+// What a tab list (Tabs.tsx with `label`, a role="tablist" of <button role="tab">) does on the site: a tab shows its
+// panel (aria-controls, the panel's id) and hides the others' (hidden), and is the open one (aria-selected); the row is
+// one stop for Tab, and the arrow keys, Home and End move to another tab and open it (WAI-ARIA's tabs pattern), which
+// is scrolled into view when the row is scrollable. Tabs that are links (the bar of "Mobilmenu") lead to their pages and
+// are left alone. Run on every page by the theme's Base.astro (blockScripts, packages/editor/site/blockScripts.ts); without a tab list it
+// does nothing.
+export default function tabs() {
+  document.querySelectorAll<HTMLElement>('.tabs[role="tablist"]').forEach((list) => {
+    const all = () =>
+      [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')].filter((tab) => tab.closest('[role="tablist"]') === list);
+    const open = (to: HTMLButtonElement, scroll = true) => {
+      for (const tab of all()) {
+        const on = tab === to;
+        tab.setAttribute('aria-selected', String(on));
+        tab.tabIndex = on ? 0 : -1;
+        const panel = tab.getAttribute('aria-controls');
+        if (panel) document.getElementById(panel)?.toggleAttribute('hidden', !on);
+      }
+      // Only the row scrolls, never the page.
+      if (!scroll) return;
+      const tab = to.getBoundingClientRect();
+      const row = list.getBoundingClientRect();
+      if (tab.left < row.left) list.scrollLeft -= row.left - tab.left;
+      else if (tab.right > row.right) list.scrollLeft += tab.right - row.right;
+    };
+    // As drawn: the panels of the tabs that are not open hidden.
+    const first = all().find((tab) => tab.getAttribute('aria-selected') === 'true') ?? all()[0];
+    if (first) open(first, false);
+
+    list.addEventListener('click', (e) => {
+      const tab = (e.target as HTMLElement).closest<HTMLButtonElement>('[role="tab"]');
+      if (tab && all().includes(tab)) open(tab);
+    });
+    list.addEventListener('keydown', (e) => {
+      const tabs = all();
+      const at = tabs.indexOf(document.activeElement as HTMLButtonElement);
+      if (at < 0) return;
+      const rtl = getComputedStyle(list).direction === 'rtl';
+      const step = { ArrowRight: rtl ? -1 : 1, ArrowLeft: rtl ? 1 : -1 }[e.key];
+      const to =
+        step !== undefined ? (at + step + tabs.length) % tabs.length : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : -1;
+      if (to < 0) return;
+      e.preventDefault();
+      open(tabs[to]);
+      tabs[to].focus();
+    });
+  });
+}

package/theme/ui/textField.script.ts

@@ -1,17 +1,17 @@
-// What a text field (TextField.tsx) does on the site: its counter follows what is written, a multi-line field that
-// grows is as tall as its text, the clear button empties it and the password button shows or hides the password
-// (updateTextField and pressTextField in textFieldUpdate.ts). Run on every page by the theme's Base.astro
-// (blockScripts, packages/editor/site/blockScripts.ts); without such a field on the page it does nothing.
-import { pressTextField, updateTextField } from './textFieldUpdate';
-
-export default function textField() {
-  document.querySelectorAll<HTMLElement>('[data-text-field]').forEach((root) => {
-    root.addEventListener('input', () => updateTextField(root));
-    root.addEventListener('click', (e) => {
-      const button = (e.target as HTMLElement).closest<HTMLElement>('[data-text-field-clear], [data-text-field-visibility]');
-      if (button && root.contains(button)) pressTextField(root, button);
-    });
-    // What the browser may have put back (going back to the page).
-    updateTextField(root);
-  });
-}
+// What a text field (TextField.tsx) does on the site: its counter follows what is written, a multi-line field that
+// grows is as tall as its text, the clear button empties it and the password button shows or hides the password
+// (updateTextField and pressTextField in textFieldUpdate.ts). Run on every page by the theme's Base.astro
+// (blockScripts, packages/editor/site/blockScripts.ts); without such a field on the page it does nothing.
+import { pressTextField, updateTextField } from './textFieldUpdate';
+
+export default function textField() {
+  document.querySelectorAll<HTMLElement>('[data-text-field]').forEach((root) => {
+    root.addEventListener('input', () => updateTextField(root));
+    root.addEventListener('click', (e) => {
+      const button = (e.target as HTMLElement).closest<HTMLElement>('[data-text-field-clear], [data-text-field-visibility]');
+      if (button && root.contains(button)) pressTextField(root, button);
+    });
+    // What the browser may have put back (going back to the page).
+    updateTextField(root);
+  });
+}

package/theme/ui/textFieldUpdate.ts

@@ -1,44 +1,44 @@
-// What a text field (TextField.tsx) does as it is written in and its buttons are pressed, on the site
-// (textField.script.ts) and in the editor (the part's own events): its character counter follows what is written, a
-// multi-line field that grows is as tall as its text (where the browser cannot do it itself, field-sizing), the clear
-// button empties it, and the password button shows or hides the password.
-
-/** The field's input or textarea. */
-const inputOf = (root: HTMLElement) => root.querySelector<HTMLInputElement | HTMLTextAreaElement>('.text-field-input');
-
-/** A field's counter: what is written, and how much may be (12/50). */
-export const counterText = (length: number, max?: number) => (max ? `${length}/${max}` : String(length));
-
-/** Puts a text field (its .text-field element) right for what is written in it: its counter and its height. */
-export function updateTextField(root: HTMLElement) {
-  const input = inputOf(root);
-  if (!input) return;
-  const counter = root.querySelector<HTMLElement>('[data-text-field-counter]');
-  if (counter) {
-    const limit = Number(counter.dataset.limit) || undefined;
-    counter.textContent = counterText(input.value.length, input.maxLength > 0 ? input.maxLength : limit);
-    counter.classList.toggle('text-field-counter-over', !!limit && input.value.length > limit);
-  }
-  if (input instanceof HTMLTextAreaElement && input.hasAttribute('data-text-field-grow') && !CSS.supports('field-sizing', 'content')) {
-    input.style.height = 'auto';
-    input.style.height = `${input.scrollHeight}px`;
-  }
-}
-
-/** Does what a button in a text field does (`button`, its clear or password button): empties the field, or shows or
- * hides the password, and gives the field the focus. */
-export function pressTextField(root: HTMLElement, button: HTMLElement) {
-  const input = inputOf(root);
-  if (!input) return;
-  if (button.hasAttribute('data-text-field-clear')) {
-    input.value = '';
-    input.dispatchEvent(new Event('input', { bubbles: true }));
-    input.dispatchEvent(new Event('change', { bubbles: true }));
-    updateTextField(root);
-  } else if (button.hasAttribute('data-text-field-visibility') && input instanceof HTMLInputElement) {
-    const shown = input.type === 'password';
-    input.type = shown ? 'text' : 'password';
-    button.setAttribute('aria-pressed', String(shown));
-  }
-  input.focus();
-}
+// What a text field (TextField.tsx) does as it is written in and its buttons are pressed, on the site
+// (textField.script.ts) and in the editor (the part's own events): its character counter follows what is written, a
+// multi-line field that grows is as tall as its text (where the browser cannot do it itself, field-sizing), the clear
+// button empties it, and the password button shows or hides the password.
+
+/** The field's input or textarea. */
+const inputOf = (root: HTMLElement) => root.querySelector<HTMLInputElement | HTMLTextAreaElement>('.text-field-input');
+
+/** A field's counter: what is written, and how much may be (12/50). */
+export const counterText = (length: number, max?: number) => (max ? `${length}/${max}` : String(length));
+
+/** Puts a text field (its .text-field element) right for what is written in it: its counter and its height. */
+export function updateTextField(root: HTMLElement) {
+  const input = inputOf(root);
+  if (!input) return;
+  const counter = root.querySelector<HTMLElement>('[data-text-field-counter]');
+  if (counter) {
+    const limit = Number(counter.dataset.limit) || undefined;
+    counter.textContent = counterText(input.value.length, input.maxLength > 0 ? input.maxLength : limit);
+    counter.classList.toggle('text-field-counter-over', !!limit && input.value.length > limit);
+  }
+  if (input instanceof HTMLTextAreaElement && input.hasAttribute('data-text-field-grow') && !CSS.supports('field-sizing', 'content')) {
+    input.style.height = 'auto';
+    input.style.height = `${input.scrollHeight}px`;
+  }
+}
+
+/** Does what a button in a text field does (`button`, its clear or password button): empties the field, or shows or
+ * hides the password, and gives the field the focus. */
+export function pressTextField(root: HTMLElement, button: HTMLElement) {
+  const input = inputOf(root);
+  if (!input) return;
+  if (button.hasAttribute('data-text-field-clear')) {
+    input.value = '';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    updateTextField(root);
+  } else if (button.hasAttribute('data-text-field-visibility') && input instanceof HTMLInputElement) {
+    const shown = input.type === 'password';
+    input.type = shown ? 'text' : 'password';
+    button.setAttribute('aria-pressed', String(shown));
+  }
+  input.focus();
+}