@crowdstrike/glide-core 0.29.1 → 0.29.2

package/dist/tab.group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,s,a){var o,i=arguments.length,l=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,s):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,a);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(l=(i<3?o(l):i>3?o(e,s,l):o(e,s))||l);return i>3&&l&&Object.defineProperty(e,s,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import Tab from"./tab.js";import TabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import onResize from"./library/on-resize.js";import styles from"./tab.group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let TabGroup=class TabGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.isDisableOverflowEndButton=!1,this.isDisableOverflowStartButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=new LocalizeController(this),this.#s=createRef(),this.#a=createRef(),this.#o=null,this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="component" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#t)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("previousTab")}" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" data-test="overflow-start-button" tabindex="-1" ?disabled="${this.isDisableOverflowStartButton}" @click="${this.#c.bind(this,"start")}" ${ref(this.#a)}>${chevronIcon}</button>`))}<div class="tab-group" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#d}" @scroll="${this.#b}" ${onResize(this.#h.bind(this))} ${ref(this.#l)}><slot name="nav" @private-selected="${this.#f}" @slotchange="${this.#m}" ${assertSlot([Tab])}></slot><div class="${classMap({"selected-tab-indicator":!0,animated:this.hasUpdated})}" data-test="selected-tab-indicator" ${ref(this.#i)}></div></div>${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("nextTab")}" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" data-test="overflow-end-button" tabindex="-1" @click="${this.#c.bind(this,"end")}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#s)}>${chevronIcon}</button>`))}</div><slot @slotchange="${this.#u}" ${assertSlot([TabPanel])}></slot></div>`}#t;#e;#s;#a;#o;#i;#l;get#p(){return this.#v.at(0)}get#E(){return this.#v.findLast((({selected:t})=>t))}get#T(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#v(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#n(t){const e=t.target.closest("glide-core-tab");e instanceof Tab&&!e.disabled&&this.#v.includes(e)&&(e.selected=!0)}#r(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e instanceof Tab&&!e.disabled&&(e.selected=!0,t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#v.find((t=>t.matches(":focus")));if(e instanceof Tab){let s=this.#v.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.#v.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#v.length-1),s>this.#v.length-1&&(s=0),this.#v[s]?.focus({preventScroll:!1});for(const[,t]of this.#v.entries())t.tabIndex=this.#v[s]===t?0:-1;this.#b(),t.preventDefault()}}}#u(){this.#w()}#m(){if(this.#E){this.#E.tabIndex=0;for(const t of this.#v)t.selected&&t!==this.#E&&(t.selected=!1,t.tabIndex=-1)}else this.#p&&(this.#p.selected=!0,this.#p.tabIndex=0);for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1;this.#w(),this.#b()}#c(t){const e="end"===t?1:-1;this.#l.value&&this.#l.value.scrollBy({left:e*this.#l.value.clientWidth*.5,top:0})}#d(){for(const[,t]of this.#v.entries())t.tabIndex=t===this.#E?0:-1}#h(){this.#o&&clearTimeout(this.#o),this.#S(),this.#o=setTimeout((()=>{this.#b()}))}#f(t){if(t.target instanceof Tab&&t.target.selected){t.target.privateSelect(),t.target.tabIndex=0;for(const e of this.#v)e!==t.target&&(e.selected=!1,e.tabIndex=-1)}else this.#p&&!this.#E&&(this.#p.privateSelect(),this.#p.tabIndex=0);for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1}#w(){for(const t of this.#v){const e=this.#T.filter((e=>e.name===t.panel))?.at(0);e?.id&&(t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id))}}#b(){this.#l.value&&(this.isShowOverflowButtons=this.#l.value.scrollWidth>this.#l.value.clientWidth,this.isDisableOverflowStartButton=this.#l.value.scrollLeft<=0,this.isDisableOverflowEndButton=Math.round(this.#l.value.scrollLeft)+this.#l.value.clientWidth>=this.#l.value.scrollWidth)}#S(){if(this.#E&&this.#v.length>0&&this.#i.value){const t=this.#E===this.#v.at(0),e=this.#E===this.#v.at(-1),s=t?Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-start")):e?Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-end")):0,a=this.#E===this.#v.at(0)?s:this.#E.offsetLeft-this.#v.at(0).offsetLeft;this.#i.value.style.setProperty("--private-selected-tab-indicator-translate",`${a}px`);const{width:o}=this.#E.getBoundingClientRect();this.#i.value.style.setProperty("--private-selected-tab-indicator-width",o-s+"px")}}};__decorate([property({reflect:!0})],TabGroup.prototype,"version",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],TabGroup.prototype,"isShowOverflowButtons",void 0),TabGroup=__decorate([customElement("glide-core-tab-group"),final],TabGroup);export default TabGroup;
+var __decorate=this&&this.__decorate||function(t,e,s,a){var o,i=arguments.length,l=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,s):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,s,a);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(l=(i<3?o(l):i>3?o(e,s,l):o(e,s))||l);return i>3&&l&&Object.defineProperty(e,s,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import Tab from"./tab.js";import TabPanel from"./tab.panel.js";import chevronIcon from"./icons/chevron.js";import onResize from"./library/on-resize.js";import styles from"./tab.group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let TabGroup=class TabGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.isDisableOverflowEndButton=!1,this.isDisableOverflowStartButton=!1,this.isShowOverflowButtons=!1,this.#t=createRef(),this.#e=new LocalizeController(this),this.#s=createRef(),this.#a=createRef(),this.#o=null,this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="component" @click="${this.#n}" @keydown="${this.#r}" ${ref(this.#t)}><div class="tab-container" data-test="tab-container">${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("previousTab")}" class="${classMap({"overflow-button":!0,start:!0,disabled:this.isDisableOverflowStartButton})}" data-test="overflow-start-button" tabindex="-1" ?disabled="${this.isDisableOverflowStartButton}" @click="${this.#c.bind(this,"start")}" ${ref(this.#a)}>${chevronIcon}</button>`))}<div class="tab-group" data-test="tablist" role="tablist" tabindex="-1" @focusout="${this.#d}" @scroll="${this.#b}" ${onResize(this.#h.bind(this))} ${ref(this.#l)}><slot name="nav" @private-selected="${this.#f}" @slotchange="${this.#m}" ${assertSlot([Tab])}></slot><div class="${classMap({"selected-tab-indicator":!0,animated:this.hasUpdated})}" data-test="selected-tab-indicator" ${ref(this.#i)}></div></div>${when(this.isShowOverflowButtons,(()=>html`<button aria-label="${this.#e.term("nextTab")}" class="${classMap({"overflow-button":!0,end:!0,disabled:this.isDisableOverflowEndButton})}" data-test="overflow-end-button" tabindex="-1" @click="${this.#c.bind(this,"end")}" ?disabled="${this.isDisableOverflowEndButton}" ${ref(this.#s)}>${chevronIcon}</button>`))}</div><slot @slotchange="${this.#u}" ${assertSlot([TabPanel])}></slot></div>`}#t;#e;#s;#a;#o;#i;#l;get#p(){return this.#v.at(0)}get#E(){return this.#v.findLast((({selected:t})=>t))}get#T(){return[...this.querySelectorAll(":scope > glide-core-tab-panel")]}get#v(){return[...this.querySelectorAll(":scope > glide-core-tab")]}#n(t){const e=t.target.closest("glide-core-tab");e instanceof Tab&&!e.disabled&&this.#v.includes(e)&&(e.selected=!0)}#r(t){const e=t.target instanceof HTMLElement&&t.target.closest("glide-core-tab");if(["Enter"," "].includes(t.key)&&e instanceof Tab&&!e.disabled&&(e.selected=!0,t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const e=this.#v.find((t=>t.matches(":focus")));if(e instanceof Tab){let s=this.#v.indexOf(e);switch(t.key){case"Home":s=0;break;case"End":s=this.#v.length-1;break;case"ArrowLeft":s--;break;case"ArrowRight":s++}s<0&&(s=this.#v.length-1),s>this.#v.length-1&&(s=0),this.#v[s]?.focus({preventScroll:!1});for(const[,t]of this.#v.entries())t.tabIndex=this.#v[s]===t?0:-1;this.#b(),t.preventDefault()}}}#u(){this.#w()}#m(){if(this.#E){this.#E.tabIndex=0;for(const t of this.#v)t.selected&&t!==this.#E&&(t.selected=!1,t.tabIndex=-1)}else this.#p&&(this.#p.selected=!0,this.#p.tabIndex=0);for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1;this.#w(),this.#b()}#c(t){const e="end"===t?1:-1;this.#l.value&&this.#l.value.scrollBy({left:e*this.#l.value.clientWidth*.5,top:0})}#d(){for(const[,t]of this.#v.entries())t.tabIndex=t===this.#E?0:-1}#h(){this.#o&&clearTimeout(this.#o),this.#S(),this.#o=setTimeout((()=>{this.#b()}))}#f(t){if(t.target instanceof Tab&&t.target.selected){t.target.privateSelect(),t.target.tabIndex=0;for(const e of this.#v)e!==t.target&&(e.selected=!1,e.tabIndex=-1)}else this.#p&&!this.#E&&(this.#p.privateSelect(),this.#p.tabIndex=0);this.#S();for(const t of this.#T)t.privateIsSelected=t.name===this.#E?.panel,t.tabIndex=t.name===this.#E?.panel?0:-1}#w(){for(const t of this.#v){const e=this.#T.filter((e=>e.name===t.panel))?.at(0);e?.id&&(t.setAttribute("aria-controls",e.id),e.setAttribute("aria-labelledby",t.id))}}#b(){this.#l.value&&(this.isShowOverflowButtons=this.#l.value.scrollWidth>this.#l.value.clientWidth,this.isDisableOverflowStartButton=this.#l.value.scrollLeft<=0,this.isDisableOverflowEndButton=Math.round(this.#l.value.scrollLeft)+this.#l.value.clientWidth>=this.#l.value.scrollWidth)}#S(){if(this.#E&&this.#v.length>0&&this.#i.value){const t=this.#E===this.#v.at(0),e=this.#E===this.#v.at(-1),s=t?Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-start")):e?Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-end")):0,a=this.#E===this.#v.at(0)?s:this.#E.offsetLeft-this.#v.at(0).offsetLeft;this.#i.value.style.setProperty("--private-selected-tab-indicator-translate",`${a}px`);const{width:o}=this.#E.getBoundingClientRect();this.#i.value.style.setProperty("--private-selected-tab-indicator-width",o-s+"px")}}};__decorate([property({reflect:!0})],TabGroup.prototype,"version",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowEndButton",void 0),__decorate([state()],TabGroup.prototype,"isDisableOverflowStartButton",void 0),__decorate([state()],TabGroup.prototype,"isShowOverflowButtons",void 0),TabGroup=__decorate([customElement("glide-core-tab-group"),final],TabGroup);export default TabGroup;

package/dist/tooltip.container.d.ts

@@ -5,6 +5,7 @@ declare global {
     }
 }
 /**
+ * @attr {string} [description]
  * @attr {boolean} [disabled=false]
  * @attr {string} [label]
  * @attr {'bottom'|'left'|'right'|'top'} [placement]
@@ -15,6 +16,7 @@ export default class TooltipContainer extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    description?: string;
     /**
      * @default false
      */

package/dist/tooltip.container.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#t};__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import{when}from"lit/directives/when.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0})}"><div class="label-and-shortcut"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>${when(this.description,(()=>html`<div class="description">${this.description}</div>`))}</div>`}#t};__decorate([property({reflect:!0})],TooltipContainer.prototype,"description",void 0),__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;

package/dist/tooltip.container.styles.js

@@ -4,7 +4,6 @@ import{css}from"lit";export default[css`
         --glide-core-private-color-tooltip-surface-container
       );
       border-radius: var(--glide-core-spacing-base-xs);
-      display: flex;
       font-family: var(--glide-core-typography-family-primary);
       font-size: var(--glide-core-typography-size-body-default);
       font-weight: var(--glide-core-typography-weight-regular);
@@ -14,15 +13,27 @@ import{css}from"lit";export default[css`
         var(--glide-core-spacing-base-xs);
     }
 
+    .label-and-shortcut {
+      display: flex;
+    }
+
     .label {
       color: var(--glide-core-color-static-text-onsolid);
-      display: block;
       hyphens: auto;
       max-inline-size: 11.25rem;
       min-inline-size: 1.875rem;
       overflow-wrap: anywhere;
     }
 
+    .description {
+      color: var(--glide-core-color-static-text-onsolid);
+      hyphens: auto;
+      margin-block-start: var(--glide-core-spacing-base-xs);
+      max-inline-size: 11.25rem;
+      min-inline-size: 1.875rem;
+      overflow-wrap: anywhere;
+    }
+
     .shortcut {
       color: var(--glide-core-private-color-tooltip-text-shortcut);
       display: none;

package/dist/tooltip.d.ts

@@ -7,6 +7,7 @@ declare global {
 }
 /**
  * @attr {string} label
+ * @attr {string} [description]
  * @attr {boolean} [disabled=false]
  * @attr {number} [offset=4]
  * @attr {boolean} [open=false]
@@ -31,6 +32,11 @@ export default class Tooltip extends LitElement {
      */
     get label(): string | undefined;
     set label(label: string);
+    /**
+     * @default undefined
+     */
+    get description(): string | undefined;
+    set description(description: string);
     /**
      * @default false
      */

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tooltip=class Tooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#s=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#c();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#c(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#u}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#f}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#l)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#u(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#f(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#l.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#l.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],Tooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tooltip=class Tooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#s=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get description(){return this.#n}set description(e){this.#n=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.description=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#c():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#p??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#p=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#c(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#h),clearTimeout(this.#m)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#c();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.description=this.description,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#u}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#v}" @focusout="${this.#g}" @keydown="${this.#y}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#l)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#w;#h;#n;#t;#o;#i;#a;#p;#m;#r;#s;#l;#E(){clearTimeout(this.#h)}#d(){this.#l.value?.hidePopover(),this.#w?.()}#f(){this.#R(),clearTimeout(this.#m)}#u(){this.#E(),this.#m=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#v(){this.open=!0}#g(){this.open=!1}#y(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#R(){this.#h=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#c(){this.disabled||(this.#w?.(),this.#s.value&&this.#l.value&&(this.#w=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#l.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#l.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],Tooltip.prototype,"label",null),__decorate([property({reflect:!0})],Tooltip.prototype,"description",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.29.1",
+  "version": "0.29.2",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",