aerolith 1.1.0 → 1.3.0

package/LICENSE

@@ -21,8 +21,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 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.
+The fonts in library/dist/fonts/ and fonts/ are not: they are under the SIL
+Open Font License 1.1 (Aerolith Text, which is derived from Selawik, and
+Aerolith Display, which is derived from Istok Web). Their license files are in
+those folders.
 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.3.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)`.
@@ -49,13 +49,13 @@ React, Vue, Svelte, Astro: import the CSS once in your entry file and use the cl
 | Class | On | States |
 |---|---|---|
 | `.aer-button` (+ `.aer-secondary`, `.aer-quiet`; `.aer-s`, `.aer-l`) | `<button>`, `<a>` | hover, pressed, `aria-pressed`, disabled |
-| `.aer-iconbtn` (+ `.aer-quiet`) | `<button>` with an `.aer-icon` | hover, pressed |
+| `.aer-iconbtn` (+ `.aer-quiet`) | `<button>` with an `.aer-icon` | hover, pressed, `aria-pressed` (`data-aer-toggle` flips it on click; a heart turns to its outline when off) |
 | `.aer-icon .aer-icon-<name>` (+ `.aer-s`, `.aer-pearl`) | `<span aria-hidden="true">` | 35 glyphs, 24/16 px |
 | `.aer-toggle` (+ `.aer-theme`) | `<input type="checkbox" role="switch">` | on, disabled |
 | `.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 |
 
@@ -81,10 +81,13 @@ React, Vue, Svelte, Astro: import the CSS once in your entry file and use the cl
 
 Aerolith Display is a colour font of rendered gel letters, so titles stay real, selectable text.
 Use it from 32 px up. Each material is about 0.6 MB, loaded only where used. Browsers without
-colour fonts show heavy Istok.
+colour fonts show plain heavy letters.
 
-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. Both fonts are also in [`fonts/`](fonts/) as TTF files for your computer
+([download](https://github.com/immineal/aerolith/releases/latest/download/aerolith-fonts.zip)).
+
+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,14 +133,15 @@ 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.
 
 ## 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 Bold. Bryce is a trademark of its owner; Aerolith is not affiliated and contains no
+MIT for code and sprites ([LICENSE](LICENSE)). The fonts in `library/dist/fonts/` and `fonts/` are
+SIL OFL 1.1: 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 (Andrey V. Panov). 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", "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,28 +107,19 @@
 
 /* ---- type.css ---- */
 /* Aerolith type.
-   Text: Selawik (default) or Istok Web (data-aer-type="istok"), both bundled, both SIL OFL 1.1.
+   Text: Aerolith Text, Selawik with a kern table (renamed because the OFL reserves "Selawik"), 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
-   support still shows the title, in plain heavy Istok. */
-
-@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-regular.woff2) format("woff2");
-  font-weight: 400; font-style: normal; font-display: swap; }
-@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-italic.woff2) format("woff2");
-  font-weight: 400; font-style: italic; font-display: swap; }
-@font-face { font-family: "Istok Web"; src: url(fonts/istok-web-bold.woff2) format("woff2");
-  font-weight: 700; font-style: normal; font-display: swap; }
-@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; }
+   support still shows the title as plain heavy letters. */
 
-@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;
@@ -137,10 +135,6 @@
   src: url(fonts/aerolith-display-pearl.svg.woff2) format("woff2") tech(color-SVG),
        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;
-}
-
 /* Big titles only: the letters are rendered at about 80 px per em and read best from 32 px up.
    Weight 700 picks the bold text face while the font loads; the colour face itself has one weight and is
    never synthesised. */
@@ -1454,6 +1448,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); }
@@ -1597,6 +1593,8 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   --_n: var(--aer-iconbtn-glass-active); --_o: var(--aer-iconbtn-glass-active-outset);
 }
 .aer-iconbtn:disabled { opacity: 0.5; filter: saturate(0.2); cursor: not-allowed; }
+/* A toggle that is not pressed shows the heart as an outline. */
+[aria-pressed="false"] > .aer-icon-heart { --_i: 1; }
 
 /* ------------------------------------------------------------------ segmented control / tab bar
    <div class="aer-segmented" role="radiogroup" aria-label="View">
@@ -1629,6 +1627,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 +1838,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 +1890,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 +1903,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,11 @@
 //   - 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
+//   - toggle: [data-aer-toggle] flips aria-pressed on click (a heart icon inside turns to outline)
 //   - preload: sprites of closed dialogs and popovers load with the page
 (function () {
   "use strict";
@@ -36,33 +39,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 +104,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 +300,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) {
@@ -226,6 +377,13 @@
         applyTheme(t);
       });
     });
+    root.querySelectorAll("[data-aer-toggle]").forEach(function (b) {
+      if (!once(b, "aerToggle")) return;
+      if (!b.hasAttribute("aria-pressed")) b.setAttribute("aria-pressed", "false");
+      b.addEventListener("click", function () {
+        b.setAttribute("aria-pressed", b.getAttribute("aria-pressed") === "true" ? "false" : "true");
+      });
+    });
     root.querySelectorAll(".aer-lens").forEach(function (el) { if (once(el, "aerBound")) lens(el); });
   }
 

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.3.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",

package/library/dist/fonts/OFL-Istok-Web.txt

@@ -1,94 +0,0 @@
-Copyright (c) 2008-2012, 2014, Andrey V. Panov (panov@canopus.iacp.dvo.ru),
-with Reserved Font Name Istok.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.