@taprootio/espalier 4.20.1 → 5.0.0

package/espalier.css-data.json

@@ -1397,10 +1397,6 @@
       "name": "--esp-page-flyout-min-width",
       "description": "Minimum in-grid help width. Defaults to `20rem`."
     },
-    {
-      "name": "--esp-page-flyout-width",
-      "description": "Legacy fixed-width alias that pins both help bounds."
-    },
     {
       "name": "--esp-page-header-z-index",
       "description": "Z-index for fixed/sticky header regions. Defaults to `20`."
@@ -1417,10 +1413,6 @@
       "name": "--esp-page-main-min-width",
       "description": "Minimum width of the main content well while preview or in-grid help competes for space. Defaults to `30rem`."
     },
-    {
-      "name": "--esp-page-max-width",
-      "description": "Legacy fallback for `--esp-page-main-max-width`."
-    },
     {
       "name": "--esp-page-preview-background",
       "description": "Background of the persistent preview surface. Defaults to the main background, then the page background."
@@ -1437,10 +1429,6 @@
       "name": "--esp-page-preview-max-width",
       "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows."
     },
-    {
-      "name": "--esp-page-preview-min-main-width",
-      "description": "Legacy fallback for `--esp-page-main-min-width`."
-    },
     {
       "name": "--esp-page-preview-min-width",
       "description": "Minimum preview width. Defaults to `22.5rem` (360px, a reasonable mobile-device surface)."
@@ -1449,10 +1437,6 @@
       "name": "--esp-page-preview-shadow",
       "description": "Shadow cast from the preview's trailing edge. Defaults to the page surface edge shadow. Set to `none` for a flat additive surface."
     },
-    {
-      "name": "--esp-page-preview-width",
-      "description": "Legacy fixed-width alias that pins both preview bounds."
-    },
     {
       "name": "--esp-page-resize-focus-outline",
       "description": "Keyboard-focus line drawn along the focused seam, spanning the visible dotted edge up to one viewport height. Defaults to `2px dashed var(--esp-color-link)`."
@@ -2120,6 +2104,46 @@
     {
       "name": "--esp-vellum-opacity",
       "description": ""
+    },
+    {
+      "name": "--esp-video-accent",
+      "description": "`accent-color` for the native controls, where the browser honors it. Defaults to `var(--esp-color-primary)`."
+    },
+    {
+      "name": "--esp-video-border-radius",
+      "description": "Corner radius. Defaults to `var(--esp-size-border-radius)`."
+    },
+    {
+      "name": "--esp-video-focus-outline",
+      "description": "Focus-visible outline on the play button, the video, and the error message. Defaults to `3px solid var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-video-message-background",
+      "description": "Error message background. Defaults to `var(--esp-color-background)`."
+    },
+    {
+      "name": "--esp-video-message-color",
+      "description": "Error message text color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-video-object-fit",
+      "description": "How the video fills its box. Defaults to `contain`; the poster always covers."
+    },
+    {
+      "name": "--esp-video-play-background",
+      "description": "Fill of the play disc. Defaults to `var(--esp-color-background)` at 90% opacity."
+    },
+    {
+      "name": "--esp-video-play-color",
+      "description": "Play glyph and loading-indicator color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-video-play-size",
+      "description": "Diameter of the play disc. Defaults to `var(--esp-size-huge)`."
+    },
+    {
+      "name": "--esp-video-surface",
+      "description": "Background behind the video and an absent poster. Defaults to a near-black derived from `--esp-color-text`."
     }
   ]
 }

package/espalier.token-manifest.json

@@ -1995,12 +1995,6 @@
       "component": "esp-page",
       "description": "Minimum in-grid help width. Defaults to `20rem`."
     },
-    {
-      "name": "--esp-page-flyout-width",
-      "category": "component",
-      "component": "esp-page",
-      "description": "Legacy fixed-width alias that pins both help bounds."
-    },
     {
       "name": "--esp-page-header-z-index",
       "category": "component",
@@ -2025,12 +2019,6 @@
       "component": "esp-page",
       "description": "Minimum width of the main content well while preview or in-grid help competes for space. Defaults to `30rem`."
     },
-    {
-      "name": "--esp-page-max-width",
-      "category": "component",
-      "component": "esp-page",
-      "description": "Legacy fallback for `--esp-page-main-max-width`."
-    },
     {
       "name": "--esp-page-preview-background",
       "category": "component",
@@ -2055,12 +2043,6 @@
       "component": "esp-page",
       "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows."
     },
-    {
-      "name": "--esp-page-preview-min-main-width",
-      "category": "component",
-      "component": "esp-page",
-      "description": "Legacy fallback for `--esp-page-main-min-width`."
-    },
     {
       "name": "--esp-page-preview-min-width",
       "category": "component",
@@ -2073,12 +2055,6 @@
       "component": "esp-page",
       "description": "Shadow cast from the preview's trailing edge. Defaults to the page surface edge shadow. Set to `none` for a flat additive surface."
     },
-    {
-      "name": "--esp-page-preview-width",
-      "category": "component",
-      "component": "esp-page",
-      "description": "Legacy fixed-width alias that pins both preview bounds."
-    },
     {
       "name": "--esp-page-resize-focus-outline",
       "category": "component",
@@ -3023,6 +2999,66 @@
       "name": "--esp-vellum-opacity",
       "category": "root-theme",
       "description": ""
+    },
+    {
+      "name": "--esp-video-accent",
+      "category": "component",
+      "component": "esp-video",
+      "description": "`accent-color` for the native controls, where the browser honors it. Defaults to `var(--esp-color-primary)`."
+    },
+    {
+      "name": "--esp-video-border-radius",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Corner radius. Defaults to `var(--esp-size-border-radius)`."
+    },
+    {
+      "name": "--esp-video-focus-outline",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Focus-visible outline on the play button, the video, and the error message. Defaults to `3px solid var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-video-message-background",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Error message background. Defaults to `var(--esp-color-background)`."
+    },
+    {
+      "name": "--esp-video-message-color",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Error message text color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-video-object-fit",
+      "category": "component",
+      "component": "esp-video",
+      "description": "How the video fills its box. Defaults to `contain`; the poster always covers."
+    },
+    {
+      "name": "--esp-video-play-background",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Fill of the play disc. Defaults to `var(--esp-color-background)` at 90% opacity."
+    },
+    {
+      "name": "--esp-video-play-color",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Play glyph and loading-indicator color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-video-play-size",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Diameter of the play disc. Defaults to `var(--esp-size-huge)`."
+    },
+    {
+      "name": "--esp-video-surface",
+      "category": "component",
+      "component": "esp-video",
+      "description": "Background behind the video and an absent poster. Defaults to a near-black derived from `--esp-color-text`."
     }
   ],
   "patterns": [

package/licenses/ASSET_PROVENANCE.md

@@ -11,6 +11,7 @@ removing, or replacing non-code assets.
 | `css/fonts/*.css`, `css/fonts/font-definitions.json` | Generated Google Fonts preview CSS and catalog with per-family notices generated from upstream Google Fonts metadata links. | `licenses/GOOGLE_FONTS_NOTICES.md` |
 | `css/fonts/font-fallback-profiles.json` | Variant metrics derived from `@capsizecss/metrics` with `@capsizecss/core`, serialized by Taproot's deterministic maintainer generator. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `assets/shell-fonts.css`, `assets/shell-fonts/**` | Docs-only self-hosted Quicksand, Oswald, and Sometype Mono WOFF2 subsets under OFL 1.1, downloaded once from the Google Fonts css2 endpoint and checked in so the documentation shell never calls Google at runtime. | `licenses/THIRD_PARTY_NOTICES.md` |
+| `assets/theme-gallery-fonts.css`, `assets/theme-gallery-fonts/**` | Docs-only self-hosted Google Fonts WOFF2 subsets (OFL 1.1), generated by `scripts/build-theme-gallery-fonts.ts`; upstream URLs and SHA-256 hashes in `sources.json`. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `assets/icons.svg` | Tabler-derived SVG symbols plus Taproot-owned logo symbol. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `*.ts` | Inline Tabler-style SVG templates and Taproot rendering helpers. | `licenses/THIRD_PARTY_NOTICES.md` |
 | `dist/shared/virtualizer/**` | Vendored Lit Virtualizer runtime source compiled into Espalier's package. | `licenses/THIRD_PARTY_NOTICES.md` |
@@ -18,6 +19,7 @@ removing, or replacing non-code assets.
 | Demo textures | Taproot-owned generated PNG textures created for this repository. | None |
 | `css/textures/*.png` | Deterministic 256×256 first-party tiles from `node scripts/generate-banner-textures.js`; byte-for-byte verification uses `--check`. | None |
 | Banner preset reference sheets | Taproot-authored browser captures of the locked visual recipes over the provenance-cleared bright and dark canvas images. | None |
+| `assets/esp-video/**` | Docs-only Taproot-generated sample video, poster frame, and captions for `esp-video`, recorded from a procedural canvas animation by `scripts/generate-video-sample.js`. | None |
 | `assets/focus-picker-unsplash.jpg` | Docs-only landscape photograph by Sasha Freemind, downloaded from Unsplash and used to make focal-point movement easy to see. | Attribution is included in the focus-picker demos. |
 | `assets/canvas-bg.jpg` | Docs-only light canvas texture — Envato Elements item "Seamless Pattern Design With Colorful Flowers" by yusufdemirci; certificate `licenses/license_certificate_A2BVZ6Y9DN.pdf`; attribution not required; kept out of the published `@taprootio/espalier` package. | None |
 | `assets/canvas-bg-dark.jpg` | Docs-only dark canvas texture — Envato Elements item "Nocturnal Garden Pattern" by Webvilla; certificate `licenses/license_certificate_HF5ZVPRNC2.pdf`; attribution not required; kept out of the published package. | None |

package/licenses/THIRD_PARTY_NOTICES.md

@@ -231,3 +231,12 @@ 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.
+
+## Documentation theme gallery fonts
+
+The documentation theme gallery self-hosts Google Fonts under the SIL Open
+Font License 1.1. Each family's original copyright and complete license notice
+is distributed beside its WOFF2 files in `assets/theme-gallery-fonts/*-OFL.txt`.
+Exact upstream URLs and SHA-256 checksums are recorded in
+`assets/theme-gallery-fonts/sources.json`. The font bytes are unmodified.
+These assets are documentation-only and are excluded from the npm package.

package/licenses/asset-provenance.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "updatedAt": "2026-08-28",
+  "updatedAt": "2026-09-27",
   "entries": [
     {
       "id": "google-font-preview-assets",
@@ -227,6 +227,28 @@
       "noticePaths": [],
       "reviewStatus": "documented"
     },
+    {
+      "id": "esp-video-docs-sample",
+      "paths": [
+        "assets/esp-video/espalier-sample.mp4",
+        "assets/esp-video/espalier-sample-poster.jpg",
+        "assets/esp-video/espalier-sample.en.vtt"
+      ],
+      "assetType": "docs-only sample video (H.264 MP4, 960x540, 6 seconds), its poster frame (JPEG), and English WebVTT captions",
+      "classification": "Taproot-authored generated documentation assets",
+      "owner": "Taproot",
+      "source": "Generated by scripts/generate-video-sample.js, which draws a procedural trellis animation on a canvas in headless Google Chrome and records it with MediaRecorder; captions written by hand for the sample on 2026-09-30",
+      "license": "Taproot-owned; no third-party content",
+      "transformations": [
+        "Recorded the canvas animation at 30 fps and 700 kbps as video/mp4;codecs=avc1.42E01F",
+        "Encoded the animation's first frame as the JPEG poster"
+      ],
+      "packageInclusion": "not included in npm package",
+      "docsInclusion": "copied to public docs assets and embedded by docs/guides/esp-video.md and the esp-video component page; also served to the esp-video browser fixtures",
+      "noticeRequirement": "none",
+      "noticePaths": [],
+      "reviewStatus": "documented"
+    },
     {
       "id": "unsplash-focus-picker-demo",
       "paths": [
@@ -398,6 +420,47 @@
         "licenses/THIRD_PARTY_NOTICES.md"
       ],
       "reviewStatus": "documented"
+    },
+    {
+      "id": "docs-theme-gallery-fonts",
+      "paths": [
+        "assets/theme-gallery-fonts.css",
+        "assets/theme-gallery-fonts/**"
+      ],
+      "assetType": "self-hosted Google Font WOFF2 faces and OFL notices",
+      "classification": "third-party open font",
+      "owner": "Google Fonts family authors, identified in the accompanying per-family OFL notices",
+      "source": "Google Fonts css2 and google/fonts repository; exact URLs and SHA-256 hashes in assets/theme-gallery-fonts/sources.json",
+      "license": "SIL Open Font License 1.1",
+      "transformations": [
+        "Fetched Latin and Latin-ext WOFF2 subsets without modifying the font bytes",
+        "Rewrote stylesheet URLs to same-origin assets; generated by scripts/build-theme-gallery-fonts.ts"
+      ],
+      "packageInclusion": "excluded; docs-only assets",
+      "docsInclusion": "theme gallery and persisted documentation theme selections",
+      "noticeRequirement": "required",
+      "noticePaths": [
+        "licenses/THIRD_PARTY_NOTICES.md",
+        "assets/theme-gallery-fonts/archivo-black-OFL.txt",
+        "assets/theme-gallery-fonts/barlow-condensed-OFL.txt",
+        "assets/theme-gallery-fonts/bitter-OFL.txt",
+        "assets/theme-gallery-fonts/bodoni-moda-OFL.txt",
+        "assets/theme-gallery-fonts/dm-sans-OFL.txt",
+        "assets/theme-gallery-fonts/fraunces-OFL.txt",
+        "assets/theme-gallery-fonts/fredoka-OFL.txt",
+        "assets/theme-gallery-fonts/ibm-plex-sans-OFL.txt",
+        "assets/theme-gallery-fonts/ibm-plex-serif-OFL.txt",
+        "assets/theme-gallery-fonts/inter-OFL.txt",
+        "assets/theme-gallery-fonts/lora-OFL.txt",
+        "assets/theme-gallery-fonts/manrope-OFL.txt",
+        "assets/theme-gallery-fonts/nunito-OFL.txt",
+        "assets/theme-gallery-fonts/playfair-display-OFL.txt",
+        "assets/theme-gallery-fonts/sora-OFL.txt",
+        "assets/theme-gallery-fonts/space-grotesk-OFL.txt",
+        "assets/theme-gallery-fonts/space-mono-OFL.txt",
+        "assets/theme-gallery-fonts/work-sans-OFL.txt"
+      ],
+      "reviewStatus": "documented"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.20.1",
+  "version": "5.0.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",
@@ -153,6 +153,10 @@
       "types": "./dist/image/esp-image.d.ts",
       "import": "./dist/image/esp-image.js"
     },
+    "./video": {
+      "types": "./dist/video/esp-video.d.ts",
+      "import": "./dist/video/esp-video.js"
+    },
     "./image-upload": {
       "types": "./dist/image-upload/esp-image-upload.d.ts",
       "import": "./dist/image-upload/esp-image-upload.js"