@taprootio/espalier 3.0.1 → 3.2.0

package/dist/row/esp-row.d.ts

@@ -0,0 +1,64 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import type { EspalierAlign, EspalierGap } from "../stack/esp-stack.js";
+declare const ROW_JUSTIFIES: readonly ["start", "center", "end", "between"];
+/** A main-axis distribution accepted by `esp-row`. */
+export type EspalierJustify = (typeof ROW_JUSTIFIES)[number];
+export { ROW_JUSTIFIES };
+/**
+ * A horizontal flow: children sit in a wrapping row with a themed gap —
+ * "row, wrap, gap Y" without writing flexbox (ADR-010's micro half).
+ *
+ * ```html
+ * <esp-row gap="small" justify="between">
+ *   <span>Yoga · 60 min</span>
+ *   <esp-button label="Book"></esp-button>
+ * </esp-row>
+ * ```
+ *
+ * Rows wrap by default, so a button row or badge cluster degrades to
+ * multiple lines at narrow widths instead of overflowing; set `nowrap`
+ * for toolbars that must stay on one line. Cross-axis alignment
+ * defaults to `center` — the icon-beside-label, text-beside-button
+ * case a row exists for.
+ *
+ * @customElement esp-row
+ * @slot - The row children.
+ * @csspart row - The flex row.
+ * @cssprop --esp-row-gap - Overrides the gap between children. Defaults to the `gap` attribute's step, `normal` when unset.
+ * @docPageTitle Row
+ * @docUrl /components/row
+ * @menuGroup Structure
+ * @menuIcon layout
+ */
+export declare class EspalierRow extends EspalierElementBase {
+    /**
+     * Gap between children as a space-scale step name
+     * (`none`, `tiny`, `small`, `normal`, `medium`, `big`, `large`,
+     * `huge`).
+     * @default "normal"
+     */
+    gap: EspalierGap;
+    /**
+     * Cross-axis alignment of children: `start`, `center`, `end`, or
+     * `stretch`.
+     * @default "center"
+     */
+    align: EspalierAlign;
+    /**
+     * Main-axis distribution: `start`, `center`, `end`, or `between`.
+     * @default "start"
+     */
+    justify: EspalierJustify;
+    /**
+     * Keeps every child on one line instead of wrapping.
+     * @default false
+     */
+    nowrap: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-row": EspalierRow;
+    }
+}

package/dist/row/esp-row.js

@@ -0,0 +1,67 @@
+var o=function(p,r,s,a){var i=arguments.length,e=i<3?r:a===null?a=Object.getOwnPropertyDescriptor(r,s):a,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(p,r,s,a);else for(var f=p.length-1;f>=0;f--)(l=p[f])&&(e=(i<3?l(e):i>3?l(r,s,e):l(r,s))||e);return i>3&&e&&Object.defineProperty(r,s,e),e};import{css as u,html as g}from"lit";import{customElement as c,property as n}from"lit/decorators.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";const h=["start","center","end","between"];let t=class extends w{constructor(){super(...arguments),this.gap="normal",this.align="center",this.justify="start",this.nowrap=!1}render(){return g`
+      <div class="esp-row" part="row">
+        <slot></slot>
+      </div>
+    `}};t.styles=[...w.styles,u`
+      :host {
+        display: block;
+        --_esp-row-gap: var(--esp-size-normal);
+        --_esp-row-align: center;
+        --_esp-row-justify: flex-start;
+      }
+
+      :host([gap="none"]) {
+        --_esp-row-gap: 0px;
+      }
+      :host([gap="tiny"]) {
+        --_esp-row-gap: var(--esp-size-tiny);
+      }
+      :host([gap="small"]) {
+        --_esp-row-gap: var(--esp-size-small);
+      }
+      :host([gap="medium"]) {
+        --_esp-row-gap: var(--esp-size-medium);
+      }
+      :host([gap="big"]) {
+        --_esp-row-gap: var(--esp-size-big);
+      }
+      :host([gap="large"]) {
+        --_esp-row-gap: var(--esp-size-large);
+      }
+      :host([gap="huge"]) {
+        --_esp-row-gap: var(--esp-size-huge);
+      }
+
+      :host([align="start"]) {
+        --_esp-row-align: flex-start;
+      }
+      :host([align="end"]) {
+        --_esp-row-align: flex-end;
+      }
+      :host([align="stretch"]) {
+        --_esp-row-align: stretch;
+      }
+
+      :host([justify="center"]) {
+        --_esp-row-justify: center;
+      }
+      :host([justify="end"]) {
+        --_esp-row-justify: flex-end;
+      }
+      :host([justify="between"]) {
+        --_esp-row-justify: space-between;
+      }
+
+      .esp-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--esp-row-gap, var(--_esp-row-gap));
+        align-items: var(--_esp-row-align);
+        justify-content: var(--_esp-row-justify);
+      }
+
+      :host([nowrap]) .esp-row {
+        flex-wrap: nowrap;
+      }
+    `],o([n({reflect:!0,useDefault:!0})],t.prototype,"gap",void 0),o([n({reflect:!0,useDefault:!0})],t.prototype,"align",void 0),o([n({reflect:!0,useDefault:!0})],t.prototype,"justify",void 0),o([n({type:Boolean,reflect:!0})],t.prototype,"nowrap",void 0),t=o([c("esp-row")],t);export{t as EspalierRow,h as ROW_JUSTIFIES};

package/dist/section/esp-section.d.ts

@@ -0,0 +1,55 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+/**
+ * A full-bleed page band with a centered content well — the natural host
+ * for a theme zone.
+ *
+ * `esp-section` paints the local `--esp-color-background` edge to edge
+ * and centers its content in a capped well. It carries no card identity:
+ * no raised surface, no border radius, no shadow. Give it a `context`
+ * (see the theming guide, `/guides/color/theming` on the docs site) and
+ * the band renders the zone's complete token table with nothing to
+ * neutralize:
+ *
+ * ```html
+ * <esp-section context="inverted">
+ *   <h2>The reversed band</h2>
+ *   <p>Everything in here renders on the zone's tokens, and the band
+ *   spans its container edge to edge.</p>
+ * </esp-section>
+ * ```
+ *
+ * Inside `esp-page kind="site"` sections stack full-width and their
+ * wells share the page's `--esp-page-well-max-width`, so section
+ * content, the header, and the footer all align on one column. Outside
+ * a page the well defaults to the same width and the band fills
+ * whatever container it is given.
+ *
+ * The vertical rhythm defaults to the theme's fluid `--esp-size-section`
+ * step. For edge-to-edge content (a full-bleed hero image) clear both
+ * the well cap and the inline breathing room —
+ * `--esp-section-max-width: none; --esp-section-padding-inline: 0;` —
+ * and drop `--esp-section-padding-block` too when the media should
+ * meet the band's edges; the band's zone behavior is unaffected.
+ *
+ * @customElement esp-section
+ * @slot - The section's content, centered in the well.
+ * @csspart section - The full-bleed band.
+ * @csspart well - The centered content well.
+ * @cssprop --esp-section-background - The band's background. Defaults to the local `--esp-color-background`, which inside a `context` zone is the zone's canvas.
+ * @cssprop --esp-section-max-width - The content well's cap. Defaults to `var(--esp-page-well-max-width, 72rem)`; `none` lets content span the band.
+ * @cssprop --esp-section-padding-block - Vertical rhythm above and below the well. Defaults to `var(--esp-size-section)`.
+ * @cssprop --esp-section-padding-inline - Horizontal breathing room inside the band at narrow viewports. Defaults to `var(--esp-size-medium)`.
+ * @docPageTitle Section
+ * @docUrl /components/section
+ * @menuGroup Structure
+ * @menuIcon layout
+ */
+export declare class EspalierSection extends EspalierElementBase {
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-section": EspalierSection;
+    }
+}

package/dist/section/esp-section.js

@@ -0,0 +1,22 @@
+var a=function(t,i,s,n){var o=arguments.length,e=o<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,i,s,n);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(e=(o<3?l(e):o>3?l(i,s,e):l(i,s))||e);return o>3&&e&&Object.defineProperty(i,s,e),e};import{css as d,html as m}from"lit";import{customElement as v}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";let r=class extends p{render(){return m`
+      <div class="esp-section" part="section">
+        <div class="esp-section-well" part="well">
+          <slot></slot>
+        </div>
+      </div>
+    `}};r.styles=[...p.styles,d`
+      :host {
+        display: block;
+      }
+
+      .esp-section {
+        background: var(--esp-section-background, var(--esp-color-background));
+        padding-block: var(--esp-section-padding-block, var(--esp-size-section));
+        padding-inline: var(--esp-section-padding-inline, var(--esp-size-medium));
+      }
+
+      .esp-section-well {
+        max-inline-size: var(--esp-section-max-width, var(--esp-page-well-max-width, 72rem));
+        margin-inline: auto;
+      }
+    `],r=a([v("esp-section")],r);export{r as EspalierSection};

package/dist/shared/data-colors.d.ts

@@ -52,6 +52,27 @@ export interface DataPaletteIssue {
  * the threshold.
  */
 export declare function auditDataPalette(palette: Readonly<DataPalette>, threshold?: number): DataPaletteIssue[];
+/** Vision conditions covered by {@link auditColorDistances}: normal plus every CVD simulation. */
+export type VisionCondition = ColorVisionSimulation | "normal";
+/** One too-close pair found by {@link auditColorDistances}. */
+export interface ColorDistanceIssue {
+    /** The two entry names, in input order. */
+    pair: [string, string];
+    /** The vision condition under which the pair collapses. */
+    simulation: VisionCondition;
+    /** Post-simulation OKLab distance between the pair. */
+    distance: number;
+    /** The threshold the distance fell below. */
+    threshold: number;
+}
+/**
+ * Audit an arbitrary named color set for pairwise distinguishability
+ * under normal vision and every CVD simulation (ESP0172 — the intent
+ * collision check). Values must be concrete CSS colors, like
+ * {@link auditDataPalette}'s — resolve anchors first; the palette-shaped
+ * audit remains the categorical-series wrapper.
+ */
+export declare function auditColorDistances(entries: ReadonlyArray<readonly [string, string]>, threshold?: number, conditions?: readonly VisionCondition[]): ColorDistanceIssue[];
 /** Minimum supported number of colors in a generated data ramp. */
 export declare const MIN_DATA_RAMP_STEPS = 3;
 /** Maximum supported number of colors in a generated data ramp. */

package/dist/shared/data-colors.js

@@ -1 +1 @@
-import{clampChannel as L,gamutMapToSRGB as E,linearRgbToOklab as I,oklabToOklch as C,oklchToOklab as S,oklchToSRGB as w,parseCssColor as M,serializeOklch as b,srgbToLinearRGB as N}from"./color-engine.js";const u=["series1","series2","series3","series4","series5","series6","series7","series8"],y={series1:"#000000",series2:"#E69F00",series3:"#56B4E9",series4:"#009E73",series5:"#F0E442",series6:"#0072B2",series7:"#D55E00",series8:"#CC79A7"},k=["deuteranopia","protanopia","tritanopia"],O=.07,P={protanopia:[[.152286,1.052583,-.204868],[.114503,.786281,.099216],[-.003882,-.048116,1.051998]],deuteranopia:[[.367322,.860646,-.227968],[.280085,.672501,.047413],[-.01182,.04294,.968881]],tritanopia:[[1.255528,-.076749,-.178779],[-.078411,.930809,.147602],[.004733,.691367,.3039]]};function x(e,t){const r=w(E(e)),o=N(r),n=s=>L(s[0]*o.r+s[1]*o.g+s[2]*o.b);return{r:n(t[0]),g:n(t[1]),b:n(t[2])}}function q(e,t){return Math.hypot(e.L-t.L,e.a-t.a,e.b-t.b)}function p(e,t){const r=M(e);if(!r)throw new TypeError(`${t} is not a valid opaque CSS color: "${e}".`);return r}function G(e,t=O){if(!Number.isFinite(t)||t<0)throw new RangeError("Data-palette distance threshold must be a finite number \u2265 0.");const r=new Map;for(const n of u)r.set(n,p(e[n],`dataPalette.${n}`));const o=[];for(const n of k){const s=new Map;for(const a of u)s.set(a,I(x(r.get(a),P[n])));for(let a=0;a<u.length;a+=1)for(let i=a+1;i<u.length;i+=1){const l=u[a],c=u[i],g=q(s.get(l),s.get(c));g<t&&o.push({series:[l,c],simulation:n,distance:g,threshold:t})}}return o}const A=3,f=11,m=7,T=1e-6,v="oklch(0.96 0 0)";function _(e,t){if(!Number.isInteger(e)||e<A||e>f)throw new RangeError(`Data-ramp steps must be an integer from ${A} through ${f}.`);if(t&&e%2===0)throw new RangeError("Diverging data-ramp steps must be odd so the neutral is the midpoint.")}function d(e,t){if(!Number.isFinite(e)||e<0||e>1)throw new RangeError(`${t} must be a finite number from 0 through 1.`)}function U(e,t={}){const r=p(e,"Sequential ramp source"),o=t.steps??m,n=t.lightnessStart??.95,s=t.lightnessEnd??.25;if(_(o,!1),d(n,"Sequential ramp lightnessStart"),d(s,"Sequential ramp lightnessEnd"),n<=s)throw new RangeError("Sequential ramp lightnessStart must be greater than lightnessEnd.");if((n-s)/(o-1)<=T)throw new RangeError(`Sequential ramp lightness bounds must leave more than ${T} lightness between serialized stops.`);return Array.from({length:o},(a,i)=>{const l=i/(o-1),c=n+(s-n)*l;return b(E({l:c,c:r.c,h:r.h}))})}function R(e,t,r){return{L:e.L+(t.L-e.L)*r,a:e.a+(t.a-e.a)*r,b:e.b+(t.b-e.b)*r}}function B(e,t,r={}){const o=p(e,"Diverging ramp start"),n=p(t,"Diverging ramp end"),s=p(r.neutral??v,"Diverging ramp neutral"),a=r.steps??m;_(a,!0);const i=(a-1)/2,l=S(o),c=S(s),g=S(n);return Array.from({length:a},(F,h)=>{if(h===i)return b(E(s));const D=h<i?R(l,c,h/i):R(c,g,(h-i)/i);return b(E(C(D)))})}export{k as COLOR_VISION_SIMULATIONS,u as DATA_SERIES_KEYS,y as DEFAULT_DATA_PALETTE,m as DEFAULT_DATA_RAMP_STEPS,v as DEFAULT_DIVERGING_NEUTRAL,f as MAX_DATA_RAMP_STEPS,O as MIN_DATA_COLOR_DISTANCE,T as MIN_DATA_RAMP_LIGHTNESS_STEP,A as MIN_DATA_RAMP_STEPS,G as auditDataPalette,B as generateDivergingRamp,U as generateSequentialRamp};
+import{clampChannel as x,gamutMapToSRGB as m,linearRgbToOklab as S,oklabToOklch as k,oklchToOklab as b,oklchToSRGB as P,parseCssColor as F,serializeOklch as E,srgbToLinearRGB as q}from"./color-engine.js";const p=["series1","series2","series3","series4","series5","series6","series7","series8"],G={series1:"#000000",series2:"#E69F00",series3:"#56B4E9",series4:"#009E73",series5:"#F0E442",series6:"#0072B2",series7:"#D55E00",series8:"#CC79A7"},A=["deuteranopia","protanopia","tritanopia"],T=.07,_={protanopia:[[.152286,1.052583,-.204868],[.114503,.786281,.099216],[-.003882,-.048116,1.051998]],deuteranopia:[[.367322,.860646,-.227968],[.280085,.672501,.047413],[-.01182,.04294,.968881]],tritanopia:[[1.255528,-.076749,-.178779],[-.078411,.930809,.147602],[.004733,.691367,.3039]]};function d(e,t){const s=P(m(e)),a=q(s),n=o=>x(o[0]*a.r+o[1]*a.g+o[2]*a.b);return{r:n(t[0]),g:n(t[1]),b:n(t[2])}}function R(e,t){return Math.hypot(e.L-t.L,e.a-t.a,e.b-t.b)}function g(e,t){const s=F(e);if(!s)throw new TypeError(`${t} is not a valid opaque CSS color: "${e}".`);return s}function U(e,t=T){if(!Number.isFinite(t)||t<0)throw new RangeError("Data-palette distance threshold must be a finite number \u2265 0.");const s=new Map;for(const n of p)s.set(n,g(e[n],`dataPalette.${n}`));const a=[];for(const n of A){const o=new Map;for(const r of p)o.set(r,S(d(s.get(r),_[n])));for(let r=0;r<p.length;r+=1)for(let i=r+1;i<p.length;i+=1){const l=p[r],c=p[i],u=R(o.get(l),o.get(c));u<t&&a.push({series:[l,c],simulation:n,distance:u,threshold:t})}}return a}const v=[[1,0,0],[0,1,0],[0,0,1]];function B(e,t=T,s=["normal",...A]){if(!Number.isFinite(t)||t<0)throw new RangeError("Color distance threshold must be a finite number \u2265 0.");const a=e.map(([r,i])=>[r,g(i,r)]),n=[],o=s.map(r=>[r,r==="normal"?v:_[r]]);for(const[r,i]of o){const l=a.map(([,c])=>S(d(c,i)));for(let c=0;c<e.length;c+=1)for(let u=c+1;u<e.length;u+=1){const f=R(l[c],l[u]);f<t&&n.push({pair:[e[c][0],e[u][0]],simulation:r,distance:f,threshold:t})}}return n}const D=3,I=11,L=7,C=1e-6,$="oklch(0.96 0 0)";function M(e,t){if(!Number.isInteger(e)||e<D||e>I)throw new RangeError(`Data-ramp steps must be an integer from ${D} through ${I}.`);if(t&&e%2===0)throw new RangeError("Diverging data-ramp steps must be odd so the neutral is the midpoint.")}function w(e,t){if(!Number.isFinite(e)||e<0||e>1)throw new RangeError(`${t} must be a finite number from 0 through 1.`)}function V(e,t={}){const s=g(e,"Sequential ramp source"),a=t.steps??L,n=t.lightnessStart??.95,o=t.lightnessEnd??.25;if(M(a,!1),w(n,"Sequential ramp lightnessStart"),w(o,"Sequential ramp lightnessEnd"),n<=o)throw new RangeError("Sequential ramp lightnessStart must be greater than lightnessEnd.");if((n-o)/(a-1)<=C)throw new RangeError(`Sequential ramp lightness bounds must leave more than ${C} lightness between serialized stops.`);return Array.from({length:a},(r,i)=>{const l=i/(a-1),c=n+(o-n)*l;return E(m({l:c,c:s.c,h:s.h}))})}function N(e,t,s){return{L:e.L+(t.L-e.L)*s,a:e.a+(t.a-e.a)*s,b:e.b+(t.b-e.b)*s}}function z(e,t,s={}){const a=g(e,"Diverging ramp start"),n=g(t,"Diverging ramp end"),o=g(s.neutral??$,"Diverging ramp neutral"),r=s.steps??L;M(r,!0);const i=(r-1)/2,l=b(a),c=b(o),u=b(n);return Array.from({length:r},(f,h)=>{if(h===i)return E(m(o));const O=h<i?N(l,c,h/i):N(c,u,(h-i)/i);return E(m(k(O)))})}export{A as COLOR_VISION_SIMULATIONS,p as DATA_SERIES_KEYS,G as DEFAULT_DATA_PALETTE,L as DEFAULT_DATA_RAMP_STEPS,$ as DEFAULT_DIVERGING_NEUTRAL,I as MAX_DATA_RAMP_STEPS,T as MIN_DATA_COLOR_DISTANCE,C as MIN_DATA_RAMP_LIGHTNESS_STEP,D as MIN_DATA_RAMP_STEPS,B as auditColorDistances,U as auditDataPalette,z as generateDivergingRamp,V as generateSequentialRamp};

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

@@ -43,9 +43,9 @@ export declare class EspalierElementBase extends LitElement implements SeedColor
     scheme: "dark" | "light" | "";
     /**
      * The element's [intent](/espalier-guides/) — its meaning: `neutral`
-     * (no pin), `success`, `warning`, or `danger` (each pinned to its
-     * fixed status family), or `info` (pinned to the complementary
-     * family). On token-emitting controls a non-neutral intent pins the
+     * (no pin), or `success`, `warning`, `danger`, `info` — each pinned
+     * to its fixed status family (blue for `info`), retunable per theme
+     * via `intents`. On token-emitting controls a non-neutral intent pins the
      * filled-action pair to that family, derived over the governing
      * zone's theme; class-styled chrome (badges, callouts, status pills)
      * opts out of inline emission and renders its treatment from CSS

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

@@ -1,4 +1,4 @@
-var h=function(f,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,r);else for(var i=f.length-1;i>=0;i--)(a=f[i])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as R,LitElement as C}from"lit";import{property as p,state as S}from"lit/decorators.js";import{subscribeToRootEvent as u}from"./root-event-subscription.js";import{traverseToClosest as b}from"./utilities.js";import{parseCssColor as w,serializeOklch as x,gamutMapToSRGB as P}from"./color-engine.js";import{computeVariants as v}from"../root/helpers/compute-variants.js";import{computeSemanticProperties as m}from"../root/helpers/compute-semantic-properties.js";import{lightnessRampProperties as E}from"../root/helpers/lightness-ramp-properties.js";import{ROLE_NAMES as V,mergeTheme as U,semanticToCSS as A}from"./theme.js";import{alignAttributeTextInheritance as I,focusRing as O}from"./style-fragments.js";import{syncNormalizedAttribute as D}from"./attribute-helpers.js";import{INTENT_VARIANTS as y,normalizeIntentVariant as z}from"./intent-values.js";const k=new WeakMap;class n extends C{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.contextBacker="",this.scopedTokenOriginalValues=new Map,this.warnedUnknownContexts=new Set,this.pendingInitialThemeRoot=null,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.intentBacker="neutral",this.intentEmitsTokens=!0,this.warnedUnknownIntents=new Set,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyScopedColorTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyScopedColorTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyScopedColorTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}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 intent(){return this.intentBacker}set intent(e){const t=typeof e=="string"?e.trim():"";t!==""&&!y.includes(t)&&!this.warnedUnknownIntents.has(t)&&(this.warnedUnknownIntents.add(t),console.warn(`Espalier intent: "${t}" is not an intent; expected one of ${y.join(", ")}. Treating it as "neutral".`));const r=this.intentBacker,o=z(e);D(this,"intent",o),o!==r&&(this.intentBacker=o,this.requestUpdate("intent",r),this.applyTokensWhenRootReady())}get context(){return this.contextBacker}set context(e){const t=e??"";t!==this.contextBacker&&(this.contextBacker=t,this.applyTokensWhenRootReady(),this.refreshDescendantIntentDerivations())}refreshDescendantIntentDerivations(){const e=new Set,t=o=>{for(const s of Array.from(o.children))r(s)},r=o=>{if(!e.has(o)){if(e.add(o),o instanceof n&&o.applyTokensWhenRootReady(),o.shadowRoot&&t(o.shadowRoot),o instanceof HTMLSlotElement)for(const s of o.assignedElements({flatten:!0}))r(s);t(o)}};t(this),this.shadowRoot&&t(this.shadowRoot)}static flattenedParent(e){return e instanceof Element&&e.assignedSlot?e.assignedSlot:e instanceof ShadowRoot?e.host:e.parentNode}resolveAncestorZoneTheme(e){let t=n.flattenedParent(this);for(;t;){if(t instanceof Element&&t.localName==="esp-root")return null;if(t instanceof n){const r=t.contextBacker.trim();if(r){const o=this.resolveNamedContextTheme(e,r);if(o)return o}}t=n.flattenedParent(t)}return null}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents(),this.clearScopedTokens(),this.espRoot=null}firstUpdated(e){this.syncRootFromDom(!0),this.applyTokensWhenRootReady()}syncRootFromDom(e){const t=b(this,"esp-root");if(!t){if(this.espRoot&&this.clearScopedTokens(),this.unsubscribeFromRootEvents(),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 r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,i=this.seedColor!==t.seedColor;return this.espRoot=t,r&&this.isConnected&&this.subscribeToRootEvents(t),(r||a||i)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyTokensWhenRootReady()),r&&this.requestUpdate(),t}applyTokensWhenRootReady(){const e=this.espRoot;if(e&&(!e.hasUpdated||e.isUpdatePending)){this.applyTokensAfterInitialRootUpdate(e);return}this.applyScopedColorTokens()}applyTokensAfterInitialRootUpdate(e){if(this.pendingInitialThemeRoot===e)return;this.pendingInitialThemeRoot=e;const t=e.updateComplete;if(!t){this.pendingInitialThemeRoot=null,this.applyScopedColorTokens();return}t.then(()=>{this.pendingInitialThemeRoot===e&&(this.pendingInitialThemeRoot=null),!(!this.isConnected||this.espRoot!==e)&&(this.scheme=e.scheme==="dark"?"dark":"light",this.seedColor=e.seedColor,this.applyScopedColorTokens())})}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[u(e,"seed-color-changed",this.handleSeedColorChanged),u(e,"scheme-changed",this.handleSchemeChanged),u(e,"theme-changed",this.handleThemeChanged),u(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return b(this,e)}applyScopedColorTokens(){if(!this.espRoot)return;const e=this.intentEmitsTokens?n.intentColorSources[this.intentBacker]:"";if(!e&&!this.context.trim()){this.clearScopedTokens();return}const t=this.espRoot.activeTheme;if(!t){this.clearScopedTokens();return}const r=this.resolveContextTheme(t),o=r.theme,s=w(o.seedColor);if(!s)return;const a=v(s,o),i={};if(r.applied&&(Object.assign(i,m(o,a)),Object.assign(i,E(o))),e){let c=o;r.applied||(c=this.resolveAncestorZoneTheme(t)??o);const l=c===o?a:v(s,c),T=m(c,l,{effectiveSource:(g,d)=>n.semanticActionTokens.has(g)?e:d});i["--esp-color-primary"]=x(P(l[e]));for(const g of n.semanticActionTokens){const d=A(g);i[d]=T[d]}}this.applyScopedTokenProperties(i)}resolveContextTheme(e){const t=this.context.trim();if(!t)return{applied:!1,theme:e};const r=this.resolveNamedContextTheme(e,t);return r?{applied:!0,theme:r}:(this.warnedUnknownContexts.has(t)||(this.warnedUnknownContexts.add(t),console.warn(`Espalier context: "${t}" is not defined by the active theme; inheriting root tokens.`)),{applied:!1,theme:e})}resolveNamedContextTheme(e,t){const r=e.contexts&&Object.prototype.hasOwnProperty.call(e.contexts,t)?e.contexts[t]:void 0;if(!r)return null;let o=k.get(e);const s=o?.get(t);if(s)return s;const a={};for(const c of V){const l=r[c];l!==void 0&&(a[c]=l)}const i=U(e,{lightness:r.lightness,roles:a});return o||(o=new Map,k.set(e,o)),o.set(t,i),i}applyScopedTokenProperties(e){for(const t of this.scopedTokenOriginalValues.keys())t in e||this.restoreScopedTokenProperty(t);for(const[t,r]of Object.entries(e))this.setScopedTokenProperty(t,r)}setScopedTokenProperty(e,t){const r=this.scopedTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.scopedTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}restoreScopedTokenProperty(e){const t=this.scopedTokenOriginalValues.get(e);if(!t)return;const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority),this.scopedTokenOriginalValues.delete(e)}clearScopedTokens(){for(const e of[...this.scopedTokenOriginalValues.keys()])this.restoreScopedTokenProperty(e)}}n.intentColorSources={danger:"danger",info:"complementary",neutral:"",success:"success",warning:"warning"},n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[O(".esp-field:focus-within","--esp-field-focus-shadow"),I,R`
+var h=function(f,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,r);else for(var i=f.length-1;i>=0;i--)(a=f[i])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as R,LitElement as C}from"lit";import{property as p,state as S}from"lit/decorators.js";import{subscribeToRootEvent as u}from"./root-event-subscription.js";import{traverseToClosest as b}from"./utilities.js";import{parseCssColor as w,serializeOklch as x,gamutMapToSRGB as P}from"./color-engine.js";import{computeVariants as v}from"../root/helpers/compute-variants.js";import{computeSemanticProperties as m}from"../root/helpers/compute-semantic-properties.js";import{lightnessRampProperties as E}from"../root/helpers/lightness-ramp-properties.js";import{ELEVATION_PROPERTIES as V}from"./scale-engine.js";import{ROLE_NAMES as U,mergeTheme as I,semanticToCSS as A}from"./theme.js";import{alignAttributeTextInheritance as O,focusRing as D}from"./style-fragments.js";import{syncNormalizedAttribute as N}from"./attribute-helpers.js";import{INTENT_VARIANTS as y,normalizeIntentVariant as z}from"./intent-values.js";const k=new WeakMap;class n extends C{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.contextBacker="",this.scopedTokenOriginalValues=new Map,this.warnedUnknownContexts=new Set,this.pendingInitialThemeRoot=null,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.intentBacker="neutral",this.intentEmitsTokens=!0,this.warnedUnknownIntents=new Set,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyScopedColorTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyScopedColorTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyScopedColorTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}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 intent(){return this.intentBacker}set intent(e){const t=typeof e=="string"?e.trim():"";t!==""&&!y.includes(t)&&!this.warnedUnknownIntents.has(t)&&(this.warnedUnknownIntents.add(t),console.warn(`Espalier intent: "${t}" is not an intent; expected one of ${y.join(", ")}. Treating it as "neutral".`));const r=this.intentBacker,o=z(e);N(this,"intent",o),o!==r&&(this.intentBacker=o,this.requestUpdate("intent",r),this.applyTokensWhenRootReady())}get context(){return this.contextBacker}set context(e){const t=e??"";t!==this.contextBacker&&(this.contextBacker=t,this.applyTokensWhenRootReady(),this.refreshDescendantIntentDerivations())}refreshDescendantIntentDerivations(){const e=new Set,t=o=>{for(const s of Array.from(o.children))r(s)},r=o=>{if(!e.has(o)){if(e.add(o),o instanceof n&&o.applyTokensWhenRootReady(),o.shadowRoot&&t(o.shadowRoot),o instanceof HTMLSlotElement)for(const s of o.assignedElements({flatten:!0}))r(s);t(o)}};t(this),this.shadowRoot&&t(this.shadowRoot)}static flattenedParent(e){return e instanceof Element&&e.assignedSlot?e.assignedSlot:e instanceof ShadowRoot?e.host:e.parentNode}resolveAncestorZoneTheme(e){let t=n.flattenedParent(this);for(;t;){if(t instanceof Element&&t.localName==="esp-root")return null;if(t instanceof n){const r=t.contextBacker.trim();if(r){const o=this.resolveNamedContextTheme(e,r);if(o)return o}}t=n.flattenedParent(t)}return null}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents(),this.clearScopedTokens(),this.espRoot=null}firstUpdated(e){this.syncRootFromDom(!0),this.applyTokensWhenRootReady()}syncRootFromDom(e){const t=b(this,"esp-root");if(!t){if(this.espRoot&&this.clearScopedTokens(),this.unsubscribeFromRootEvents(),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 r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,i=this.seedColor!==t.seedColor;return this.espRoot=t,r&&this.isConnected&&this.subscribeToRootEvents(t),(r||a||i)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyTokensWhenRootReady()),r&&this.requestUpdate(),t}applyTokensWhenRootReady(){const e=this.espRoot;if(e&&(!e.hasUpdated||e.isUpdatePending)){this.applyTokensAfterInitialRootUpdate(e);return}this.applyScopedColorTokens()}applyTokensAfterInitialRootUpdate(e){if(this.pendingInitialThemeRoot===e)return;this.pendingInitialThemeRoot=e;const t=e.updateComplete;if(!t){this.pendingInitialThemeRoot=null,this.applyScopedColorTokens();return}t.then(()=>{this.pendingInitialThemeRoot===e&&(this.pendingInitialThemeRoot=null),!(!this.isConnected||this.espRoot!==e)&&(this.scheme=e.scheme==="dark"?"dark":"light",this.seedColor=e.seedColor,this.applyScopedColorTokens())})}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[u(e,"seed-color-changed",this.handleSeedColorChanged),u(e,"scheme-changed",this.handleSchemeChanged),u(e,"theme-changed",this.handleThemeChanged),u(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return b(this,e)}applyScopedColorTokens(){if(!this.espRoot)return;const e=this.intentEmitsTokens?n.intentColorSources[this.intentBacker]:"";if(!e&&!this.context.trim()){this.clearScopedTokens();return}const t=this.espRoot.activeTheme;if(!t){this.clearScopedTokens();return}const r=this.resolveContextTheme(t),o=r.theme,s=w(o.seedColor);if(!s)return;const a=v(s,o),i={};if(r.applied&&(Object.assign(i,m(o,a)),Object.assign(i,E(o)),Object.assign(i,V)),e){let c=o;r.applied||(c=this.resolveAncestorZoneTheme(t)??o);const l=c===o?a:v(s,c),T=m(c,l,{effectiveSource:(g,d)=>n.semanticActionTokens.has(g)?e:d});i["--esp-color-primary"]=x(P(l[e]));for(const g of n.semanticActionTokens){const d=A(g);i[d]=T[d]}}this.applyScopedTokenProperties(i)}resolveContextTheme(e){const t=this.context.trim();if(!t)return{applied:!1,theme:e};const r=this.resolveNamedContextTheme(e,t);return r?{applied:!0,theme:r}:(this.warnedUnknownContexts.has(t)||(this.warnedUnknownContexts.add(t),console.warn(`Espalier context: "${t}" is not defined by the active theme; inheriting root tokens.`)),{applied:!1,theme:e})}resolveNamedContextTheme(e,t){const r=e.contexts&&Object.prototype.hasOwnProperty.call(e.contexts,t)?e.contexts[t]:void 0;if(!r)return null;let o=k.get(e);const s=o?.get(t);if(s)return s;const a={};for(const c of U){const l=r[c];l!==void 0&&(a[c]=l)}const i=I(e,{lightness:r.lightness,roles:a});return o||(o=new Map,k.set(e,o)),o.set(t,i),i}applyScopedTokenProperties(e){for(const t of this.scopedTokenOriginalValues.keys())t in e||this.restoreScopedTokenProperty(t);for(const[t,r]of Object.entries(e))this.setScopedTokenProperty(t,r)}setScopedTokenProperty(e,t){const r=this.scopedTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.scopedTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}restoreScopedTokenProperty(e){const t=this.scopedTokenOriginalValues.get(e);if(!t)return;const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority),this.scopedTokenOriginalValues.delete(e)}clearScopedTokens(){for(const e of[...this.scopedTokenOriginalValues.keys()])this.restoreScopedTokenProperty(e)}}n.intentColorSources={danger:"danger",info:"info",neutral:"",success:"success",warning:"warning"},n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[D(".esp-field:focus-within","--esp-field-focus-shadow"),O,R`
       :host {
         
         --_esp-field-resolved-hover-bg: var(

package/dist/shared/scale-engine.js

@@ -1 +1 @@
-const c=["tiny","small","normal","medium","big","large","huge"],T=2,$=1.125,d=1.3333333333333333,_=[["tiny","small"],["small","normal"],["normal","medium"],["medium","big"],["big","large"],["large","huge"]],g=.375,y={rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200};function l(o,t=4){const e=10**t;return Math.round(o*e)/e}function f(o,t,e,s,n){if(Math.abs(t-o)<1e-4)return`${l(o)}rem`;const m=(t-o)*e*100/(n-s),p=o-m*s/(100*e);return`clamp(${l(o)}rem, ${l(p)}rem + ${l(m)}vw, ${l(t)}rem)`}function A(o){const t={};for(let e=0;e<c.length;e++){const s=e-2,n=1.125*o.typeRatio**s;t[c[e]]={min:n,max:n*d}}return t}function M(o){const t={};for(let e=0;e<c.length;e++){const s=g*o.spaceRatio**e;t[c[e]]={min:s,max:s*d}}return t}function z(o){const t={},{rootFontSize:e,viewportMin:s,viewportMax:n,borderRadius:m}=o,p=16,a=e/p,E=A(o);for(const r of c){const{min:i,max:S}=E[r];t[`--esp-type-${r}`]=f(i*a,S*a,p,s,n)}const u=M(o);for(const r of c){const{min:i,max:S}=u[r];t[`--esp-size-${r}`]=f(i*a,S*a,p,s,n)}for(const[r,i]of _)t[`--esp-size-${r}-to-${i}`]=f(u[r].min*a,u[i].max*a,p,s,n);return t["--esp-size-font"]="var(--esp-type-normal)",t["--esp-size-padding"]="var(--esp-size-tiny-to-small)",t["--esp-size-padding-page"]="var(--esp-size-small-to-normal)",t["--esp-size-border-radius"]=`${l(m*a)}rem`,t}export{y as DEFAULT_SCALE_CONFIG,c as STEP_NAMES,z as generateScaleProperties};
+const i=["tiny","small","normal","medium","big","large","huge"],w=2,z=1.125,E=1.3333333333333333,g=[["tiny","small"],["small","normal"],["normal","medium"],["medium","big"],["big","large"],["large","huge"]],h=.375,T={rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200};function l(o,e=4){const s=10**e;return Math.round(o*s)/s}function S(o,e,s,t,r){if(Math.abs(e-o)<1e-4)return`${l(o)}rem`;const m=(e-o)*s*100/(r-t),p=o-m*t/(100*s);return`clamp(${l(o)}rem, ${l(p)}rem + ${l(m)}vw, ${l(e)}rem)`}function x(o){const e={};for(let s=0;s<i.length;s++){const t=s-2,r=1.125*o.typeRatio**t;e[i[s]]={min:r,max:r*E}}return e}function _(o){const e={};for(let s=0;s<i.length;s++){const t=h*o.spaceRatio**s;e[i[s]]={min:t,max:t*E}}return e}const v={"--esp-shadow-1":"1px 1px 4px var(--esp-color-shadow)","--esp-shadow-2":"0 2px 8px var(--esp-color-shadow)","--esp-shadow-3":"0 6px 20px var(--esp-color-shadow)"};function A(o){const e={},{rootFontSize:s,viewportMin:t,viewportMax:r,borderRadius:m}=o,p=16,a=s/p,f=x(o);for(const n of i){const{min:c,max:d}=f[n];e[`--esp-type-${n}`]=S(c*a,d*a,p,t,r)}const u=_(o);for(const n of i){const{min:c,max:d}=u[n];e[`--esp-size-${n}`]=S(c*a,d*a,p,t,r)}for(const[n,c]of g)e[`--esp-size-${n}-to-${c}`]=S(u[n].min*a,u[c].max*a,p,t,r);return e["--esp-size-font"]="var(--esp-type-normal)",e["--esp-size-padding"]="var(--esp-size-tiny-to-small)",e["--esp-size-padding-page"]="var(--esp-size-small-to-normal)",e["--esp-size-border-radius"]=`${l(m*a)}rem`,e["--esp-measure"]="66ch",e["--esp-measure-wide"]="90ch",e["--esp-size-section"]="clamp(var(--esp-size-big), 7vw, var(--esp-size-huge))",Object.assign(e,v),e["--esp-card-min"]="16rem",e}export{T as DEFAULT_SCALE_CONFIG,v as ELEVATION_PROPERTIES,i as STEP_NAMES,A as generateScaleProperties};

package/dist/shared/style-fragments.js

@@ -1,8 +1,8 @@
-import{css as o,unsafeCSS as e}from"lit";const l=o`
+import{css as o,unsafeCSS as e}from"lit";const a=o`
   :host([align]) {
     text-align: inherit;
   }
-`,a=o`
+`,l=o`
   .sr-only {
     position: absolute;
     width: 1px;
@@ -50,8 +50,8 @@ import{css as o,unsafeCSS as e}from"lit";const l=o`
   }
 
   .intent-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);
+    --_esp-intent-background: oklch(from var(--esp-color-info) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-info) var(--esp-l-border) c h);
+    --_esp-intent-color: oklch(from var(--esp-color-info) var(--esp-l-text) c h);
   }
-`;export{l as alignAttributeTextInheritance,i as disabledControl,p as focusRing,d as intentSurfaceTokens,a as srOnly};
+`;export{a as alignAttributeTextInheritance,i as disabledControl,p as focusRing,d as intentSurfaceTokens,l as srOnly};

package/dist/shared/theme.d.ts

@@ -36,21 +36,35 @@ export type LightnessKey = "surface" | "raised1" | "raised2" | "raised3" | "rais
 /** Lightness values (0–1) for every ramp position. */
 export type LightnessMap = Record<LightnessKey, number>;
 /**
- * A geometric color-theory variant **or** a fixed semantic hue.
+ * A geometric color-theory variant **or** a fixed status family.
  *
- * Geometric variants are derived by rotating the seed hue; semantic
- * hues (`danger`, `success`, `warning`) use fixed angles defined
- * in `semanticHues`.
+ * Geometric variants are derived by rotating the seed hue; the status
+ * families (`danger`, `success`, `warning`, `info`) use fixed hue
+ * angles from `semanticHues` — or a theme's `intents` override, which
+ * retunes a family with a declared absolute color (ESP0172).
  */
-export type ColorSource = "primary" | "analogous-left" | "analogous-right" | "complementary" | "split-complementary-left" | "split-complementary-right" | "triadic-left" | "triadic-right" | "danger" | "success" | "warning";
+export type ColorSource = "primary" | "analogous-left" | "analogous-right" | "complementary" | "split-complementary-left" | "split-complementary-right" | "triadic-left" | "triadic-right" | "danger" | "success" | "warning" | "info";
 /**
- * Non-primary color sources — the ten variants that can carry
+ * Non-primary color sources — the eleven variants that can carry
  * independent chroma overrides.
  *
  * Primary is excluded because its chroma is always the seed
  * color's chroma.
  */
 export type VariantColorSource = Exclude<ColorSource, "primary">;
+/**
+ * The fixed-meaning status families (ADR-004): the colors
+ * `intent="danger|success|warning|info"` and the same-named mapping
+ * sources resolve to. A theme may retune each with `intents`.
+ */
+export type StatusColorSource = "danger" | "success" | "warning" | "info";
+/**
+ * Status-family color overrides, by family (ESP0172). Values are an
+ * `anchor:<name>[.<slot>]` reference or a supported color form
+ * (`#rrggbb`, `#rgb`, `rgb()`, `hsl()`, `oklch()`); see
+ * {@link EspalierTheme.intents}.
+ */
+export type ThemeIntents = Partial<Record<StatusColorSource, string>>;
 /**
  * The object form of an anchor: a required base `color` plus named
  * sub-slots — per-family variants the way designers already specify
@@ -175,9 +189,11 @@ export type SemanticMappings = Record<SemanticColorName, SemanticMapping>;
  *   automatically (see {@link ROLE_PAIRED_INK})
  * - `structure` — borders and shadows
  *
- * `status` is deliberately absent: the danger/success/warning families
- * carry meaning through fixed hues (ADR-004) and are not a brand
- * decision.
+ * `status` is deliberately absent as a role: the four status families
+ * (`danger`, `success`, `warning`, `info`) carry reserved *meanings*
+ * that no role may reassign (ADR-004, as amended). Their *colors* are
+ * a brand decision — retune a family with the theme's `intents` field
+ * and every derived token follows.
  */
 export type RoleName = "canvas" | "ink" | "accent" | "action" | "structure";
 /**
@@ -190,7 +206,7 @@ export type RoleName = "canvas" | "ink" | "accent" | "action" | "structure";
 export type RoleSlotName = {
     canvas: never;
     ink: "heading";
-    accent: "text";
+    accent: "text" | "hover";
     action: "ink";
     structure: never;
 };
@@ -232,7 +248,10 @@ export declare const ROLE_NAMES: readonly RoleName[];
  * The `accent` role has no body-text slot on purpose. "Rose is
  * decorative only" is a structural guarantee here, not a comment: text
  * that must come from the accent family comes through `accent.text`,
- * the deepened variant a designer picked for legibility.
+ * the deepened variant a designer picked for legibility. `accent.hover`
+ * lets a hover change *family*, not just lightness — "plum link, rose
+ * hover" is an ordinary brand rule (ESP0172); absent, `linkHover` keeps
+ * following `accent.text` exactly as before.
  */
 export declare const ROLE_TOKEN_PLAN: Readonly<Record<RoleName, Readonly<Record<string, ReadonlyArray<[SemanticColorName, LightnessKey]>>>>>;
 /**
@@ -356,7 +375,7 @@ export interface EspalierTheme {
         /** Triadic offset from seed (default 120). */
         triadic: number;
     };
-    /** Fixed hue angles for danger / success / warning colors. */
+    /** Fixed hue angles for the danger / success / warning / info families. */
     semanticHues: {
         /** Danger hue angle (default 27, red-orange). */
         danger: number;
@@ -364,7 +383,46 @@ export interface EspalierTheme {
         success: number;
         /** Warning hue angle (default 90, yellow-green). */
         warning: number;
+        /** Info hue angle (default 244, blue). */
+        info: number;
     };
+    /**
+     * Status-family color overrides, by family (ESP0172).
+     *
+     * Each entry retunes one of the fixed status families — the colors
+     * `intent="danger|success|warning|info"` and the same-named mapping
+     * sources resolve to — with a declared color: an
+     * `anchor:<name>[.<slot>]` reference or a supported color form —
+     * `#rrggbb`, `#rgb`, `rgb()`, `hsl()`, or `oklch()`. CSS keywords
+     * such as `red` are not parsed.
+     *
+     * An override is **absolute**, like an anchor: it carries its own
+     * lightness, chroma, and hue, and `semanticHues` / `variantChroma`
+     * are ignored for that family. Overrides retune a family; they do
+     * not reassign its meaning (ADR-004): give `danger` your brand's
+     * red, but never point one family at another — a family name as a
+     * value (`intents.success: "danger"`) is rejected by validation; a
+     * color choice that creates a rendered collision is flagged by the
+     * distance warning, while a merely unusual — but separated — color
+     * passes silently. `validateTheme` warns when two
+     * status families — or a family and the action color — become hard
+     * to distinguish as rendered on controls, and its advice is
+     * counterfactual-tested per pair: it recommends retuning, widening
+     * the chroma band, or moving the lightness stop only when that
+     * change can actually separate the pair, and says "then retune"
+     * when a band or stop change merely makes a retune possible rather
+     * than separating the pair on its own. The built-in warning is
+     * normal-vision-only; status meanings need redundant cues (icons,
+     * labels) regardless, though lightness and chroma separation chosen
+     * here can still genuinely help color-vision-deficient users — see
+     * ADR-004's amendment and the data-color guidance.
+     *
+     * @example
+     * ```jsonc
+     * "intents": { "info": "anchor:sky", "danger": "#700007" }
+     * ```
+     */
+    intents: ThemeIntents;
     /**
      * Per-variant chroma overrides (OKLCH chroma, 0–0.4).
      *
@@ -489,10 +547,12 @@ export declare const TOKEN_PAIRINGS: Readonly<Record<"actionText", TokenPairing>
 export declare const SEMANTIC_COLOR_NAMES: readonly SemanticColorName[];
 /** Valid color-source identifiers for {@link SemanticMapping.source}. */
 export declare const COLOR_SOURCES: readonly ColorSource[];
+/** The four fixed status families, matching {@link StatusColorSource}. */
+export declare const STATUS_COLOR_SOURCES: readonly StatusColorSource[];
 /**
  * Non-primary color sources that support independent chroma overrides.
  *
- * Matches the ten entries in {@link VariantColorSource}.
+ * Matches the eleven entries in {@link VariantColorSource}.
  */
 export declare const VARIANT_COLOR_SOURCES: readonly VariantColorSource[];
 /** Valid keys for the lightness ramp. */
@@ -568,7 +628,8 @@ export declare function parseTheme(base64: string): PartialTheme | null;
 /**
  * Encode a {@link PartialTheme} as a Base64 JSON string.
  *
- * The inverse of {@link parseTheme}.
+ * The inverse of {@link parseTheme}. Unicode-safe: theme strings (font
+ * names, anchor slugs' display metadata) may carry any code point.
  *
  * @param partial The partial theme to encode.
  * @returns A Base64-encoded JSON string.
@@ -587,13 +648,26 @@ export declare function encodeTheme(partial: PartialTheme): string;
  * @returns A new fully-resolved {@link EspalierTheme}.
  */
 export declare function mergeTheme(defaults: EspalierTheme, overrides: PartialTheme): EspalierTheme;
+/**
+ * Validate a single encoded theme partial.
+ *
+ * Structural grammar aside, the advisory checks (the status-collision
+ * warning and chroma-band provenance) resolve the partial against
+ * {@link DEFAULT_LIGHT_THEME}. A partial written for the dark side of a
+ * pair should be validated through {@link validateThemePair}, which
+ * audits it against the dark defaults instead.
+ */
 export declare function validateTheme(base64: string): ThemeValidationResult;
 /**
  * Validate the light and dark partials that form one scheme-paired theme.
  *
- * Each partial first passes through {@link validateTheme}. Once both are
- * structurally valid, their context-name sets must match exactly so a stable
- * `context` attribute cannot silently change meaning when the scheme changes.
+ * Each side runs the same validation as {@link validateTheme}, with one
+ * scheme-aware difference: the dark partial's advisory checks resolve
+ * against {@link DEFAULT_DARK_THEME}, so a collision that only appears
+ * through the dark ramp is caught. Once both sides are structurally
+ * valid, their context-name sets must match exactly so a stable
+ * `context` attribute cannot silently change meaning when the scheme
+ * changes.
  */
 export declare function validateThemePair(lightBase64: string, darkBase64: string): ThemeValidationResult;
 /**
@@ -601,7 +675,7 @@ export declare function validateThemePair(lightBase64: string, darkBase64: strin
  * and therefore need key-by-key merging instead of wholesale
  * replacement when combining two {@link PartialTheme} objects.
  */
-export declare const NESTED_THEME_KEYS: readonly ["anchors", "angles", "contexts", "dataPalette", "dataRamps", "roles", "chroma", "lightness", "semanticHues", "semanticMappings", "variantChroma"];
+export declare const NESTED_THEME_KEYS: readonly ["anchors", "angles", "contexts", "dataPalette", "dataRamps", "intents", "roles", "chroma", "lightness", "semanticHues", "semanticMappings", "variantChroma"];
 /**
  * Deep-merge two {@link PartialTheme} objects.
  *