aerolith 1.0.0 → 1.1.0

package/LICENSE

@@ -21,5 +21,8 @@ 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.
 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,32 +1,21 @@
 # Aerolith
 
-A Frutiger Aero UI library for the web. Every button, field, pane and icon is a sprite rendered in
-Bryce 2, the 1996 landscape renderer, and drawn onto native HTML elements with CSS.
+Frutiger Aero 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)
 
-![Aerolith components in light and dark mode](docs/images/hero.png)
-
-The glossy parts reflect a sunny meadow, with blue sky above and green hills below, that sits
-behind the camera in every render. Glass is real Bryce glass, rendered over two backdrops and
-matted so it stays translucent on your page. Pressed buttons sink into a bowl, so the highlight
-moves to the bottom edge. Every surface was rendered, not painted in CSS.
+![Aerolith buttons in light and dark mode](docs/images/hero.png)
 
 ## Use it
 
-No build step. Link the stylesheet and, optionally, the script:
+No build step:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aerolith@1/library/dist/aerolith.css">
 <script src="https://cdn.jsdelivr.net/npm/aerolith@1/library/dist/aerolith.js" defer></script>
 ```
 
-The same files are on GitHub through jsDelivr
-(`https://cdn.jsdelivr.net/gh/immineal/aerolith@v1.0.0/library/dist/aerolith.css`) and in the
-release zip. Keep `sprites/` next to `aerolith.css`; the CSS finds the images relative to itself.
-
-Then use native elements with Aerolith classes:
-
 ```html
 <button class="aer-button">Convert to PDF</button>
 <button class="aer-button aer-secondary aer-l">Start</button>
@@ -41,39 +30,19 @@ Then use native elements with Aerolith classes:
 </button>
 ```
 
-Add `class="aer"` to `<body>` (or any container) to get the focus outline and reduced-motion
-handling. The showcase uses every component, so its source doubles as reference markup.
-
-### Package managers
+`class="aer"` on `<body>` adds the focus ring and reduced-motion rules. The showcase source has an
+example of every component. Self-hosting: keep `sprites/` and `fonts/` next to `aerolith.css`.
 
 | Where | Install | Then |
 |---|---|---|
-| npm | `npm i aerolith` | `import "aerolith/aerolith.css"` (and `import "aerolith/aerolith.js"`) |
-| GitHub Packages | `npm i @immineal/aerolith --registry=https://npm.pkg.github.com` | same, under `@immineal/aerolith` |
+| npm | `npm i aerolith` | `import "aerolith/aerolith.css"` (and `aerolith/aerolith.js`) |
+| 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 | unpkg, jsDelivr, esm.sh mirror the npm package | see above |
-
-### Frameworks
-
-Aerolith is plain CSS classes on native elements, so it needs no wrapper components. Import the
-stylesheet once:
-
-```js
-// React (Vite, Next.js), Vue, Svelte, Solid: in your entry file or root layout
-import "aerolith/aerolith.css";
-import "aerolith/aerolith.js";   // optional: slider fill, drop zone, theme switch, lens
-```
-
-```astro
----
-// Astro: in a layout
-import "aerolith/aerolith.css";
----
-```
+| CDN | jsDelivr, unpkg, esm.sh | or `cdn.jsdelivr.net/gh/immineal/aerolith@v1.1.0/library/dist/aerolith.css` |
 
-In JSX write `className="aer-button"`. When you add components after page load (client-side
-routing), call `window.Aerolith.init(container)` to wire up the optional behaviour.
+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)`.
 
 ## Components
 
@@ -100,93 +69,75 @@ routing), call `window.Aerolith.init(container)` to wire up the optional behavio
 | `.aer-bar` | `<header>`, `<nav>` | |
 | `.aer-lens` | any block | rim refraction in Chromium |
 | `.aer-compare` | two `<img>` and an `<input type="range">` | |
+| `.aer-display` (+ `.aer-aqua`, `.aer-glass`, `.aer-pearl`) | any heading | 116 characters |
 
-Dark mode follows `prefers-color-scheme`. Force it with `<html data-theme="dark">` (or `"light"`),
-or scope it with `.aer-dark`. The theme switch (`input[data-aer-theme]`) sets the attribute and
-remembers the choice.
+### Type
 
-## Accessibility
+```html
+<h1 class="aer-display">Welcome back</h1>            <!-- aqua; glass on dark pages -->
+<h2 class="aer-display aer-glass">Photos</h2>        <!-- clear glass: needs colour behind it -->
+<p class="aer-display aer-pearl">Ready</p>           <!-- white, for coloured backgrounds -->
+```
 
-- Every skin sits on the native element, so keyboard use, form submission, screen readers and
-  autofill behave as they would without Aerolith.
-- Label contrast was measured on the rendered sprite pixels, at the darkest 5 % of the label
-  area, before the text halo is added: white on aqua 4.4:1, white on green 4.7:1, dark ink on
-  clear glass at least 4.6:1 in both themes. Hover and pressed states are lighter, so their
-  labels get a stronger halo.
-- Controls are 44 px high by default. Small controls (checkbox, radio, close orb) get a 44 px hit
-  area through their label or a pseudo-element.
-- `forced-colors` (Windows high contrast) drops the sprites and falls back to system colours.
-  Icons switch to `CanvasText`.
-- `prefers-reduced-motion` stops the spinner and the toggle, toast and dialog animations.
-- Where look and accessibility conflict, the look won, but only after the cheap fixes (ink
-  choice, halos, hit areas) were in. Without their halo, glossy hover states measure 3.3 to
-  3.6:1 and pressed states about 2.4:1, because the sunken face catches more light. Both are
-  momentary states. `python3 library/build/a11y.py` prints the numbers for every labelled sprite.
+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.
 
-## How it's made
+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,
+and the sun/moon switch (`input[data-aer-theme]`) sets that for you.
 
-![The three render passes of one sprite](docs/images/passes.png)
-
-Bryce 2.1 for Windows runs under Wine on a virtual X display, seven instances side by side. Python
-writes each scene directly as a Bryce `.brc` file. The format was reverse-engineered for this:
-see [docs/brc-format.md](docs/brc-format.md). Bryce then renders it to disk. Each sprite is
-rendered three times:
+## Accessibility
 
-1. **K:** over black, which gives the colour and every glint.
-2. **W:** over mid grey, so the difference to K shows how much light the glass lets through.
-3. **M:** flat colours, a mask that says which pixels are solid and which are glass.
+Real form controls sit under every skin, so keyboards, screen readers and autofill work as usual.
 
-The matting step turns those into PNGs with real alpha: solid gloss is opaque, glass keeps its
-transparency, and a second matte for dark pages turns frosted glass into smoked glass.
+- Label contrast, measured on the rendered pixels: white on aqua 4.4:1, white on green 4.7:1,
+  dark on glass 4.6:1 or better. Hover states measure 3.3 to 3.6:1 without their halo, pressed
+  about 2.4:1. There the look won. `python3 library/build/a11y.py` prints every number.
+- Controls are 44 px high; small ones get a 44 px hit area.
+- `forced-colors` swaps the sprites for system colours. `prefers-reduced-motion` stops the
+  animations.
 
-Each sprite is rendered alone in its own scene. Rendered together, sprites reflect and refract
-their neighbours, which looks random once the sheet is cut up. The camera sits 4000 units away
-with a long lens, so the projection is near-orthographic and one CSS pixel is exactly six render
-pixels. That is downsampled to 3x, 2x and 1x files.
+## How it's made
 
-![Button states and orbs at 3x: the sky in the top half, the meadow in the lower bevel](docs/images/closeup.png)
+![The three render passes of one sprite](docs/images/passes.png)
 
-Behind the camera is the environment every gloss surface reflects: a custom sky, a big softbox
-for the highlight band, and a tilted meadow with two hills. The camera never sees any of it,
-but every glossy surface shows sky in its upper half and grass along its lower bevel.
+Bryce 2.1 runs under Wine on virtual displays, seven at once. Python writes each scene as a
+`.brc` file; I reverse-engineered the format in [docs/brc-format.md](docs/brc-format.md). Each
+sprite is rendered alone, three times: over black (colour and glints), over grey (how much light
+the glass lets through) and as a flat mask. From those the build makes PNGs where gloss is solid
+and glass is see-through.
 
-Shapes are Bryce symmetrical lattices (height fields) computed in NumPy: rounded rectangles with
-an eased bevel, a blurred-mask bowl for pressed states, a recessed well for fields, and icons
-embossed from vector drawings. The CSS draws every sprite with `border-image`, with slices
-measured in raw image pixels per resolution. That behaves the same in Chromium, Firefox and
-WebKit, where `image-set()` inside `border-image` does not.
+![Button states and orbs at 3x](docs/images/closeup.png)
 
-## Rebuild it yourself
+Behind the camera is a sky and a meadow with two hills, so every button reflects blue on top and
+green below. The shapes are height fields computed in NumPy. The CSS draws sprites with
+`border-image`.
 
-The rendered output is committed in `library/dist/`, so you only need this to change sprites.
-You need your own copy of Bryce 2 for Windows and Wine. Neither is included, and Bryce never will
-be.
+To render new sprites you need Wine and your own copy of Bryce 2 (not included):
 
 ```sh
 cd library/build
-python3 build.py              # renders what changed (hash cache), exports, writes dist/
-python3 build.py btn-         # only sprites whose names start with btn-
+python3 build.py              # renders what changed, exports to dist/
+python3 build.py btn-         # only sprites starting with btn-
 python3 build.py --export-only
-python3 shots.py              # screenshots in Chromium, Firefox, WebKit, light and dark
 ```
 
-The renderer setup is in [harness/README.md](harness/README.md), the design rules in
+Setup: [harness/README.md](harness/README.md). Design rules:
 [docs/ui-library/foundations.md](docs/ui-library/foundations.md).
 
 ## What it does not do
 
-- **No runtime colours.** The colours are baked into the sprites. A new colour means new renders.
-- **Fixed control heights.** Buttons come in 32, 44 and 56 px. They stretch in width (3- and
-  9-slice), not in height.
-- **Glass distortion is Chromium-only.** The lens rim refraction uses an SVG filter in
-  `backdrop-filter`, which only Chromium supports. Elsewhere you get the clear glass without
-  distortion.
-- **No JS framework components.** There are no React or Vue wrappers. The classes go on your
-  own elements.
-- **No icon font or SVG set.** The 35 icons are bitmaps at 16 and 24 px. They don't scale up
-  cleanly.
+- **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.
+- **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 the code and the rendered sprites. See [LICENSE](LICENSE). Bryce is a trademark of its
-owner. This project is not affiliated with it and contains no part of the Bryce software.
+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
+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: "Segoe UI", "Frutiger", "Myriad Pro", "Lucida Grande", Tahoma, system-ui, sans-serif;
+  --aer-font-ui: "Selawik", "Segoe UI", "Istok Web", "Frutiger", "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;
@@ -98,6 +98,79 @@
   clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
 }
 
+/* ---- type.css ---- */
+/* Aerolith type.
+   Text: Selawik (default) 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
+   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; }
+
+@font-face { font-family: "Selawik"; src: url(fonts/selawik-light.woff2) format("woff2");
+  font-weight: 300; font-display: swap; }
+@font-face { font-family: "Selawik"; src: url(fonts/selawik-regular.woff2) format("woff2");
+  font-weight: 400; font-display: swap; }
+@font-face { font-family: "Selawik"; src: url(fonts/selawik-semibold.woff2) format("woff2");
+  font-weight: 600; font-display: swap; }
+@font-face { font-family: "Selawik"; src: url(fonts/selawik-bold.woff2) format("woff2");
+  font-weight: 700; font-display: swap; }
+
+@font-face { font-family: "Aerolith Display Aqua"; font-display: swap;
+  src: url(fonts/aerolith-display-aqua.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-aqua.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Glass"; font-display: swap;
+  src: url(fonts/aerolith-display-glass.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-glass.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Glass Dark"; font-display: swap;
+  src: url(fonts/aerolith-display-glass-dark.svg.woff2) format("woff2") tech(color-SVG),
+       url(fonts/aerolith-display-glass-dark.bmp.woff2) format("woff2") tech(color-sbix); }
+@font-face { font-family: "Aerolith Display Pearl"; font-display: swap;
+  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. */
+.aer-display {
+  --_face: "Aerolith Display Aqua";
+  font-family: var(--_face), var(--aer-font-ui);
+  font-weight: 700; font-style: normal; font-synthesis: none;
+  line-height: 1.12; letter-spacing: 0; text-shadow: none;
+  color: var(--aer-ink);
+}
+/* Glass is clear: it needs colour or a picture behind it and all but vanishes on a pale page.
+   On dark pages the default face is Glass Dark, because Aqua's deep blue sinks into them
+   (APCA Lc about -22 against Glass Dark's -54). .aer-aqua keeps Aqua anyway, e.g. on a light
+   panel inside a dark page. */
+.aer-display.aer-aqua { --_face: "Aerolith Display Aqua"; }
+.aer-display.aer-glass { --_face: "Aerolith Display Glass"; }
+.aer-display.aer-pearl { --_face: "Aerolith Display Pearl"; }
+:root[data-theme="dark"] .aer-display:not(.aer-aqua, .aer-pearl),
+.aer-dark .aer-display:not(.aer-aqua, .aer-pearl),
+.aer-display.aer-dark:not(.aer-aqua, .aer-pearl) { --_face: "Aerolith Display Glass Dark"; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .aer-display:not(.aer-aqua, .aer-pearl) { --_face: "Aerolith Display Glass Dark"; }
+}
+@media (forced-colors: active) {
+  .aer-display { font-family: var(--aer-font-ui); }
+}
+
+/* Vista-style glow: a soft halo of page colour behind dark text on glass or busy backgrounds */
+.aer-glow { text-shadow: 0 0 1px var(--aer-page), 0 0 6px var(--aer-page), 0 0 12px var(--aer-page); }
+
 /* ---- sprites.css ---- */
 :root {
   --aer-badge-error-w: 60px; --aer-badge-error-h: 22px;
@@ -256,6 +329,10 @@
   --aer-lens-w: 160px; --aer-lens-h: 120px;
   --aer-lens-border: 37px 37px 37px 37px;
   --aer-lens-outset: 1px 1px 1px 1px;
+  --aer-logo-aqua-w: 36px; --aer-logo-aqua-h: 36px;
+  --aer-logo-aqua-outset: 0 0 0 0;
+  --aer-logo-liquid-w: 36px; --aer-logo-liquid-h: 36px;
+  --aer-logo-liquid-outset: 0 0 0 0;
   --aer-orb-error-w: 16px; --aer-orb-error-h: 16px;
   --aer-orb-error-outset: 1px 1px 1px 1px;
   --aer-orb-info-w: 16px; --aer-orb-info-h: 16px;
@@ -420,6 +497,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@1x.png");
   --aer-lens: url("sprites/lens@1x.png");
   --aer-lens-slice: 37 37 37 37 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@1x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@1x.png");
   --aer-orb-error: url("sprites/orb-error@1x.png");
   --aer-orb-info: url("sprites/orb-info@1x.png");
   --aer-orb-ok: url("sprites/orb-ok@1x.png");
@@ -562,6 +641,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@2x.png");
   --aer-lens: url("sprites/lens@2x.png");
   --aer-lens-slice: 74 74 74 74 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@2x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@2x.png");
   --aer-orb-error: url("sprites/orb-error@2x.png");
   --aer-orb-info: url("sprites/orb-info@2x.png");
   --aer-orb-ok: url("sprites/orb-ok@2x.png");
@@ -705,6 +786,8 @@
   --aer-iconbtn-primary-hover: url("sprites/iconbtn-primary-hover@3x.png");
   --aer-lens: url("sprites/lens@3x.png");
   --aer-lens-slice: 111 111 111 111 fill;
+  --aer-logo-aqua: url("sprites/logo-aqua@3x.png");
+  --aer-logo-liquid: url("sprites/logo-liquid@3x.png");
   --aer-orb-error: url("sprites/orb-error@3x.png");
   --aer-orb-info: url("sprites/orb-info@3x.png");
   --aer-orb-ok: url("sprites/orb-ok@3x.png");
@@ -1119,31 +1202,31 @@
 
 /* ---- skins.css ---- */
 /* generated by build/build.py: component state -> sprite */
-.aer-button { --_img: var(--aer-btn-primary-m); --_slice: var(--aer-btn-primary-m-slice); --_bw: var(--aer-btn-primary-m-border); --_out: var(--aer-btn-primary-m-outset); }
+.aer-button { --_img: var(--aer-btn-primary-m); --_slice: var(--aer-btn-primary-m-slice); --_bw: var(--aer-btn-primary-m-border); --_out: var(--aer-btn-primary-m-outset); --_pre: var(--aer-btn-primary-m-hover), var(--aer-btn-primary-m-active); }
 .aer-button:hover { --_img: var(--aer-btn-primary-m-hover); --_slice: var(--aer-btn-primary-m-hover-slice); --_bw: var(--aer-btn-primary-m-hover-border); --_out: var(--aer-btn-primary-m-hover-outset); }
 .aer-button:active, .aer-button[aria-pressed="true"] { --_img: var(--aer-btn-primary-m-active); --_slice: var(--aer-btn-primary-m-active-slice); --_bw: var(--aer-btn-primary-m-active-border); --_out: var(--aer-btn-primary-m-active-outset); }
-.aer-button.aer-s { --_img: var(--aer-btn-primary-s); --_slice: var(--aer-btn-primary-s-slice); --_bw: var(--aer-btn-primary-s-border); --_out: var(--aer-btn-primary-s-outset); }
+.aer-button.aer-s { --_img: var(--aer-btn-primary-s); --_slice: var(--aer-btn-primary-s-slice); --_bw: var(--aer-btn-primary-s-border); --_out: var(--aer-btn-primary-s-outset); --_pre: var(--aer-btn-primary-s-hover), var(--aer-btn-primary-s-active); }
 .aer-button.aer-s:hover { --_img: var(--aer-btn-primary-s-hover); --_slice: var(--aer-btn-primary-s-hover-slice); --_bw: var(--aer-btn-primary-s-hover-border); --_out: var(--aer-btn-primary-s-hover-outset); }
 .aer-button.aer-s:active, .aer-button.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-primary-s-active); --_slice: var(--aer-btn-primary-s-active-slice); --_bw: var(--aer-btn-primary-s-active-border); --_out: var(--aer-btn-primary-s-active-outset); }
-.aer-button.aer-l { --_img: var(--aer-btn-primary-l); --_slice: var(--aer-btn-primary-l-slice); --_bw: var(--aer-btn-primary-l-border); --_out: var(--aer-btn-primary-l-outset); }
+.aer-button.aer-l { --_img: var(--aer-btn-primary-l); --_slice: var(--aer-btn-primary-l-slice); --_bw: var(--aer-btn-primary-l-border); --_out: var(--aer-btn-primary-l-outset); --_pre: var(--aer-btn-primary-l-hover), var(--aer-btn-primary-l-active); }
 .aer-button.aer-l:hover { --_img: var(--aer-btn-primary-l-hover); --_slice: var(--aer-btn-primary-l-hover-slice); --_bw: var(--aer-btn-primary-l-hover-border); --_out: var(--aer-btn-primary-l-hover-outset); }
 .aer-button.aer-l:active, .aer-button.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-primary-l-active); --_slice: var(--aer-btn-primary-l-active-slice); --_bw: var(--aer-btn-primary-l-active-border); --_out: var(--aer-btn-primary-l-active-outset); }
-.aer-button.aer-secondary { --_img: var(--aer-btn-secondary-m); --_slice: var(--aer-btn-secondary-m-slice); --_bw: var(--aer-btn-secondary-m-border); --_out: var(--aer-btn-secondary-m-outset); }
+.aer-button.aer-secondary { --_img: var(--aer-btn-secondary-m); --_slice: var(--aer-btn-secondary-m-slice); --_bw: var(--aer-btn-secondary-m-border); --_out: var(--aer-btn-secondary-m-outset); --_pre: var(--aer-btn-secondary-m-hover), var(--aer-btn-secondary-m-active); }
 .aer-button.aer-secondary:hover { --_img: var(--aer-btn-secondary-m-hover); --_slice: var(--aer-btn-secondary-m-hover-slice); --_bw: var(--aer-btn-secondary-m-hover-border); --_out: var(--aer-btn-secondary-m-hover-outset); }
 .aer-button.aer-secondary:active, .aer-button.aer-secondary[aria-pressed="true"] { --_img: var(--aer-btn-secondary-m-active); --_slice: var(--aer-btn-secondary-m-active-slice); --_bw: var(--aer-btn-secondary-m-active-border); --_out: var(--aer-btn-secondary-m-active-outset); }
-.aer-button.aer-secondary.aer-s { --_img: var(--aer-btn-secondary-s); --_slice: var(--aer-btn-secondary-s-slice); --_bw: var(--aer-btn-secondary-s-border); --_out: var(--aer-btn-secondary-s-outset); }
+.aer-button.aer-secondary.aer-s { --_img: var(--aer-btn-secondary-s); --_slice: var(--aer-btn-secondary-s-slice); --_bw: var(--aer-btn-secondary-s-border); --_out: var(--aer-btn-secondary-s-outset); --_pre: var(--aer-btn-secondary-s-hover), var(--aer-btn-secondary-s-active); }
 .aer-button.aer-secondary.aer-s:hover { --_img: var(--aer-btn-secondary-s-hover); --_slice: var(--aer-btn-secondary-s-hover-slice); --_bw: var(--aer-btn-secondary-s-hover-border); --_out: var(--aer-btn-secondary-s-hover-outset); }
 .aer-button.aer-secondary.aer-s:active, .aer-button.aer-secondary.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-secondary-s-active); --_slice: var(--aer-btn-secondary-s-active-slice); --_bw: var(--aer-btn-secondary-s-active-border); --_out: var(--aer-btn-secondary-s-active-outset); }
-.aer-button.aer-secondary.aer-l { --_img: var(--aer-btn-secondary-l); --_slice: var(--aer-btn-secondary-l-slice); --_bw: var(--aer-btn-secondary-l-border); --_out: var(--aer-btn-secondary-l-outset); }
+.aer-button.aer-secondary.aer-l { --_img: var(--aer-btn-secondary-l); --_slice: var(--aer-btn-secondary-l-slice); --_bw: var(--aer-btn-secondary-l-border); --_out: var(--aer-btn-secondary-l-outset); --_pre: var(--aer-btn-secondary-l-hover), var(--aer-btn-secondary-l-active); }
 .aer-button.aer-secondary.aer-l:hover { --_img: var(--aer-btn-secondary-l-hover); --_slice: var(--aer-btn-secondary-l-hover-slice); --_bw: var(--aer-btn-secondary-l-hover-border); --_out: var(--aer-btn-secondary-l-hover-outset); }
 .aer-button.aer-secondary.aer-l:active, .aer-button.aer-secondary.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-secondary-l-active); --_slice: var(--aer-btn-secondary-l-active-slice); --_bw: var(--aer-btn-secondary-l-active-border); --_out: var(--aer-btn-secondary-l-active-outset); }
-.aer-button.aer-quiet { --_img: var(--aer-btn-glass-m); --_slice: var(--aer-btn-glass-m-slice); --_bw: var(--aer-btn-glass-m-border); --_out: var(--aer-btn-glass-m-outset); }
+.aer-button.aer-quiet { --_img: var(--aer-btn-glass-m); --_slice: var(--aer-btn-glass-m-slice); --_bw: var(--aer-btn-glass-m-border); --_out: var(--aer-btn-glass-m-outset); --_pre: var(--aer-btn-glass-m-hover), var(--aer-btn-glass-m-active); }
 .aer-button.aer-quiet:hover { --_img: var(--aer-btn-glass-m-hover); --_slice: var(--aer-btn-glass-m-hover-slice); --_bw: var(--aer-btn-glass-m-hover-border); --_out: var(--aer-btn-glass-m-hover-outset); }
 .aer-button.aer-quiet:active, .aer-button.aer-quiet[aria-pressed="true"] { --_img: var(--aer-btn-glass-m-active); --_slice: var(--aer-btn-glass-m-active-slice); --_bw: var(--aer-btn-glass-m-active-border); --_out: var(--aer-btn-glass-m-active-outset); }
-.aer-button.aer-quiet.aer-s { --_img: var(--aer-btn-glass-s); --_slice: var(--aer-btn-glass-s-slice); --_bw: var(--aer-btn-glass-s-border); --_out: var(--aer-btn-glass-s-outset); }
+.aer-button.aer-quiet.aer-s { --_img: var(--aer-btn-glass-s); --_slice: var(--aer-btn-glass-s-slice); --_bw: var(--aer-btn-glass-s-border); --_out: var(--aer-btn-glass-s-outset); --_pre: var(--aer-btn-glass-s-hover), var(--aer-btn-glass-s-active); }
 .aer-button.aer-quiet.aer-s:hover { --_img: var(--aer-btn-glass-s-hover); --_slice: var(--aer-btn-glass-s-hover-slice); --_bw: var(--aer-btn-glass-s-hover-border); --_out: var(--aer-btn-glass-s-hover-outset); }
 .aer-button.aer-quiet.aer-s:active, .aer-button.aer-quiet.aer-s[aria-pressed="true"] { --_img: var(--aer-btn-glass-s-active); --_slice: var(--aer-btn-glass-s-active-slice); --_bw: var(--aer-btn-glass-s-active-border); --_out: var(--aer-btn-glass-s-active-outset); }
-.aer-button.aer-quiet.aer-l { --_img: var(--aer-btn-glass-l); --_slice: var(--aer-btn-glass-l-slice); --_bw: var(--aer-btn-glass-l-border); --_out: var(--aer-btn-glass-l-outset); }
+.aer-button.aer-quiet.aer-l { --_img: var(--aer-btn-glass-l); --_slice: var(--aer-btn-glass-l-slice); --_bw: var(--aer-btn-glass-l-border); --_out: var(--aer-btn-glass-l-outset); --_pre: var(--aer-btn-glass-l-hover), var(--aer-btn-glass-l-active); }
 .aer-button.aer-quiet.aer-l:hover { --_img: var(--aer-btn-glass-l-hover); --_slice: var(--aer-btn-glass-l-hover-slice); --_bw: var(--aer-btn-glass-l-hover-border); --_out: var(--aer-btn-glass-l-hover-outset); }
 .aer-button.aer-quiet.aer-l:active, .aer-button.aer-quiet.aer-l[aria-pressed="true"] { --_img: var(--aer-btn-glass-l-active); --_slice: var(--aer-btn-glass-l-active-slice); --_bw: var(--aer-btn-glass-l-active-border); --_out: var(--aer-btn-glass-l-active-outset); }
 .aer-button:disabled, .aer-button[aria-disabled="true"] { --_img: var(--aer-btn-disabled-m); --_slice: var(--aer-btn-disabled-m-slice); --_bw: var(--aer-btn-disabled-m-border); --_out: var(--aer-btn-disabled-m-outset); }
@@ -1622,9 +1705,14 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch;
   color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text);
+  border-radius: 14px; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
   animation: aer-toast-in 260ms cubic-bezier(.3, 1.4, .5, 1);
 }
 @keyframes aer-toast-in { from { opacity: 0; translate: 0 12px; } }
+@media (max-width: 600px) {           /* phones: centred, clear of the screen edges */
+  .aer-toaster { inset-inline: var(--aer-space-4); justify-items: center; }
+  .aer-toast { max-inline-size: 100%; }
+}
 
 /* ------------------------------------------------------------------ dialog: frosted window on native <dialog>
    <dialog class="aer-dialog"><header>…<button class="aer-close" aria-label="Close">…</button></header>…</dialog> */
@@ -1635,7 +1723,8 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   background: none; color: var(--aer-ink); font: var(--aer-text-m) / var(--aer-leading) var(--aer-font-text);
   overflow: visible;
 }
-.aer-dialog::backdrop { background: rgba(8, 40, 80, 0.28); backdrop-filter: blur(3px) saturate(1.2); }
+.aer-dialog::backdrop { background: rgba(8, 40, 80, 0.34);
+  -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
 .aer-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: var(--aer-space-3);
   margin: calc(-1 * var(--aer-space-2)) 0 var(--aer-space-3); font: 600 var(--aer-text-l) / 1.3 var(--aer-font-ui); }
 .aer-dialog[open] { animation: aer-dialog-in 220ms cubic-bezier(.3, 1.3, .5, 1); }
@@ -1647,7 +1736,7 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px;
   border-style: solid; border-color: transparent; border-width: 0;
   border-image: var(--aer-close) 0 fill / 0 / var(--aer-close-outset) stretch;
-  background: none; cursor: pointer;
+  background: none; cursor: pointer; border-radius: 50%;      /* the focus ring follows the gem */
 }
 .aer-close::after { content: ""; position: absolute; inset: -10px; }
 .aer-close:hover { border-image: var(--aer-close-hover) 0 fill / 0 / var(--aer-close-hover-outset) stretch; }
@@ -1662,8 +1751,10 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
   border-image: var(--aer-card) var(--aer-card-slice) / var(--aer-card-border) / var(--aer-card-outset) stretch;
   background: none; color: var(--aer-ink); font: var(--aer-text-m) / 1.4 var(--aer-font-text);
   overflow: visible;
+  border-radius: 14px; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
 }
 .aer-menu { display: grid; gap: 2px; }
+[data-aer-menu] { -webkit-touch-callout: none; }    /* long-press opens our menu, not the system's */
 .aer-menu > :is(a, button) {
   display: flex; align-items: center; gap: var(--aer-space-2); box-sizing: border-box;
   min-block-size: 36px; padding: 0 var(--aer-space-3); margin: 0;
@@ -1745,6 +1836,31 @@ a.aer-card:hover, button.aer-card:hover, .aer-card[data-interactive]:hover {
 }
 
 /* ------------------------------------------------------------------ preferences */
+/* ------------------------------------------------------------------ state sprites, fetched up front
+   Each control lists its hover / pressed / checked sprites in --_pre; they hang off it as zero-size
+   backgrounds, so the browser downloads them with the page (at the same resolution and theme the state
+   will use) and a first tap never shows an empty control while its state sprite loads. */
+.aer-iconbtn { --_pre: var(--aer-iconbtn-primary-hover), var(--aer-iconbtn-primary-active); }
+.aer-iconbtn.aer-quiet { --_pre: var(--aer-iconbtn-glass-hover), var(--aer-iconbtn-glass-active); }
+.aer-toggle { --_pre: var(--aer-toggle-track-on), var(--aer-toggle-knob-on); }
+.aer-toggle.aer-theme { --_pre: var(--aer-toggle-knob-moon); }
+.aer-check { --_pre: var(--aer-check-on), var(--aer-check-mixed); }
+.aer-radio { --_pre: var(--aer-radio-on); }
+.aer-segmented, .aer-menu { --_pre: var(--aer-seg-chip-hover), var(--aer-seg-chip); }
+.aer-choice { --_pre: var(--aer-card-hover), var(--aer-choice-on); }
+a.aer-card, button.aer-card, .aer-card[data-interactive] { --_pre: var(--aer-card-hover); }
+.aer-close { --_pre: var(--aer-close-hover); }
+.aer-preload {                       /* added by aerolith.js when the page has dialogs, popovers or toasts */
+  position: fixed; inset-inline-start: -1px; inset-block-start: -1px; inline-size: 1px; block-size: 1px;
+  overflow: hidden; pointer-events: none;
+  --_pre: var(--aer-dialog), var(--aer-close), var(--aer-close-hover), var(--aer-card), var(--aer-seg-chip-hover),
+          var(--aer-orb-ok);
+}
+.aer-preload, .aer-button, .aer-iconbtn, .aer-toggle, .aer-check, .aer-radio, .aer-segmented, .aer-menu, .aer-choice,
+a.aer-card, button.aer-card, .aer-card[data-interactive], .aer-close {
+  background-image: var(--_pre, none); background-size: 0 0; background-repeat: no-repeat;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .aer-spinner::before { animation: none; }
   .aer-toggle::before, .aer-progress::-webkit-progress-value { transition: none; }

package/library/dist/aerolith.js

@@ -4,6 +4,8 @@
 //   - 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)
+//   - menus: popovers drop down from their button; [data-aer-menu] opens one at the pointer
+//   - preload: sprites of closed dialogs and popovers load with the page
 (function () {
   "use strict";
   var KEY = "aerolith-theme";
@@ -98,9 +100,110 @@
     }
   }
 
+  // ---------------------------------------------------------------- menus: placed like a context menu
+  // A [popover].aer-popover opened by a popovertarget button drops down from that button (or opens
+  // above it when there is no room); [data-aer-menu="id"] on any element opens that popover at the
+  // pointer on right-click or long-press. Either way it stays 8 px inside the window.
+  var invoker = null;
+  function clamp(v, lo, hi) { return Math.max(lo, Math.min(v, hi)); }
+  function place(pop, at) {
+    var M = 8, vw = document.documentElement.clientWidth, vh = window.innerHeight;
+    var w = pop.offsetWidth, h = pop.offsetHeight, left, top;
+    if (at.nodeType) {
+      var r = at.getBoundingClientRect();
+      left = r.left; top = r.bottom + 6;
+      if (top + h > vh - M && r.top - 6 - h >= M) top = r.top - 6 - h;
+      if (left + w > vw - M) left = r.right - w;
+    } else {
+      left = at.x; top = at.y;
+      if (left + w > vw - M) left = at.x - w;
+      if (top + h > vh - M) top = at.y - h;
+    }
+    pop.style.left = clamp(left, M, vw - M - w) + "px";
+    pop.style.top = clamp(top, M, vh - M - h) + "px";
+  }
+  function openAt(pop, at) {
+    pop.style.position = "fixed"; pop.style.inset = "auto"; pop.style.margin = "0";
+    pop._aerAt = at;
+    if (!pop.matches(":popover-open")) pop.showPopover(); else place(pop, at);
+  }
+  function bindPopover(pop) {
+    function close() { if (pop.matches(":popover-open")) pop.hidePopover(); }
+    // before it shows: anchor it, so it never flashes at the window's corner
+    pop.addEventListener("beforetoggle", function (e) {
+      if (e.newState !== "open") return;
+      if (!pop._aerAt && invoker && invoker.getAttribute("popovertarget") === pop.id) pop._aerAt = invoker;
+      if (!pop._aerAt) return;
+      pop.style.position = "fixed"; pop.style.inset = "auto"; pop.style.margin = "0";
+      place(pop, pop._aerAt);                  // size unknown yet: a first guess
+    });
+    pop.addEventListener("toggle", function (e) {
+      if (e.newState === "open") {
+        if (pop._aerAt) place(pop, pop._aerAt);   // measured: flip or clamp if needed
+        addEventListener("resize", close);
+        addEventListener("scroll", close, { capture: true, passive: true });
+      } else {
+        pop._aerAt = null;
+        removeEventListener("resize", close);
+        removeEventListener("scroll", close, { capture: true });
+      }
+    });
+    // picking an item closes the menu
+    pop.addEventListener("click", function (e) {
+      if (e.target.closest(".aer-menu > a, .aer-menu > button") && pop.matches(":popover-open")) pop.hidePopover();
+    });
+  }
+  function bindContext(el) {
+    var pop = document.getElementById(el.getAttribute("data-aer-menu"));
+    if (!pop || !pop.showPopover) return;
+    var timer = 0, start = null, pending = null, down = false;
+    el.addEventListener("contextmenu", function (e) {
+      e.preventDefault();
+      var at = { x: e.clientX, y: e.clientY };
+      // Linux and macOS fire contextmenu on mouse-down, phones while the finger is down. Opened
+      // then, the release would light-dismiss the menu, so it opens when the button or finger lifts.
+      if (down) pending = at; else openAt(pop, at);
+    });
+    el.addEventListener("pointerdown", function (e) {
+      if (e.pointerType === "mouse" && e.button !== 2) return;
+      down = true;
+      if (e.pointerType !== "touch") return;
+      start = { x: e.clientX, y: e.clientY };
+      clearTimeout(timer);
+      timer = setTimeout(function () { pending = start; }, 500);    // iOS sends no contextmenu
+    });
+    el.addEventListener("pointermove", function (e) {
+      if (start && Math.hypot(e.clientX - start.x, e.clientY - start.y) > 10) { clearTimeout(timer); start = null; }
+    });
+    function release() {
+      if (!down) return;
+      down = false; clearTimeout(timer); start = null;
+      if (pending) { var at = pending; pending = null; setTimeout(function () { openAt(pop, at); }, 0); }
+    }
+    addEventListener("pointerup", release, true);         // on the window: the pointer may have left el
+    addEventListener("pointercancel", release, true);
+  }
+  document.addEventListener("click", function (e) {
+    var b = e.target.closest && e.target.closest("[popovertarget]");
+    if (b) invoker = b;
+  }, true);
+
+  // ---------------------------------------------------------------- sprites of things that start hidden
+  // A closed dialog or popover is not rendered, so its sprites would load only when it first opens
+  // (one empty frame). One off-screen probe fetches them with the page (.aer-preload in the CSS).
+  function preload(root) {
+    if (document.querySelector(".aer-preload") || !root.querySelector(".aer-dialog, .aer-popover, .aer-toaster")) return;
+    var i = document.createElement("i");
+    i.className = "aer-preload"; i.setAttribute("aria-hidden", "true");
+    document.body.appendChild(i);
+  }
+
   // ---------------------------------------------------------------- init
   function init(root) {
     root = root || document;
+    preload(root);
+    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) {
       if (!once(input, "aerBound")) return;
       input.parentElement.setAttribute("data-aer-ready", "");

package/library/dist/fonts/OFL-Aerolith-Display.txt

@@ -0,0 +1,100 @@
+Aerolith Display is derived from Istok Web Bold by Andrey V. Panov. The outlines were made
+heavier and each glyph was rendered in Bryce; it is a Modified Version under the SIL Open
+Font License 1.1 below and does not use the Reserved Font Name "Istok".
+
+Copyright (c) 2026, Immineal (colour glyphs).
+
+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.

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

@@ -0,0 +1,94 @@
+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.

package/library/dist/fonts/OFL-Selawik.txt

@@ -0,0 +1,91 @@
+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.
+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.

package/library/dist/sprites.json

@@ -4403,6 +4403,94 @@
    37
   ]
  },
+ "logo-aqua": {
+  "name": "logo-aqua",
+  "box": [
+   60,
+   60,
+   276,
+   276
+  ],
+  "slice": null,
+  "shape": [
+   60,
+   60,
+   276,
+   276
+  ],
+  "label": null,
+  "text": null,
+  "hit": [
+   36,
+   36
+  ],
+  "meta": {
+   "sheet": "logo-aqua"
+  },
+  "size": [
+   36,
+   36
+  ],
+  "files": {
+   "1": "sprites/logo-aqua@1x.png",
+   "2": "sprites/logo-aqua@2x.png",
+   "3": "sprites/logo-aqua@3x.png"
+  },
+  "outset": [
+   0,
+   0,
+   0,
+   0
+  ],
+  "shape_size": [
+   36,
+   36
+  ]
+ },
+ "logo-liquid": {
+  "name": "logo-liquid",
+  "box": [
+   60,
+   60,
+   276,
+   276
+  ],
+  "slice": null,
+  "shape": [
+   60,
+   60,
+   276,
+   276
+  ],
+  "label": null,
+  "text": null,
+  "hit": [
+   36,
+   36
+  ],
+  "meta": {
+   "sheet": "logo-liquid"
+  },
+  "size": [
+   36,
+   36
+  ],
+  "files": {
+   "1": "sprites/logo-liquid@1x.png",
+   "2": "sprites/logo-liquid@2x.png",
+   "3": "sprites/logo-liquid@3x.png"
+  },
+  "outset": [
+   0,
+   0,
+   0,
+   0
+  ],
+  "shape_size": [
+   36,
+   36
+  ]
+ },
  "orb-error": {
   "name": "orb-error",
   "box": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aerolith",
-  "version": "1.0.0",
-  "description": "Frutiger Aero UI for the web. Every button, field and pane is a sprite rendered in Bryce 2 (1996), skinned onto native HTML elements.",
+  "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.",
   "keywords": [
     "frutiger-aero", "css", "ui", "ui-library", "design-system", "skeuomorphism", "glassmorphism",
     "retro", "y2k", "aero", "bryce", "sprites", "dark-mode", "accessibility", "vanilla-css"
@@ -22,13 +22,15 @@
     "./aerolith.js": "./library/dist/aerolith.js",
     "./sprites/*": "./library/dist/sprites/*",
     "./sprites.json": "./library/dist/sprites.json",
+    "./fonts/*": "./library/dist/fonts/*",
     "./package.json": "./package.json"
   },
   "files": [
     "library/dist/aerolith.css",
     "library/dist/aerolith.js",
     "library/dist/sprites.json",
-    "library/dist/sprites/"
+    "library/dist/sprites/",
+    "library/dist/fonts/"
   ],
   "sideEffects": ["*.css", "./library/dist/aerolith.js"]
 }