@taprootio/espalier 2.0.0

package/dist/shared/bus-events.d.ts

@@ -0,0 +1,189 @@
+/**
+ * @module bus-events
+ *
+ * Central registry for every event published on the singleton
+ * {@link EspBus}.  All bus event maps live here so that consumers
+ * can import a single, fully-typed accessor instead of scattering
+ * generic parameters across the codebase.
+ *
+ * ```ts
+ * import { getEspBus } from "@taprootio/espalier";
+ *
+ * // Use built-in Espalier events out of the box:
+ * const bus = getEspBus();
+ * bus.subscribe("scheme-changed", (payload) => { … });
+ * bus.publish("show-toast", { message: "Done!" });
+ *
+ * // Or extend with your own application events:
+ * type MyAppEvents = EspBusEventMap & {
+ *   "sse-notification": { type: string; payload: unknown };
+ * };
+ * const appBus = getEspBus<MyAppEvents>();
+ * appBus.subscribe("sse-notification", (data) => { … });
+ * ```
+ */
+import { EspBus } from "./esp-bus.js";
+import type { ToastConfig } from "./toast-events.js";
+/**
+ * Contract for elements that provide a seed color to their subtree.
+ * Implemented by `EspalierRoot` (the global provider) and
+ * `EspalierElementBase` (per-component variant overrides).
+ *
+ * @docUrl /api/seed-color-root
+ * @menuGroup Bus Events
+ * @menuLabel SeedColorRoot
+ */
+export interface SeedColorRoot {
+    readonly seedColor: string;
+    readonly correlationId: string;
+}
+/**
+ * Theme coordination events.
+ *
+ * Published by `<esp-root>` and subscribed to by every
+ * `EspalierElementBase` descendant so that scheme, seed,
+ * and full-theme changes propagate to variant-aware children.
+ *
+ * @docUrl /api/scheme-events
+ * @menuGroup Bus Events
+ * @menuLabel SchemeEvents
+ */
+export interface SchemeEvents {
+    /** Fired when the effective seed color changes. */
+    "seed-color-changed": {
+        seedColor: string;
+        correlationId: string;
+    };
+    /** Fired when the active scheme flips between light and dark. */
+    "scheme-changed": {
+        scheme: "light" | "dark";
+        correlationId: string;
+    };
+    /**
+     * Fired when either resolved theme object changes (e.g. a new
+     * `light-theme` or `dark-theme` attribute is set).  Variant-aware
+     * children re-apply their tokens in response.
+     */
+    "theme-changed": {
+        correlationId: string;
+    };
+    /**
+     * Fired when the configured component icon sprite URL changes.
+     * Consumers that need the initial value should read it from the
+     * nearest `<esp-root>`; this event is change-only and is not replayed
+     * for late subscribers.
+     */
+    "icon-sprite-url-changed": {
+        iconSpriteUrl: string;
+        correlationId: string;
+    };
+}
+/**
+ * Toast notification events.
+ *
+ * Published by the `showToast()` helper and subscribed to by
+ * `<esp-toaster>`.
+ *
+ * @docUrl /api/toast-events
+ * @menuGroup Bus Events
+ * @menuLabel ToastEvents
+ */
+export interface ToastEvents {
+    "show-toast": ToastConfig;
+}
+/**
+ * Cross-popover coordination events.
+ *
+ * Every component that participates in cross-popover coordination
+ * should use this type.
+ *
+ * - `source`        – the component instance that is about to open.
+ *                     Subscribers using the **source-identity** strategy
+ *                     ignore events whose source is themselves or a
+ *                     descendant.
+ * - `skipPopovers`  – an array of `esp-popover` instances that should
+ *                     remain open. Subscribers using the **skip-list**
+ *                     strategy ignore events that include themselves.
+ *
+ * @docUrl /api/popover-events
+ * @menuGroup Bus Events
+ * @menuLabel PopoverEvents
+ */
+export interface PopoverEvents {
+    "close-popovers": {
+        source?: object;
+        skipPopovers?: HTMLElement[];
+    };
+}
+/**
+ * Screen size events.
+ *
+ * Published by `<esp-root>` via its ResizeObserver.
+ *
+ * @docUrl /api/size-events
+ * @menuGroup Bus Events
+ * @menuLabel SizeEvents
+ */
+export interface SizeEvents {
+    /** Fired when the window is resized. */
+    "window-resized": {
+        emWidth: number;
+        emHeight: number;
+        pxWidth: number;
+        pxHeight: number;
+    };
+}
+/**
+ * Page-level layout events.
+ *
+ * Published by `<esp-page>` when the fixed-menu state changes.
+ *
+ * @docUrl /api/page-event-map
+ * @menuGroup Bus Events
+ * @menuLabel PageEventMap
+ */
+export interface PageEventMap {
+    "fixed-menus-changed": {
+        fixed: boolean;
+    };
+}
+/**
+ * Every event published on the singleton EspBus.
+ *
+ * Pass this to `EspBus.getInstance<EspBusEventMap>()` or,
+ * preferably, call {@link getEspBus} for a pre-typed reference.
+ *
+ * @docUrl /api/esp-bus-event-map
+ * @menuGroup Bus Events
+ * @menuLabel EspBusEventMap
+ */
+export type EspBusEventMap = SchemeEvents & ToastEvents & PopoverEvents & SizeEvents & PageEventMap;
+/**
+ * Typed accessor for the singleton bus.
+ *
+ * Called without a type parameter it knows every built-in Espalier
+ * event.  Consuming applications can extend the map with their own
+ * events so that a single bus instance carries both sets of types:
+ *
+ * ```ts
+ * // Internal Espalier usage — no type parameter needed:
+ * const bus = getEspBus();
+ * bus.publish("show-toast", { message: "Saved!" });
+ *
+ * // Application usage — extend with custom events:
+ * type AppBusEvents = EspBusEventMap & {
+ *   "sse-notification": { type: string; payload: unknown };
+ *   "cart-updated":     { itemCount: number };
+ * };
+ *
+ * const bus = getEspBus<AppBusEvents>();
+ * bus.publish("sse-notification", { … });   // ✓ app event
+ * bus.publish("show-toast", { … });          // ✓ Espalier event
+ * ```
+ *
+ * @returns Pre-typed bus instance.
+ * @docUrl /api/get-esp-bus
+ * @menuGroup Functions
+ * @menuLabel getEspBus
+ */
+export declare function getEspBus<T extends EspBusEventMap = EspBusEventMap>(): EspBus<T>;

package/dist/shared/bus-events.js

@@ -0,0 +1 @@
+import{EspBus as t}from"./esp-bus.js";function n(){return t.getInstance()}export{n as getEspBus};

package/dist/shared/color-engine.js

@@ -0,0 +1 @@
+const _=Math.PI/180,i=1e-4,S=50;function d(t){const n=t.h*_;return{L:t.l,a:t.c*Math.cos(n),b:t.c*Math.sin(n)}}function P(t){const n=Math.sqrt(t.a*t.a+t.b*t.b);let r=Math.atan2(t.b,t.a)/_;return r<0&&(r+=360),{l:t.L,c:n,h:r}}function N(t){const n=t.L+.3963377774*t.a+.2158037573*t.b,r=t.L-.1055613458*t.a-.0638541728*t.b,o=t.L-.0894841775*t.a-1.291485548*t.b,e=n*n*n,c=r*r*r,a=o*o*o;return{r:4.0767416621*e-3.3077115913*c+.2309699292*a,g:-1.2684380046*e+2.6097574011*c-.3413193965*a,b:-.0041960863*e-.7034186147*c+1.707614701*a}}function E(t){const n=Math.cbrt(.4122214708*t.r+.5363325363*t.g+.0514459929*t.b),r=Math.cbrt(.2119034982*t.r+.6806995451*t.g+.1073969566*t.b),o=Math.cbrt(.0883024619*t.r+.2817188376*t.g+.6299787005*t.b);return{L:.2104542553*n+.793617785*r-.0040720468*o,a:1.9779984951*n-2.428592205*r+.4505937099*o,b:.0259040371*n+.7827717662*r-.808675766*o}}function p(t){return t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055}function M(t){return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function F(t){return{r:p(t.r),g:p(t.g),b:p(t.b)}}function I(t){return{r:M(t.r),g:M(t.g),b:M(t.b)}}function X(t){return t.r>=-i&&t.r<=1+i&&t.g>=-i&&t.g<=1+i&&t.b>=-i&&t.b<=1+i}function m(t){return Math.max(0,Math.min(1,t))}function W(t){const r=t.trim().match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)\s*\)$/i);if(!r)return null;let o=parseFloat(r[1]);r[2]==="%"&&(o/=100);const e=parseFloat(r[3]),c=parseFloat(r[4]);return isNaN(o)||isNaN(e)||isNaN(c)?null:{l:o,c:e,h:(c%360+360)%360}}function U(t){const n=G(t.l,6),r=G(t.c,6),o=G((t.h%360+360)%360,4);return`oklch(${n} ${r} ${o})`}function T(t){return F(N(d(t)))}function Y(t){return P(E(I(t)))}function x(t){return X(T(t))}function h(t){if(t.c<=i||x(t))return{...t};let n=0,r=t.c,o={...t};for(let e=0;e<S;e++){const c=(n+r)/2;if(o={l:t.l,c,h:t.h},x(o)?n=c:r=c,r-n<i)break}return{l:t.l,c:n,h:t.h}}function $(t,n,r){const o={l:t.l,c:Math.max(n,Math.min(r,t.c)),h:t.h};return h(o)}const f=.022,L=.012,C=.022,R=.57,k=.56,B=1.14,A=.001,l=.027;function w(t){const n=Math.pow(m(t.r),2.4),r=Math.pow(m(t.g),2.4),o=Math.pow(m(t.b),2.4);return .2126729*n+.7151522*r+.072175*o}function O(t,n){const r=T(h(t)),o=T(h(n));let e=w(r),c=w(o);if(e=e>f?e:e+Math.pow(f-e,1.414),c=c>f?c:c+Math.pow(f-c,1.414),Math.abs(c-e)<A)return 0;let a;if(c>e){const s=Math.pow(c,k),u=Math.pow(e,R);if(a=(s-u)*B,a<A)return 0;a=a<l?a-a*C*l:a-C}else{const s=Math.pow(c,k),u=Math.pow(e,R);if(a=(s-u)*B,a>-A)return 0;a=a>-l?a-a*L*l:a+L}return a*100}function b(t,n,r=60){let o=h({...t}),e=Math.abs(O(o,n));if(e>=r)return o;const c=n.l>.5,a=.01,s=c?0:1;for(let u=0;u<100;u++){if(c?o.l=Math.max(s,o.l-a):o.l=Math.min(s,o.l+a),o=h(o),e=Math.abs(O(o,n)),e>=r)return o;if(o.l<=0||o.l>=1)break}return o}function v(t,n){return((t+n)%360+360)%360}function q(t,n){return{l:t.l,c:t.c,h:v(t.h,n)}}function V(t,n,r,o){return $({l:n,c:t.c,h:t.h},r,o)}function z(t,n,r,o,e,c=60){const a=V(t,n,r,o);return b(a,e,c)}function G(t,n){const r=Math.pow(10,n);return Math.round(t*r)/r}export{O as apcaContrast,$ as clampChromaAndGamutMap,V as deriveSemantic,z as deriveSemanticWithContrast,q as deriveVariant,b as ensureContrast,h as gamutMapToSRGB,x as isInSRGBGamut,T as oklchToSRGB,W as parseOklch,v as rotateHue,U as serializeOklch,Y as srgbToOklch};

package/dist/shared/esp-bus.d.ts

@@ -0,0 +1,6 @@
+export declare class EspBus<TEventMap extends Record<string, any>> {
+    static getInstance<TBus extends Record<string, any>>(): EspBus<TBus>;
+    subscribe<K extends keyof TEventMap>(event: K, callback: (payload: TEventMap[K]) => void): void;
+    unsubscribe<K extends keyof TEventMap>(event: K, callback: (payload: TEventMap[K]) => void): void;
+    publish<K extends keyof TEventMap>(event: K, payload: TEventMap[K]): void;
+}

package/dist/shared/esp-bus.js

@@ -0,0 +1 @@
+class i{constructor(){this.subscribers={}}static getInstance(){return i.instanceBacker||(i.instanceBacker=new i),i.instanceBacker}subscribe(s,r){this.subscribers[s]||(this.subscribers[s]=[]),this.subscribers[s].push(r)}unsubscribe(s,r){this.subscribers[s]&&(this.subscribers[s]=this.subscribers[s].filter(b=>b!==r))}publish(s,r){this.subscribers[s]&&this.subscribers[s].forEach(b=>b(r))}}export{i as EspBus};

package/dist/shared/esp-element-base.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, type PropertyValues } from "lit";
+import { type SeedColorRoot } from "./bus-events.js";
+import { type ColorSource } from "./theme.js";
+export type EspalierVariant = "analogous-left" | "analogous-right" | "complementary" | "danger" | "info" | "neutral" | "primary" | "split-complementary-left" | "split-complementary-right" | "success" | "triadic-left" | "triadic-right" | "warning" | "";
+/**
+ * Shared base class for Espalier elements.
+ *
+ * The reusable `.esp-field` shell used by text inputs, textareas,
+ * pickers, date pickers, buttons, and similar controls exposes the
+ * following shared styling hooks:
+ *
+ * @cssprop --esp-field-background - Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.
+ * @cssprop --esp-field-border-color - Border color of the shared field shell. Defaults to `var(--esp-color-border)`.
+ * @cssprop --esp-field-border-width - Border width of the shared field shell. Defaults to `1px`.
+ * @cssprop --esp-field-text-color - Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.
+ * @cssprop --esp-field-hover-bg - Hover background color of the shared field shell. Derived from `--esp-field-background`.
+ * @cssprop --esp-field-focus-bg - Focus background color of the shared field shell. Derived from `--esp-field-background`.
+ * @cssprop --esp-field-focus-shadow - Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.
+ */
+export declare class EspalierElementBase extends LitElement implements SeedColorRoot {
+    protected variantBacker: EspalierVariant;
+    get seedColor(): string;
+    set seedColor(val: string);
+    correlationId: `${string}-${string}-${string}-${string}-${string}`;
+    protected focusResolvedElementAfterUpdate(resolveTarget: () => HTMLElement | null | undefined, options?: FocusOptions): void;
+    protected focusShadowElementAfterUpdate(selector: string, options?: FocusOptions): void;
+    protected emitValueChanged<T>(detail: T): void;
+    /**
+     * The scheme to use for the component. This property is used internally
+     * to control the light/dark scheme so it matches the scheme of
+     * [esp-root](/components/root). It should not be set manually, it
+     * exists as an attribute for styling purposes.
+     * @type {"dark" | "light"}
+     */
+    scheme: "dark" | "light" | "";
+    /**
+     * The [color variant](/guides/color/variants) of the element.
+     * @type {EspalierVariant}
+     */
+    get variant(): EspalierVariant;
+    set variant(val: EspalierVariant);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /**
+     * Traverse up the DOM tree to find the closest element that
+     * matches the selector. This method is aware of shadow DOM
+     * boundaries and will traverse through them to find the element.
+     * @param selector The selector of the element to look for
+     * @returns The element, if found, or null
+     */
+    traverseToClosest(selector: string): Element | null;
+    /**
+     * Compute and apply variant-specific semantic color tokens.
+     *
+     * For the **primary** variant (or none), all semantic tokens
+     * cascade from `<esp-root>` — any previous overrides are cleared.
+     *
+     * For non-primary variants, semantic tokens whose source is
+     * `primary` are recomputed using the variant color and applied
+     * as inline styles on the host element.
+     */
+    protected applyVariantTokens(): void;
+    protected getVariantColorSource(): ColorSource | "";
+    static styles: import("lit").CSSResult[];
+}

package/dist/shared/esp-element-base.js

@@ -0,0 +1,125 @@
+var p=function(g,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,o);else for(var c=g.length-1;c>=0;c--)(a=g[c])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{css as x,LitElement as E}from"lit";import{property as m,state as I}from"lit/decorators.js";import{getEspBus as V}from"./bus-events.js";import{traverseToClosest as S}from"./utilities.js";import{parseOklch as O,serializeOklch as y,gamutMapToSRGB as A,deriveSemantic as L,deriveSemanticWithContrast as U}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as R,semanticToCSS as P}from"./theme.js";import{focusRing as _}from"./style-fragments.js";class n extends E{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.applyVariantTokens()},this.handleIconSpriteUrlChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const o=()=>{const r=e();return r?(r.focus(t),!0):!1};o()||this.updateComplete.then(()=>{o()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback(),this.subscribeToRootEvents(),this.hasUpdated&&this.syncRootFromDom(!1)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=S(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const o=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,(o||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),o&&this.requestUpdate(),t}subscribeToRootEvents(){if(this.rootEventSubscriptionsActive)return;const e=V();e.subscribe("seed-color-changed",this.handleSeedColorChanged),e.subscribe("scheme-changed",this.handleSchemeChanged),e.subscribe("theme-changed",this.handleThemeChanged),e.subscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!0}unsubscribeFromRootEvents(){if(!this.rootEventSubscriptionsActive)return;const e=V();e.unsubscribe("seed-color-changed",this.handleSeedColorChanged),e.unsubscribe("scheme-changed",this.handleSchemeChanged),e.unsubscribe("theme-changed",this.handleThemeChanged),e.unsubscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!1}traverseToClosest(e){return S(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,o=O(t.seedColor);if(!o)return;const s=T(o,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",y(A(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:k}=n,f={};for(const i of R){if(k[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),b=a[d],v=t.lightness[l.lightness],u=L(b,v,h.min,h.max);f[i]=u,this.setVariantTokenProperty(P(i),y(u))}for(const i of R){const l=k[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],b=this.effectiveVariantTokenSource(i,h.source,c),v=a[b],u=t.lightness[h.lightness],w=f[l.bg],C=U(v,u,d.min,d.max,w,l.targetLc);f[i]=C,this.setVariantTokenProperty(P(i),y(C))}}effectiveVariantTokenSource(e,t,o){return o&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const o=this.variantTokenOriginalValues.get(e);if(o){const r=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(r!==o.generatedValue||s!==o.generatedPriority)&&(o.originalValue=r.length?r:null,o.originalPriority=s),o.generatedValue=t,o.generatedPriority=""}else{const r=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:r.length?r:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const o=this.style.getPropertyValue(e),r=this.style.getPropertyPriority(e);(o!==t.generatedValue||r!==t.generatedPriority)&&(t.originalValue=o.length?o:null,t.originalPriority=r),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[_(".esp-field:focus-within","--esp-field-focus-shadow"),x`
+      :host {
+        
+        --_esp-field-resolved-hover-bg: var(
+          --esp-field-hover-bg,
+          oklch(from var(--esp-field-background, var(--esp-color-layer-2)) calc(l * 0.88) c h)
+        );
+        --_esp-field-resolved-focus-bg: var(
+          --esp-field-focus-bg,
+          oklch(from var(--esp-field-background, var(--esp-color-layer-2)) calc(l * 0.82) c h)
+        );
+
+        display: block;
+
+        * {
+          box-sizing: border-box;
+        }
+      }
+
+      :host([scheme="light"]) {
+        --_esp-field-resolved-hover-bg: var(
+          --esp-field-hover-bg,
+          oklch(
+            from var(--esp-field-background, var(--esp-color-layer-2)) calc(l + (1 - l) * 0.5) c h
+          )
+        );
+        --_esp-field-resolved-focus-bg: var(
+          --esp-field-focus-bg,
+          oklch(
+            from var(--esp-field-background, var(--esp-color-layer-2)) calc(l + (1 - l) * 0.75) c h
+          )
+        );
+      }
+
+      ::placeholder {
+        color: var(--esp-color-headings);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-family: var(--esp-font-headings);
+        font-weight: var(--esp-font-weight-headings);
+        color: var(--esp-color-headings);
+      }
+
+      a {
+        color: var(--esp-color-link);
+
+        &:hover {
+          background: var(--esp-color-link-hover-bg);
+          color: var(--esp-color-link-hover);
+          text-decoration: none;
+        }
+      }
+
+      .esp-field {
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-size-font);
+        font-weight: var(--esp-font-weight-body);
+        background-color: var(--esp-field-background, var(--esp-color-layer-2));
+        border-radius: var(--esp-size-border-radius);
+        border: var(--esp-field-border-width, 1px) solid
+          var(--esp-field-border-color, var(--esp-color-border));
+        color: var(--esp-field-text-color, var(--esp-color-text));
+        outline: none;
+        transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
+
+        &:hover {
+          background-color: var(--_esp-field-resolved-hover-bg);
+          border-color: oklch(
+            from var(--esp-field-border-color, var(--esp-color-border)) calc(l * 1.1) c h
+          );
+        }
+
+        &:focus-within {
+          background-color: var(--_esp-field-resolved-focus-bg);
+          border-color: oklch(
+            from var(--esp-field-border-color, var(--esp-color-border)) calc(l * 1.2) c h
+          );
+        }
+
+        > input,
+        input.esp-input,
+        > textarea,
+        > button,
+        > a {
+          text-decoration: none;
+          font-family: var(--esp-font-body);
+          font-size: var(--esp-size-font);
+          width: 100%;
+          color: inherit;
+          padding: var(--esp-size-padding);
+          border: none;
+          outline: none;
+          background-color: transparent;
+          caret-color: var(--esp-color-input-caret);
+          &::selection {
+            background: var(--esp-color-input-selection-bg);
+            color: var(--esp-color-input-selection);
+          }
+
+          &:disabled {
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      .esp-field:has(button:disabled),
+      .esp-field:has(a:disabled),
+      .esp-field:has(input:disabled),
+      .esp-field:has(textarea:disabled) {
+        opacity: 0.5;
+      }
+
+      .esp-field:has(button:disabled):hover,
+      .esp-field:has(a:disabled):hover,
+      .esp-field:has(input:disabled):hover,
+      .esp-field:has(textarea:disabled):hover {
+        background-color: var(--esp-field-background, var(--esp-color-layer-2));
+      }
+    `],p([I()],n.prototype,"seedColor",null),p([m({attribute:!1})],n.prototype,"correlationId",void 0),p([m({type:String,reflect:!0})],n.prototype,"scheme",void 0),p([m({type:String,attribute:"variant",reflect:!0})],n.prototype,"variant",null);export{n as EspalierElementBase};

package/dist/shared/esp-intent-element-base.d.ts

@@ -0,0 +1,10 @@
+import { EspalierElementBase } from "./esp-element-base.js";
+import { type EspalierIntentVariant } from "./intent-values.js";
+export declare abstract class EspalierIntentElementBase extends EspalierElementBase {
+    protected intentVariantBacker: EspalierIntentVariant;
+    /** Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`. */
+    get variant(): EspalierIntentVariant;
+    set variant(value: EspalierIntentVariant | string | null);
+    protected getVariantColorSource(): "";
+}
+export declare const intentSurfaceTokens: import("lit").CSSResult;

package/dist/shared/esp-intent-element-base.js

@@ -0,0 +1,31 @@
+var l=function(t,r,o,n){var a=arguments.length,e=a<3?r:n===null?n=Object.getOwnPropertyDescriptor(r,o):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,r,o,n);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(e=(a<3?s(e):a>3?s(r,o,e):s(r,o))||e);return a>3&&e&&Object.defineProperty(r,o,e),e};import{css as i}from"lit";import{property as p}from"lit/decorators.js";import{EspalierElementBase as v}from"./esp-element-base.js";import{normalizeIntentVariant as h}from"./intent-values.js";class d extends v{constructor(){super(...arguments),this.intentVariantBacker="neutral"}get variant(){return this.intentVariantBacker}set variant(r){const o=this.intentVariantBacker;this.intentVariantBacker=h(r),this.requestUpdate("variant",o),this.applyVariantTokens()}getVariantColorSource(){return""}}l([p({type:String})],d.prototype,"variant",null);const k=i`
+  .variant-neutral {
+    --_esp-intent-background: var(--esp-color-layer-2);
+    --_esp-intent-border-color: var(--esp-color-border);
+    --_esp-intent-color: var(--esp-color-text);
+  }
+
+  .variant-success {
+    --_esp-intent-background: oklch(from var(--esp-color-success) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-success) var(--esp-l-border) c h);
+    --_esp-intent-color: oklch(from var(--esp-color-success) var(--esp-l-text) c h);
+  }
+
+  .variant-warning {
+    --_esp-intent-background: oklch(from var(--esp-color-warning) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-warning) var(--esp-l-border) c h);
+    --_esp-intent-color: oklch(from var(--esp-color-warning) var(--esp-l-text) c h);
+  }
+
+  .variant-danger {
+    --_esp-intent-background: oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-danger) var(--esp-l-border) c h);
+    --_esp-intent-color: var(--esp-color-danger-text);
+  }
+
+  .variant-info {
+    --_esp-intent-background: var(--esp-color-link-hover-bg);
+    --_esp-intent-border-color: oklch(from var(--esp-color-link) var(--esp-l-border) c h);
+    --_esp-intent-color: var(--esp-color-link);
+  }
+`;export{d as EspalierIntentElementBase,k as intentSurfaceTokens};