@crowdstrike/glide-core 0.29.0 → 0.29.1

package/dist/dropdown.js

@@ -142,6 +142,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length
                   class="item-count"
                   data-test="item-count"
                   id="item-count"
+                  role="status"
                 ></span>
               </div>
             </glide-core-tooltip>

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;this.#S()}#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=Number.parseInt(window.getComputedStyle(this.#E).getPropertyValue("padding-inline-start")),e=this.#E===this.#v.at(0)?t:this.#E.offsetLeft-this.#v.at(0).offsetLeft;this.#i.value.style.setProperty("--private-selected-tab-indicator-translate",`${e}px`);const s=this.#E===this.#v.at(0)||this.#E===this.#v.at(-1)?t:0,{width:a}=this.#E.getBoundingClientRect();this.#i.value.style.setProperty("--private-selected-tab-indicator-width",a-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);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/tab.group.styles.js

@@ -14,6 +14,7 @@ import{css}from"lit";export default[css`
     .component {
       --private-transition-duration: 250ms;
 
+      /* https://github.com/CrowdStrike/glide-core/pull/476#issue-2659854067 */
       display: contents;
     }
 
@@ -54,7 +55,9 @@ import{css}from"lit";export default[css`
 
       &.animated {
         @media (prefers-reduced-motion: no-preference) {
-          transition: translate var(--private-transition-duration);
+          transition:
+            inline-size var(--private-transition-duration),
+            translate var(--private-transition-duration);
         }
       }
     }

package/dist/tab.styles.js

@@ -17,7 +17,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       gap: 0.4375rem;
       justify-content: center;
       padding-block: 0.4375rem;
-      transition: font-weight var(--private-transition-duration) ease-in-out;
       user-select: none;
 
       &:hover {

package/package.json

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