@taprootio/espalier 4.14.0 → 4.14.1

package/dist/info/esp-info.js

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

package/dist/page/esp-page.styles.js

@@ -418,7 +418,8 @@ import{css as a,unsafeCSS as e}from"lit";import{EspalierElementBase as i}from"..
         grid-column: main;
         grid-row: content;
         position: relative;
-        overflow: hidden;
+        
+        overflow: clip;
         
         background: var(--esp-page-main-background, transparent);
         

package/dist/status-indicator/esp-status-indicator.js

@@ -137,6 +137,9 @@ var n=function(t,e,o,a){var l=arguments.length,i=l<3?e:a===null?a=Object.getOwnP
       }
 
       .status-popover {
+        
+        white-space: normal;
+        overflow-wrap: anywhere;
         max-width: var(--esp-status-indicator-popover-max-width, 32ch);
         border: 1px solid var(--esp-color-border);
         border-radius: var(--esp-size-border-radius);

package/dist/tooltip/esp-tooltip.js

@@ -1,4 +1,4 @@
-var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(a,e,t,n);else for(var d=a.length-1;d>=0;d--)(l=a[d])&&(r=(p<3?l(r):p>3?l(e,t,r):l(e,t))||r);return p>3&&r&&Object.defineProperty(e,t,r),r};import{css as f,html as u,nothing as b}from"lit";import{customElement as y,property as s}from"lit/decorators.js";import{createRef as h,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import"../popover/esp-popover.js";import{syncDescribedByTokens as v}from"../shared/aria-describedby.js";let x=0,i=class extends g{constructor(){super(...arguments),this.popoverRef=h(),this.contentRef=h(),this.tooltipId=`esp-tooltip-${++x}`,this.text="",this.attach="above",this.align="center",this.offset="4px",this.showDelay=300,this.hideDelay=100,this.triggerTabindexBacker=0,this.triggerTabindexExplicit=!1,this.handleKeydown=e=>{e.key==="Escape"&&this.popoverRef.value?.closePopover()},this.handleSlotChange=()=>{this.requestUpdate(),this.syncTriggerDescribedBy()}}get triggerTabindex(){return this.triggerTabindexBacker}set triggerTabindex(e){const t=this.triggerTabindexBacker;this.triggerTabindexExplicit=e!==null,this.triggerTabindexBacker=e!==null&&Number.isFinite(e)?e:0,this.requestUpdate("triggerTabindex",t)}get effectiveTriggerTabindex(){return this.triggerTabindexExplicit?this.triggerTabindex:this.hasButtonTrigger()?-1:0}hasButtonTrigger(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE")?.tagName;return e==="BUTTON"||e==="ESP-BUTTON"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e);const t=this.querySelector("template");t&&this.contentRef.value&&this.contentRef.value.appendChild(t.content.cloneNode(!0)),this.syncTriggerDescribedBy()}updated(e){super.updated(e),e.has("triggerTabindex")&&this.syncTriggerDescribedBy()}syncTriggerDescribedBy(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE");e&&v(e,{add:this.effectiveTriggerTabindex<0?[this.tooltipId]:[],remove:[this.tooltipId]})}render(){return u`
+var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(a,e,t,n);else for(var d=a.length-1;d>=0;d--)(l=a[d])&&(r=(p<3?l(r):p>3?l(e,t,r):l(e,t))||r);return p>3&&r&&Object.defineProperty(e,t,r),r};import{css as f,html as u,nothing as y}from"lit";import{customElement as b,property as s}from"lit/decorators.js";import{createRef as h,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import"../popover/esp-popover.js";import{syncDescribedByTokens as v}from"../shared/aria-describedby.js";let x=0,i=class extends g{constructor(){super(...arguments),this.popoverRef=h(),this.contentRef=h(),this.tooltipId=`esp-tooltip-${++x}`,this.text="",this.attach="above",this.align="center",this.offset="4px",this.showDelay=300,this.hideDelay=100,this.triggerTabindexBacker=0,this.triggerTabindexExplicit=!1,this.handleKeydown=e=>{e.key==="Escape"&&this.popoverRef.value?.closePopover()},this.handleSlotChange=()=>{this.requestUpdate(),this.syncTriggerDescribedBy()}}get triggerTabindex(){return this.triggerTabindexBacker}set triggerTabindex(e){const t=this.triggerTabindexBacker;this.triggerTabindexExplicit=e!==null,this.triggerTabindexBacker=e!==null&&Number.isFinite(e)?e:0,this.requestUpdate("triggerTabindex",t)}get effectiveTriggerTabindex(){return this.triggerTabindexExplicit?this.triggerTabindex:this.hasButtonTrigger()?-1:0}hasButtonTrigger(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE")?.tagName;return e==="BUTTON"||e==="ESP-BUTTON"}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeydown)}firstUpdated(e){super.firstUpdated(e);const t=this.querySelector("template");t&&this.contentRef.value&&this.contentRef.value.appendChild(t.content.cloneNode(!0)),this.syncTriggerDescribedBy()}updated(e){super.updated(e),e.has("triggerTabindex")&&this.syncTriggerDescribedBy()}syncTriggerDescribedBy(){const e=Array.from(this.children).find(t=>t.tagName!=="TEMPLATE");e&&v(e,{add:this.effectiveTriggerTabindex<0?[this.tooltipId]:[],remove:[this.tooltipId]})}render(){return u`
       <esp-popover
         ${c(this.popoverRef)}
         trigger="focus-hover"
@@ -23,7 +23,7 @@ var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnP
           role="tooltip"
           class="tooltip-content"
         >
-          ${this.text?this.text:b}
+          ${this.text?this.text:y}
         </div>
       </esp-popover>
     `}};i.styles=[...g.styles,f`
@@ -44,6 +44,9 @@ var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnP
       }
 
       .tooltip-content {
+        
+        white-space: normal;
+        overflow-wrap: anywhere;
         background: var(--esp-tooltip-background, var(--esp-color-layer-1));
         color: var(--esp-tooltip-color, var(--esp-color-text));
         border: var(--esp-tooltip-border, 1px solid var(--esp-color-border));
@@ -54,4 +57,4 @@ var o=function(a,e,t,n){var p=arguments.length,r=p<3?e:n===null?n=Object.getOwnP
         box-shadow: var(--esp-tooltip-shadow, 2px 2px 4px var(--esp-color-shadow));
         line-height: 1.4;
       }
-    `],o([s({type:String})],i.prototype,"text",void 0),o([s({type:String})],i.prototype,"attach",void 0),o([s({type:String})],i.prototype,"align",void 0),o([s({type:String})],i.prototype,"offset",void 0),o([s({attribute:"show-delay",type:Number})],i.prototype,"showDelay",void 0),o([s({attribute:"hide-delay",type:Number})],i.prototype,"hideDelay",void 0),o([s({attribute:"trigger-tabindex",type:Number,hasChanged:()=>!0})],i.prototype,"triggerTabindex",null),i=o([y("esp-tooltip")],i);export{i as EspalierTooltip};
+    `],o([s({type:String})],i.prototype,"text",void 0),o([s({type:String})],i.prototype,"attach",void 0),o([s({type:String})],i.prototype,"align",void 0),o([s({type:String})],i.prototype,"offset",void 0),o([s({attribute:"show-delay",type:Number})],i.prototype,"showDelay",void 0),o([s({attribute:"hide-delay",type:Number})],i.prototype,"hideDelay",void 0),o([s({attribute:"trigger-tabindex",type:Number,hasChanged:()=>!0})],i.prototype,"triggerTabindex",null),i=o([b("esp-tooltip")],i);export{i as EspalierTooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.14.0",
+  "version": "4.14.1",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",