aerolith 1.1.0 → 1.2.0

package/LICENSE

@@ -22,7 +22,8 @@ SOFTWARE.
 
 The rendered sprite images in library/dist/ are covered by the same license.
 The fonts in library/dist/fonts/ are not: they are under the SIL Open Font
-License 1.1 (Istok Web, Selawik, and Aerolith Display, which is derived from
-Istok Web). Their license files are in that folder.
+License 1.1 (Istok Web, Aerolith Text, which is derived from Selawik, and
+Aerolith Display, which is derived from Istok Web). Their license files are in
+that folder.
 Bryce is a trademark of its respective owner. This project is not affiliated
 with or endorsed by it, and contains no part of the Bryce software.

package/README.md

@@ -1,6 +1,6 @@
 # Aerolith
 
-Frutiger Aero for the web. Every button, field, pane, icon and title letter is a Bryce 2 render
+Tactile UI for the web. Every button, field, pane, icon and title letter is a Bryce 2 render
 (1996), laid over plain HTML elements.
 
 **[Live showcase](https://immineal.github.io/aerolith/)** · [npm](https://www.npmjs.com/package/aerolith) · [Changelog](CHANGELOG.md)
@@ -39,7 +39,7 @@ example of every component. Self-hosting: keep `sprites/` and `fonts/` next to `
 | GitHub Packages | `npm i @immineal/aerolith --registry=https://npm.pkg.github.com` | same |
 | Composer | `composer require immineal/aerolith` | serve `vendor/immineal/aerolith/library/dist/` |
 | PyPI | `pip install aerolith` | `aerolith.static_dir()`; Django: add `"aerolith"` to `INSTALLED_APPS` |
-| CDN | jsDelivr, unpkg, esm.sh | or `cdn.jsdelivr.net/gh/immineal/aerolith@v1.1.0/library/dist/aerolith.css` |
+| CDN | jsDelivr, unpkg, esm.sh | or `cdn.jsdelivr.net/gh/immineal/aerolith@v1.2.0/library/dist/aerolith.css` |
 
 React, Vue, Svelte, Astro: import the CSS once in your entry file and use the classes
 (`className` in JSX). Content added after load needs `window.Aerolith.init(container)`.
@@ -55,7 +55,7 @@ React, Vue, Svelte, Astro: import the CSS once in your entry file and use the cl
 | `.aer-check`, `.aer-radio` | checkbox, radio | checked, mixed, disabled |
 | `.aer-field` | `<input>`, `<textarea>`, `<select>` | focus, disabled |
 | `.aer-select` | wrapper around `select.aer-field` | |
-| `.aer-segmented` | radios in labels, or links with `aria-current` | hover, selected |
+| `.aer-segmented` | radios in labels, or links with `aria-current` | hover, selected (slides with the JS) |
 | `.aer-choice` | `<label>` with a radio or checkbox | hover, checked, focus |
 | `.aer-drop` | `<label>` with `<input type="file">` | drag-over, focus |
 | `.aer-progress` | `<progress>` | value |
@@ -67,7 +67,7 @@ React, Vue, Svelte, Astro: import the CSS once in your entry file and use the cl
 | `.aer-dialog`, `.aer-close` | `<dialog>`, `<button>` | open, backdrop |
 | `.aer-popover`, `.aer-menu` | `[popover]` | item hover/focus |
 | `.aer-bar` | `<header>`, `<nav>` | |
-| `.aer-lens` | any block | rim refraction in Chromium |
+| `.aer-lens` | any block | rim refraction; `data-aer-drag` makes it movable |
 | `.aer-compare` | two `<img>` and an `<input type="range">` | |
 | `.aer-display` (+ `.aer-aqua`, `.aer-glass`, `.aer-pearl`) | any heading | 116 characters |
 
@@ -83,8 +83,8 @@ Aerolith Display is a colour font of rendered gel letters, so titles stay real,
 Use it from 32 px up. Each material is about 0.6 MB, loaded only where used. Browsers without
 colour fonts show heavy Istok.
 
-Body text is **Selawik**, an open Segoe UI stand-in. `data-aer-type="istok"` switches to
-**Istok Web**. Dark mode follows the system; `data-theme="dark"` or `"light"` on `<html>` forces it,
+Body text is **Aerolith Text**, Selawik (an open Segoe UI stand-in) with a kern table, because Selawik
+ships without kerning. `data-aer-type="istok"` switches to **Istok Web**. Dark mode follows the system; `data-theme="dark"` or `"light"` on `<html>` forces it,
 and the sun/moon switch (`input[data-aer-theme]`) sets that for you.
 
 ## Accessibility
@@ -130,7 +130,8 @@ Setup: [harness/README.md](harness/README.md). Design rules:
 
 - **No colour picker.** Colours are baked into the renders.
 - **Three heights.** 32, 44 or 56 px; buttons stretch sideways only.
-- **The lens bends light only in Chromium.** Firefox and Safari show plain glass.
+- **The lens bends light in Chromium, and in Firefox with `data-aer-lens-backdrop="#el"`** (the
+  element behind it). Safari shows plain glass.
 - **No framework components.** Put the classes on your own elements.
 - **Bitmap icons and titles.** Icons are 16 and 24 px. Titles are sharp up to about 120 px and
   cover Latin with German and French accents.
@@ -138,6 +139,7 @@ Setup: [harness/README.md](harness/README.md). Design rules:
 ## License
 
 MIT for code and sprites ([LICENSE](LICENSE)). Fonts in `library/dist/fonts/` are SIL OFL 1.1:
-Istok Web (Andrey V. Panov) and Selawik (Microsoft) unmodified, Aerolith Display derived from
+Istok Web (Andrey V. Panov) unmodified; Aerolith Text, derived from Selawik (Microsoft) with a kern
+table added and renamed because the OFL reserves "Selawik"; Aerolith Display, derived from
 Istok Web Bold. Bryce is a trademark of its owner; Aerolith is not affiliated and contains no
 Bryce code.

package/library/dist/aerolith.css

@@ -21,7 +21,7 @@
   --aer-target-gap: var(--aer-space-2);
 
   /* type: modular scale 1.2 */
-  --aer-font-ui: "Selawik", "Segoe UI", "Istok Web", "Frutiger", "Myriad Pro", Tahoma, system-ui, sans-serif;  /* bundled: type.css */
+  --aer-font-ui: "Aerolith Text", "Selawik", "Segoe UI", "Istok Web", "Myriad Pro", Tahoma, system-ui, sans-serif;  /* bundled: type.css */
   --aer-font-text: var(--aer-font-ui);
   --aer-font-mono: "Consolas", "Lucida Console", ui-monospace, monospace;
   --aer-text-xs: 0.833rem;
@@ -68,6 +68,13 @@
 /* 10-foot / distance media: scale everything so the visual angle stays comfortable at ~3 m */
 .aer-distance { font-size: 150%; --aer-control: var(--aer-control-l); }
 
+/* Chromium on Linux and Windows rounds every glyph advance to whole pixels unless asked for precise
+   geometry: a 16 px label came out 1.6 px wider with an open gap after the f in "verfügbar".
+   Scoped to our own controls; a host page keeps its own text-rendering. */
+:is(.aer-button, .aer-field, .aer-select, .aer-badge, .aer-segmented, .aer-menu, .aer-label, .aer-option,
+    .aer-choice, .aer-check, .aer-radio, .aer-toggle, .aer-panel, .aer-card, .aer-callout, .aer-dialog,
+    .aer-popover, .aer-toast) { text-rendering: geometricPrecision; }
+
 /* label text on glossy sprites: white + halo (WCAG measures text against its halo) */
 .aer-on-gloss {
   color: var(--aer-on-gloss);
@@ -89,7 +96,7 @@
 @media (forced-colors: active) {
   .aer [class*="aer-"] { border-color: ButtonText; }
   .aer-button, .aer-field, .aer-panel { border: 1px solid ButtonText !important; }
-  .aer-button:focus-visible { outline: 2px solid Highlight; }
+  .aer-button:focus-visible, .aer .aer-field:focus-visible, .aer-field:focus-visible { outline: 2px solid Highlight; }
 }
 
 /* utilities */
@@ -100,7 +107,8 @@
 
 /* ---- type.css ---- */
 /* Aerolith type.
-   Text: Selawik (default) or Istok Web (data-aer-type="istok"), both bundled, both SIL OFL 1.1.
+   Text: Aerolith Text (default; Selawik with a kern table, renamed because the OFL reserves "Selawik")
+   or Istok Web (data-aer-type="istok"), both bundled, both SIL OFL 1.1.
    Titles: Aerolith Display, gel letters rendered in Bryce and packed into colour fonts. Each
    material comes as OpenType-SVG (Firefox, Safari) and sbix (Chromium); tech() makes a browser
    download only the file it can draw. The fonts keep outlines, so a browser without colour-font
@@ -115,13 +123,13 @@
 @font-face { font-family: "Istok Web"; src: url(fonts/istok-web-bold-italic.woff2) format("woff2");
   font-weight: 700; font-style: italic; font-display: swap; }
 
-@font-face { font-family: "Selawik"; src: url(fonts/selawik-light.woff2) format("woff2");
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-light.woff2) format("woff2");
   font-weight: 300; font-display: swap; }
-@font-face { font-family: "Selawik"; src: url(fonts/selawik-regular.woff2) format("woff2");
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-regular.woff2) format("woff2");
   font-weight: 400; font-display: swap; }
-@font-face { font-family: "Selawik"; src: url(fonts/selawik-semibold.woff2) format("woff2");
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-semibold.woff2) format("woff2");
   font-weight: 600; font-display: swap; }
-@font-face { font-family: "Selawik"; src: url(fonts/selawik-bold.woff2) format("woff2");
+@font-face { font-family: "Aerolith Text"; src: url(fonts/aerolith-text-bold.woff2) format("woff2");
   font-weight: 700; font-display: swap; }
 
 @font-face { font-family: "Aerolith Display Aqua"; font-display: swap;
@@ -138,7 +146,7 @@
        url(fonts/aerolith-display-pearl.bmp.woff2) format("woff2") tech(color-sbix); }
 
 [data-aer-type="istok"], .aer-type-istok {
-  --aer-font-ui: "Istok Web", "Selawik", "Segoe UI", Tahoma, system-ui, sans-serif;
+  --aer-font-ui: "Istok Web", "Aerolith Text", "Segoe UI", Tahoma, system-ui, sans-serif;
 }
 
 /* Big titles only: the letters are rendered at about 80 px per em and read best from 32 px up.
@@ -1454,6 +1462,8 @@
 .aer-field:focus {
   border-image: var(--aer-field-focus) var(--aer-field-focus-slice) / var(--aer-field-focus-border) / var(--aer-field-focus-outset) stretch;
 }
+/* the rendered aqua rim is the focus indicator: the square outline would cut across the rounded well */
+.aer .aer-field:focus-visible, .aer-field:focus-visible { outline: none; }
 textarea.aer-field { block-size: auto; min-block-size: calc(var(--aer-control) * 2); padding-block: var(--aer-space-3); resize: vertical; line-height: var(--aer-leading); }
 .aer-field:disabled, .aer-field[readonly] { color: var(--aer-ink-muted); }
 .aer-label { display: grid; gap: var(--aer-space-1); font: 600 var(--aer-text-s) / 1.3 var(--aer-font-ui); color: var(--aer-ink); }
@@ -1629,6 +1639,20 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
 }
 .aer-segmented > :has(:focus-visible) { outline: 2px solid var(--aer-focus); outline-offset: 2px; }
 .aer-segmented > :has(:disabled) { opacity: 0.5; cursor: not-allowed; }
+/* with aerolith.js: one pill carries the chip and slides; the items' own chips give way */
+.aer-segmented[data-aer-slide] { position: relative; isolation: isolate; }
+.aer-seg-pill {
+  position: absolute; left: 0; top: 0; z-index: -1; box-sizing: border-box; pointer-events: none;
+  border-style: solid; border-color: transparent; border-width: 0;
+  border-image: var(--aer-seg-chip) var(--aer-seg-chip-slice) / var(--aer-seg-chip-border) / var(--aer-seg-chip-outset) stretch;
+}
+.aer-segmented[data-aer-ready] > .aer-seg-pill {
+  transition: transform 300ms cubic-bezier(.3, 1.2, .5, 1), width 300ms cubic-bezier(.3, 1.2, .5, 1);
+}
+.aer-segmented[data-aer-slide] > :is(:has(:checked), [aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"]) {
+  border-image: none;
+}
+.aer-segmented[data-aer-ready] > :not(.aer-seg-pill) { transition: color 200ms, text-shadow 200ms; }
 
 /* ------------------------------------------------------------------ choice card: a whole tile is the radio/checkbox
    <label class="aer-choice"><input type="radio" class="aer-radio" name="f"> <b>PDF</b> <small>…</small></label> */
@@ -1826,14 +1850,27 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
 }
 .aer-bar > .aer-spacer { flex: 1; }
 
-/* ------------------------------------------------------------------ lens: clear thick glass; in Chromium aerolith.js
-   adds the refraction of its rim (an SVG displacement map computed from the same bevel profile) */
+/* ------------------------------------------------------------------ lens: clear thick glass. aerolith.js adds the
+   refraction of its rim (an SVG displacement map computed from the same bevel profile): in Chromium, and in
+   Firefox when data-aer-lens-backdrop names the element behind it. Safari shows plain glass. */
 .aer-lens {
   position: relative; box-sizing: border-box; padding: var(--aer-space-5);
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-lens) var(--aer-lens-slice) / var(--aer-lens-border) / var(--aer-lens-outset) stretch;
   color: var(--aer-ink);
 }
+/* with a backdrop copy: copy at the bottom, glass sprite over it, content on top */
+.aer-lens[data-aer-lens-view] { isolation: isolate; border-image: none; }
+.aer-lens[data-aer-lens-view]::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  border-style: solid; border-color: transparent; border-width: 0;
+  border-image: var(--aer-lens) var(--aer-lens-slice) / var(--aer-lens-border) / var(--aer-lens-outset) stretch;
+}
+.aer-lens-view { position: absolute; z-index: -2; overflow: hidden; pointer-events: none; }   /* placed by aerolith.js */
+/* the focus ring follows the glass, not a square box */
+.aer-lens[data-aer-drag] { border-radius: 24px; }
+.aer-lens[data-aer-drag] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
+.aer-lens[data-aer-dragging] { cursor: grabbing; }
 
 /* ------------------------------------------------------------------ preferences */
 /* ------------------------------------------------------------------ state sprites, fetched up front
@@ -1865,6 +1902,7 @@ a.aer-card, button.aer-card, .aer-card[data-interactive], .aer-close {
   .aer-spinner::before { animation: none; }
   .aer-toggle::before, .aer-progress::-webkit-progress-value { transition: none; }
   .aer-toast, .aer-dialog[open] { animation: none; }
+  .aer-segmented[data-aer-ready] > .aer-seg-pill, .aer-segmented[data-aer-ready] > :not(.aer-seg-pill) { transition: none; }
 }
 /* forced colours: sprites are dropped, native rendering and system colours take over */
 @media (forced-colors: active) {
@@ -1877,6 +1915,7 @@ a.aer-card, button.aer-card, .aer-card[data-interactive], .aer-close {
     background: Highlight; color: HighlightText; forced-color-adjust: none;
   }
   .aer-toggle, .aer-check, .aer-radio { appearance: auto; border-image: none; }
-  .aer-toggle::before, .aer-spinner::before, .aer-callout::before { display: none; }
+  .aer-toggle::before, .aer-spinner::before, .aer-callout::before, .aer-seg-pill,
+  .aer-lens::before, .aer-lens-view { display: none; }
   .aer-spinner { border: 3px dotted CanvasText; border-radius: 50%; }
 }

package/library/dist/aerolith.js

@@ -3,8 +3,10 @@
 //   - slider / compare: keeps --aer-fill in sync with the native range value
 //   - drop zone: [data-aer-over] while files are dragged over an .aer-drop
 //   - theme switch: input[data-aer-theme] toggles <html data-theme> and remembers the choice
-//   - lens: the rim refraction of .aer-lens (Chromium only: backdrop-filter with an SVG filter)
+//   - lens: the rim refraction of .aer-lens (Chromium; Firefox too with data-aer-lens-backdrop);
+//     data-aer-drag makes it movable
 //   - menus: popovers drop down from their button; [data-aer-menu] opens one at the pointer
+//   - segmented: the selected chip slides between items
 //   - preload: sprites of closed dialogs and popovers load with the page
 (function () {
   "use strict";
@@ -36,33 +38,64 @@
   }
 
   // ---------------------------------------------------------------- lens: displacement map from the bevel profile
-  var lensId = 0, svgRoot = null;
+  // Two ways to bend what is behind the rim:
+  //  - data-aer-lens-backdrop="<selector>": the lens carries a copy of that element, lined up with the
+  //    original, and bends the copy with filter: url(). Chromium and Firefox.
+  //  - otherwise, Chromium only: backdrop-filter: url(). Safari shows plain glass either way.
+  // data-aer-drag makes the lens movable (pointer, touch, arrow keys) inside its parent.
+  var lensId = 0, svgRoot = null, PAD = 2;
+  // Lens geometry, same as the rendered sprite (catalog.py): superellipse corners (n = 4) of radius
+  // LENS_R, a convex edge 1-(1-t)^4 over LENS_BEVEL px. Light comes straight down, refracts at the
+  // curved top and the flat bottom (IOR 1.5), then travels LIFT px to the page under the glass.
+  var LENS_R = 32, LENS_BEVEL = 30, GLASS = 20, BASE = 4, LIFT = 24, IOR = 1.5;
+  var DISPERSION = [0.9, 1, 1.16];       // red, green, blue: blue bends most
   function chromium() { return !!(navigator.userAgentData && navigator.userAgentData.brands &&
     navigator.userAgentData.brands.some(function (b) { return /Chromium/.test(b.brand); })); }
-  function lensMap(w, h, radius, bevel) {
-    // height h(d) = smoothstep(d / bevel) of the distance d to the rounded-rect outline; the
-    // gradient of h, scaled to 0..255 around 128, tells feDisplacementMap how far to bend light
-    var c = document.createElement("canvas"); c.width = w; c.height = h;
-    var g = c.getContext("2d"), img = g.createImageData(w, h), px = img.data;
-    var hx = w / 2, hy = h / 2, r = Math.min(radius, hx, hy);
-    function height(x, y) {
-      var qx = Math.abs(x - hx) - (hx - r), qy = Math.abs(y - hy) - (hy - r);
-      var out = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
-      var t = Math.min(Math.max(-out / bevel, 0), 1);
-      return t * t * (3 - 2 * t);
-    }
-    for (var y = 0; y < h; y++) for (var x = 0; x < w; x++) {
-      var dx = height(x + 1, y + 0.5) - height(x, y + 0.5), dy = height(x + 0.5, y + 1) - height(x + 0.5, y);
-      var k = bevel * 0.75, i = (y * w + x) * 4;
-      px[i] = 128 + Math.max(-127, Math.min(127, dx * k * 127));
-      px[i + 1] = 128 + Math.max(-127, Math.min(127, dy * k * 127));
-      px[i + 2] = 128; px[i + 3] = 255;
+  function bend(d, bevel) {               // px of sideways shift at depth d (px in from the outline)
+    var t = Math.min(Math.max(d / bevel, 0), 1), u = 1 - t;
+    var z = GLASS * (1 - u * u * u * u), slope = GLASS * 4 * u * u * u / bevel;
+    var ti = Math.atan(slope), dl = ti - Math.asin(Math.sin(ti) / IOR);
+    return (z + BASE) * Math.tan(dl) + LIFT * Math.tan(Math.asin(Math.min(1, IOR * Math.sin(dl))));
+  }
+  function lensMap(w, h, W, H, q) {
+    // W x H map (lens centred) at q px per CSS px. R and G hold the inward shift as a fraction of the
+    // largest one (128 = none); returns the map and that largest shift in px. One lookup table, then
+    // a few multiplications per pixel: cheap enough to redo on every resize.
+    var R = Math.min(LENS_R, w / 2, h / 2), bevel = Math.min(LENS_BEVEL, R);
+    var STEP = 16, lut = new Float32Array(Math.ceil(bevel * STEP) + 2), max = bend(0, bevel);
+    for (var k = 0; k < lut.length; k++) lut[k] = bend(k / STEP, bevel) / max;
+    var cw = Math.round(W * q), ch = Math.round(H * q);
+    var c = document.createElement("canvas"); c.width = cw; c.height = ch;
+    var g = c.getContext("2d"), img = g.createImageData(cw, ch), px = img.data;
+    var hx = w / 2, hy = h / 2, ex = hx - R, ey = hy - R;
+    for (var Y = 0; Y < ch; Y++) {
+      var y = (Y + 0.5) / q - H / 2, ay = Math.abs(y), qy = ay - ey;
+      for (var X = 0; X < cw; X++) {
+        var x = (X + 0.5) / q - W / 2, ax = Math.abs(x), qx = ax - ex, d, ux = 0, uy = 0;
+        if (qx > 0 && qy > 0) {               // corner: superellipse, n = 4
+          var x3 = qx * qx * qx, y3 = qy * qy * qy, L = Math.sqrt(Math.sqrt(x3 * qx + y3 * qy));
+          d = R - L;
+          var gl = Math.hypot(x3, y3); ux = -x3 / gl; uy = -y3 / gl;
+        } else if (qx > qy) { d = R - qx; ux = -1; }
+        else { d = R - qy; uy = -1; }
+        if (x < 0) ux = -ux;
+        if (y < 0) uy = -uy;
+        var m = 0;
+        if (d > 0 && d < bevel) { var f = d * STEP, k0 = f | 0; m = lut[k0] + (lut[k0 + 1] - lut[k0]) * (f - k0); }
+        var i = (Y * cw + X) * 4;
+        px[i] = 128 + Math.round(127 * m * ux); px[i + 1] = 128 + Math.round(127 * m * uy);
+        px[i + 2] = 128; px[i + 3] = 255;
+      }
     }
     g.putImageData(img, 0, 0);
-    return c.toDataURL();
+    return { url: c.toDataURL(), max: max };
   }
   function lens(el) {
-    if (!chromium()) return;
+    if (el.hasAttribute("data-aer-drag")) drag(el);
+    // WebKit (Safari, every iOS browser) misplaces SVG filters on HTML: plain glass there
+    var sel = el.getAttribute("data-aer-lens-backdrop"), gecko = CSS.supports("-moz-appearance", "none");
+    var src = sel && (chromium() || gecko) ? document.querySelector(sel) : null;
+    if (!src && !chromium()) return;
     var NS = "http://www.w3.org/2000/svg";
     if (!svgRoot) {
       svgRoot = document.createElementNS(NS, "svg");
@@ -70,34 +103,102 @@
       svgRoot.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
       document.body.appendChild(svgRoot);
     }
-    var id = "aer-lens-" + (++lensId), filter = null;
+    var id = "aer-lens-" + (++lensId), filter = null, view = null, copy = null, ox = 0, oy = 0;
+    if (src) {
+      // the copy: same element, same classes, no ids, no lens inside, lined up with the original
+      view = document.createElement("div");
+      view.className = "aer-lens-view"; view.setAttribute("aria-hidden", "true"); view.inert = true;
+      copy = src.cloneNode(true);
+      copy.removeAttribute("id");
+      copy.querySelectorAll("[id]").forEach(function (n) { n.removeAttribute("id"); });
+      copy.querySelectorAll(".aer-lens").forEach(function (n) { n.remove(); });
+      view.appendChild(copy);
+      el.insertBefore(view, el.firstChild);
+      el.setAttribute("data-aer-lens-view", "");
+    }
+    function sync() {                       // line the copy up with the original
+      if (!copy) return;
+      var cs = getComputedStyle(src), a = src.getBoundingClientRect(), b = el.getBoundingClientRect();
+      var st = copy.style;
+      st.position = "absolute"; st.margin = "0"; st.boxSizing = "border-box"; st.transform = "none"; st.translate = "none";
+      st.width = src.offsetWidth + "px"; st.height = src.offsetHeight + "px";
+      st.left = (a.left - b.left + ox) + "px"; st.top = (a.top - b.top + oy) + "px";
+      ["color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"].forEach(function (p) { st[p] = cs[p]; });
+    }
     function build() {
       var w = Math.round(el.offsetWidth), h = Math.round(el.offsetHeight);
       if (!w || !h) return;
       if (filter) filter.remove();
+      var pad = view ? PAD : 0, W = w + 2 * pad, H = h + 2 * pad;
+      var map = lensMap(w, h, W, H, Math.min(2, window.devicePixelRatio || 1));
+      if (view) {
+        ox = pad; oy = pad;
+        var vs = view.style;
+        vs.left = -pad + "px"; vs.top = -pad + "px"; vs.width = W + "px"; vs.height = H + "px";
+      }
+      // map -> three displacements (red, green, blue bend by different amounts) -> recombined
       filter = document.createElementNS(NS, "filter");
       filter.id = id;
-      ["x", "y"].forEach(function (a) { filter.setAttribute(a, "0"); });
-      filter.setAttribute("width", w); filter.setAttribute("height", h);
-      filter.setAttribute("filterUnits", "userSpaceOnUse");
-      filter.setAttribute("color-interpolation-filters", "sRGB");
-      var fi = document.createElementNS(NS, "feImage");
-      fi.setAttribute("href", lensMap(w, h, 24, Math.min(28, w / 4, h / 4)));
-      fi.setAttribute("x", 0); fi.setAttribute("y", 0); fi.setAttribute("width", w); fi.setAttribute("height", h);
-      fi.setAttribute("preserveAspectRatio", "none"); fi.setAttribute("result", "map");
-      var dm = document.createElementNS(NS, "feDisplacementMap");
-      dm.setAttribute("in", "SourceGraphic"); dm.setAttribute("in2", "map"); dm.setAttribute("scale", "36");
-      dm.setAttribute("xChannelSelector", "R"); dm.setAttribute("yChannelSelector", "G");
-      filter.appendChild(fi); filter.appendChild(dm);
+      var attrs = { x: 0, y: 0, width: W, height: H, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse",
+                    "color-interpolation-filters": "sRGB" };
+      for (var a in attrs) filter.setAttribute(a, attrs[a]);
+      function prim(tag, at) {
+        var n = document.createElementNS(NS, tag);
+        for (var a in at) n.setAttribute(a, at[a]);
+        filter.appendChild(n);
+      }
+      prim("feImage", { href: map.url, x: 0, y: 0, width: W, height: H, preserveAspectRatio: "none", result: "map" });
+      ["r", "g", "b"].forEach(function (ch, k) {
+        prim("feDisplacementMap", { in: "SourceGraphic", in2: "map", scale: (2 * map.max * DISPERSION[k]).toFixed(2),
+                                    xChannelSelector: "R", yChannelSelector: "G", result: "d" + ch });
+        var m = ["0 0 0 0 0", "0 0 0 0 0", "0 0 0 0 0"]; m[k] = ["1 0 0 0 0", "0 1 0 0 0", "0 0 1 0 0"][k];
+        prim("feColorMatrix", { in: "d" + ch, type: "matrix", values: m.join(" ") + " 0 0 0 1 0", result: ch });
+      });
+      prim("feComposite", { in: "r", in2: "g", operator: "arithmetic", k2: 1, k3: 1, result: "rg" });
+      prim("feComposite", { in: "rg", in2: "b", operator: "arithmetic", k2: 1, k3: 1 });
       svgRoot.appendChild(filter);
-      el.style.backdropFilter = "url(#" + id + ")";
+      if (view) { sync(); view.style.filter = "url(#" + id + ")"; }
+      else el.style.backdropFilter = "url(#" + id + ")";
       el.setAttribute("data-aer-lens", "");
     }
+    el._aerLensSync = sync;
     build();
     if (window.ResizeObserver) {
       var t;
       new ResizeObserver(function () { clearTimeout(t); t = setTimeout(build, 120); }).observe(el);
+      if (src) new ResizeObserver(sync).observe(src);
     }
+    addEventListener("resize", sync);
+  }
+  function drag(el) {
+    var x = 0, y = 0, start = null;
+    if (!el.hasAttribute("tabindex")) el.tabIndex = 0;
+    function moveTo(nx, ny) {
+      var box = el.parentElement.getBoundingClientRect(), r = el.getBoundingClientRect();
+      var bx = r.left - x, by = r.top - y;          // where it sits without the shift
+      x = Math.round(clamp(nx, box.left - bx, box.right - r.width - bx));
+      y = Math.round(clamp(ny, box.top - by, box.bottom - r.height - by));
+      el.style.translate = x + "px " + y + "px";
+      if (el._aerLensSync) el._aerLensSync();
+    }
+    el.addEventListener("pointerdown", function (e) {
+      if (e.button !== 0 || e.target.closest("a, button, input, select, textarea")) return;
+      start = { px: e.clientX, py: e.clientY, x: x, y: y };
+      el.setPointerCapture(e.pointerId); el.setAttribute("data-aer-dragging", "");
+      e.preventDefault();
+    });
+    el.addEventListener("pointermove", function (e) {
+      if (start) moveTo(start.x + e.clientX - start.px, start.y + e.clientY - start.py);
+    });
+    ["pointerup", "pointercancel", "lostpointercapture"].forEach(function (t) {
+      el.addEventListener(t, function () { start = null; el.removeAttribute("data-aer-dragging"); });
+    });
+    el.addEventListener("keydown", function (e) {
+      var d = e.shiftKey ? 40 : 10, k = { ArrowLeft: [-d, 0], ArrowRight: [d, 0], ArrowUp: [0, -d], ArrowDown: [0, d] }[e.key];
+      if (!k) return;
+      e.preventDefault(); moveTo(x + k[0], y + k[1]);
+    });
+    if (window.ResizeObserver) new ResizeObserver(function () { moveTo(x, y); }).observe(el.parentElement);
   }
 
   // ---------------------------------------------------------------- menus: placed like a context menu
@@ -198,10 +299,59 @@
     document.body.appendChild(i);
   }
 
+  // ---------------------------------------------------------------- segmented: one pill that slides
+  // Without this every selected item draws its own chip. With it, one .aer-seg-pill under the items
+  // carries the chip and CSS moves it. It follows radio changes, aria-current / -selected / -pressed
+  // (MutationObserver), form resets and size changes; a size change snaps instead of sliding.
+  function selected(c) {
+    var i = c.querySelector("input");
+    if (i) return i.checked;
+    var a = c.getAttribute("aria-current");
+    return (a !== null && a !== "false") || c.getAttribute("aria-selected") === "true" ||
+      c.getAttribute("aria-pressed") === "true";
+  }
+  function slide(seg) {
+    var pill = document.createElement("span"), shown = false;
+    pill.className = "aer-seg-pill"; pill.setAttribute("aria-hidden", "true");
+    seg.appendChild(pill);                      // last, so a fieldset's legend stays first
+    seg.setAttribute("data-aer-slide", "");
+    function place(snap) {
+      var c = null;
+      for (var k = 0; k < seg.children.length; k++) {
+        var e = seg.children[k];
+        if (e !== pill && selected(e)) { c = e; break; }
+      }
+      if (!c || !c.offsetWidth) { pill.style.opacity = "0"; shown = false; return; }
+      if (snap || !shown) seg.removeAttribute("data-aer-ready");
+      pill.style.opacity = "";
+      pill.style.transform = "translate(" + c.offsetLeft + "px, " + c.offsetTop + "px)";
+      pill.style.width = c.offsetWidth + "px"; pill.style.height = c.offsetHeight + "px";
+      if (snap || !shown) { void pill.offsetWidth; seg.setAttribute("data-aer-ready", ""); }   // reflow, then animate again
+      shown = true;
+    }
+    seg._aerPlace = place;
+    seg.addEventListener("change", function () { place(); });
+    if (window.MutationObserver)
+      new MutationObserver(function () { place(); }).observe(seg, { subtree: true, attributes: true,
+        attributeFilter: ["aria-current", "aria-selected", "aria-pressed"] });
+    var form = seg.closest && seg.closest("form");
+    if (form) form.addEventListener("reset", function () { setTimeout(place, 0); });
+    if (window.ResizeObserver) {
+      var ro = new ResizeObserver(function () { place(true); });
+      ro.observe(seg);
+      for (var k = 0; k < seg.children.length; k++) if (seg.children[k] !== pill) ro.observe(seg.children[k]);
+    }
+    place(true);
+  }
+
   // ---------------------------------------------------------------- init
+  // Calling init again re-places the segmented pills, e.g. after setting input.checked from script.
   function init(root) {
     root = root || document;
     preload(root);
+    root.querySelectorAll(".aer-segmented").forEach(function (s) {
+      if (once(s, "aerSlide")) slide(s); else if (s._aerPlace) s._aerPlace();
+    });
     root.querySelectorAll(".aer-popover[popover]").forEach(function (p) { if (once(p, "aerBound")) bindPopover(p); });
     root.querySelectorAll("[data-aer-menu]").forEach(function (el) { if (once(el, "aerCtxBound")) bindContext(el); });
     root.querySelectorAll(".aer-slider > input[type=range], .aer-compare > input[type=range]").forEach(function (input) {

package/library/dist/fonts/{OFL-Selawik.txt → OFL-Aerolith-Text.txt}

@@ -1,3 +1,9 @@
+Aerolith Text is derived from Selawik by Microsoft Corporation. A kern table was added and the
+font was renamed; it is a Modified Version under the SIL Open Font License 1.1 below and does not
+use the Reserved Font Name "Selawik".
+
+Copyright (c) 2026, Immineal (kern table).
+
 Copyright 2015, Microsoft Corporation (www.microsoft.com), with Reserved Font Name Selawik.  All Rights Reserved.  Selawik is a trademark of Microsoft Corporation in the United States and/or other countries.
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "aerolith",
-  "version": "1.1.0",
-  "description": "Glossy buttons and real glass for the web, in the Frutiger Aero style. Every sprite rendered in Bryce 2 (1996) and laid over plain HTML.",
+  "version": "1.2.0",
+  "description": "Tactile UI for the web, rendered in Bryce 2 and laid over plain HTML.",
   "keywords": [
-    "frutiger-aero", "css", "ui", "ui-library", "design-system", "skeuomorphism", "glassmorphism",
-    "retro", "y2k", "aero", "bryce", "sprites", "dark-mode", "accessibility", "vanilla-css"
+    "tactile", "css", "ui", "ui-library", "design-system", "skeuomorphism", "glassmorphism",
+    "retro", "bryce", "sprites", "dark-mode", "accessibility", "vanilla-css"
   ],
   "homepage": "https://immineal.github.io/aerolith/",
   "bugs": "https://github.com/immineal/aerolith/issues",