@taprootio/espalier 3.9.0 → 4.1.0

package/dist/action-menu/esp-action-menu-item.d.ts

@@ -9,7 +9,7 @@ export type ActionMenuItemIconPosition = "left" | "right";
  *
  * Use the optional `icon` slot for a leading visual cue. Link-style
  * action items are intentionally not part of this API yet; use the
- * parent menu's `select` event and handle navigation in application
+ * parent menu's `esp-action-menu-select` event and handle navigation in application
  * code until the href behavior is reviewed.
  *
  * ```html
@@ -30,8 +30,8 @@ export type ActionMenuItemIconPosition = "left" | "right";
  * @slot icon - Optional custom leading icon. Slotted icons override
  * the generated SVG from the `icon` attribute.
  *
- * @event {CustomEvent<ActionMenuItemActivateDetail>} esp-action-menu-item-activate -
- * Internal activation event consumed by the parent action menu.
+ * Activation is reported through a private coordination event consumed by
+ * the parent action menu.
  *
  * @cssprop --esp-action-menu-item-padding - Padding inside each
  * menu item. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`.
@@ -68,7 +68,7 @@ export declare class EspalierActionMenuItem extends EspalierElementBase {
      */
     icon: string;
     /**
-     * Value included in the parent menu's `select` event detail.
+     * Value included in the parent menu's `esp-action-menu-select` event detail.
      */
     value: string;
     /**

package/dist/action-menu/esp-action-menu-item.js

@@ -1,4 +1,4 @@
-var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,i,t,n);else for(var p=r.length-1;p>=0;p--)(c=r[p])&&(e=(a<3?c(e):a>3?c(i,t,e):c(i,t))||e);return a>3&&e&&Object.defineProperty(i,t,e),e};import{css as h,html as m,nothing as u}from"lit";import{customElement as f,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{getIconHrefForHost as b}from"../shared/intent-values.js";import{SlottedIconController as y}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as P}from"../shared/svgs/render-sprite-icon.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new y(this),this.iconPositionExplicit=!1,this.inheritingIconPosition=!1,this._iconPosition="left",this.icon="",this.value="",this.disabled=!1,this.handleClick=i=>{if(this.disabled){i.preventDefault();return}this.activate()}}get iconPosition(){return this._iconPosition}set iconPosition(i){const t=this._iconPosition;this._iconPosition=i,this.inheritingIconPosition||(this.iconPositionExplicit=!0),this.requestUpdate("iconPosition",t)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}updated(i){super.updated(i),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",String(this.disabled))}activate(){this.disabled||this.dispatchEvent(new CustomEvent("esp-action-menu-item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}inheritIconPosition(i){this.iconPositionExplicit||(this.inheritingIconPosition=!0,this.iconPosition=i,this.inheritingIconPosition=!1)}render(){const i=b(this.icon,this),t=this.iconSlot.hasSlottedIcon(),n={item:!0,"has-icon":t||i.length>0,"icon-right":this.iconPosition==="right"};return m`
+var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,i,t,n);else for(var p=r.length-1;p>=0;p--)(c=r[p])&&(e=(a<3?c(e):a>3?c(i,t,e):c(i,t))||e);return a>3&&e&&Object.defineProperty(i,t,e),e};import{css as h,html as m,nothing as u}from"lit";import{customElement as f,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as v}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{getIconHrefForHost as b}from"../shared/intent-values.js";import{SlottedIconController as y}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as P}from"../shared/svgs/render-sprite-icon.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new y(this),this.iconPositionExplicit=!1,this.inheritingIconPosition=!1,this._iconPosition="left",this.icon="",this.value="",this.disabled=!1,this.handleClick=i=>{if(this.disabled){i.preventDefault();return}this.activate()}}get iconPosition(){return this._iconPosition}set iconPosition(i){const t=this._iconPosition;this._iconPosition=i,this.inheritingIconPosition||(this.iconPositionExplicit=!0),this.requestUpdate("iconPosition",t)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick)}updated(i){super.updated(i),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",String(this.disabled))}activate(){this.disabled||this.dispatchEvent(new CustomEvent("esp-internal-action-menu-item-activate",{detail:{item:this},bubbles:!0,composed:!0}))}inheritIconPosition(i){this.iconPositionExplicit||(this.inheritingIconPosition=!0,this.iconPosition=i,this.inheritingIconPosition=!1)}render(){const i=b(this.icon,this),t=this.iconSlot.hasSlottedIcon(),n={item:!0,"has-icon":t||i.length>0,"icon-right":this.iconPosition==="right"};return m`
       <span part="item" class=${g(n)}>
         <span part="icon" class="icon">
           <slot

package/dist/action-menu/esp-action-menu.d.ts

@@ -35,7 +35,7 @@ export type ActionMenuSelectDetail = {
  *   </esp-action-menu-item>
  * </esp-action-menu>
  * <script>
- *   findById("demo-actions").addEventListener("select", (event) => {
+ *   findById("demo-actions").addEventListener("esp-action-menu-select", (event) => {
  *     showToast({
  *       message: `Selected ${event.detail.value}`,
  *       icon: "info-i",
@@ -70,7 +70,7 @@ export type ActionMenuSelectDetail = {
  * @slot - Place `esp-action-menu-item` children here.
  * @slot trigger - Optional custom trigger element.
  *
- * @event {CustomEvent<ActionMenuSelectDetail>} select - Emitted from
+ * @event {CustomEvent<ActionMenuSelectDetail>} esp-action-menu-select - Emitted from
  * the menu when an enabled item is activated.
  *
  * @cssprop --esp-action-menu-background - Menu surface background.

package/dist/action-menu/esp-action-menu.js

@@ -1,4 +1,4 @@
-var l=function(c,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(c,e,t,s);else for(var r=c.length-1;r>=0;r--)(a=c[r])&&(i=(o<3?a(i):o>3?a(e,t,i):a(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};import{css as v,html as g}from"lit";import{customElement as I,property as u,state as p}from"lit/decorators.js";import{createRef as d,ref as h}from"lit/directives/ref.js";import"../button/esp-button.js";import"../popover/esp-popover.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import"./esp-action-menu-item.js";const w=g` <svg
+var l=function(d,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(d,e,t,s);else for(var r=d.length-1;r>=0;r--)(a=d[r])&&(i=(o<3?a(i):o>3?a(e,t,i):a(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};import{css as v,html as p}from"lit";import{customElement as I,property as u,state as g}from"lit/decorators.js";import{createRef as c,ref as h}from"lit/directives/ref.js";import"../button/esp-button.js";import"../popover/esp-popover.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{ESP_EVENTS as w}from"../shared/events.js";import"./esp-action-menu-item.js";const y=p` <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
@@ -7,15 +7,15 @@ var l=function(c,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
   <circle cx="5" cy="12" r="2" />
   <circle cx="12" cy="12" r="2" />
   <circle cx="19" cy="12" r="2" />
-</svg>`;let n=class extends f{constructor(){super(...arguments),this.popoverRef=d(),this.itemsSlot=d(),this.triggerSlot=d(),this.triggerShell=d(),this.handledTriggerEvents=new WeakSet,this.wiredTriggerControls=new WeakSet,this.open=!1,this.focusedIndex=-1,this.placement="bottom-end",this.disabled=!1,this.iconPosition="left",this.handleTriggerSlotChange=()=>{this.syncTriggerAttributes()},this.syncItems=()=>{const e=this.items,t=this.enabledItems;for(const s of e)s.inheritIconPosition(this.iconPosition),s.setAttribute("role","menuitem"),s.tabIndex=t[0]===s&&this.focusedIndex<0?0:-1,s.setAttribute("aria-disabled",String(s.disabled));if(this.focusedIndex>=0){const s=t[this.focusedIndex];for(const o of t)o.tabIndex=o===s?0:-1}},this.handleTriggerClick=e=>{this.handledTriggerEvents.has(e)||(this.handledTriggerEvents.add(e),this.toggleMenu(e))},this.toggleMenu=e=>{e.preventDefault(),!this.disabled&&(this.open?this.closeMenu({restoreFocus:!0}):this.openMenu())},this.handleTriggerKeydown=async e=>{if(!this.disabled)switch(e.key){case"Enter":case" ":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusLastItem();break}},this.handleMenuKeydown=e=>{if(this.open)switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNextItem(1);break;case"ArrowUp":e.preventDefault(),this.focusNextItem(-1);break;case"Home":e.preventDefault(),this.focusFirstItem();break;case"End":e.preventDefault(),this.focusLastItem();break;case"Enter":case" ":e.preventDefault(),this.activeItemForEvent(e)?.activate();break;case"Escape":e.preventDefault(),this.closeMenu({restoreFocus:!0});break}},this.handleItemActivate=e=>{const{item:t}=e.detail;this.selectItem(t)},this.handlePopoverOpened=()=>{this.open=!0,this.syncItems()},this.handlePopoverClosed=()=>{this.open=!1,this.focusedIndex=-1,this.syncItems()}}connectedCallback(){super.connectedCallback(),this.addEventListener("esp-action-menu-item-activate",this.handleItemActivate),this.addEventListener("keydown",this.handleMenuKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("esp-action-menu-item-activate",this.handleItemActivate),this.removeEventListener("keydown",this.handleMenuKeydown)}firstUpdated(e){super.firstUpdated(e),this.syncTriggerAttributes(),this.syncItems()}updated(e){super.updated(e),(e.has("open")||e.has("disabled"))&&this.syncTriggerAttributes(),e.has("iconPosition")&&this.syncItems()}openMenu(){this.disabled||this.open||(this.popoverRef.value?.openPopover(),this.open=!0)}closeMenu(e={}){this.open&&(this.popoverRef.value?.closePopover(),this.open=!1,this.focusedIndex=-1,this.syncItems(),e.restoreFocus&&this.focusTrigger())}get placementParts(){const[e,t]=this.placement.split("-"),s=t==="start"||t==="end"?t:"center";switch(e){case"top":return{attach:"above",align:s};case"right":return{attach:"right",align:s};case"left":return{attach:"left",align:s};case"bottom":default:return{attach:"below",align:s}}}get items(){return Array.from(this.querySelectorAll("esp-action-menu-item"))}get enabledItems(){return this.items.filter(e=>!e.disabled)}get defaultTrigger(){return this.shadowRoot?.querySelector(".default-trigger")}get slottedTrigger(){return this.triggerSlot.value?.assignedElements({flatten:!0})[0]}getTriggerControl(e){return e?.shadowRoot?.querySelector("button, a, [tabindex]")??null}wireTriggerControl(e){!e||this.wiredTriggerControls.has(e)||(e.addEventListener("click",this.handleTriggerClick),this.wiredTriggerControls.add(e))}syncTriggerAttributes(){const e={"aria-haspopup":"menu","aria-expanded":String(this.open),"aria-disabled":String(this.disabled)},t=r=>{if(r){for(const[m,b]of Object.entries(e))r.setAttribute(m,b);"disabled"in r&&(r.disabled=this.disabled)}};t(this.triggerShell.value);const s=this.slottedTrigger;t(s);const o=this.getTriggerControl(s);t(o),this.wireTriggerControl(o);const i=this.defaultTrigger;i?.setAttribute("aria-label","Actions"),t(i);const a=this.getTriggerControl(i);t(a),this.wireTriggerControl(a),i&&i.updateComplete.then(()=>{const r=this.getTriggerControl(i);t(r),r?.setAttribute("aria-label","Actions"),this.wireTriggerControl(r)}),s&&"updateComplete"in s&&s.updateComplete.then(()=>{const r=this.getTriggerControl(s);t(r),this.wireTriggerControl(r)})}activeItemForEvent(e){const t=this.enabledItems;return t[this.focusedIndex]??t.find(s=>e.composedPath().includes(s))??t.find(s=>s.matches(":focus"))}selectItem(e){e.disabled||(this.dispatchEvent(new CustomEvent("select",{detail:{value:e.value,item:e},bubbles:!0,composed:!0})),this.closeMenu({restoreFocus:!0}))}focusFirstItem(){this.focusItem(0)}focusLastItem(){this.focusItem(this.enabledItems.length-1)}focusNextItem(e){const t=this.enabledItems;if(t.length===0)return;const o=((this.focusedIndex<0?0:this.focusedIndex)+e+t.length)%t.length;this.focusItem(o)}focusItem(e){const t=this.enabledItems;e<0||e>=t.length||(this.focusedIndex=e,this.syncItems(),t[e].focus())}focusTrigger(){const e=this.slottedTrigger;if(e){(this.getTriggerControl(e)??e).focus();return}const t=this.defaultTrigger;(this.getTriggerControl(t)??t??this.triggerShell.value)?.focus()}render(){const{attach:e,align:t}=this.placementParts;return g`
+</svg>`;let n=class extends f{constructor(){super(...arguments),this.popoverRef=c(),this.itemsSlot=c(),this.triggerSlot=c(),this.triggerShell=c(),this.handledTriggerEvents=new WeakSet,this.wiredTriggerControls=new WeakSet,this.open=!1,this.focusedIndex=-1,this.placement="bottom-end",this.disabled=!1,this.iconPosition="left",this.handleTriggerSlotChange=()=>{this.syncTriggerAttributes()},this.syncItems=()=>{const e=this.items,t=this.enabledItems;for(const s of e)s.inheritIconPosition(this.iconPosition),s.setAttribute("role","menuitem"),s.tabIndex=t[0]===s&&this.focusedIndex<0?0:-1,s.setAttribute("aria-disabled",String(s.disabled));if(this.focusedIndex>=0){const s=t[this.focusedIndex];for(const o of t)o.tabIndex=o===s?0:-1}},this.handleTriggerClick=e=>{this.handledTriggerEvents.has(e)||(this.handledTriggerEvents.add(e),this.toggleMenu(e))},this.toggleMenu=e=>{e.preventDefault(),!this.disabled&&(this.open?this.closeMenu({restoreFocus:!0}):this.openMenu())},this.handleTriggerKeydown=async e=>{if(!this.disabled)switch(e.key){case"Enter":case" ":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusLastItem();break}},this.handleMenuKeydown=e=>{if(this.open)switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNextItem(1);break;case"ArrowUp":e.preventDefault(),this.focusNextItem(-1);break;case"Home":e.preventDefault(),this.focusFirstItem();break;case"End":e.preventDefault(),this.focusLastItem();break;case"Enter":case" ":e.preventDefault(),this.activeItemForEvent(e)?.activate();break;case"Escape":e.preventDefault(),this.closeMenu({restoreFocus:!0});break}},this.handleItemActivate=e=>{const{item:t}=e.detail;this.selectItem(t)},this.handlePopoverOpened=()=>{this.open=!0,this.syncItems()},this.handlePopoverClosed=()=>{this.open=!1,this.focusedIndex=-1,this.syncItems()}}connectedCallback(){super.connectedCallback(),this.addEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.addEventListener("keydown",this.handleMenuKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.removeEventListener("keydown",this.handleMenuKeydown)}firstUpdated(e){super.firstUpdated(e),this.syncTriggerAttributes(),this.syncItems()}updated(e){super.updated(e),(e.has("open")||e.has("disabled"))&&this.syncTriggerAttributes(),e.has("iconPosition")&&this.syncItems()}openMenu(){this.disabled||this.open||(this.popoverRef.value?.openPopover(),this.open=!0)}closeMenu(e={}){this.open&&(this.popoverRef.value?.closePopover(),this.open=!1,this.focusedIndex=-1,this.syncItems(),e.restoreFocus&&this.focusTrigger())}get placementParts(){const[e,t]=this.placement.split("-"),s=t==="start"||t==="end"?t:"center";switch(e){case"top":return{attach:"above",align:s};case"right":return{attach:"right",align:s};case"left":return{attach:"left",align:s};case"bottom":default:return{attach:"below",align:s}}}get items(){return Array.from(this.querySelectorAll("esp-action-menu-item"))}get enabledItems(){return this.items.filter(e=>!e.disabled)}get defaultTrigger(){return this.shadowRoot?.querySelector(".default-trigger")}get slottedTrigger(){return this.triggerSlot.value?.assignedElements({flatten:!0})[0]}getTriggerControl(e){return e?.shadowRoot?.querySelector("button, a, [tabindex]")??null}wireTriggerControl(e){!e||this.wiredTriggerControls.has(e)||(e.addEventListener("click",this.handleTriggerClick),this.wiredTriggerControls.add(e))}syncTriggerAttributes(){const e={"aria-haspopup":"menu","aria-expanded":String(this.open),"aria-disabled":String(this.disabled)},t=r=>{if(r){for(const[m,b]of Object.entries(e))r.setAttribute(m,b);"disabled"in r&&(r.disabled=this.disabled)}};t(this.triggerShell.value);const s=this.slottedTrigger;t(s);const o=this.getTriggerControl(s);t(o),this.wireTriggerControl(o);const i=this.defaultTrigger;i?.setAttribute("aria-label","Actions"),t(i);const a=this.getTriggerControl(i);t(a),this.wireTriggerControl(a),i&&i.updateComplete.then(()=>{const r=this.getTriggerControl(i);t(r),r?.setAttribute("aria-label","Actions"),this.wireTriggerControl(r)}),s&&"updateComplete"in s&&s.updateComplete.then(()=>{const r=this.getTriggerControl(s);t(r),this.wireTriggerControl(r)})}activeItemForEvent(e){const t=this.enabledItems;return t[this.focusedIndex]??t.find(s=>e.composedPath().includes(s))??t.find(s=>s.matches(":focus"))}selectItem(e){e.disabled||(this.dispatchEvent(new CustomEvent(w.ACTION_MENU_SELECT,{detail:{value:e.value,item:e},bubbles:!0,composed:!0})),this.closeMenu({restoreFocus:!0}))}focusFirstItem(){this.focusItem(0)}focusLastItem(){this.focusItem(this.enabledItems.length-1)}focusNextItem(e){const t=this.enabledItems;if(t.length===0)return;const o=((this.focusedIndex<0?0:this.focusedIndex)+e+t.length)%t.length;this.focusItem(o)}focusItem(e){const t=this.enabledItems;e<0||e>=t.length||(this.focusedIndex=e,this.syncItems(),t[e].focus())}focusTrigger(){const e=this.slottedTrigger;if(e){(this.getTriggerControl(e)??e).focus();return}const t=this.defaultTrigger;(this.getTriggerControl(t)??t??this.triggerShell.value)?.focus()}render(){const{attach:e,align:t}=this.placementParts;return p`
       <esp-popover
         ${h(this.popoverRef)}
         .trigger=${"none"}
         attach=${e}
         align=${t}
         offset="2px"
-        @popover-opened=${this.handlePopoverOpened}
-        @popover-closed=${this.handlePopoverClosed}
+        @esp-popover-opened=${this.handlePopoverOpened}
+        @esp-popover-closed=${this.handlePopoverClosed}
       >
         <span
           ${h(this.triggerShell)}
@@ -33,7 +33,7 @@ var l=function(c,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
               .disabled=${this.disabled}
               label="Actions"
             >
-              ${w}
+              ${y}
             </esp-button>
           </slot>
         </span>
@@ -72,4 +72,4 @@ var l=function(c,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
       ::slotted(esp-action-menu-item + esp-action-menu-item) {
         border-top: 1px dotted var(--esp-color-border);
       }
-    `],l([p()],n.prototype,"open",void 0),l([p()],n.prototype,"focusedIndex",void 0),l([u({type:String})],n.prototype,"placement",void 0),l([u({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),l([u({attribute:"icon-position",type:String})],n.prototype,"iconPosition",void 0),n=l([I("esp-action-menu")],n);export{n as EspalierActionMenu};
+    `],l([g()],n.prototype,"open",void 0),l([g()],n.prototype,"focusedIndex",void 0),l([u({type:String})],n.prototype,"placement",void 0),l([u({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),l([u({attribute:"icon-position",type:String})],n.prototype,"iconPosition",void 0),n=l([I("esp-action-menu")],n);export{n as EspalierActionMenu};

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

@@ -113,7 +113,7 @@ export declare class EspalierBox extends EspalierElementBase {
      *   let fullScreen = false;
      *   const theBox = findByTagName("esp-box")[0];
      *   const theButton = findByTagName("esp-button")[0];
-     *   theButton.addEventListener("clicked", () => {
+     *   theButton.addEventListener("esp-clicked", () => {
      *     fullScreen = !fullScreen;
      *
      *     if(fullScreen) {

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

@@ -12,22 +12,22 @@ import { LitElement } from "lit";
  * @cssprop --esp-color-burger-opened - The color of the burger lines when open.
  * @cssprop --esp-color-burger-opened-hover - The hover color of the burger lines when open.
  * @cssprop --esp-size-burger-stroke - The stroke width of the burger lines.
- * @event {CustomEvent} opened - Emitted when the button is clicked and the image changes from a burger to an X.
- * @event {CustomEvent} closed - Emitted when the button is clicked and the image changes from an X to a burger.
+ * @event {CustomEvent} esp-burger-opened - Emitted when the button is clicked and the image changes from a burger to an X.
+ * @event {CustomEvent} esp-burger-closed - Emitted when the button is clicked and the image changes from an X to a burger.
  *
  * ```html
  * <esp-burger></esp-burger>
  * <script>
  *   const theBurger = findByTagName("esp-burger")[0];
  *
- *   theBurger.addEventListener("opened", () => {
+ *   theBurger.addEventListener("esp-burger-opened", () => {
  *     showToast({
  *       message: "It would be a good time to show the menu. This message will self-destruct in 4 seconds...",
  *       icon: "info-i",
  *       duration: 4
  *     });
  *   });
- *   theBurger.addEventListener("closed", () => {
+ *   theBurger.addEventListener("esp-burger-closed", () => {
  *     showToast({
  *       message: "It would be a good time to hide the menu. This message will self-destruct in 4 seconds...",
  *       icon: "info-i",

package/dist/burger/esp-burger.js

@@ -1,4 +1,4 @@
-var p=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(n,e,t,i);else for(var l=n.length-1;l>=0;l--)(o=n[l])&&(s=(r<3?o(s):r>3?o(e,t,s):o(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{LitElement as h,css as m,html as c}from"lit";import{classMap as C}from"lit/directives/class-map.js";import{customElement as u,property as d}from"lit/decorators.js";let a=class extends h{constructor(){super(...arguments),this.menuOpen=!1,this.presentationOnly=!1}render(){const{menuOpen:e}=this,t=e?"Close menu":"Open menu",r=c`
+var p=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(n,e,t,i);else for(var l=n.length-1;l>=0;l--)(o=n[l])&&(s=(r<3?o(s):r>3?o(e,t,s):o(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{LitElement as m,css as C,html as c}from"lit";import{classMap as u}from"lit/directives/class-map.js";import{customElement as v,property as h}from"lit/decorators.js";import{ESP_EVENTS as d}from"../shared/events.js";let a=class extends m{constructor(){super(...arguments),this.menuOpen=!1,this.presentationOnly=!1}render(){const{menuOpen:e}=this,t=e?"Close menu":"Open menu",r=c`
       <svg>
         <defs>
           <filter id="animate-button">
@@ -13,7 +13,7 @@ var p=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           </filter>
         </defs>
       </svg>
-      <div class=${C({plate:!0,active:e})}>
+      <div class=${u({plate:!0,active:e})}>
         <svg class="esp-burger" version="1.1" viewBox="0 0 100 100">
           <path
             class="line line1"
@@ -47,7 +47,7 @@ var p=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
       </div>
     `;return this.presentationOnly?c`<div class="animated-mb" aria-hidden="true">${r}</div>`:c`<button class="animated-mb" @click=${this.toggleMenu} aria-label=${t}>
       ${r}
-    </button>`}toggleMenu(){this.menuOpen=!this.menuOpen,this.menuOpen?this.dispatchEvent(new CustomEvent("opened",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("closed",{bubbles:!0,composed:!0}))}};a.styles=m`
+    </button>`}toggleMenu(){this.menuOpen=!this.menuOpen,this.menuOpen?this.dispatchEvent(new CustomEvent(d.BURGER_OPENED,{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent(d.BURGER_CLOSED,{bubbles:!0,composed:!0}))}};a.styles=C`
     :host {
       height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
       width: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
@@ -200,4 +200,4 @@ var p=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
         transition: transform 400ms 50ms;
       }
     }
-  `,p([d({attribute:"menu-open",type:Boolean})],a.prototype,"menuOpen",void 0),p([d({attribute:"presentation-only",type:Boolean})],a.prototype,"presentationOnly",void 0),a=p([u("esp-burger")],a);export{a as EspalierBurger};
+  `,p([h({attribute:"menu-open",type:Boolean})],a.prototype,"menuOpen",void 0),p([h({attribute:"presentation-only",type:Boolean})],a.prototype,"presentationOnly",void 0),a=p([v("esp-burger")],a);export{a as EspalierBurger};

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

@@ -8,7 +8,7 @@ export type ButtonIconPosition = "left" | "right";
  * <esp-button label="Hello there!"></esp-button>
  * <script>
  *   const theButton = findByTagName("esp-button")[0];
- *   theButton.addEventListener("clicked", () => {
+ *   theButton.addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: `You clicked the button!`,
  *       icon: "info-i",
@@ -59,13 +59,13 @@ export type ButtonIconPosition = "left" | "right";
  * <esp-button label="Profile" icon="user-circle"></esp-button>
  * ```
  *
- * @event {CustomEvent} clicked - Emitted when the button is clicked.
+ * @event {CustomEvent} esp-clicked - Emitted when the button is clicked.
  *
  * ```html
  * <esp-button label="Click me!"></esp-button>
  * <script>
  *   const theButton = findByTagName("esp-button")[0];
- *   theButton.addEventListener("clicked", () => {
+ *   theButton.addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: `Hi! You clicked the button. This message will self-destruct in 4 seconds...`,
  *       icon: "info-i",
@@ -151,7 +151,7 @@ export declare class EspalierButton extends EspalierElementBase {
      * <esp-button disabled label="Disabled"></esp-button>
      * <script>
      *   const theButton = findByTagName("esp-button")[0];
-     *   theButton.addEventListener("clicked", () => {
+     *   theButton.addEventListener("esp-clicked", () => {
      *   alert("We will not get here...");
      * });
      * </script>
@@ -233,7 +233,7 @@ export declare class EspalierButton extends EspalierElementBase {
      * <esp-button label="Click me..." icon="save"></esp-button>
      * <script>
      *   const theButton = findByTagName("esp-button")[0];
-     *   theButton.addEventListener("clicked", async () => {
+     *   theButton.addEventListener("esp-clicked", async () => {
      *     theButton.loading = true;
      *     setTimeout(function() {
      *       theButton.loading = false;

package/dist/button/esp-button.js

@@ -1,4 +1,4 @@
-var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,t,r,o);else for(var c=h.length-1;c>=0;c--)(d=h[c])&&(i=(a<3?d(i):a>3?d(t,r,i):d(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i};import{css as f,html as p,nothing as l}from"lit";import{customElement as g,eventOptions as m,property as s,state as v}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 y}from"lit/directives/ref.js";import{getIconHrefForHost as w}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as k}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_INTERACTION_LIGHTNESS_FACTOR as T}from"./action-state-lightness.js";const S=p`<svg
+var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,t,r,o);else for(var p=h.length-1;p>=0;p--)(d=h[p])&&(i=(a<3?d(i):a>3?d(t,r,i):d(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i};import{css as f,html as c,nothing as l}from"lit";import{customElement as g,eventOptions as m,property as s,state as v}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{ESP_EVENTS as y}from"../shared/events.js";import{ref as w}from"lit/directives/ref.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as k}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as T}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_INTERACTION_LIGHTNESS_FACTOR as S}from"./action-state-lightness.js";const $=c`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -10,13 +10,13 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
 >
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
-</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new x(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.iconPosition="right",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?p` <span>${S}</span> `:p`
+</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new k(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.iconPosition="right",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?c` <span>${$}</span> `:c`
       <span>
-        <slot ${y(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
-        ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?k(t):l}
+        <slot ${w(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
+        ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?T(t):l}
       </span>
-    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,r,o){if(super.attributeChangedCallback(t,r,o),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=o===null?null:Number(o),i=a===null||Number.isNaN(a)?null:a;i!==null&&i>=0?(this.innerTabindex=i,this.writeHostTabindex(null)):i===null&&o!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=i}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 r=this.closest("form");if(r){const o=document.createElement("button");o.type="submit",o.hidden=!0,this.formNoValidate&&(o.formNoValidate=!0),r.appendChild(o),r.requestSubmit(o),o.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=w(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:o,iconOnly:a}=this,i=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,c={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":o,"has-icon":r,"icon-left":r&&!a&&this.iconPosition==="left"};return this.href.length?p`
-          <div part="wrapper" class=${u(c)}>
+    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,r,o){if(super.attributeChangedCallback(t,r,o),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=o===null?null:Number(o),i=a===null||Number.isNaN(a)?null:a;i!==null&&i>=0?(this.innerTabindex=i,this.writeHostTabindex(null)):i===null&&o!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=i}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(y.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const r=this.closest("form");if(r){const o=document.createElement("button");o.type="submit",o.hidden=!0,this.formNoValidate&&(o.formNoValidate=!0),r.appendChild(o),r.requestSubmit(o),o.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:o,iconOnly:a}=this,i=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,p={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":o,"has-icon":r,"icon-left":r&&!a&&this.iconPosition==="left"};return this.href.length?c`
+          <div part="wrapper" class=${u(p)}>
             <a
               ?disabled=${this.disabled}
               href=${this.href}
@@ -29,8 +29,8 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
               ${this.buildIcon(t)}
             </a>
           </div>
-        `:p`
-          <div part="wrapper" class=${u(c)}>
+        `:c`
+          <div part="wrapper" class=${u(p)}>
             <button
               ?disabled=${this.disabled||this.loading}
               @click=${this.handleClick}
@@ -139,7 +139,7 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
         &:hover,
         &:focus-within {
           background-color: oklch(
-            from var(--esp-color-action-background) calc(l * ${T})
+            from var(--esp-color-action-background) calc(l * ${S})
               c h
           );
         }

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

@@ -33,9 +33,11 @@ import { type EspalierFormField } from "../form-item/esp-form-item.js";
  *
  * @slot - Place `esp-checkbox` elements in the default slot.
  *
- * @event {CustomEvent<string[]>} value-changed - Fired when any
+ * @event {CustomEvent<string[]>} esp-value-changed - Fired when any
  * child checkbox state changes. The detail is an array of the
  * values of all currently checked checkboxes.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
+ * Fired whenever constraint validation runs.
  *
  * @docPageTitle Checkbox Group
  * @docUrl /components/checkbox/group
@@ -77,7 +79,7 @@ export declare class EspalierCheckboxGroup extends EspalierElementBase implement
      * Focus the first non-disabled checkbox in the group.
      */
     focus(options?: FocusOptions): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid (delegates to ElementInternals). */
     checkValidity(): boolean;

package/dist/checkbox/esp-checkbox-group.js

@@ -1,5 +1,5 @@
 var o=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var c=l.length-1;c>=0;c--)(h=l[c])&&(i=(a<3?h(i):a>3?h(e,t,i):h(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};import{css as p,html as m}from"lit";import{customElement as f,property as n}from"lit/decorators.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{createRef as u,ref as b}from"lit/directives/ref.js";import{EspalierCheckbox as g}from"./esp-checkbox.js";import{FormFieldController as C}from"../shared/form-field-controller.js";let s=class extends d{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new C({host:this,internals:this.internals,getFormValue:()=>{const e=this.values;return e.length>0?e.join(","):null},getValidity:()=>this.required&&this.values.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null,onReset:()=>{for(const e of this.getCheckboxes())e.checked=!1},onRestore:e=>{const t=e.split(",");for(const r of this.getCheckboxes())r.checked=t.includes(r.value)},onDisabled:e=>{this.disabled=e}}),this.itemsSlot=u(),this.formItemDescription=null,this.describedCheckboxes=new Set,this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.handleItemsSlotChange=()=>{this.applyDisabledState(),this.applyFormItemDescription()}}get values(){return this.getCheckboxes().filter(e=>e.checked).map(e=>e.value)}focus(e){this.focusResolvedElementAfterUpdate(()=>this.getCheckboxes().find(t=>!t.disabled),e)}setFormItemDescription(e){this.formItemDescription=e,this.applyFormItemDescription()}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}getCheckboxes(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()).filter(e=>e instanceof g):[]}applyDisabledState(){for(const e of this.getCheckboxes())e.disabled=this.disabled}applyFormItemDescription(){const e=new Set(this.getCheckboxes());for(const t of this.describedCheckboxes)e.has(t)||t.setFormItemDescription(null);for(const t of e)t.setFormItemDescription(this.formItemDescription);this.describedCheckboxes=e}handleChildChanged(e){e.stopPropagation(),this.formCtrl.syncValue(),this.emitValueChanged(this.values)}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}firstUpdated(e){super.firstUpdated(e),this.applyDisabledState(),this.applyFormItemDescription()}updated(e){super.updated(e),e.has("disabled")&&this.applyDisabledState()}render(){return m`
-      <div class="checkbox-group" role="group" @value-changed=${this.handleChildChanged}>
+      <div class="checkbox-group" role="group" @esp-value-changed=${this.handleChildChanged}>
         <slot ${b(this.itemsSlot)} @slotchange=${this.handleItemsSlotChange}></slot>
       </div>
     `}};s.formAssociated=!0,s.styles=[...d.styles,p`

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

@@ -33,9 +33,11 @@ import { type EspalierFormField } from "../form-item/esp-form-item.js";
  *
  * @slot - The label text for the checkbox.
  *
- * @event {CustomEvent<{ checked: boolean; value: string }>} value-changed -
+ * @event {CustomEvent<{ checked: boolean; value: string }>} esp-value-changed -
  * Fired when the checkbox is toggled. The detail contains the new
  * `checked` state and the checkbox `value`.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
+ * Fired whenever constraint validation runs.
  *
  * @cssprop --esp-checkbox-size - The width and height of the
  * checkbox icon. Defaults to `var(--esp-size-normal-to-medium)`.
@@ -102,7 +104,7 @@ export declare class EspalierCheckbox extends EspalierElementBase implements Esp
      * Focus the checkbox control.
      */
     focus(options?: FocusOptions): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid (delegates to ElementInternals). */
     checkValidity(): boolean;

package/dist/color-picker/esp-color-picker.d.ts

@@ -9,7 +9,7 @@ export type ColorPickerMode = "hc" | "hcl";
  * needs to tune hue, chroma, and lightness directly.
  *
  * @customElement esp-color-picker
- * @event {CustomEvent<{ seedColor: string, hue: number, chroma: number, lightness: number }>} value-changed - Fired
+ * @event {CustomEvent<{ seedColor: string, hue: number, chroma: number, lightness: number }>} esp-value-changed - Fired
  * when the user changes the color. The event detail contains the seed
  * color OKLCH string, plus raw hue, chroma, and lightness values.
  *
@@ -30,7 +30,7 @@ export type ColorPickerMode = "hc" | "hcl";
  *     colorPicker.chroma = Math.round(+parts[2] * 100);
  *   }
  *
- *   colorPicker.addEventListener("value-changed", (event) => {
+ *   colorPicker.addEventListener("esp-value-changed", (event) => {
  *     const { seedColor } = event.detail;
  *     localStorage.setItem("esp-seed-color", seedColor);
  *     espRoot.setAttribute("seed-color", seedColor);

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

@@ -1,4 +1,4 @@
-var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(r,e,t,i);else for(var d=r.length-1;d>=0;d--)(h=r[d])&&(o=(s<3?h(o):s>3?h(e,t,o):h(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{LitElement as g,css as b,html as m,nothing as f,unsafeCSS as $}from"lit";import{customElement as y,property as n}from"lit/decorators.js";import{classMap as w}from"lit/directives/class-map.js";import{createRef as u,ref as p}from"lit/directives/ref.js";import{styleMap as k}from"lit/directives/style-map.js";const v=70;let c="linear-gradient(to right,";for(let r=0;r<361;r++)c+=`oklch(${v}% 0.25 ${r}),`;c=c.slice(0,-1)+")";const x=r=>Number((r/100).toFixed(4)).toString();let l=class extends g{constructor(){super(...arguments),this.hueInput=u(),this.chromaInput=u(),this.lightnessInput=u(),this.mode="hc",this.chroma=25,this.hue=180,this.lightness=v,this.changed=()=>{const{hue:e,chroma:t,lightness:i}=this,s=`oklch(${x(i)} ${(t/100).toFixed(4)} ${e})`;this.dispatchEvent(new CustomEvent("value-changed",{detail:{seedColor:s,hue:e,chroma:t,lightness:i},bubbles:!0,composed:!0}))}}render(){const{hue:e,chroma:t,lightness:i}=this,s={"--selected-hue":e,"--selected-chroma":t,"--selected-lightness":`${i}%`};return m`
+var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(r,e,t,i);else for(var d=r.length-1;d>=0;d--)(h=r[d])&&(o=(s<3?h(o):s>3?h(e,t,o):h(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{LitElement as g,css as b,html as m,nothing as f,unsafeCSS as $}from"lit";import{customElement as y,property as n}from"lit/decorators.js";import{classMap as w}from"lit/directives/class-map.js";import{createRef as p,ref as u}from"lit/directives/ref.js";import{styleMap as k}from"lit/directives/style-map.js";import{ESP_EVENTS as x}from"../shared/events.js";const v=70;let c="linear-gradient(to right,";for(let r=0;r<361;r++)c+=`oklch(${v}% 0.25 ${r}),`;c=c.slice(0,-1)+")";const E=r=>Number((r/100).toFixed(4)).toString();let l=class extends g{constructor(){super(...arguments),this.hueInput=p(),this.chromaInput=p(),this.lightnessInput=p(),this.mode="hc",this.chroma=25,this.hue=180,this.lightness=v,this.changed=()=>{const{hue:e,chroma:t,lightness:i}=this,s=`oklch(${E(i)} ${(t/100).toFixed(4)} ${e})`;this.dispatchEvent(new CustomEvent(x.VALUE_CHANGED,{detail:{seedColor:s,hue:e,chroma:t,lightness:i},bubbles:!0,composed:!0}))}}render(){const{hue:e,chroma:t,lightness:i}=this,s={"--selected-hue":e,"--selected-chroma":t,"--selected-lightness":`${i}%`};return m`
       <div
         class=${w({"esp-color-picker":!0,hcl:this.mode==="hcl"})}
         style=${k(s)}
@@ -7,7 +7,7 @@ var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
         <div class="hue">
           <label for="hue-slider">Hue <span class="value">${this.hue}°</span></label>
           <input
-            ${p(this.hueInput)}
+            ${u(this.hueInput)}
             id="hue-slider"
             type="range"
             min="0"
@@ -21,7 +21,7 @@ var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
             >Chroma <span class="value">${(this.chroma/100).toFixed(3)}</span></label
           >
           <input
-            ${p(this.chromaInput)}
+            ${u(this.chromaInput)}
             id="chroma-slider"
             type="range"
             min="0"
@@ -35,7 +35,7 @@ var a=function(r,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                 >Lightness <span class="value">${this.lightness}%</span></label
               >
               <input
-                ${p(this.lightnessInput)}
+                ${u(this.lightnessInput)}
                 id="lightness-slider"
                 type="range"
                 min="0"

package/dist/date-picker/esp-date-picker.d.ts

@@ -74,7 +74,7 @@ export type { CalendarDay, DatePickerMode, ParsedValue } from "./helpers/types.j
  * <script>
  *   const form = document.getElementById("booking-form");
  *   const picker = findByTagName("esp-date-picker")[0];
- *   picker.addEventListener("value-changed", (event) => {
+ *   picker.addEventListener("esp-value-changed", (event) => {
  *     console.log("Selected:", event.detail);
  *   });
  * </script>
@@ -85,9 +85,11 @@ export type { CalendarDay, DatePickerMode, ParsedValue } from "./helpers/types.j
  * > as `temporal-polyfill` in the document `<head>` before using this
  * > component.
  *
- * @event {CustomEvent<string>} value-changed - Emitted when the
+ * @event {CustomEvent<string>} esp-value-changed - Emitted when the
  * user picks a date, time, or range. The event detail is the new
  * ISO 8601 value string.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed -
+ * Fired whenever constraint validation runs.
  *
  * @customElement esp-date-picker
  * @docPageTitle Date Picker
@@ -250,7 +252,7 @@ export declare class EspalierDatePicker extends EspalierElementBase implements E
      * Focus the date picker's text input.
      */
     focus(options?: FocusOptions): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid (delegates to ElementInternals). */
     checkValidity(): boolean;

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

@@ -95,7 +95,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           placeholder="Hour"
           width="3.25em"
           .value=${String(this._hour)}
-          @value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._hour=Number(e.detail.value),this._commitTime())}}
+          @esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._hour=Number(e.detail.value),this._commitTime())}}
         >
           ${I.map(e=>c`
               <esp-picker-item
@@ -113,7 +113,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           placeholder="Min"
           width="3.25em"
           .value=${String(this._minute)}
-          @value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._minute=Number(e.detail.value),this._commitTime())}}
+          @esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._minute=Number(e.detail.value),this._commitTime())}}
         >
           ${B.map(e=>c`
               <esp-picker-item
@@ -129,7 +129,7 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
           placeholder="AM/PM"
           width="3.75em"
           .value=${this._period}
-          @value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._period=e.detail.value,this._commitTime())}}
+          @esp-value-changed=${e=>{e.stopPropagation(),e.detail?.value&&(this._period=e.detail.value,this._commitTime())}}
         >
           <esp-picker-item
             text="AM"
@@ -145,14 +145,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
 
         <esp-button
           icon-only
-          @clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
+          @esp-clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${b}
         </esp-button>
         <esp-button
           icon-only
           intent="danger"
-          @clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
+          @esp-clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${S}
         </esp-button>
@@ -161,14 +161,14 @@ var n=function(m,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnP
       <div class="popover-actions">
         <esp-button
           icon-only
-          @clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
+          @esp-clicked=${()=>{this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${b}
         </esp-button>
         <esp-button
           icon-only
           intent="danger"
-          @clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
+          @esp-clicked=${()=>{this.value=this._valueOnOpen,this._closePopover(),this.inputRef.value?.focus()}}
         >
           ${S}
         </esp-button>

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

@@ -45,7 +45,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * @cssprop --esp-details-group-color-border - The border color
  * of the group container.
  *
- * @event {CustomEvent<{ openItem: EspalierDetails | null }>} esp-accordion-change -
+ * @event {CustomEvent<{ openItem: EspalierDetails | null }>} esp-details-group-change -
  * Fired when the currently open item changes.
  *
  * @docPageTitle Details Group

package/dist/details/esp-details-group.js

@@ -1,8 +1,8 @@
-var n=function(l,e,s,r){var t=arguments.length,o=t<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,e,s,r);else for(var a=l.length-1;a>=0;a--)(p=l[a])&&(o=(t<3?p(o):t>3?p(e,s,o):p(e,s))||o);return t>3&&o&&Object.defineProperty(e,s,o),o};import{css as c,html as f}from"lit";import{customElement as h,property as m}from"lit/decorators.js";import{createRef as g,ref as v}from"lit/directives/ref.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{EspalierDetails as d}from"./esp-details.js";let i=class extends u{constructor(){super(...arguments),this.itemsSlot=g(),this.exclusive=!0}getDetails(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()).filter(e=>e instanceof d):[]}applyGroupAttributes(){for(const e of this.getDetails())e.setAttribute("in-group","")}handleChildToggle(e){const s=e,r=e.composedPath().find(t=>t instanceof d);if(r&&s.detail.open&&this.exclusive){for(const t of this.getDetails())t!==r&&t.open&&t.close();this.dispatchEvent(new CustomEvent("esp-accordion-change",{detail:{openItem:r},bubbles:!0,composed:!0}))}}handleSlotChange(){this.applyGroupAttributes()}firstUpdated(e){super.firstUpdated(e),this.applyGroupAttributes()}render(){return f`
-      <div class="details-group" role="group" @esp-toggle=${this.handleChildToggle}>
+var n=function(l,e,s,r){var t=arguments.length,o=t<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(l,e,s,r);else for(var a=l.length-1;a>=0;a--)(p=l[a])&&(o=(t<3?p(o):t>3?p(e,s,o):p(e,s))||o);return t>3&&o&&Object.defineProperty(e,s,o),o};import{css as f,html as c}from"lit";import{customElement as h,property as m}from"lit/decorators.js";import{createRef as g,ref as v}from"lit/directives/ref.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{ESP_EVENTS as b}from"../shared/events.js";import{EspalierDetails as d}from"./esp-details.js";let i=class extends u{constructor(){super(...arguments),this.itemsSlot=g(),this.exclusive=!0}getDetails(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()).filter(e=>e instanceof d):[]}applyGroupAttributes(){for(const e of this.getDetails())e.setAttribute("in-group","")}handleChildToggle(e){const s=e,r=e.composedPath().find(t=>t instanceof d);if(r&&s.detail.open&&this.exclusive){for(const t of this.getDetails())t!==r&&t.open&&t.close();this.dispatchEvent(new CustomEvent(b.DETAILS_GROUP_CHANGE,{detail:{openItem:r},bubbles:!0,composed:!0}))}}handleSlotChange(){this.applyGroupAttributes()}firstUpdated(e){super.firstUpdated(e),this.applyGroupAttributes()}render(){return c`
+      <div class="details-group" role="group" @esp-details-toggle=${this.handleChildToggle}>
         <slot ${v(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
       </div>
-    `}};i.styles=[...u.styles,c`
+    `}};i.styles=[...u.styles,f`
       :host {
         display: block;
       }

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

@@ -60,7 +60,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * @cssprop --esp-details-size-padding - The padding inside the
  * content area and summary row.
  *
- * @event {CustomEvent<{ open: boolean }>} esp-toggle - Fired when
+ * @event {CustomEvent<{ open: boolean }>} esp-details-toggle - Fired when
  * the details element is opened or closed.
  *
  * ```html
@@ -69,7 +69,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </esp-details>
  * <script>
  *   const details = findByTagName("esp-details")[0];
- *   details.addEventListener("esp-toggle", (ev) => {
+ *   details.addEventListener("esp-details-toggle", (ev) => {
  *     console.log("Open:", ev.detail.open);
  *   });
  * </script>

package/dist/details/esp-details.js

@@ -1,4 +1,4 @@
-var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var a=i.length-1;a>=0;a--)(n=i[a])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as u,html as h}from"lit";import{customElement as b,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{disabledControl as g}from"../shared/style-fragments.js";let l=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent("esp-toggle",{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent("esp-toggle",{detail:{open:this.open},bubbles:!0,composed:!0}));const a=o.getBoundingClientRect().top-s;if(Math.abs(a)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,a)}})}render(){return h`
+var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as h,html as b}from"lit";import{customElement as f,property as c}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const p=t.scrollTop;Math.abs(p-r)>1&&(t.scrollTop=r)}else{const p=window.scrollY;Math.abs(p-r)>1&&window.scrollBy(0,l)}})}render(){return b`
       <details ?open=${this.open} @toggle=${this.handleToggle}>
         <summary @click=${this.handleSummaryClick}>
           <span class="indicator"></span>
@@ -8,7 +8,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
           <slot></slot>
         </div>
       </details>
-    `}};l.styles=[...m.styles,g(":host([disabled]) summary"),u`
+    `}};a.styles=[...m.styles,g(":host([disabled]) summary"),h`
       :host {
         display: block;
         overflow-anchor: none;
@@ -113,4 +113,4 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       :host([in-group]:last-of-type) details {
         border-bottom: none;
       }
-    `],d([c({type:String})],l.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],l.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),l=d([b("esp-details")],l);export{l as EspalierDetails};
+    `],d([c({type:String})],a.prototype,"summary",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([c({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([f("esp-details")],a);export{a as EspalierDetails};