@digital-realty/ix-tabs 1.2.14 → 1.3.1

package/dist/ix-tabs.min.js

@@ -1,3 +1,129 @@
-import{__decorate}from"tslib";import{LitElement,isServer,html,nothing,css}from"lit";import{property,query,state,queryAssignedNodes,queryAssignedElements,customElement}from"lit/decorators.js";import{styles}from"@material/web/tabs/internal/tabs-styles.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap}from"lit/directives/class-map.js";import{EASING}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";var _a;let INDICATOR=Symbol("indicator"),ANIMATE_INDICATOR=Symbol("animateIndicator");function shouldReduceMotion(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}class Tab extends LitElement{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),isServer||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){var t=html`<div class="indicator"></div>`;return html`<div class="button" role="presentation" @click="${this.handleContentClick}"><md-focus-ring part="focus-ring" inward .control="${this}"></md-focus-ring><md-elevation></md-elevation><md-ripple .control="${this}"></md-ripple><div class="content ${classMap(this.getContentClasses())}" role="presentation"><slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot><slot @slotchange="${this.handleSlotChange}"></slot>${this.fullWidthIndicator?nothing:t}</div>${this.fullWidthIndicator?t:nothing}</div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(_a=INDICATOR,ANIMATE_INDICATOR)](t){this[INDICATOR]&&(this[INDICATOR].getAnimations().forEach(t=>{t.cancel()}),t=null==(t=null==t?void 0:t.shadowRoot)?void 0:t.querySelector("*"),null!==(t=this.getKeyframes(t)))&&this[INDICATOR].animate(t,{duration:250,easing:EASING.EMPHASIZED})}getKeyframes(t){var e,i,a,o,s=shouldReduceMotion();return this.active?(e={},i=(t=null!=(t=null==(t=t[INDICATOR])?void 0:t.getBoundingClientRect())?t:{}).left,t=t.width,o=(a=this[INDICATOR].getBoundingClientRect()).left,t=t/a.width,!s&&void 0!==i&&void 0!==o&&Number(t)?e.transform=`translateX(${(i-o).toFixed(4)}px) scaleX(${t.toFixed(4)})`:e.opacity=0,[e,{transform:"none"}]):s?[{opacity:1},{transform:"none"}]:null}handleSlotChange(){this.iconOnly=!1;for(var t of this.assignedDefaultNodes){var e=t.nodeType===Node.TEXT_NODE&&!!t.wholeText.match(/\S/);if(t.nodeType===Node.ELEMENT_NODE||e)return}this.iconOnly=!0}handleIconSlotChange(){this.hasIcon=0<this.assignedIcons.length}}function isTab(t){return t instanceof HTMLElement&&("IX-PRIMARY-TAB"===t.tagName||"IX-SECONDARY-TAB"===t.tagName)}__decorate([property({type:Boolean,reflect:!0,attribute:"md-tab"})],Tab.prototype,"isTab",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"active",void 0),__decorate([property({type:Boolean})],Tab.prototype,"selected",null),__decorate([property({type:Boolean,attribute:"has-icon"})],Tab.prototype,"hasIcon",void 0),__decorate([property({type:Boolean,attribute:"icon-only"})],Tab.prototype,"iconOnly",void 0),__decorate([query(".indicator")],Tab.prototype,_a,void 0),__decorate([state()],Tab.prototype,"fullWidthIndicator",void 0),__decorate([queryAssignedNodes({flatten:!0})],Tab.prototype,"assignedDefaultNodes",void 0),__decorate([queryAssignedElements({slot:"icon",flatten:!0})],Tab.prototype,"assignedIcons",void 0);class Tabs extends LitElement{get activeTab(){var t;return null!=(t=this.tabs.find(t=>t.active))?t:null}set activeTab(t){t&&this.activateTab(t)}get activeTabIndex(){return this.tabs.findIndex(t=>t.active)}set activeTabIndex(e){var t=()=>{var t=this.tabs[e];t&&this.activateTab(t)};this.slotElement?t():this.updateComplete.then(t)}get focusedTab(){return this.tabs.find(t=>t.matches(":focus-within"))}constructor(){super(),this.withoutBorderBottom=!1,this.autoActivate=!1,this.internals=this.attachInternals(),isServer||(this.internals.role="tablist",this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("keyup",this.handleKeyup.bind(this)),this.addEventListener("focusout",this.handleFocusout.bind(this)))}async scrollToTab(t){await this.updateComplete;var e=this.tabs;if((t=null!=t?t:this.activeTab)&&e.includes(t)){for(var i of this.tabs)await i.updateComplete;var e=t.offsetLeft,t=t.offsetWidth,a=this.scrollLeft,o=this.offsetWidth,e=Math.min(e-48,Math.max(e+t-o+48,a)),t=this.focusedTab?"instant":"smooth";this.scrollTo({behavior:t,top:0,left:e})}}render(){return html`<div class="tabs"><slot @slotchange="${this.handleSlotChange}" @click="${this.handleTabClick}" @keydown="${this.handleTabClick}"></slot></div>${this.withoutBorderBottom?"":html`<md-divider></md-divider>`}`}async handleTabClick(t){var e=t.target;await 0,t.defaultPrevented||!isTab(e)||e.active||this.activateTab(e)}activateTab(t){var e=this.tabs,i=this.activeTab;if(e.includes(t)&&i!==t){for(var a of e){a.active=a===t;var o=null==(o=a.shadowRoot)?void 0:o.querySelector("*");o&&(o.active=a.active)}if(i){if(!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){for(var s of e)s.active=s===i;return}(null==(e=t.shadowRoot)?void 0:e.querySelector("*"))[ANIMATE_INDICATOR](i)}this.updateFocusableTab(t),this.scrollToTab(t)}}updateFocusableTab(t){for(var e of this.tabs)e.tabIndex=e===t?0:-1}async handleKeydown(e){await 0;var i="ArrowLeft"===e.key,a="ArrowRight"===e.key,o="Home"===e.key,s="End"===e.key;if(!e.defaultPrevented&&(i||a||o||s)){var n=this.tabs;if(!(n.length<2)){e.preventDefault();let t;o||s?t=o?0:n.length-1:(e="rtl"===getComputedStyle(this).direction?i:a,s=this.focusedTab,s?(o=this.tabs.indexOf(s),(t=e?o+1:o-1)>=n.length?t=0:t<0&&(t=n.length-1)):t=e?0:n.length-1);i=n[t];i.focus(),this.autoActivate?this.activateTab(i):this.updateFocusableTab(i)}}}handleKeyup(){var t;this.scrollToTab(null!=(t=this.focusedTab)?t:this.activeTab)}handleFocusout(){var t;this.matches(":focus-within")||(t=this.activeTab,t&&this.updateFocusableTab(t))}handleSlotChange(){var t=this.tabs[0];!this.activeTab&&t&&this.activateTab(t),this.scrollToTab(this.activeTab)}}__decorate([queryAssignedElements({flatten:!0})],Tabs.prototype,"tabs",void 0),__decorate([property({type:Boolean})],Tabs.prototype,"withoutBorderBottom",void 0),__decorate([property({type:Boolean,attribute:"auto-activate"})],Tabs.prototype,"autoActivate",void 0),__decorate([query("slot")],Tabs.prototype,"slotElement",void 0);let MdTabs=class extends Tabs{};MdTabs.styles=[styles,css`.tabs.no-scrollbar::-webkit-scrollbar{display:none}`],MdTabs=__decorate([customElement("md-tabs")],MdTabs);class IxTabs extends LitElement{constructor(){super(...arguments),this.scrollButtons=!1,this.hideScrollBar=!1,this.inline=!1,this.alignLeft=!1,this.enableLeftScroll=!0,this.enableRightScroll=!0,this.withoutBorderBottom=!1,this.tabContainer=null,this.updateScrollButtonState=()=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(this.calculateScrollButtonsEnabled.bind(this),100)}}get activeTabIndex(){return this.mdTabs.activeTabIndex}set activeTabIndex(t){this.mdTabs.activeTabIndex=t}calculateScrollButtonsEnabled(){var t,e,i;this.tabContainer&&({clientWidth:i,scrollWidth:t,scrollLeft:e}=this.tabContainer,this.enableLeftScroll=0!==e,this.enableRightScroll=e!==t-i,this.alignLeft)&&(i=null==(e=this.parentElement)?void 0:e.clientWidth,this.inline=!(i&&i<t))}async slotChange(){var t,e;await 0,null!=(t=this.querySelector("ix-primary-tab[active]"))&&t.scrollIntoView({block:"nearest",inline:"center"}),this.tabContainer&&(this.scrollButtons&&this.hideScrollBar&&this.tabContainer.classList.add("no-scrollbar"),this.scrollButtons&&(this.calculateScrollButtonsEnabled(),window.addEventListener("resize",this.updateScrollButtonState),this.tabContainer.addEventListener("scroll",this.updateScrollButtonState)),await this.updateComplete,this.tabContainer)&&this.alignLeft&&({clientWidth:t,scrollWidth:e}=this.tabContainer,this.inline=e<=t)}firstUpdated(t){super.firstUpdated(t),requestAnimationFrame(()=>{var t;this.tabContainer=null==(t=this.mdTabs.shadowRoot)?void 0:t.querySelector(".tabs"),this.slotChange()})}disconnectedCallback(){var t;super.disconnectedCallback(),this.scrollButtons&&(window.removeEventListener("resize",this.updateScrollButtonState),null!=(t=this.tabContainer))&&t.removeEventListener("scroll",this.updateScrollButtonState)}scrollTabs(t="left",e=.75){var i,a;this.tabContainer&&({clientWidth:i,scrollLeft:a}=this.tabContainer,this.tabContainer.scrollTo({top:0,left:a+("left"===t?i*-e:i*e),behavior:"smooth"}))}render(){return html`${this.scrollButtons?html`<div class="gradient left ${this.enableLeftScroll?"":"disabled"}"><ix-icon-button icon="chevron_left" @click="${()=>this.scrollTabs("left")}" ?disabled="${!this.enableLeftScroll}"></ix-icon-button></div>`:nothing}<md-tabs .withoutBorderBottom="${this.withoutBorderBottom}"><slot @slotchange="${this.slotChange}"></slot></md-tabs>${this.scrollButtons?html`<div class="gradient right ${this.enableRightScroll?"":"disabled"}"><ix-icon-button icon="chevron_right" @click="${()=>this.scrollTabs("right")}" ?disabled="${!this.enableRightScroll}"></ix-icon-button></div>`:nothing}`}}IxTabs.styles=css`:host{max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(ix-tabs[inline]){display:inline-flex}:host(ix-tabs[inline]) ix-icon-button[disabled]{display:none}md-tabs{flex-grow:1;--md-primary-tab-container-color:transparent}ix-icon-button{--md-icon-button-hover-state-layer-opacity:0;--md-icon-button-pressed-state-layer-opacity:0;--md-icon-button-icon-color:var(--md-sys-text-color-secondary);--md-icon-button-pressed-state-layer-color:var(
+import{__decorate as t}from"tslib";import{LitElement as e,isServer as i,html as o,nothing as a,css as n}from"lit";import{property as s,query as l,state as r,queryAssignedNodes as c,queryAssignedElements as d,customElement as h}from"lit/decorators.js";import{styles as b}from"@material/web/tabs/internal/tabs-styles.js";import"@material/web/divider/divider.js";import"@material/web/elevation/elevation.js";import"@material/web/focus/md-focus-ring.js";import"@material/web/ripple/ripple.js";import{classMap as u}from"lit/directives/class-map.js";import{EASING as p}from"@material/web/internal/motion/animation.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */var v;const f=Symbol("indicator"),m=Symbol("animateIndicator");class y extends e{get selected(){return this.active}set selected(t){this.active=t}constructor(){super(),this.isTab=!0,this.active=!1,this.hasIcon=!1,this.iconOnly=!1,this.fullWidthIndicator=!0,this.internals=this.attachInternals(),i||(this.internals.role="tab",this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t=o`<div class="indicator"></div>`;return o` <div
+      class="button"
+      role="presentation"
+      @click=${this.handleContentClick}
+    >
+      <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
+      <md-elevation></md-elevation>
+      <md-ripple .control=${this}></md-ripple>
+      <div
+        class="content ${u(this.getContentClasses())}"
+        role="presentation"
+      >
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.fullWidthIndicator?a:t}
+      </div>
+      ${this.fullWidthIndicator?t:a}
+    </div>`}getContentClasses(){return{"has-icon":this.hasIcon,"has-label":!this.iconOnly}}updated(){this.internals.ariaSelected=String(this.active)}async handleKeydown(t){await 0,t.defaultPrevented||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}handleContentClick(t){t.stopPropagation(),this.click()}[(v=f,m)](t){var e;if(!this[f])return;this[f].getAnimations().forEach(t=>{t.cancel()});const i=null===(e=null==t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector("*"),o=this.getKeyframes(i);null!==o&&this[f].animate(o,{duration:250,easing:p.EMPHASIZED})}getKeyframes(t){var e,i;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches;if(!this.active)return o?[{opacity:1},{transform:"none"}]:null;const a={},n=null!==(i=null===(e=t[f])||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==i?i:{},s=n.left,l=n.width,r=this[f].getBoundingClientRect(),c=r.left,d=l/r.width;return!o&&void 0!==s&&void 0!==c&&Number(d)?a.transform=`translateX(${(s-c).toFixed(4)}px) scaleX(${d.toFixed(4)})`:a.opacity=0,[a,{transform:"none"}]}handleSlotChange(){this.iconOnly=!1;for(const t of this.assignedDefaultNodes){const e=t.nodeType===Node.TEXT_NODE&&!!t.wholeText.match(/\S/);if(t.nodeType===Node.ELEMENT_NODE||e)return}this.iconOnly=!0}handleIconSlotChange(){this.hasIcon=this.assignedIcons.length>0}}t([s({type:Boolean,reflect:!0,attribute:"md-tab"})],y.prototype,"isTab",void 0),t([s({type:Boolean,reflect:!0})],y.prototype,"active",void 0),t([s({type:Boolean})],y.prototype,"selected",null),t([s({type:Boolean,attribute:"has-icon"})],y.prototype,"hasIcon",void 0),t([s({type:Boolean,attribute:"icon-only"})],y.prototype,"iconOnly",void 0),t([l(".indicator")],y.prototype,v,void 0),t([r()],y.prototype,"fullWidthIndicator",void 0),t([c({flatten:!0})],y.prototype,"assignedDefaultNodes",void 0),t([d({slot:"icon",flatten:!0})],y.prototype,"assignedIcons",void 0);class g extends e{get activeTab(){var t;return null!==(t=this.tabs.find(t=>t.active))&&void 0!==t?t:null}set activeTab(t){t&&this.activateTab(t)}get activeTabIndex(){return this.tabs.findIndex(t=>t.active)}set activeTabIndex(t){const e=()=>{const e=this.tabs[t];e&&this.activateTab(e)};this.slotElement?e():this.updateComplete.then(e)}get focusedTab(){return this.tabs.find(t=>t.matches(":focus-within"))}constructor(){super(),this.withoutBorderBottom=!1,this.autoActivate=!1,this.internals=this.attachInternals(),i||(this.internals.role="tablist",this.addEventListener("keydown",this.handleKeydown.bind(this)),this.addEventListener("keyup",this.handleKeyup.bind(this)),this.addEventListener("focusout",this.handleFocusout.bind(this)))}async scrollToTab(t){await this.updateComplete;const{tabs:e}=this;if(null!=t||(t=this.activeTab),!t||!e.includes(t))return;for(const t of this.tabs)await t.updateComplete;const i=t.offsetLeft,o=t.offsetWidth,a=this.scrollLeft,n=i-48,s=i+o-this.offsetWidth+48,l=Math.min(n,Math.max(s,a)),r=this.focusedTab?"instant":"smooth";this.scrollTo({behavior:r,top:0,left:l})}render(){return o`
+      <div class="tabs">
+        <slot
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleTabClick}
+          @keydown=${this.handleTabClick}
+        ></slot>
+      </div>
+      ${this.withoutBorderBottom?"":o`<md-divider></md-divider>`}
+    `}async handleTabClick(t){const e=t.target;
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var i;(await 0,t.defaultPrevented||(!((i=e)instanceof HTMLElement)||"IX-PRIMARY-TAB"!==i.tagName&&"IX-SECONDARY-TAB"!==i.tagName)||e.active)||this.activateTab(e)}activateTab(t){var e,i;const{tabs:o}=this,a=this.activeTab;if(o.includes(t)&&a!==t){for(const i of o){i.active=i===t;const o=null===(e=i.shadowRoot)||void 0===e?void 0:e.querySelector("*");o&&(o.active=i.active)}if(a){if(!this.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0,composed:!0}))){for(const t of o)t.active=t===a;return}(null===(i=t.shadowRoot)||void 0===i?void 0:i.querySelector("*"))[m](a)}this.updateFocusableTab(t),this.scrollToTab(t)}}updateFocusableTab(t){for(const e of this.tabs)e.tabIndex=e===t?0:-1}async handleKeydown(t){await 0;const e="ArrowLeft"===t.key,i="ArrowRight"===t.key,o="Home"===t.key,a="End"===t.key;if(t.defaultPrevented||!e&&!i&&!o&&!a)return;const{tabs:n}=this;if(n.length<2)return;let s;if(t.preventDefault(),o||a)s=o?0:n.length-1;else{const t="rtl"===getComputedStyle(this).direction?e:i,{focusedTab:o}=this;if(o){const e=this.tabs.indexOf(o);s=t?e+1:e-1,s>=n.length?s=0:s<0&&(s=n.length-1)}else s=t?0:n.length-1}const l=n[s];l.focus(),this.autoActivate?this.activateTab(l):this.updateFocusableTab(l)}handleKeyup(){var t;this.scrollToTab(null!==(t=this.focusedTab)&&void 0!==t?t:this.activeTab)}handleFocusout(){if(this.matches(":focus-within"))return;const{activeTab:t}=this;t&&this.updateFocusableTab(t)}handleSlotChange(){const t=this.tabs[0];!this.activeTab&&t&&this.activateTab(t),this.scrollToTab(this.activeTab)}}t([d({flatten:!0})],g.prototype,"tabs",void 0),t([s({type:Boolean})],g.prototype,"withoutBorderBottom",void 0),t([s({type:Boolean,attribute:"auto-activate"})],g.prototype,"autoActivate",void 0),t([l("slot")],g.prototype,"slotElement",void 0);let T=class extends g{};T.styles=[b,n`
+      .tabs.no-scrollbar::-webkit-scrollbar {
+        display: none;
+      }
+    `],T=t([h("md-tabs")],T);class w extends e{constructor(){super(...arguments),this.scrollButtons=!1,this.hideScrollBar=!1,this.inline=!1,this.alignLeft=!1,this.enableLeftScroll=!0,this.enableRightScroll=!0,this.withoutBorderBottom=!1,this.tabContainer=null,this.updateScrollButtonState=()=>{clearTimeout(this.debounceEvent),this.debounceEvent=setTimeout(this.calculateScrollButtonsEnabled.bind(this),100)}}get activeTabIndex(){return this.mdTabs.activeTabIndex}set activeTabIndex(t){this.mdTabs.activeTabIndex=t}calculateScrollButtonsEnabled(){var t;if(!this.tabContainer)return;const{clientWidth:e,scrollWidth:i,scrollLeft:o}=this.tabContainer;if(this.enableLeftScroll=0!==o,this.enableRightScroll=o!==i-e,this.alignLeft){const e=null===(t=this.parentElement)||void 0===t?void 0:t.clientWidth;this.inline=!(e&&i>e)}}async slotChange(){var t;if(await 0,null===(t=this.querySelector("ix-primary-tab[active]"))||void 0===t||t.scrollIntoView({block:"nearest",inline:"center"}),this.tabContainer&&(this.scrollButtons&&this.hideScrollBar&&this.tabContainer.classList.add("no-scrollbar"),this.scrollButtons&&(this.calculateScrollButtonsEnabled(),window.addEventListener("resize",this.updateScrollButtonState),this.tabContainer.addEventListener("scroll",this.updateScrollButtonState)),await this.updateComplete,this.tabContainer&&this.alignLeft)){const{clientWidth:t,scrollWidth:e}=this.tabContainer;this.inline=e<=t}}firstUpdated(t){super.firstUpdated(t),requestAnimationFrame(()=>{var t;this.tabContainer=null===(t=this.mdTabs.shadowRoot)||void 0===t?void 0:t.querySelector(".tabs"),this.slotChange()})}disconnectedCallback(){var t;super.disconnectedCallback(),this.scrollButtons&&(window.removeEventListener("resize",this.updateScrollButtonState),null===(t=this.tabContainer)||void 0===t||t.removeEventListener("scroll",this.updateScrollButtonState))}scrollTabs(t="left",e=.75){if(this.tabContainer){const{clientWidth:i,scrollLeft:o}=this.tabContainer,a=o+("left"===t?i*-e:i*e);this.tabContainer.scrollTo({top:0,left:a,behavior:"smooth"})}}render(){return o`
+      ${this.scrollButtons?o`<div
+            class="gradient left ${this.enableLeftScroll?"":"disabled"}"
+          >
+            <ix-icon-button
+              icon="chevron_left"
+              @click=${()=>this.scrollTabs("left")}
+              ?disabled=${!this.enableLeftScroll}
+            ></ix-icon-button>
+          </div>`:a}
+      <md-tabs .withoutBorderBottom="${this.withoutBorderBottom}">
+        <slot @slotchange=${this.slotChange}></slot>
+      </md-tabs>
+      ${this.scrollButtons?o`<div
+            class="gradient right ${this.enableRightScroll?"":"disabled"}"
+          >
+            <ix-icon-button
+              icon="chevron_right"
+              @click=${()=>this.scrollTabs("right")}
+              ?disabled=${!this.enableRightScroll}
+            ></ix-icon-button>
+          </div>`:a}
+    `}}w.styles=n`
+    :host {
+      max-width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+    :host(ix-tabs[inline]) {
+      display: inline-flex;
+    }
+    :host(ix-tabs[inline]) ix-icon-button[disabled] {
+      display: none;
+    }
+    md-tabs {
+      flex-grow: 1;
+      --md-primary-tab-container-color: transparent;
+    }
+    ix-icon-button {
+      --md-icon-button-hover-state-layer-opacity: 0;
+      --md-icon-button-pressed-state-layer-opacity: 0;
+      --md-icon-button-icon-color: var(--md-sys-text-color-secondary);
+      --md-icon-button-pressed-state-layer-color: var(
         --md-sys-text-color-secondary
-      )}.scroll{cursor:pointer}.gradient{position:relative}.gradient.left{margin-right:-10px}.gradient.right{margin-left:-10px}.gradient::before{content:'';width:20px;height:calc(100% + 2px);position:absolute;top:-2px;background:linear-gradient(to right,#fff,transparent);z-index:10;pointer-events:none}.gradient.left::before{left:30px}.gradient.right::before{right:30px;transform:rotate(180deg)}.gradient.disabled::before{display:none}`,__decorate([query("md-Tabs")],IxTabs.prototype,"mdTabs",void 0),__decorate([query("ix-primary-tab[active]")],IxTabs.prototype,"activeTab",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"scrollButtons",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"hideScrollBar",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTabs.prototype,"inline",void 0),__decorate([property({type:Boolean,attribute:"left-align"})],IxTabs.prototype,"alignLeft",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableLeftScroll",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"enableRightScroll",void 0),__decorate([property({type:Boolean})],IxTabs.prototype,"withoutBorderBottom",void 0),__decorate([state()],IxTabs.prototype,"tabContainer",void 0),window.customElements.define("ix-tabs",IxTabs);
+      );
+    }
+    .scroll {
+      cursor: pointer;
+    }
+
+    .gradient {
+      position: relative;
+    }
+
+    .gradient.left {
+      margin-right: -10px;
+    }
+
+    .gradient.right {
+      margin-left: -10px;
+    }
+
+    .gradient::before {
+      content: '';
+      width: 20px;
+      height: calc(100% + 2px);
+      position: absolute;
+      top: -2px;
+      background: linear-gradient(to right, white, transparent);
+      z-index: 10;
+      pointer-events: none;
+    }
+
+    .gradient.left::before {
+      left: 30px;
+    }
+
+    .gradient.right::before {
+      right: 30px;
+      transform: rotate(180deg);
+    }
+
+    .gradient.disabled::before {
+      display: none;
+    }
+  `,t([l("md-Tabs")],w.prototype,"mdTabs",void 0),t([l("ix-primary-tab[active]")],w.prototype,"activeTab",void 0),t([s({type:Boolean})],w.prototype,"scrollButtons",void 0),t([s({type:Boolean})],w.prototype,"hideScrollBar",void 0),t([s({type:Boolean,reflect:!0})],w.prototype,"inline",void 0),t([s({type:Boolean,attribute:"left-align"})],w.prototype,"alignLeft",void 0),t([s({type:Boolean})],w.prototype,"enableLeftScroll",void 0),t([s({type:Boolean})],w.prototype,"enableRightScroll",void 0),t([s({type:Boolean})],w.prototype,"withoutBorderBottom",void 0),t([r()],w.prototype,"tabContainer",void 0),window.customElements.define("ix-tabs",w);

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-tabs following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.2.14",
+  "version": "1.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,13 +25,13 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-icon-button": "^1.2.15",
+    "@digital-realty/ix-icon-button": "^1.3.1",
     "@lit/react": "^1.0.2",
     "@material/web": "2.4.0",
     "lit": "^3.2.1",
@@ -39,32 +39,26 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.20.2",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.31.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "rollup": "^4.29.1",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-uglify": "^6.0.4",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
     "plugins": [
       "@typescript-eslint"
     ],
@@ -105,5 +99,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "b47ba9e880c386ecf579ab21a118f94221cd1e1c"
+  "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
 }