@taprootio/espalier 2.1.2 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
|
@@ -5862,147 +5862,6 @@
|
|
|
5862
5862
|
}
|
|
5863
5863
|
]
|
|
5864
5864
|
},
|
|
5865
|
-
{
|
|
5866
|
-
"kind": "javascript-module",
|
|
5867
|
-
"path": "dist/burger/esp-burger.js",
|
|
5868
|
-
"declarations": [
|
|
5869
|
-
{
|
|
5870
|
-
"kind": "class",
|
|
5871
|
-
"description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
|
|
5872
|
-
"name": "EspalierBurger",
|
|
5873
|
-
"cssProperties": [
|
|
5874
|
-
{
|
|
5875
|
-
"description": "The color of the burger lines when closed.",
|
|
5876
|
-
"name": "--esp-color-burger"
|
|
5877
|
-
},
|
|
5878
|
-
{
|
|
5879
|
-
"description": "The hover color of the burger lines when closed.",
|
|
5880
|
-
"name": "--esp-color-burger-hover"
|
|
5881
|
-
},
|
|
5882
|
-
{
|
|
5883
|
-
"description": "The color of the burger lines when open.",
|
|
5884
|
-
"name": "--esp-color-burger-opened"
|
|
5885
|
-
},
|
|
5886
|
-
{
|
|
5887
|
-
"description": "The hover color of the burger lines when open.",
|
|
5888
|
-
"name": "--esp-color-burger-opened-hover"
|
|
5889
|
-
},
|
|
5890
|
-
{
|
|
5891
|
-
"description": "The stroke width of the burger lines.",
|
|
5892
|
-
"name": "--esp-size-burger-stroke"
|
|
5893
|
-
}
|
|
5894
|
-
],
|
|
5895
|
-
"members": [
|
|
5896
|
-
{
|
|
5897
|
-
"kind": "field",
|
|
5898
|
-
"name": "menuOpen",
|
|
5899
|
-
"type": {
|
|
5900
|
-
"text": "boolean"
|
|
5901
|
-
},
|
|
5902
|
-
"privacy": "public",
|
|
5903
|
-
"default": "false",
|
|
5904
|
-
"description": "Whether or not the burger indicates an open state.",
|
|
5905
|
-
"attribute": "menu-open"
|
|
5906
|
-
},
|
|
5907
|
-
{
|
|
5908
|
-
"kind": "field",
|
|
5909
|
-
"name": "presentationOnly",
|
|
5910
|
-
"type": {
|
|
5911
|
-
"text": "boolean"
|
|
5912
|
-
},
|
|
5913
|
-
"privacy": "public",
|
|
5914
|
-
"default": "false",
|
|
5915
|
-
"description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
|
|
5916
|
-
"attribute": "presentation-only"
|
|
5917
|
-
},
|
|
5918
|
-
{
|
|
5919
|
-
"kind": "method",
|
|
5920
|
-
"name": "toggleMenu"
|
|
5921
|
-
}
|
|
5922
|
-
],
|
|
5923
|
-
"events": [
|
|
5924
|
-
{
|
|
5925
|
-
"name": "opened",
|
|
5926
|
-
"type": {
|
|
5927
|
-
"text": "CustomEvent"
|
|
5928
|
-
},
|
|
5929
|
-
"description": "Emitted when the button is clicked and the image changes from a burger to an X."
|
|
5930
|
-
},
|
|
5931
|
-
{
|
|
5932
|
-
"name": "closed",
|
|
5933
|
-
"type": {
|
|
5934
|
-
"text": "CustomEvent"
|
|
5935
|
-
},
|
|
5936
|
-
"description": "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\", () => { 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\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
|
|
5937
|
-
}
|
|
5938
|
-
],
|
|
5939
|
-
"attributes": [
|
|
5940
|
-
{
|
|
5941
|
-
"name": "menu-open",
|
|
5942
|
-
"type": {
|
|
5943
|
-
"text": "boolean"
|
|
5944
|
-
},
|
|
5945
|
-
"default": "false",
|
|
5946
|
-
"description": "Whether or not the burger indicates an open state.",
|
|
5947
|
-
"fieldName": "menuOpen"
|
|
5948
|
-
},
|
|
5949
|
-
{
|
|
5950
|
-
"name": "presentation-only",
|
|
5951
|
-
"type": {
|
|
5952
|
-
"text": "boolean"
|
|
5953
|
-
},
|
|
5954
|
-
"default": "false",
|
|
5955
|
-
"description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
|
|
5956
|
-
"fieldName": "presentationOnly"
|
|
5957
|
-
}
|
|
5958
|
-
],
|
|
5959
|
-
"superclass": {
|
|
5960
|
-
"name": "LitElement",
|
|
5961
|
-
"package": "lit"
|
|
5962
|
-
},
|
|
5963
|
-
"docPageTitle": {
|
|
5964
|
-
"name": "Burger",
|
|
5965
|
-
"description": ""
|
|
5966
|
-
},
|
|
5967
|
-
"docUrl": {
|
|
5968
|
-
"name": "/components/burger",
|
|
5969
|
-
"description": ""
|
|
5970
|
-
},
|
|
5971
|
-
"menuGroup": {
|
|
5972
|
-
"name": "Interaction",
|
|
5973
|
-
"description": ""
|
|
5974
|
-
},
|
|
5975
|
-
"menuLabel": {
|
|
5976
|
-
"name": "Burger",
|
|
5977
|
-
"description": ""
|
|
5978
|
-
},
|
|
5979
|
-
"menuIcon": {
|
|
5980
|
-
"name": "burger",
|
|
5981
|
-
"description": ""
|
|
5982
|
-
},
|
|
5983
|
-
"tagName": "esp-burger",
|
|
5984
|
-
"customElement": true
|
|
5985
|
-
}
|
|
5986
|
-
],
|
|
5987
|
-
"exports": [
|
|
5988
|
-
{
|
|
5989
|
-
"kind": "js",
|
|
5990
|
-
"name": "EspalierBurger",
|
|
5991
|
-
"declaration": {
|
|
5992
|
-
"name": "EspalierBurger",
|
|
5993
|
-
"module": "dist/burger/esp-burger.js"
|
|
5994
|
-
}
|
|
5995
|
-
},
|
|
5996
|
-
{
|
|
5997
|
-
"kind": "custom-element-definition",
|
|
5998
|
-
"name": "esp-burger",
|
|
5999
|
-
"declaration": {
|
|
6000
|
-
"name": "EspalierBurger",
|
|
6001
|
-
"module": "dist/burger/esp-burger.js"
|
|
6002
|
-
}
|
|
6003
|
-
}
|
|
6004
|
-
]
|
|
6005
|
-
},
|
|
6006
5865
|
{
|
|
6007
5866
|
"kind": "javascript-module",
|
|
6008
5867
|
"path": "dist/breadcrumbs/esp-breadcrumb.js",
|
|
@@ -6784,6 +6643,147 @@
|
|
|
6784
6643
|
}
|
|
6785
6644
|
]
|
|
6786
6645
|
},
|
|
6646
|
+
{
|
|
6647
|
+
"kind": "javascript-module",
|
|
6648
|
+
"path": "dist/burger/esp-burger.js",
|
|
6649
|
+
"declarations": [
|
|
6650
|
+
{
|
|
6651
|
+
"kind": "class",
|
|
6652
|
+
"description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
|
|
6653
|
+
"name": "EspalierBurger",
|
|
6654
|
+
"cssProperties": [
|
|
6655
|
+
{
|
|
6656
|
+
"description": "The color of the burger lines when closed.",
|
|
6657
|
+
"name": "--esp-color-burger"
|
|
6658
|
+
},
|
|
6659
|
+
{
|
|
6660
|
+
"description": "The hover color of the burger lines when closed.",
|
|
6661
|
+
"name": "--esp-color-burger-hover"
|
|
6662
|
+
},
|
|
6663
|
+
{
|
|
6664
|
+
"description": "The color of the burger lines when open.",
|
|
6665
|
+
"name": "--esp-color-burger-opened"
|
|
6666
|
+
},
|
|
6667
|
+
{
|
|
6668
|
+
"description": "The hover color of the burger lines when open.",
|
|
6669
|
+
"name": "--esp-color-burger-opened-hover"
|
|
6670
|
+
},
|
|
6671
|
+
{
|
|
6672
|
+
"description": "The stroke width of the burger lines.",
|
|
6673
|
+
"name": "--esp-size-burger-stroke"
|
|
6674
|
+
}
|
|
6675
|
+
],
|
|
6676
|
+
"members": [
|
|
6677
|
+
{
|
|
6678
|
+
"kind": "field",
|
|
6679
|
+
"name": "menuOpen",
|
|
6680
|
+
"type": {
|
|
6681
|
+
"text": "boolean"
|
|
6682
|
+
},
|
|
6683
|
+
"privacy": "public",
|
|
6684
|
+
"default": "false",
|
|
6685
|
+
"description": "Whether or not the burger indicates an open state.",
|
|
6686
|
+
"attribute": "menu-open"
|
|
6687
|
+
},
|
|
6688
|
+
{
|
|
6689
|
+
"kind": "field",
|
|
6690
|
+
"name": "presentationOnly",
|
|
6691
|
+
"type": {
|
|
6692
|
+
"text": "boolean"
|
|
6693
|
+
},
|
|
6694
|
+
"privacy": "public",
|
|
6695
|
+
"default": "false",
|
|
6696
|
+
"description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
|
|
6697
|
+
"attribute": "presentation-only"
|
|
6698
|
+
},
|
|
6699
|
+
{
|
|
6700
|
+
"kind": "method",
|
|
6701
|
+
"name": "toggleMenu"
|
|
6702
|
+
}
|
|
6703
|
+
],
|
|
6704
|
+
"events": [
|
|
6705
|
+
{
|
|
6706
|
+
"name": "opened",
|
|
6707
|
+
"type": {
|
|
6708
|
+
"text": "CustomEvent"
|
|
6709
|
+
},
|
|
6710
|
+
"description": "Emitted when the button is clicked and the image changes from a burger to an X."
|
|
6711
|
+
},
|
|
6712
|
+
{
|
|
6713
|
+
"name": "closed",
|
|
6714
|
+
"type": {
|
|
6715
|
+
"text": "CustomEvent"
|
|
6716
|
+
},
|
|
6717
|
+
"description": "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\", () => { 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\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
|
|
6718
|
+
}
|
|
6719
|
+
],
|
|
6720
|
+
"attributes": [
|
|
6721
|
+
{
|
|
6722
|
+
"name": "menu-open",
|
|
6723
|
+
"type": {
|
|
6724
|
+
"text": "boolean"
|
|
6725
|
+
},
|
|
6726
|
+
"default": "false",
|
|
6727
|
+
"description": "Whether or not the burger indicates an open state.",
|
|
6728
|
+
"fieldName": "menuOpen"
|
|
6729
|
+
},
|
|
6730
|
+
{
|
|
6731
|
+
"name": "presentation-only",
|
|
6732
|
+
"type": {
|
|
6733
|
+
"text": "boolean"
|
|
6734
|
+
},
|
|
6735
|
+
"default": "false",
|
|
6736
|
+
"description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
|
|
6737
|
+
"fieldName": "presentationOnly"
|
|
6738
|
+
}
|
|
6739
|
+
],
|
|
6740
|
+
"superclass": {
|
|
6741
|
+
"name": "LitElement",
|
|
6742
|
+
"package": "lit"
|
|
6743
|
+
},
|
|
6744
|
+
"docPageTitle": {
|
|
6745
|
+
"name": "Burger",
|
|
6746
|
+
"description": ""
|
|
6747
|
+
},
|
|
6748
|
+
"docUrl": {
|
|
6749
|
+
"name": "/components/burger",
|
|
6750
|
+
"description": ""
|
|
6751
|
+
},
|
|
6752
|
+
"menuGroup": {
|
|
6753
|
+
"name": "Interaction",
|
|
6754
|
+
"description": ""
|
|
6755
|
+
},
|
|
6756
|
+
"menuLabel": {
|
|
6757
|
+
"name": "Burger",
|
|
6758
|
+
"description": ""
|
|
6759
|
+
},
|
|
6760
|
+
"menuIcon": {
|
|
6761
|
+
"name": "burger",
|
|
6762
|
+
"description": ""
|
|
6763
|
+
},
|
|
6764
|
+
"tagName": "esp-burger",
|
|
6765
|
+
"customElement": true
|
|
6766
|
+
}
|
|
6767
|
+
],
|
|
6768
|
+
"exports": [
|
|
6769
|
+
{
|
|
6770
|
+
"kind": "js",
|
|
6771
|
+
"name": "EspalierBurger",
|
|
6772
|
+
"declaration": {
|
|
6773
|
+
"name": "EspalierBurger",
|
|
6774
|
+
"module": "dist/burger/esp-burger.js"
|
|
6775
|
+
}
|
|
6776
|
+
},
|
|
6777
|
+
{
|
|
6778
|
+
"kind": "custom-element-definition",
|
|
6779
|
+
"name": "esp-burger",
|
|
6780
|
+
"declaration": {
|
|
6781
|
+
"name": "EspalierBurger",
|
|
6782
|
+
"module": "dist/burger/esp-burger.js"
|
|
6783
|
+
}
|
|
6784
|
+
}
|
|
6785
|
+
]
|
|
6786
|
+
},
|
|
6787
6787
|
{
|
|
6788
6788
|
"kind": "javascript-module",
|
|
6789
6789
|
"path": "dist/button/esp-button-group.js",
|
|
@@ -45504,6 +45504,12 @@
|
|
|
45504
45504
|
"kind": "javascript-module",
|
|
45505
45505
|
"path": "dist/shared/style-fragments.js",
|
|
45506
45506
|
"declarations": [
|
|
45507
|
+
{
|
|
45508
|
+
"kind": "variable",
|
|
45509
|
+
"name": "alignAttributeTextInheritance",
|
|
45510
|
+
"default": "css` :host([align]) { text-align: inherit; } `",
|
|
45511
|
+
"description": "Chromium maps `align` on autonomous custom elements to the obsolete HTML\npresentational hint `text-align`. Espalier uses the attribute for geometric\nplacement, so restore normal text-alignment inheritance on affected hosts."
|
|
45512
|
+
},
|
|
45507
45513
|
{
|
|
45508
45514
|
"kind": "variable",
|
|
45509
45515
|
"name": "srOnly",
|
|
@@ -45559,6 +45565,14 @@
|
|
|
45559
45565
|
}
|
|
45560
45566
|
],
|
|
45561
45567
|
"exports": [
|
|
45568
|
+
{
|
|
45569
|
+
"kind": "js",
|
|
45570
|
+
"name": "alignAttributeTextInheritance",
|
|
45571
|
+
"declaration": {
|
|
45572
|
+
"name": "alignAttributeTextInheritance",
|
|
45573
|
+
"module": "dist/shared/style-fragments.js"
|
|
45574
|
+
}
|
|
45575
|
+
},
|
|
45562
45576
|
{
|
|
45563
45577
|
"kind": "js",
|
|
45564
45578
|
"name": "srOnly",
|
|
@@ -248,7 +248,7 @@ export declare class EspalierPopover extends LitElement {
|
|
|
248
248
|
protected updated(changedProperties: PropertyValues): void;
|
|
249
249
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
250
250
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
251
|
-
static styles: import("lit").CSSResult;
|
|
251
|
+
static styles: import("lit").CSSResult[];
|
|
252
252
|
}
|
|
253
253
|
declare global {
|
|
254
254
|
interface HTMLElementTagNameMap {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,e):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,r);else for(var s=u.length-1;s>=0;s--)(l=u[s])&&(i=(o<3?l(i):o>3?l(t,e,i):l(t,e))||i);return o>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as m,css as y,html as b}from"lit";import{customElement as T,property as c,state as w}from"lit/decorators.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{PopoverController as D}from"../shared/popover-controller.js";function g(u){const t=[];let e=u;for(;e&&e.closest;){const r=e["linked-popover"];if(r){e=r;continue}const o=e.closest("esp-popover");if(o)t.push(o),e=o.parentElement||o.getRootNode()?.host;else{const i=e.getRootNode();i instanceof ShadowRoot?e=i.host:e=void 0}}return t}let
|
|
1
|
+
var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,e):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,r);else for(var s=u.length-1;s>=0;s--)(l=u[s])&&(i=(o<3?l(i):o>3?l(t,e,i):l(t,e))||i);return o>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as m,css as y,html as b}from"lit";import{customElement as T,property as c,state as w}from"lit/decorators.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{PopoverController as D}from"../shared/popover-controller.js";import{alignAttributeTextInheritance as P}from"../shared/style-fragments.js";function g(u){const t=[];let e=u;for(;e&&e.closest;){const r=e["linked-popover"];if(r){e=r;continue}const o=e.closest("esp-popover");if(o)t.push(o),e=o.parentElement||o.getRootNode()?.host;else{const i=e.getRootNode();i instanceof ShadowRoot?e=i.host:e=void 0}}return t}let E=0,h=class extends m{constructor(){super(...arguments),this.popoverOpen=!1,this.thePopover=f(),this.popoverSlot=f(),this.targetSlot=f(),this.attachTo=null,this.showDelayTimer=null,this.hideDelayTimer=null,this.isHovered=!1,this.isFocused=!1,this.popoverId=`esp-popover-${++E}`,this.popoverCtrl=new D({host:this,closeStrategy:"skip-list",isOpen:()=>this.popoverOpen,onShouldClose:()=>this.closePopover(),onPositionUpdate:()=>this.positionPopover()}),this.attach="below",this.align="start",this.offset="",this.offsetX=0,this.offsetY=0,this.trigger="click",this.showDelay=0,this.hideDelay=0,this.closePopover=()=>{this.cancelDelays();const t=this.thePopover.value;if(t){try{t.hidePopover()}catch{}this.popoverCtrl.stopTracking(),this.popoverOpen=!1,this.dispatchEvent(new CustomEvent("popover-closed",{bubbles:!0,composed:!0}))}},this.openPopover=()=>{this.scheduleOpen()},this.updatePosition=()=>{this.popoverOpen&&this.positionPopover()},this.toggleOpen=t=>{if(this.trigger==="click")if(t.stopPropagation(),this.popoverOpen)this.closePopover();else{const e=g(this);this.popoverCtrl.publishCloseExcept(e),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}}}cancelDelays(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null)}scheduleOpen(){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null),!this.popoverOpen&&(this.showDelay>0&&this.showDelayTimer===null?this.showDelayTimer=setTimeout(()=>{this.showDelayTimer=null,this.doOpen()},this.showDelay):this.showDelay<=0&&this.doOpen())}scheduleClose(){this.showDelayTimer!==null&&(clearTimeout(this.showDelayTimer),this.showDelayTimer=null),this.popoverOpen&&(this.hideDelay>0&&this.hideDelayTimer===null?this.hideDelayTimer=setTimeout(()=>{this.hideDelayTimer=null,this.closePopover()},this.hideDelay):this.hideDelay<=0&&this.closePopover())}doOpen(){if(this.popoverOpen)return;const t=g(this);this.popoverCtrl.publishCloseExcept(t),this.popoverOpen=!0,this.positionPopover(),this.popoverCtrl.startTracking(),this.dispatchEvent(new CustomEvent("popover-opened",{bubbles:!0,composed:!0}))}positionPopover(){const t=this.thePopover.value;if(!t||!this.attachTo)return;const e=this.attachTo.getBoundingClientRect(),r=this.offset.length?this.offset:"0px";t.matches(":popover-open")||t.showPopover();const o=t.getBoundingClientRect(),i=window.innerHeight||document.documentElement.clientHeight,l=window.innerWidth||document.documentElement.clientWidth;let s=this.attach;s==="above"&&e.top<o.height&&i-e.bottom>e.top?s="below":s==="below"&&i-e.bottom<o.height&&e.top>i-e.bottom?s="above":s==="left"&&e.left<o.width&&l-e.right>e.left?s="right":s==="right"&&l-e.right<o.width&&e.left>l-e.right&&(s="left");let p="0px",a="0px";switch(s){case"above":p=`calc(${e.top-o.height}px - ${r})`;break;case"below":p=`calc(${e.bottom}px + ${r})`;break;case"left":a=`calc(${e.left-o.width}px - ${r})`;break;case"right":a=`calc(${e.right}px + ${r})`;break}if(s==="above"||s==="below")switch(this.align){case"start":a=`${e.left}px`;break;case"center":a=`${e.left+e.width/2-o.width/2}px`;break;case"end":a=`${e.right-o.width}px`;break}else switch(this.align){case"start":p=`${e.top}px`;break;case"center":p=`${e.top+e.height/2-o.height/2}px`;break;case"end":p=`${e.bottom-o.height}px`;break}this.offsetX!==0&&(a=`calc(${a} + ${this.offsetX}px)`),this.offsetY!==0&&(p=`calc(${p} + ${this.offsetY}px)`),t.style.top=p,t.style.left=a,requestAnimationFrame(()=>{const d=t.getBoundingClientRect();d.right>l&&(t.style.left=`${l-d.width}px`),d.left<0&&(t.style.left="0px")})}handleHoverEnter(){this.isHovered=!0,this.scheduleOpen()}handleHoverLeave(){if(this.isHovered=!1,this.trigger==="focus-hover"&&this.isFocused){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}handleFocusIn(){this.isFocused=!0,this.scheduleOpen()}handleFocusOut(){if(this.isFocused=!1,this.trigger==="focus-hover"&&this.isHovered){this.hideDelayTimer!==null&&(clearTimeout(this.hideDelayTimer),this.hideDelayTimer=null);return}this.scheduleClose()}disconnectedCallback(){super.disconnectedCallback(),this.cancelDelays()}updated(t){t.has("trigger")&&(this.isHovered=!1,this.isFocused=!1,this.cancelDelays())}firstUpdated(t){let e=this.targetSlot.value.assignedElements()[0];for(;e instanceof HTMLSlotElement;)e=e.assignedElements()[0];this.attachTo=e;const r=this.thePopover.value;r&&(r.setAttribute("popover","manual"),r.id=this.popoverId);const o=this.popoverSlot.value?.assignedElements();if(o?.length){let i=o[0];for(;i instanceof HTMLSlotElement;)i=i.assignedElements()[0];i&&(i["linked-popover"]=this,i.addEventListener("click",l=>{l.stopPropagation();const s=[this,...g(this)];this.popoverCtrl.publishCloseExcept(s)}))}}render(){return b`
|
|
2
2
|
<slot
|
|
3
3
|
${v(this.targetSlot)}
|
|
4
4
|
@click=${t=>{this.trigger==="click"&&this.toggleOpen(t)}}
|
|
@@ -16,21 +16,21 @@ var n=function(u,t,e,r){var o=arguments.length,i=o<3?t:r===null?r=Object.getOwnP
|
|
|
16
16
|
>
|
|
17
17
|
<slot name="popover" ${v(this.popoverSlot)}></slot>
|
|
18
18
|
</div>
|
|
19
|
-
`}};h.styles=y`
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
`}};h.styles=[P,y`
|
|
20
|
+
:host {
|
|
21
|
+
position: relative;
|
|
22
|
+
display: flex;
|
|
23
|
+
place-content: center;
|
|
24
|
+
}
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
div.popover-content {
|
|
27
|
+
position: fixed;
|
|
28
|
+
inset: unset;
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: 0;
|
|
31
|
+
border: none;
|
|
32
|
+
background: none;
|
|
33
|
+
overflow: visible;
|
|
34
|
+
color: var(--esp-color-text);
|
|
35
|
+
}
|
|
36
|
+
`],n([w()],h.prototype,"popoverOpen",void 0),n([c({attribute:"attach",type:String})],h.prototype,"attach",void 0),n([c({attribute:"align",type:String})],h.prototype,"align",void 0),n([c({attribute:"offset",type:String})],h.prototype,"offset",void 0),n([c({attribute:"offset-x",type:Number})],h.prototype,"offsetX",void 0),n([c({attribute:"offset-y",type:Number})],h.prototype,"offsetY",void 0),n([c({attribute:"trigger",type:String})],h.prototype,"trigger",void 0),n([c({attribute:"show-delay",type:Number})],h.prototype,"showDelay",void 0),n([c({attribute:"hide-delay",type:Number})],h.prototype,"hideDelay",void 0),h=n([T("esp-popover")],h);export{h as EspalierPopover};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var p=function(g,e,t,
|
|
1
|
+
var p=function(g,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(g,e,t,r);else for(var c=g.length-1;c>=0;c--)(a=g[c])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as x,LitElement as E}from"lit";import{property as m,state as I}from"lit/decorators.js";import{getEspBus as V}from"./bus-events.js";import{traverseToClosest as S}from"./utilities.js";import{parseOklch as A,serializeOklch as y,gamutMapToSRGB as O,deriveSemantic as L,deriveSemanticWithContrast as U}from"./color-engine.js";import{computeVariants as T}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as R,semanticToCSS as P}from"./theme.js";import{alignAttributeTextInheritance as _,focusRing as z}from"./style-fragments.js";class n extends E{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.applyVariantTokens()},this.handleIconSpriteUrlChanged=e=>{const t=this.syncRootFromDom(!1);!t||e.correlationId!==t.correlationId||this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback(),this.subscribeToRootEvents(),this.hasUpdated&&this.syncRootFromDom(!1)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=S(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,(r||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),r&&this.requestUpdate(),t}subscribeToRootEvents(){if(this.rootEventSubscriptionsActive)return;const e=V();e.subscribe("seed-color-changed",this.handleSeedColorChanged),e.subscribe("scheme-changed",this.handleSchemeChanged),e.subscribe("theme-changed",this.handleThemeChanged),e.subscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!0}unsubscribeFromRootEvents(){if(!this.rootEventSubscriptionsActive)return;const e=V();e.unsubscribe("seed-color-changed",this.handleSeedColorChanged),e.unsubscribe("scheme-changed",this.handleSchemeChanged),e.unsubscribe("theme-changed",this.handleThemeChanged),e.unsubscribe("icon-sprite-url-changed",this.handleIconSpriteUrlChanged),this.rootEventSubscriptionsActive=!1}traverseToClosest(e){return S(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,r=A(t.seedColor);if(!r)return;const s=T(r,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",y(O(s)));const a=T(s,t),c=n.statusVariantSources.has(e),{textContrast:k}=n,f={};for(const i of R){if(k[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),b=a[d],v=t.lightness[l.lightness],u=L(b,v,h.min,h.max);f[i]=u,this.setVariantTokenProperty(P(i),y(u))}for(const i of R){const l=k[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],b=this.effectiveVariantTokenSource(i,h.source,c),v=a[b],u=t.lightness[h.lightness],w=f[l.bg],C=U(v,u,d.min,d.max,w,l.targetLc);f[i]=C,this.setVariantTokenProperty(P(i),y(C))}}effectiveVariantTokenSource(e,t,r){return r&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const r=this.variantTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast={text:{bg:"background",targetLc:75},dangerText:{bg:"background",targetLc:75},headings:{bg:"background",targetLc:60},headingsHover:{bg:"background",targetLc:60},link:{bg:"background",targetLc:75},linkHover:{bg:"background",targetLc:75},actionText:{bg:"actionBackground",targetLc:75},inputCaret:{bg:"layer2",targetLc:60},inputSelection:{bg:"inputSelectionBg",targetLc:60}},n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[z(".esp-field:focus-within","--esp-field-focus-shadow"),_,x`
|
|
2
2
|
:host {
|
|
3
3
|
|
|
4
4
|
--_esp-field-resolved-hover-bg: var(
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import{css as
|
|
1
|
+
import{css as n,unsafeCSS as t}from"lit";const a=n`
|
|
2
|
+
:host([align]) {
|
|
3
|
+
text-align: inherit;
|
|
4
|
+
}
|
|
5
|
+
`,d=n`
|
|
2
6
|
.sr-only {
|
|
3
7
|
position: absolute;
|
|
4
8
|
width: 1px;
|
|
@@ -10,14 +14,14 @@ import{css as i,unsafeCSS as n}from"lit";const e=i`
|
|
|
10
14
|
white-space: nowrap;
|
|
11
15
|
border: 0;
|
|
12
16
|
}
|
|
13
|
-
`;function
|
|
14
|
-
${
|
|
17
|
+
`;function l(o){const i=o.includes(":host")||o.includes("[disabled]")?o:`:host([disabled]) ${o}`;return n`
|
|
18
|
+
${t(i)} {
|
|
15
19
|
opacity: 0.5;
|
|
16
20
|
cursor: not-allowed;
|
|
17
21
|
}
|
|
18
|
-
`}function p(o,
|
|
19
|
-
${
|
|
20
|
-
box-shadow: ${
|
|
21
|
-
var(${
|
|
22
|
+
`}function p(o,i,e="0 0 3px",r=""){return n`
|
|
23
|
+
${t(o)} {
|
|
24
|
+
box-shadow: ${t(r)} ${t(e)}
|
|
25
|
+
var(${t(i)}, var(--esp-color-shadow));
|
|
22
26
|
}
|
|
23
|
-
`}export{a as disabledControl,p as focusRing,
|
|
27
|
+
`}export{a as alignAttributeTextInheritance,l as disabledControl,p as focusRing,d as srOnly};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taprootio/espalier",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
4
4
|
"description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
|
|
5
5
|
"customElements": "custom-elements.json",
|
|
6
6
|
"type": "module",
|