@taprootio/espalier 2.19.0 → 3.0.0

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

@@ -1,4 +1,4 @@
-import { EspalierIntentElementBase } from "../shared/esp-intent-element-base.js";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type EspalierIntentVariant } from "../shared/intent-values.js";
 export type EspalierBadgeVariant = EspalierIntentVariant;
 export type EspalierBadgeSize = "small" | "medium";
@@ -12,10 +12,10 @@ export type EspalierBadgeSize = "small" | "medium";
  * ```html
  * <div style="display: flex; flex-wrap: wrap; gap: var(--esp-size-tiny);">
  *   <esp-badge>Draft</esp-badge>
- *   <esp-badge variant="success" icon="circle-dot">Published</esp-badge>
- *   <esp-badge variant="warning">Pending review</esp-badge>
- *   <esp-badge variant="danger" icon="circle-x">Banned</esp-badge>
- *   <esp-badge variant="info" size="medium" icon="info-i">12 updates</esp-badge>
+ *   <esp-badge intent="success" icon="circle-dot">Published</esp-badge>
+ *   <esp-badge intent="warning">Pending review</esp-badge>
+ *   <esp-badge intent="danger" icon="circle-x">Banned</esp-badge>
+ *   <esp-badge intent="info" size="medium" icon="info-i">12 updates</esp-badge>
  * </div>
  * ```
  *
@@ -32,7 +32,8 @@ export type EspalierBadgeSize = "small" | "medium";
  * @menuLabel Badge
  * @menuIcon tags
  */
-export declare class EspalierBadge extends EspalierIntentElementBase {
+export declare class EspalierBadge extends EspalierElementBase {
+    protected intentEmitsTokens: boolean;
     /**
      * Semantic visual treatment for the badge. Supported values are
      * `neutral`, `success`, `warning`, `danger`, and `info`.

package/dist/badge/esp-badge.js

@@ -1,16 +1,16 @@
-var c=function(s,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(i=(r<3?a(i):r>3?a(e,t,i):a(e,t))||i);return r>3&&i&&Object.defineProperty(e,t,i),i};import{css as d,html as h,nothing as m}from"lit";import{customElement as f,property as p}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as u}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{EspalierIntentElementBase as v,intentSurfaceTokens as z}from"../shared/esp-intent-element-base.js";import{syncNormalizedAttribute as y}from"../shared/attribute-helpers.js";import{getIconHrefForHost as w}from"../shared/intent-values.js";import{SlottedIconController as S}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as _}from"../shared/svgs/render-sprite-icon.js";function x(s){return s==="medium"?"medium":"small"}let n=class extends v{constructor(){super(...arguments),this.iconSlot=new S(this),this.sizeBacker="small",this.icon=""}get size(){return this.sizeBacker}set size(e){const t=this.sizeBacker;this.sizeBacker=x(e),this.requestUpdate("size",t),y(this,"size",this.sizeBacker)}render(){const e=w(this.icon,this),t=this.iconSlot.hasSlottedIcon(),o=t||e.length>0,r={badge:!0,[`variant-${this.variant}`]:!0,[`size-${this.size}`]:!0,"has-icon":o};return h`
-      <span part="badge" class=${g(r)}>
+var c=function(s,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(s,e,t,o);else for(var l=s.length-1;l>=0;l--)(a=s[l])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{css as h,html as m,nothing as f}from"lit";import{customElement as g,property as p}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{ref as b}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{intentSurfaceTokens as z}from"../shared/style-fragments.js";import{syncNormalizedAttribute as v}from"../shared/attribute-helpers.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as w}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as S}from"../shared/svgs/render-sprite-icon.js";function _(s){return s==="medium"?"medium":"small"}let r=class extends d{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new w(this),this.sizeBacker="small",this.icon=""}get size(){return this.sizeBacker}set size(e){const t=this.sizeBacker;this.sizeBacker=_(e),this.requestUpdate("size",t),v(this,"size",this.sizeBacker)}render(){const e=y(this.icon,this),t=this.iconSlot.hasSlottedIcon(),o=t||e.length>0,n={badge:!0,[`intent-${this.intent}`]:!0,[`size-${this.size}`]:!0,"has-icon":o};return m`
+      <span part="badge" class=${u(n)}>
         <span part="icon" class="icon" aria-hidden="true">
           <slot
             name="icon"
-            ${u(this.iconSlot.slotRef)}
+            ${b(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
-          ${!t&&e?_(e):m}
+          ${!t&&e?S(e):f}
         </span>
         <span part="label" class="label"><slot></slot></span>
       </span>
-    `}};n.styles=[...b.styles,z,d`
+    `}};r.styles=[...d.styles,z,h`
       :host {
         display: inline-flex;
         max-width: 100%;
@@ -72,4 +72,4 @@ var c=function(s,e,t,o){var r=arguments.length,i=r<3?e:o===null?o=Object.getOwnP
         overflow: hidden;
         text-overflow: ellipsis;
       }
-    `],c([p({type:String})],n.prototype,"icon",void 0),c([p({type:String,reflect:!0})],n.prototype,"size",null),n=c([f("esp-badge")],n);export{n as EspalierBadge};
+    `],c([p({type:String})],r.prototype,"icon",void 0),c([p({type:String,reflect:!0})],r.prototype,"size",null),r=c([g("esp-badge")],r);export{r as EspalierBadge};

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

@@ -41,7 +41,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     }
  *   }
  * </style>
- * <esp-box class="box-with-bg" variant="analogous-right">
+ * <esp-box class="box-with-bg">
  *   <h2>Box with background image</h2>
  *   <p>I have a different generated background texture in dark mode than light mode.</p>
  * </esp-box>
@@ -71,7 +71,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     padding: var(--esp-size-padding);
  *   }
  * </style>
- * <esp-box class="card-box" variant="analogous-right">
+ * <esp-box class="card-box">
  *   <header>Box as a card</header>
  *   <div>
  *     <p>Card content.</p>
@@ -92,11 +92,11 @@ export declare class EspalierBox extends EspalierElementBase {
      * displaying a dialog in full-screen mode.
      *
      * ```html
-     * <esp-box variant="triadic-right">
+     * <esp-box>
      *   <h2>Box things</h2>
-     *   <esp-box variant="complementary">
+     *   <esp-box>
      *     <h2>Box in box</h2>
-     *     <esp-button label="Toggle full screen" variant="complementary"></esp-button>
+     *     <esp-button label="Toggle full screen"></esp-button>
      *   </esp-box>
      * </esp-box>
      * <script>

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

@@ -17,21 +17,15 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </script>
  * ```
  *
- * Here are some different button color variants:
+ * Here is each of the button intents:
  *
  * ```html
  * <div style="display: flex; flex-wrap: wrap; gap: var(--esp-size-padding);">
- *   <esp-button label="Analogous Left" variant="analogous-left" collapsed></esp-button>
- *   <esp-button label="Analogous Right" variant="analogous-right" collapsed></esp-button>
- *   <esp-button label="Complementary" variant="complementary" collapsed></esp-button>
- *   <esp-button label="Danger" variant="danger" collapsed></esp-button>
- *   <esp-button label="Primary" variant="primary" collapsed></esp-button>
- *   <esp-button label="Split Complementary Left" variant="split-complementary-left" collapsed></esp-button>
- *   <esp-button label="Split Complementary Right" variant="split-complementary-right" collapsed></esp-button>
- *   <esp-button label="Success" variant="success" collapsed></esp-button>
- *   <esp-button label="Triadic Left" variant="triadic-left" collapsed></esp-button>
- *   <esp-button label="Triadic Right" variant="triadic-right" collapsed></esp-button>
- *   <esp-button label="Warning" variant="warning" collapsed></esp-button>
+ *   <esp-button label="Neutral" intent="neutral" collapsed></esp-button>
+ *   <esp-button label="Success" intent="success" collapsed></esp-button>
+ *   <esp-button label="Warning" intent="warning" collapsed></esp-button>
+ *   <esp-button label="Danger" intent="danger" collapsed></esp-button>
+ *   <esp-button label="Info" intent="info" collapsed></esp-button>
  * </div>
  * ```
  *

package/dist/button/esp-button.js

@@ -1,4 +1,4 @@
-var n=function(h,t,i,e){var s=arguments.length,r=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(h,t,i,e);else for(var d=h.length-1;d>=0;d--)(c=h[d])&&(r=(s<3?c(r):s>3?c(t,i,r):c(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import{css as f,html as p,nothing as l}from"lit";import{customElement as m,eventOptions as v,property as a,state as y}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ref as k}from"lit/directives/ref.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as T}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR as S,BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR as g,BUTTON_INTERACTION_LIGHTNESS_FACTOR as $}from"./action-state-lightness.js";const N=p`<svg
+var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(h,t,i,e);else for(var d=h.length-1;d>=0;d--)(c=h[d])&&(r=(a<3?c(r):a>3?c(t,i,r):c(t,i))||r);return a>3&&r&&Object.defineProperty(t,i,r),r};import{css as f,html as p,nothing as l}from"lit";import{customElement as m,eventOptions as v,property as s,state as y}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ref as k}from"lit/directives/ref.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as T}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR as S,BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR as g,BUTTON_INTERACTION_LIGHTNESS_FACTOR as $}from"./action-state-lightness.js";const N=p`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -15,7 +15,7 @@ var n=function(h,t,i,e){var s=arguments.length,r=s<3?t:e===null?e=Object.getOwnP
         <slot ${k(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
         ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?w(t):l}
       </span>
-    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,i,e){if(super.attributeChangedCallback(t,i,e),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const s=e===null?null:Number(e),r=s===null||Number.isNaN(s)?null:s;r!==null&&r>=0?(this.innerTabindex=r,this.writeHostTabindex(null)):r===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=r}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const i=this.closest("form");if(i){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),i.appendChild(e),i.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),i=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:e,iconOnly:s}=this,r=s?this.getAttribute("aria-label")||this.label||l:l,c=this.getAttribute("aria-pressed")||l,d={"esp-field":!0,"icon-only":s,incognito:this.incognito,"is-collapsed":e,"has-icon":i};return this.href.length?p`
+    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,i,e){if(super.attributeChangedCallback(t,i,e),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=e===null?null:Number(e),r=a===null||Number.isNaN(a)?null:a;r!==null&&r>=0?(this.innerTabindex=r,this.writeHostTabindex(null)):r===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=r}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const i=this.closest("form");if(i){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),i.appendChild(e),i.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),i=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:e,iconOnly:a}=this,r=a?this.getAttribute("aria-label")||this.label||l:l,c=this.getAttribute("aria-pressed")||l,d={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":e,"has-icon":i};return this.href.length?p`
           <div part="wrapper" class=${u(d)}>
             <a
               ?disabled=${this.disabled}
@@ -223,4 +223,4 @@ var n=function(h,t,i,e){var s=arguments.length,r=s<3?t:e===null?e=Object.getOwnP
           transform: rotate(360deg);
         }
       }
-    `],n([y()],o.prototype,"innerTabindex",void 0),n([a({attribute:"button-type",type:String})],o.prototype,"buttonType",void 0),n([a({type:Boolean})],o.prototype,"collapsed",void 0),n([a({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),n([a({type:String})],o.prototype,"href",void 0),n([a({attribute:"icon-only",type:Boolean})],o.prototype,"iconOnly",void 0),n([a({type:Boolean,reflect:!0})],o.prototype,"incognito",void 0),n([a({type:String})],o.prototype,"icon",void 0),n([a({type:String})],o.prototype,"label",void 0),n([a({type:Boolean,reflect:!0})],o.prototype,"loading",void 0),n([a({type:String})],o.prototype,"target",void 0),n([a({type:String})],o.prototype,"rel",void 0),n([a({attribute:"formnovalidate",type:Boolean})],o.prototype,"formNoValidate",void 0),n([v({capture:!1,passive:!0})],o.prototype,"handleClick",null),o=n([m("esp-button")],o);export{o as EspalierButton};
+    `],n([y()],o.prototype,"innerTabindex",void 0),n([s({attribute:"button-type",type:String})],o.prototype,"buttonType",void 0),n([s({type:Boolean})],o.prototype,"collapsed",void 0),n([s({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),n([s({type:String})],o.prototype,"href",void 0),n([s({attribute:"icon-only",type:Boolean})],o.prototype,"iconOnly",void 0),n([s({type:Boolean,reflect:!0})],o.prototype,"incognito",void 0),n([s({type:String})],o.prototype,"icon",void 0),n([s({type:String})],o.prototype,"label",void 0),n([s({type:Boolean,reflect:!0})],o.prototype,"loading",void 0),n([s({type:String})],o.prototype,"target",void 0),n([s({type:String})],o.prototype,"rel",void 0),n([s({attribute:"formnovalidate",type:Boolean})],o.prototype,"formNoValidate",void 0),n([v({capture:!1,passive:!0})],o.prototype,"handleClick",null),o=n([m("esp-button")],o);export{o as EspalierButton};

package/dist/date-picker/esp-date-picker.js

@@ -151,7 +151,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         </esp-button>
         <esp-button
           icon-only
-          variant="danger"
+          intent="danger"
           @clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${S}
@@ -167,7 +167,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         </esp-button>
         <esp-button
           icon-only
-          variant="danger"
+          intent="danger"
           @clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${S}

package/dist/details/esp-details-group.d.ts

@@ -39,19 +39,6 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </esp-details-group>
  * ```
  *
- * ### With color variant
- *
- * ```html
- * <esp-details-group variant="complementary">
- *   <esp-details summary="FAQ 1">
- *     <p>Answer to FAQ 1.</p>
- *   </esp-details>
- *   <esp-details summary="FAQ 2">
- *     <p>Answer to FAQ 2.</p>
- *   </esp-details>
- * </esp-details-group>
- * ```
- *
  * @customElement esp-details-group
  * @slot - Place `esp-details` elements in the default slot.
  *

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

@@ -13,15 +13,15 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </esp-details>
  * ```
  *
- * Details can have [color variants](/espalier-guides/):
+ * Details pick up zone theming from a `context` attribute on the group
+ * or any ancestor — see the [theming guide](/espalier-guides/):
  *
  * ```html
- * <esp-details summary="Complementary variant" variant="complementary">
- *   <p>This details element uses the complementary color variant.</p>
- * </esp-details>
- * <esp-details summary="Analogous left variant" variant="analogous-left">
- *   <p>This one uses the analogous-left color variant.</p>
- * </esp-details>
+ * <esp-details-group context="quiet">
+ *   <esp-details summary="Inside the quiet zone">
+ *     <p>Zone-correct tokens, contrast enforced by the theme engine.</p>
+ *   </esp-details>
+ * </esp-details-group>
  * ```
  *
  * ### Pre-opened details
@@ -78,7 +78,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * ### Scroll-stability regression harness
  *
  * ```html
- * <esp-info variant="warning" icon="info-i">
+ * <esp-info intent="warning" icon="info-i">
  *   <strong>Manual verification (Firefox):</strong>
  *   <ol>
  *     <li>Scroll so the details summary and top of the grid are both visible.</li>
@@ -98,7 +98,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *     <label style="display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body); color:var(--esp-color-text);">
  *       <input type="checkbox" value="flagged" /> Flagged
  *     </label>
- *     <esp-button id="scroll-test-apply" variant="complementary" label="Apply filters"></esp-button>
+ *     <esp-button id="scroll-test-apply" label="Apply filters"></esp-button>
  *   </div>
  * </esp-details>
  * <esp-grid page-size="30" grid-height="50vh" style="margin-top:var(--esp-size-small);">

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

@@ -24,7 +24,7 @@ import { LitElement } from "lit";
  *   <esp-box>
  *     <h2>Showing something</h2>
  *     <p>There could be controls or a confirmation or anything here.</p>
- *     <esp-button variant="danger" label="Close"></esp-button>
+ *     <esp-button intent="danger" label="Close"></esp-button>
  *   </esp-box>
  * </esp-dialog>
  * <esp-button label="Show Dialog"></esp-button>
@@ -62,8 +62,8 @@ import { LitElement } from "lit";
  *     <esp-form-item label="Notes">
  *       <esp-textarea placeholder="Optional notes"></esp-textarea>
  *     </esp-form-item>
- *     <esp-button variant="success" label="Save"></esp-button>
- *     <esp-button variant="danger" label="Cancel"></esp-button>
+ *     <esp-button intent="success" label="Save"></esp-button>
+ *     <esp-button intent="danger" label="Cancel"></esp-button>
  *   </esp-box>
  * </esp-dialog>
  * <esp-button label="Open Form"></esp-button>
@@ -120,7 +120,7 @@ export declare class EspalierDialog extends LitElement {
      *   <esp-box full-screen>
      *     <h2>Full screen dialog</h2>
      *     <p>There could be controls or a confirmation or anything here.</p>
-     *     <esp-button variant="danger" label="Close"></esp-button>
+     *     <esp-button intent="danger" label="Close"></esp-button>
      *   </esp-box>
      * </esp-dialog>
      * <esp-button label="Show Dialog"></esp-button>

package/dist/empty-state/esp-empty-state.d.ts

@@ -8,7 +8,7 @@ export type EspalierEmptyStateSize = "medium" | "large";
  * <esp-empty-state icon="photo-up">
  *   <span slot="heading">No images yet</span>
  *   Upload the first image to start building this library.
- *   <esp-button slot="action" label="Upload Image" variant="primary"></esp-button>
+ *   <esp-button slot="action" label="Upload Image"></esp-button>
  * </esp-empty-state>
  *
  * <esp-empty-state size="large" icon="users">

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

@@ -74,7 +74,7 @@ import { LitElement } from "lit";
  *   </esp-form-item>
  *   <div class="actions">
  *     <esp-button button-type="submit" label="Sign Up"></esp-button>
- *     <esp-button button-type="reset" label="Reset" variant="danger"></esp-button>
+ *     <esp-button button-type="reset" label="Reset" intent="danger"></esp-button>
  *   </div>
  * </esp-form>
  * ```
@@ -103,7 +103,7 @@ import { LitElement } from "lit";
  *   </esp-form-item>
  *   <div class="actions">
  *     <esp-button button-type="submit" label="Publish"></esp-button>
- *     <esp-button button-type="submit" formnovalidate label="Save Draft" variant="split-complementary-left"></esp-button>
+ *     <esp-button button-type="submit" formnovalidate label="Save Draft"></esp-button>
  *   </div>
  * </esp-form>
  * ```
@@ -132,14 +132,14 @@ import { LitElement } from "lit";
  *   const text = findById("response-text");
  *   form.addEventListener("esp-submit-response", (ev) => {
  *     msg.style.display = "";
- *     msg.setAttribute("variant", ev.detail.ok ? "success" : "warning");
+ *     msg.setAttribute("intent", ev.detail.ok ? "success" : "warning");
  *     text.textContent = ev.detail.ok
  *       ? "Submitted successfully!"
  *       : "Server returned an error.";
  *   });
  *   form.addEventListener("esp-submit-error", () => {
  *     msg.style.display = "";
- *     msg.setAttribute("variant", "danger");
+ *     msg.setAttribute("intent", "danger");
  *     text.textContent = "Network error — please try again.";
  *   });
  * </script>
@@ -179,7 +179,7 @@ import { LitElement } from "lit";
  *   </esp-form-item>
  *   <div class="actions">
  *     <esp-button button-type="submit" label="Submit"></esp-button>
- *     <esp-button button-type="reset" label="Reset" variant="danger"></esp-button>
+ *     <esp-button button-type="reset" label="Reset" intent="danger"></esp-button>
  *   </div>
  * </esp-form>
  * ```

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

@@ -81,7 +81,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  *   <esp-grid-column header="Email" field-name="email" sortable></esp-grid-column>
  *   <esp-grid-column pin="right" width="calc(var(--esp-size-font) + var(--esp-size-tiny) / 3 * 2 + var(--esp-size-tiny-to-small) * 2)">
  *     <esp-action-menu placement="bottom-end" icon-position="right">
- *       <esp-button slot="trigger" icon-only icon="select" variant="complementary" aria-label="Row actions" class="grid-demo-button"></esp-button>
+ *       <esp-button slot="trigger" icon-only icon="select" aria-label="Row actions" class="grid-demo-button"></esp-button>
  *       <esp-action-menu-item value="edit" icon="edit" grid-event="edit-user">
  *         Edit
  *       </esp-action-menu-item>
@@ -131,7 +131,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  *   <esp-grid-column header="Last name" field-name="last_name" width="calc(12ch + var(--esp-size-tiny-to-small) * 2)"></esp-grid-column>
  *   <esp-grid-column header="Email" field-name="email" sortable width="calc(22ch + var(--esp-size-tiny-to-small) * 2)" grow></esp-grid-column>
  *   <esp-grid-column pin="right" width="calc(var(--esp-size-font) + var(--esp-size-tiny) / 3 * 2 + var(--esp-size-tiny-to-small) * 2)">
- *     <esp-button grid-event="user-button-clicked" icon-only icon="user-circle" variant="complementary" class="grid-demo-button"></esp-button>
+ *     <esp-button grid-event="user-button-clicked" icon-only icon="user-circle" class="grid-demo-button"></esp-button>
  *   </esp-grid-column>
  * </esp-grid>
  * <script>
@@ -213,7 +213,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * <esp-grid page-size="50" grid-height="60vh">
  *   <esp-grid-column header="Id" field-name="id" text-align="right" sortable sort-type="number" width="calc(5ch + var(--esp-size-tiny-to-small) * 2)"></esp-grid-column>
  *   <esp-grid-column header="Name" field-name="name" sortable width="calc(18ch + var(--esp-size-tiny-to-small) * 2)" grow></esp-grid-column>
- *   <esp-button slot="header-buttons" variant="success" id="load-more-btn" label="Load more"></esp-button>
+ *   <esp-button slot="header-buttons" intent="success" id="load-more-btn" label="Load more"></esp-button>
  * </esp-grid>
  * <script>
  *   const theGrid = findByTagName("esp-grid")[0];
@@ -307,14 +307,14 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * item button:
  *
  * ```html
- * <esp-grid data-url="/assets/data/grid-data.json" search-fields='["first_name", "last_name"]' variant="triadic-left">
+ * <esp-grid data-url="/assets/data/grid-data.json" search-fields='["first_name", "last_name"]'>
  *   <esp-grid-column header="Name" sort-field="first_name" sort-order="asc" sortable>
  *     <a href="mailto:${email}">${first_name} ${last_name}</a>
  *   </esp-grid-column>
  *   <esp-grid-column width="0">
- *     <esp-button icon-only icon="user-circle" class="grid-demo-button" variant="triadic-left"></esp-button>
+ *     <esp-button icon-only icon="user-circle" class="grid-demo-button"></esp-button>
  *   </esp-grid-column>
- *   <esp-button variant="success" icon-only icon="plus" slot="header-buttons"></esp-button>
+ *   <esp-button intent="success" icon-only icon="plus" slot="header-buttons"></esp-button>
  * </esp-grid>
  * ```
  *
@@ -456,7 +456,7 @@ export declare class EspalierGrid extends EspalierElementBase {
      *   <esp-grid-column header="Last name" field-name="last_name"></esp-grid-column>
      *   <esp-grid-column header="Email" field-name="email" sortable></esp-grid-column>
      *   <esp-grid-column>
-     *     <esp-button grid-event="trash-button-clicked" icon-only icon="trash" variant="danger" class="grid-demo-button"></esp-button>
+     *     <esp-button grid-event="trash-button-clicked" icon-only icon="trash" intent="danger" class="grid-demo-button"></esp-button>
      *   </esp-grid-column>
      * </esp-grid>
      * <script>
@@ -486,7 +486,7 @@ export declare class EspalierGrid extends EspalierElementBase {
      *   <esp-grid-column header="Last name" field-name="last_name"></esp-grid-column>
      *   <esp-grid-column header="Email" field-name="email" sortable></esp-grid-column>
      *   <esp-grid-column>
-     *     <esp-button grid-event="replace-button-clicked" icon-only icon="wand" variant="triadic-left" class="grid-demo-button"></esp-button>
+     *     <esp-button grid-event="replace-button-clicked" icon-only icon="wand" class="grid-demo-button"></esp-button>
      *   </esp-grid-column>
      * </esp-grid>
      * <script>

package/dist/index.d.ts

@@ -70,7 +70,7 @@ export * from "./shared/events.js";
 export { getImageDetails, releasePreviewUrl, type EspalierUploadImage, type ImageDetailsOptions, type SelectedUploadImage, type ExistingUploadImage, type ExistingImage, type ResponsiveImageUrl, type UploadCallbacks, type UploadEventDetail, } from "./image-upload/image-helpers.js";
 export { calculatePhotoLayout, type LayoutImage, type PhotoRow, } from "./shared/justified-layout.js";
 export { type TypeaheadFetchItems } from "./pickers/types.js";
-export { type EspalierTheme, type PartialTheme, type VariantColorSource, encodeTheme, parseTheme, mergePartials, layerThemes, buildTaprootLightTheme, buildTaprootDarkTheme, NESTED_THEME_KEYS, } from "./shared/theme.js";
+export { type EspalierTheme, type PartialTheme, type PartialThemeContexts, type ThemeContext, type ThemeContexts, type VariantColorSource, encodeTheme, parseTheme, mergePartials, layerThemes, validateThemePair, buildTaprootLightTheme, buildTaprootDarkTheme, NESTED_THEME_KEYS, } from "./shared/theme.js";
 export { auditDataPalette, generateSequentialRamp, generateDivergingRamp, COLOR_VISION_SIMULATIONS, DATA_SERIES_KEYS, DEFAULT_DATA_PALETTE, DEFAULT_DATA_RAMP_STEPS, DEFAULT_DIVERGING_NEUTRAL, MAX_DATA_RAMP_STEPS, MIN_DATA_COLOR_DISTANCE, MIN_DATA_RAMP_LIGHTNESS_STEP, MIN_DATA_RAMP_STEPS, type ColorVisionSimulation, type DataPalette, type DataPaletteIssue, type DataRamp, type DataRamps, type DataSeriesKey, type DivergingDataRamp, type DivergingRampOptions, type PartialDataRamp, type PartialDataRamps, type SequentialDataRamp, type SequentialRampOptions, } from "./shared/data-colors.js";
 export { WEIGHT_LABELS, extractWeights, normalizeWeight, bestAvailableWeight, extractFamily, getFallbackFont, } from "./shared/font-helpers.js";
 export { getGoogleFonts } from "./font-picker/esp-font-picker.js";

package/dist/index.js

@@ -1 +1 @@
-export*from"./box/esp-box.js";export*from"./action-menu/esp-action-menu.js";export*from"./action-menu/esp-action-menu-item.js";export*from"./avatar/esp-avatar.js";export*from"./avatar/esp-profile-chip.js";export*from"./badge/esp-badge.js";export*from"./checkbox/esp-checkbox.js";export*from"./checkbox/esp-checkbox-group.js";export*from"./data-cell/esp-data-cell.js";export*from"./radio-button/esp-radio-button.js";export*from"./radio-button/esp-radio-button-group.js";export*from"./repeater/esp-repeater.js";export*from"./breadcrumbs/esp-breadcrumbs.js";export*from"./button/esp-button.js";export*from"./button/esp-button-group.js";export*from"./color-picker/esp-color-picker.js";export*from"./flyout/esp-flyout.js";export*from"./form/esp-form.js";export*from"./form-item/esp-form-item.js";export*from"./help/esp-help-button.js";export*from"./help/esp-help-provider.js";export*from"./header/index.js";export*from"./page/esp-page.js";export*from"./popover/esp-popover.js";export*from"./dialog/esp-dialog.js";export*from"./empty-state/esp-empty-state.js";export*from"./image-upload/esp-image-upload.js";export*from"./file-upload/esp-file-upload.js";export*from"./font-picker/esp-font-picker.js";export*from"./focus-picker/esp-focus-picker.js";export*from"./footer/index.js";export*from"./grid/esp-grid.js";export*from"./image/esp-image.js";export*from"./image/image-focus.js";export*from"./lightbox/esp-lightbox.js";export*from"./info/esp-info.js";export*from"./input/esp-input.js";export*from"./textarea/esp-textarea.js";export*from"./pickers/esp-pick-one.js";export*from"./pickers/esp-pick-some.js";export*from"./pickers/esp-picker-menu.js";export*from"./pickers/esp-picker-item.js";export*from"./root/esp-root.js";export*from"./menu/index.js";export*from"./burger/esp-burger.js";export*from"./date-picker/esp-date-picker.js";export*from"./details/esp-details.js";export*from"./details/esp-details-group.js";export*from"./tabs/esp-tab.js";export*from"./tabs/esp-tab-group.js";export*from"./slider/esp-slider.js";export*from"./switch/esp-switch.js";export*from"./toaster/esp-toaster.js";export*from"./tooltip/esp-tooltip.js";export*from"./progress/esp-progress.js";export*from"./search/esp-search.js";export*from"./status-indicator/esp-status-indicator.js";export*from"./tree/esp-tree.js";export*from"./tree/esp-tree-item.js";import{DEFAULT_ICON_SPRITE_URL as xo,DEFAULT_ICON_VIEW_BOX as To,INTENT_VARIANTS as ao,normalizeIntentVariant as _o,getIconHref as Ao,getIconHrefForHost as Eo,getIconSpriteUrl as lo}from"./shared/intent-values.js";import{EspalierElementBase as io}from"./shared/esp-element-base.js";import{VALIDITY_CHANGED_EVENT as so}from"./shared/validation.js";import{FormFieldController as go}from"./shared/form-field-controller.js";import{traverseToClosest as Fo}from"./shared/utilities.js";import{showToast as No}from"./shared/toast-events.js";import{showFlyout as ho,closeFlyout as Po}from"./shared/flyout-events.js";import{requestHelp as uo}from"./shared/help-events.js";import{getEspBus as Uo}from"./shared/bus-events.js";export*from"./shared/events.js";import{getImageDetails as Ho,releasePreviewUrl as Vo}from"./image-upload/image-helpers.js";import{calculatePhotoLayout as bo}from"./shared/justified-layout.js";import{encodeTheme as Wo,parseTheme as vo,mergePartials as wo,layerThemes as Bo,buildTaprootLightTheme as Yo,buildTaprootDarkTheme as ko,NESTED_THEME_KEYS as qo}from"./shared/theme.js";import{auditDataPalette as Ko,generateSequentialRamp as Xo,generateDivergingRamp as jo,COLOR_VISION_SIMULATIONS as Jo,DATA_SERIES_KEYS as Qo,DEFAULT_DATA_PALETTE as Zo,DEFAULT_DATA_RAMP_STEPS as $o,DEFAULT_DIVERGING_NEUTRAL as or,MAX_DATA_RAMP_STEPS as rr,MIN_DATA_COLOR_DISTANCE as er,MIN_DATA_RAMP_LIGHTNESS_STEP as tr,MIN_DATA_RAMP_STEPS as mr}from"./shared/data-colors.js";import{WEIGHT_LABELS as fr,extractWeights as xr,normalizeWeight as Tr,bestAvailableWeight as ar,extractFamily as _r,getFallbackFont as Ar}from"./shared/font-helpers.js";import{getGoogleFonts as lr}from"./font-picker/esp-font-picker.js";import{themeFitReport as ir,themeFitRows as Sr,printThemeFitReport as sr}from"./shared/theme-fit-report.js";export{Jo as COLOR_VISION_SIMULATIONS,Qo as DATA_SERIES_KEYS,Zo as DEFAULT_DATA_PALETTE,$o as DEFAULT_DATA_RAMP_STEPS,or as DEFAULT_DIVERGING_NEUTRAL,xo as DEFAULT_ICON_SPRITE_URL,To as DEFAULT_ICON_VIEW_BOX,io as EspalierElementBase,go as FormFieldController,ao as INTENT_VARIANTS,rr as MAX_DATA_RAMP_STEPS,er as MIN_DATA_COLOR_DISTANCE,tr as MIN_DATA_RAMP_LIGHTNESS_STEP,mr as MIN_DATA_RAMP_STEPS,qo as NESTED_THEME_KEYS,so as VALIDITY_CHANGED_EVENT,fr as WEIGHT_LABELS,Ko as auditDataPalette,ar as bestAvailableWeight,ko as buildTaprootDarkTheme,Yo as buildTaprootLightTheme,bo as calculatePhotoLayout,Po as closeFlyout,Wo as encodeTheme,_r as extractFamily,xr as extractWeights,jo as generateDivergingRamp,Xo as generateSequentialRamp,Uo as getEspBus,Ar as getFallbackFont,lr as getGoogleFonts,Ao as getIconHref,Eo as getIconHrefForHost,lo as getIconSpriteUrl,Ho as getImageDetails,Bo as layerThemes,wo as mergePartials,_o as normalizeIntentVariant,Tr as normalizeWeight,vo as parseTheme,sr as printThemeFitReport,Vo as releasePreviewUrl,uo as requestHelp,ho as showFlyout,No as showToast,ir as themeFitReport,Sr as themeFitRows,Fo as traverseToClosest};
+export*from"./box/esp-box.js";export*from"./action-menu/esp-action-menu.js";export*from"./action-menu/esp-action-menu-item.js";export*from"./avatar/esp-avatar.js";export*from"./avatar/esp-profile-chip.js";export*from"./badge/esp-badge.js";export*from"./checkbox/esp-checkbox.js";export*from"./checkbox/esp-checkbox-group.js";export*from"./data-cell/esp-data-cell.js";export*from"./radio-button/esp-radio-button.js";export*from"./radio-button/esp-radio-button-group.js";export*from"./repeater/esp-repeater.js";export*from"./breadcrumbs/esp-breadcrumbs.js";export*from"./button/esp-button.js";export*from"./button/esp-button-group.js";export*from"./color-picker/esp-color-picker.js";export*from"./flyout/esp-flyout.js";export*from"./form/esp-form.js";export*from"./form-item/esp-form-item.js";export*from"./help/esp-help-button.js";export*from"./help/esp-help-provider.js";export*from"./header/index.js";export*from"./page/esp-page.js";export*from"./popover/esp-popover.js";export*from"./dialog/esp-dialog.js";export*from"./empty-state/esp-empty-state.js";export*from"./image-upload/esp-image-upload.js";export*from"./file-upload/esp-file-upload.js";export*from"./font-picker/esp-font-picker.js";export*from"./focus-picker/esp-focus-picker.js";export*from"./footer/index.js";export*from"./grid/esp-grid.js";export*from"./image/esp-image.js";export*from"./image/image-focus.js";export*from"./lightbox/esp-lightbox.js";export*from"./info/esp-info.js";export*from"./input/esp-input.js";export*from"./textarea/esp-textarea.js";export*from"./pickers/esp-pick-one.js";export*from"./pickers/esp-pick-some.js";export*from"./pickers/esp-picker-menu.js";export*from"./pickers/esp-picker-item.js";export*from"./root/esp-root.js";export*from"./menu/index.js";export*from"./burger/esp-burger.js";export*from"./date-picker/esp-date-picker.js";export*from"./details/esp-details.js";export*from"./details/esp-details-group.js";export*from"./tabs/esp-tab.js";export*from"./tabs/esp-tab-group.js";export*from"./slider/esp-slider.js";export*from"./switch/esp-switch.js";export*from"./toaster/esp-toaster.js";export*from"./tooltip/esp-tooltip.js";export*from"./progress/esp-progress.js";export*from"./search/esp-search.js";export*from"./status-indicator/esp-status-indicator.js";export*from"./tree/esp-tree.js";export*from"./tree/esp-tree-item.js";import{DEFAULT_ICON_SPRITE_URL as xr,DEFAULT_ICON_VIEW_BOX as Tr,INTENT_VARIANTS as ar,normalizeIntentVariant as _r,getIconHref as Ar,getIconHrefForHost as Er,getIconSpriteUrl as lr}from"./shared/intent-values.js";import{EspalierElementBase as Ir}from"./shared/esp-element-base.js";import{VALIDITY_CHANGED_EVENT as sr}from"./shared/validation.js";import{FormFieldController as gr}from"./shared/form-field-controller.js";import{traverseToClosest as Fr}from"./shared/utilities.js";import{showToast as Nr}from"./shared/toast-events.js";import{showFlyout as hr,closeFlyout as Pr}from"./shared/flyout-events.js";import{requestHelp as ur}from"./shared/help-events.js";import{getEspBus as Ur}from"./shared/bus-events.js";export*from"./shared/events.js";import{getImageDetails as Hr,releasePreviewUrl as Vr}from"./image-upload/image-helpers.js";import{calculatePhotoLayout as Gr}from"./shared/justified-layout.js";import{encodeTheme as vr,parseTheme as yr,mergePartials as Wr,layerThemes as wr,validateThemePair as Br,buildTaprootLightTheme as Yr,buildTaprootDarkTheme as kr,NESTED_THEME_KEYS as qr}from"./shared/theme.js";import{auditDataPalette as Kr,generateSequentialRamp as Xr,generateDivergingRamp as jr,COLOR_VISION_SIMULATIONS as Jr,DATA_SERIES_KEYS as Qr,DEFAULT_DATA_PALETTE as Zr,DEFAULT_DATA_RAMP_STEPS as $r,DEFAULT_DIVERGING_NEUTRAL as ro,MAX_DATA_RAMP_STEPS as oo,MIN_DATA_COLOR_DISTANCE as eo,MIN_DATA_RAMP_LIGHTNESS_STEP as to,MIN_DATA_RAMP_STEPS as mo}from"./shared/data-colors.js";import{WEIGHT_LABELS as fo,extractWeights as xo,normalizeWeight as To,bestAvailableWeight as ao,extractFamily as _o,getFallbackFont as Ao}from"./shared/font-helpers.js";import{getGoogleFonts as lo}from"./font-picker/esp-font-picker.js";import{themeFitReport as Io,themeFitRows as So,printThemeFitReport as so}from"./shared/theme-fit-report.js";export{Jr as COLOR_VISION_SIMULATIONS,Qr as DATA_SERIES_KEYS,Zr as DEFAULT_DATA_PALETTE,$r as DEFAULT_DATA_RAMP_STEPS,ro as DEFAULT_DIVERGING_NEUTRAL,xr as DEFAULT_ICON_SPRITE_URL,Tr as DEFAULT_ICON_VIEW_BOX,Ir as EspalierElementBase,gr as FormFieldController,ar as INTENT_VARIANTS,oo as MAX_DATA_RAMP_STEPS,eo as MIN_DATA_COLOR_DISTANCE,to as MIN_DATA_RAMP_LIGHTNESS_STEP,mo as MIN_DATA_RAMP_STEPS,qr as NESTED_THEME_KEYS,sr as VALIDITY_CHANGED_EVENT,fo as WEIGHT_LABELS,Kr as auditDataPalette,ao as bestAvailableWeight,kr as buildTaprootDarkTheme,Yr as buildTaprootLightTheme,Gr as calculatePhotoLayout,Pr as closeFlyout,vr as encodeTheme,_o as extractFamily,xo as extractWeights,jr as generateDivergingRamp,Xr as generateSequentialRamp,Ur as getEspBus,Ao as getFallbackFont,lo as getGoogleFonts,Ar as getIconHref,Er as getIconHrefForHost,lr as getIconSpriteUrl,Hr as getImageDetails,wr as layerThemes,Wr as mergePartials,_r as normalizeIntentVariant,To as normalizeWeight,yr as parseTheme,so as printThemeFitReport,Vr as releasePreviewUrl,ur as requestHelp,hr as showFlyout,Nr as showToast,Io as themeFitReport,So as themeFitRows,Fr as traverseToClosest,Br as validateThemePair};

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

@@ -1,4 +1,5 @@
-import { type EspalierVariant, EspalierElementBase } from "../shared/esp-element-base.js";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type EspalierIntentVariant } from "../shared/intent-values.js";
 export type DestroyEspalierInfo = {
     toDestroy: EspalierInfo;
 };
@@ -7,7 +8,7 @@ export type DestroyEspalierInfo = {
  *
  * ```html
  * <esp-info>
- *   Info defaults to the complementary color.
+ *   Info defaults to intent="info" and its informational surface treatment.
  * </esp-info>
  * ```
  *
@@ -17,7 +18,7 @@ export type DestroyEspalierInfo = {
  *
  * ```html
  * <esp-info icon="user-circle">
- *   Info defaults to the complementary color.
+ *   Info defaults to intent="info" and its informational surface treatment.
  * </esp-info>
  * ```
  *
@@ -52,7 +53,8 @@ export type DestroyEspalierInfo = {
  *
  */
 export declare class EspalierInfo extends EspalierElementBase {
-    protected variantBacker: EspalierVariant;
+    protected intentEmitsTokens: boolean;
+    protected intentBacker: EspalierIntentVariant;
     /**
      * Optional icon name from the configured Espalier SVG sprite.
      * Slotted `icon-slot` content remains supported and overrides

package/dist/info/esp-info.js

@@ -1,26 +1,26 @@
-var p=function(s,o,t,i){var n=arguments.length,e=n<3?o:i===null?i=Object.getOwnPropertyDescriptor(o,t):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,o,t,i);else for(var c=s.length-1;c>=0;c--)(l=s[c])&&(e=(n<3?l(e):n>3?l(o,t,e):l(o,t))||e);return n>3&&e&&Object.defineProperty(o,t,e),e};import{css as v,html as a}from"lit";import{customElement as f,property as d}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{trashSVG as h}from"../shared/svgs/trash.js";import{ref as u}from"lit/directives/ref.js";import{getIconHrefForHost as b}from"../shared/intent-values.js";import{SlottedIconController as y}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as g}from"../shared/svgs/render-sprite-icon.js";let r=class extends m{constructor(){super(...arguments),this.iconSlot=new y(this),this.variantBacker="complementary",this.icon="",this.destroyable=!1}render(){const o=b(this.icon,this),t=this.iconSlot.hasSlottedIcon('[slot="icon-slot"]');return a`
-      <section>
+var p=function(r,t,e,s){var i=arguments.length,o=i<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(r,t,e,s);else for(var a=r.length-1;a>=0;a--)(c=r[a])&&(o=(i<3?c(o):i>3?c(t,e,o):c(t,e))||o);return i>3&&o&&Object.defineProperty(t,e,o),o};import{css as f,html as l}from"lit";import{customElement as v,property as d}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{intentSurfaceTokens as h}from"../shared/style-fragments.js";import{classMap as u}from"lit/directives/class-map.js";import{trashSVG as b}from"../shared/svgs/trash.js";import{ref as g}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as S}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as _}from"../shared/svgs/render-sprite-icon.js";let n=class extends m{constructor(){super(...arguments),this.intentEmitsTokens=!1,this.iconSlot=new S(this),this.intentBacker="info",this.icon="",this.destroyable=!1}render(){const t=y(this.icon,this),e=this.iconSlot.hasSlottedIcon('[slot="icon-slot"]');return l`
+      <section class=${u({[`intent-${this.intent}`]:!0})}>
         <div class="icon">
           <slot
             name="icon-slot"
-            ${u(this.iconSlot.slotRef)}
+            ${g(this.iconSlot.slotRef)}
             @slotchange=${this.iconSlot.handleSlotChange}
           ></slot>
-          ${!t&&o?g(o):a``}
+          ${!e&&t?_(t):l``}
         </div>
         <div class="message">
           <slot></slot>
         </div>
-        ${this.destroyable?a`<esp-button
+        ${this.destroyable?l`<esp-button
               class="destroy-button"
-              variant="danger"
+              intent="danger"
               icon-only
               @clicked=${()=>{this.dispatchEvent(new CustomEvent("destroy",{detail:{toDestroy:this}}))}}
             >
-              ${h}
-            </esp-button>`:a``}
+              ${b}
+            </esp-button>`:l``}
       </section>
-    `}};r.styles=[...m.styles,v`
+    `}};n.styles=[...m.styles,h,f`
       :host {
         display: block;
       }
@@ -28,18 +28,18 @@ var p=function(s,o,t,i){var n=arguments.length,e=n<3?o:i===null?i=Object.getOwnP
       section {
         display: grid;
         grid-template-columns: min-content auto min-content;
-        background: var(--esp-info-color-background, var(--esp-color-layer-1));
-        border: 1px solid var(--esp-info-color-border, var(--esp-color-border));
+        background: var(--esp-info-color-background, var(--_esp-intent-background));
+        border: 1px solid var(--esp-info-color-border, var(--_esp-intent-border-color));
         border-radius: var(--esp-size-border-radius);
-        color: var(--esp-info-color-text, var(--esp-color-text));
+        color: var(--esp-info-color-text, var(--_esp-intent-color));
         font-size: var(--esp-type-small);
 
         div.icon {
           display: grid;
           place-content: center;
           padding: var(--esp-size-tiny);
-          background: var(--esp-info-color-border, var(--esp-color-border));
-          color: var(--esp-info-color-background, var(--esp-color-layer-1));
+          background: var(--esp-info-color-border, var(--_esp-intent-border-color));
+          color: var(--esp-info-color-background, var(--_esp-intent-background));
 
           .generated-icon,
           slot::slotted(svg) {
@@ -58,4 +58,4 @@ var p=function(s,o,t,i){var n=arguments.length,e=n<3?o:i===null?i=Object.getOwnP
           margin: var(--esp-size-tiny);
         }
       }
-    `],p([d({type:String})],r.prototype,"icon",void 0),p([d({type:Boolean})],r.prototype,"destroyable",void 0),r=p([f("esp-info")],r);export{r as EspalierInfo};
+    `],p([d({type:String})],n.prototype,"icon",void 0),p([d({type:Boolean})],n.prototype,"destroyable",void 0),n=p([v("esp-info")],n);export{n as EspalierInfo};

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

@@ -27,11 +27,13 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </script>
  * ```
  *
- * Input can have [color variants](/espalier-guides/). Here are some examples:
+ * Inputs pick up zone theming from an ancestor's `context` attribute —
+ * see the [theming guide](/espalier-guides/) for theme-defined contexts:
  *
  * ```html
- * <esp-input variant="split-complementary-left"></esp-input>
- * <esp-input variant="analogous-left"></esp-input>
+ * <esp-box context="quiet">
+ *   <esp-input label="Inside the quiet zone"></esp-input>
+ * </esp-box>
  * ```
  *
  * ### Email validation

package/dist/lightbox/esp-lightbox.js

@@ -57,7 +57,7 @@ var c=function(l,e,t,i){var a=arguments.length,s=a<3?e:i===null?i=Object.getOwnP
           class="close-btn"
           icon-only
           collapsed
-          variant="danger"
+          intent="danger"
           label="Close lightbox"
           @clicked=${this.close}
         >

package/dist/pickers/esp-picker-menu.d.ts

@@ -42,6 +42,7 @@ import "../shared/virtualizer/lit-virtualizer.js";
 export declare class EspalierPickerMenu extends LitElement {
     constructor();
     connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     /**
      * An accessible label for the listbox, typically passed from