@taprootio/espalier 6.2.0 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# 6.4.0
+
+A full-screen dialog can be bounded to a rectangle, so the rest of the page stays visible around it.
+
+- **New: four inset custom properties on `esp-dialog`**: `--esp-dialog-inset-block-start`, `--esp-dialog-inset-inline-start`, `--esp-dialog-inset-inline-end`, and `--esp-dialog-inset-block-end`. Each is a length measured from the viewport edge and defaults to `0px`, so a dialog that sets none covers the viewport exactly as before. Set them on the `esp-dialog` host and the dialog's scrolling surface and both backdrop layers paint only inside the rectangle. They are logical: inline start is the left edge in left-to-right text and the right edge in right-to-left text.
+- **`esp-box full-screen` fills the bounded rectangle.** It takes its position and size from the same four properties, from the dialog host or any ancestor, and its scroll container now follows the box instead of the viewport. Without the properties it still fills the viewport.
+- **Bounds change where the dialog paints, not what is reachable.** The dialog has never closed on an outside click, so clicks on the uncovered region reach the page unless something there is `inert`. Inside `esp-page`'s markup the page's tracks are inert as before, so the uncovered header and preview are not clickable; a dialog that is a direct child of another component's shadow root leaves the page around it live. The Tab trap and `Escape` act only while focus is inside the dialog, so a click on an uncovered control takes focus out of it. Set `inert` on the uncovered regions that must not be reachable. The Dialog guide has the details.
+
+# 6.3.0
+
+A field fills one layer above the surface it sits on.
+
+- Fields inside tab panels and boxes now follow the panel or box's declared layer: a layer-2 surface gives its fields layer 3, instead of the previous fixed layer 2. Default layer-1 panels and boxes still give fields layer 2. Dialogs give fields layer 4; headers, footers, and callouts give fields layer 3. Bare-page fields keep their layer-2 fill.
+- New: `surface-layer="1|2|3|4"` selects an Espalier surface's default layer and declares depth for consumer-painted surfaces. The `@taprootio/espalier/shared/surface-layer` CSS helper supports consumer surfaces inside custom shadow roots. Nearest painted surface wins, independently of quiet/inverted contexts and color scheme.
+- `--esp-field-background` overrides still win. Hover and focus derive from the resolved fill. At the layer-4 ceiling the resting field shares its container's fill, with the border and state treatments providing separation.
+
 # 6.2.0
 
 Banners gain a soft height contract, so a banner capped to the first fold or filling the viewport never clips its copy.

package/README.md

@@ -1,6 +1,6 @@
 # Espalier
 
-Espalier is Taproot's enterprise-grade web component design system. It ships as
+Espalier is Taproot's web-component design system. It ships as
 standard ES modules built on Lit, custom elements, Shadow DOM, CSS custom
 properties, and native form participation.
 
@@ -16,10 +16,10 @@ included in this package or in the public artifact repository.
 ## Installation
 
 ```bash
-npm install @taprootio/espalier
+npm install @taprootio/espalier lit
 ```
 
-## Basic Usage
+## Basic usage
 
 Import the root element and the components you use:
 
@@ -42,7 +42,7 @@ You can also import the full component bundle:
 import "@taprootio/espalier";
 ```
 
-## Public Metadata
+## Public metadata
 
 The package includes machine-readable public API metadata:
 
@@ -58,7 +58,7 @@ Espalier is proprietary software. See `LICENSE` for the package license and
 Production use requires a paid order form or another written agreement with
 Taproot unless the license expressly allows the use case.
 
-## Source Access
+## Source access
 
 No source code rights are granted by this package. Source access, source escrow,
 or source snapshot transactions require a separate written agreement.