@taprootio/espalier 3.8.0 → 4.0.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/action-state-lightness.js

@@ -1 +1 @@
-const T=.9,N=.88,_=.8;export{_ as BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR,T as BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR,N as BUTTON_INTERACTION_LIGHTNESS_FACTOR};
+const T=.88;export{T as BUTTON_INTERACTION_LIGHTNESS_FACTOR};

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

@@ -1,5 +1,6 @@
 import { type TemplateResult } from "lit";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
+export type ButtonIconPosition = "left" | "right";
 /**
  * Used to initiate a user action or link to another page.
  *
@@ -7,7 +8,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <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",
@@ -29,6 +30,27 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </div>
  * ```
  *
+ * Use `icon-position="left"` for a leading icon. The default `"right"`
+ * position keeps the icon trailing; both positions follow writing direction
+ * and therefore mirror in RTL.
+ *
+ * ```html
+ * <div style="display: flex; gap: var(--esp-size-padding);">
+ *   <esp-button
+ *     collapsed
+ *     label="Save"
+ *     icon="save"
+ *     icon-position="left">
+ *   </esp-button>
+ *   <esp-button
+ *     collapsed
+ *     label="Next"
+ *     icon="arrow-big-right"
+ *     icon-position="right">
+ *   </esp-button>
+ * </div>
+ * ```
+ *
  * @customElement esp-button
  * @slot - Optional custom SVG icon. Slotted icons override the
  * generated SVG from the `icon` attribute.
@@ -37,13 +59,13 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <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",
@@ -129,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>
@@ -180,6 +202,18 @@ export declare class EspalierButton extends EspalierElementBase {
      * @type {string}
      */
     icon: string;
+    /**
+     * Places the optional icon on the logical leading (`"left"`) or trailing
+     * (`"right"`) side of the label. Logical placement mirrors in RTL.
+     *
+     * ```html
+     * <esp-button label="Save" icon="save" icon-position="left"></esp-button>
+     * <esp-button label="Next" icon="arrow-big-right" icon-position="right"></esp-button>
+     * ```
+     *
+     * @type {"left" | "right"}
+     */
+    iconPosition: ButtonIconPosition;
     /**
      * The label of the button.
      *
@@ -199,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,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
+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,40 +10,40 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=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 o=class extends b{constructor(){super(...arguments),this.iconSlot=new T(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.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?p` <span>${N}</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 ${k(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
-        ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?w(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,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)}>
+    `}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}
               target=${this.target}
               rel=${this.rel||l}
               tabindex=${this.innerTabindex??l}
-              aria-label=${r}
+              aria-label=${i}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
             </a>
           </div>
-        `:p`
-          <div part="wrapper" class=${u(d)}>
+        `:c`
+          <div part="wrapper" class=${u(p)}>
             <button
               ?disabled=${this.disabled||this.loading}
               @click=${this.handleClick}
               type=${this.buttonType}
               tabindex=${this.innerTabindex??l}
-              aria-label=${r}
-              aria-pressed=${c}
+              aria-label=${i}
+              aria-pressed=${d}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
             </button>
           </div>
-        `}};o.styles=[...b.styles,f`
+        `}};e.styles=[...b.styles,f`
       :host {
         --_esp-button-radius: var(--esp-size-border-radius);
       }
@@ -81,15 +81,8 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
           }
 
           > span:nth-child(2) {
-            background-color: oklch(
-              from var(--esp-color-action-background)
-                calc(l * ${g}) c h
-            );
             display: none;
             place-content: center;
-            border-left: 1px dotted var(--esp-color-border);
-            border-bottom-right-radius: max(0px, calc(var(--_esp-button-radius) - 0.1rem));
-            border-top-right-radius: max(0px, calc(var(--_esp-button-radius) - 0.1rem));
             padding: var(--esp-button-padding, var(--esp-size-padding));
 
             .generated-icon,
@@ -101,6 +94,17 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
           }
         }
 
+        &.icon-left {
+          button,
+          a {
+            grid-template-columns: min-content auto;
+
+            > span:nth-child(2) {
+              order: -1;
+            }
+          }
+        }
+
         &.has-icon {
           button,
           a {
@@ -123,7 +127,6 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
             }
 
             > span:nth-child(2) {
-              background-color: var(--esp-color-action-background);
               border: none;
               border-radius: var(--_esp-button-radius);
             }
@@ -136,24 +139,12 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
         &:hover,
         &:focus-within {
           background-color: oklch(
-            from var(--esp-color-action-background) calc(l * ${$})
+            from var(--esp-color-action-background) calc(l * ${S})
               c h
           );
-
-          button,
-          a {
-            > span:nth-child(2) {
-              background-color: oklch(
-                from var(--esp-color-action-background)
-                  calc(l * ${S}) c h
-              );
-              border-color: oklch(from var(--esp-color-border) calc(l * 1.2) c h);
-            }
-          }
         }
 
         &.incognito {
-          grid-template-columns: min-content auto;
           background-color: transparent;
           border-color: transparent;
           color: var(--esp-color-text);
@@ -162,17 +153,27 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
           button,
           a {
             > span:nth-child(1) {
-              grid-column: 2;
-              justify-content: left;
+              justify-content: start;
               padding: var(--esp-button-incognito-padding, var(--esp-size-tiny)) 0;
-              padding-right: calc(2 * var(--esp-button-incognito-padding, var(--esp-size-tiny)));
+              padding-inline-end: calc(
+                2 * var(--esp-button-incognito-padding, var(--esp-size-tiny))
+              );
             }
 
             > span:nth-child(2) {
-              grid-row: 1;
-              grid-column: 1;
               background-color: transparent;
-              border-color: transparent;
+            }
+          }
+
+          &.icon-left {
+            button,
+            a {
+              > span:nth-child(1) {
+                padding-inline-start: calc(
+                  2 * var(--esp-button-incognito-padding, var(--esp-size-tiny))
+                );
+                padding-inline-end: 0;
+              }
             }
           }
 
@@ -193,17 +194,6 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
         &:has(button:disabled):hover,
         &:has(button:disabled):focus-within {
           background-color: var(--esp-color-action-background);
-
-          button,
-          a {
-            > span:nth-child(2) {
-              background-color: oklch(
-                from var(--esp-color-action-background)
-                  calc(l * ${g}) c h
-              );
-              border-color: var(--esp-color-border);
-            }
-          }
         }
 
         svg.rotate {
@@ -223,4 +213,4 @@ var n=function(h,t,i,e){var a=arguments.length,r=a<3?t:e===null?e=Object.getOwnP
           transform: rotate(360deg);
         }
       }
-    `],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};
+    `],n([v()],e.prototype,"innerTabindex",void 0),n([s({attribute:"button-type",type:String})],e.prototype,"buttonType",void 0),n([s({type:Boolean})],e.prototype,"collapsed",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0),n([s({type:String})],e.prototype,"href",void 0),n([s({attribute:"icon-only",type:Boolean})],e.prototype,"iconOnly",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"incognito",void 0),n([s({type:String})],e.prototype,"icon",void 0),n([s({attribute:"icon-position",type:String})],e.prototype,"iconPosition",void 0),n([s({type:String})],e.prototype,"label",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"loading",void 0),n([s({type:String})],e.prototype,"target",void 0),n([s({type:String})],e.prototype,"rel",void 0),n([s({attribute:"formnovalidate",type:Boolean})],e.prototype,"formNoValidate",void 0),n([m({capture:!1,passive:!0})],e.prototype,"handleClick",null),e=n([g("esp-button")],e);export{e as EspalierButton};

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"