@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/tab.group.js

@@ -1 +1,386 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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';
+/**
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {TabPanel}
+ * @slot {Tab} [nav]
+ *
+ * @cssprop [--tabs-padding-block-end=0rem]
+ * @cssprop [--tabs-padding-block-start=0rem]
+ * @cssprop [--tabs-padding-inline-end=0rem]
+ * @cssprop [--tabs-padding-inline-start=0rem]
+ */
+let TabGroup = class TabGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.isDisableOverflowEndButton = false;
+        this.isDisableOverflowStartButton = false;
+        this.isShowOverflowButtons = false;
+        this.#componentElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+        this.#overflowEndButtonElementRef = createRef();
+        this.#overflowStartButtonElementRef = createRef();
+        this.#resizeTimeout = null;
+        this.#selectedTabIndicatorElementRef = createRef();
+        this.#tabListElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    render() {
+        return html `<div
+      class="component"
+      @click=${this.#onComponentClick}
+      @keydown=${this.#onComponentKeydown}
+      ${ref(this.#componentElementRef)}
+    >
+      <div class="tab-container" data-test="tab-container">
+        ${when(this.isShowOverflowButtons, () => html `
+            <button
+              aria-label=${this.#localize.term('previousTab')}
+              class=${classMap({
+            'overflow-button': true,
+            start: true,
+            disabled: this.isDisableOverflowStartButton,
+        })}
+              data-test="overflow-start-button"
+              tabindex="-1"
+              ?disabled=${this.isDisableOverflowStartButton}
+              @click=${this.#onOverflowButtonClick.bind(this, 'start')}
+              ${ref(this.#overflowStartButtonElementRef)}
+            >
+              ${chevronIcon}
+            </button>
+          `)}
+        <div
+          class="tab-group"
+          data-test="tablist"
+          role="tablist"
+          tabindex="-1"
+          @focusout=${this.#onTabListFocusout}
+          @scroll=${this.#setOverflowButtonsState}
+          ${onResize(this.#onTabListResize.bind(this))}
+          ${ref(this.#tabListElementRef)}
+        >
+          <slot
+            name="nav"
+            @private-selected=${this.#onTabSelected}
+            @slotchange=${this.#onNavSlotChange}
+            ${assertSlot([Tab])}
+          >
+            <!-- @type {Tab} -->
+          </slot>
+
+          <div
+            class=${classMap({
+            'selected-tab-indicator': true,
+            animated: this.hasUpdated,
+        })}
+            data-test="selected-tab-indicator"
+            ${ref(this.#selectedTabIndicatorElementRef)}
+          ></div>
+        </div>
+
+        ${when(this.isShowOverflowButtons, () => html `
+            <button
+              aria-label=${this.#localize.term('nextTab')}
+              class=${classMap({
+            'overflow-button': true,
+            end: true,
+            disabled: this.isDisableOverflowEndButton,
+        })}
+              data-test="overflow-end-button"
+              tabindex="-1"
+              @click=${this.#onOverflowButtonClick.bind(this, 'end')}
+              ?disabled=${this.isDisableOverflowEndButton}
+              ${ref(this.#overflowEndButtonElementRef)}
+            >
+              ${chevronIcon}
+            </button>
+          `)}
+      </div>
+
+      <slot @slotchange=${this.#onDefaultSlotChange} ${assertSlot([TabPanel])}>
+        <!-- @type {TabPanel} -->
+      </slot>
+    </div>`;
+    }
+    #componentElementRef;
+    #localize;
+    #overflowEndButtonElementRef;
+    #overflowStartButtonElementRef;
+    #resizeTimeout;
+    #selectedTabIndicatorElementRef;
+    #tabListElementRef;
+    get #firstTab() {
+        return this.#tabElements.at(0);
+    }
+    get #lastSelectedTab() {
+        return this.#tabElements.findLast(({ selected }) => selected);
+    }
+    get #panelElements() {
+        return [
+            ...this.querySelectorAll(':scope > glide-core-tab-panel'),
+        ];
+    }
+    get #tabElements() {
+        return [...this.querySelectorAll(':scope > glide-core-tab')];
+    }
+    #onComponentClick(event) {
+        const target = event.target;
+        const clickedTab = target.closest('glide-core-tab');
+        if (clickedTab instanceof Tab &&
+            !clickedTab.disabled &&
+            // Tab Panels can themselves include a Tab Group. We want to ensure
+            // we're dealing with one of this instance's Tabs and not a Tab in
+            // a Tab Panel.
+            this.#tabElements.includes(clickedTab)) {
+            clickedTab.selected = true;
+        }
+    }
+    #onComponentKeydown(event) {
+        const tab = event.target instanceof HTMLElement &&
+            event.target.closest('glide-core-tab');
+        if (['Enter', ' '].includes(event.key) &&
+            tab instanceof Tab &&
+            !tab.disabled) {
+            tab.selected = true;
+            event.preventDefault(); // Prevent page scroll when Space is pressed
+        }
+        if ([
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Home',
+            'End',
+        ].includes(event.key)) {
+            const focusedElement = this.#tabElements.find((tab) => tab.matches(':focus'));
+            if (focusedElement instanceof Tab) {
+                let index = this.#tabElements.indexOf(focusedElement);
+                switch (event.key) {
+                    case 'Home': {
+                        index = 0;
+                        break;
+                    }
+                    case 'End': {
+                        index = this.#tabElements.length - 1;
+                        break;
+                    }
+                    case 'ArrowLeft': {
+                        index--;
+                        break;
+                    }
+                    case 'ArrowRight': {
+                        index++;
+                        break;
+                    }
+                }
+                if (index < 0) {
+                    index = this.#tabElements.length - 1;
+                }
+                if (index > this.#tabElements.length - 1) {
+                    index = 0;
+                }
+                this.#tabElements[index]?.focus({
+                    preventScroll: false,
+                });
+                // Set the last tab navigated to as tabbable so that, if the tab button
+                // is pressed, focus moves to the tab's panel and not back to the
+                // last selected tab. This is particularly noticeable when the selected
+                // tab is to the left of the tab navigated to by keyboard.
+                for (const [, tabElement] of this.#tabElements.entries()) {
+                    tabElement.tabIndex =
+                        this.#tabElements[index] === tabElement ? 0 : -1;
+                }
+                this.#setOverflowButtonsState();
+                event.preventDefault(); // Prevent page scroll
+            }
+        }
+    }
+    #onDefaultSlotChange() {
+        this.#setAriaAttributes();
+    }
+    #onNavSlotChange() {
+        if (this.#lastSelectedTab) {
+            this.#lastSelectedTab.tabIndex = 0;
+            for (const tab of this.#tabElements) {
+                if (tab.selected && tab !== this.#lastSelectedTab) {
+                    tab.selected = false;
+                    tab.tabIndex = -1;
+                }
+            }
+        }
+        else if (this.#firstTab) {
+            this.#firstTab.selected = true;
+            this.#firstTab.tabIndex = 0;
+        }
+        for (const panel of this.#panelElements) {
+            panel.privateIsSelected = panel.name === this.#lastSelectedTab?.panel;
+            panel.tabIndex = panel.name === this.#lastSelectedTab?.panel ? 0 : -1;
+        }
+        this.#setAriaAttributes();
+        this.#setOverflowButtonsState();
+    }
+    #onOverflowButtonClick(button) {
+        const directionFactor = button === 'end' ? 1 : -1;
+        const percentageFactor = 0.5;
+        if (this.#tabListElementRef.value) {
+            this.#tabListElementRef.value.scrollBy({
+                left: directionFactor *
+                    this.#tabListElementRef.value.clientWidth *
+                    percentageFactor,
+                top: 0,
+            });
+        }
+    }
+    #onTabListFocusout() {
+        // Set the last selected tab as tabbable so that when pressing Shift + Tab on the
+        // Tab Panel focus goes back to the last selected tab.
+        for (const [, tabElement] of this.#tabElements.entries()) {
+            tabElement.tabIndex = tabElement === this.#lastSelectedTab ? 0 : -1;
+        }
+    }
+    #onTabListResize() {
+        if (this.#resizeTimeout) {
+            clearTimeout(this.#resizeTimeout);
+        }
+        // TODO
+        //
+        // This only needs to be called here so the indicator is updated when the content
+        // of Tab's slots changes.
+        //
+        // Tab's default slot will soon be replaced by a `label` attribute. When that
+        // happens, this call can be removed, and `#updateSelectedTabIndicator()` can be
+        // instead called when Tab dispatches "private-label-change" and
+        // "private-icon-slotchange" events.
+        //
+        // Those changes will certainly require slightly more code. But they'll make it
+        // much clearer why `#updateSelectedTabIndicator()` is being called. Additionally,
+        // Tab Group will no longer be doing unncessary work every time the viewport is
+        // resized.
+        this.#updateSelectedTabIndicator();
+        // Toggling the overflow buttons will itself cause a resize. So we
+        // wait a tick to avoid a loop.
+        this.#resizeTimeout = setTimeout(() => {
+            this.#setOverflowButtonsState();
+        });
+    }
+    #onTabSelected(event) {
+        if (event.target instanceof Tab && event.target.selected) {
+            event.target.privateSelect();
+            event.target.tabIndex = 0;
+            for (const tab of this.#tabElements) {
+                if (tab !== event.target) {
+                    tab.selected = false;
+                    tab.tabIndex = -1;
+                }
+            }
+        }
+        else if (this.#firstTab && !this.#lastSelectedTab) {
+            this.#firstTab.privateSelect();
+            this.#firstTab.tabIndex = 0;
+        }
+        this.#updateSelectedTabIndicator();
+        for (const panel of this.#panelElements) {
+            panel.privateIsSelected = panel.name === this.#lastSelectedTab?.panel;
+            panel.tabIndex = panel.name === this.#lastSelectedTab?.panel ? 0 : -1;
+        }
+    }
+    #setAriaAttributes() {
+        for (const tab of this.#tabElements) {
+            const relatedPanel = this.#panelElements
+                .filter((panel) => panel.name === tab.panel)
+                ?.at(0);
+            if (relatedPanel?.id) {
+                tab.setAttribute('aria-controls', relatedPanel.id);
+                relatedPanel.setAttribute('aria-labelledby', tab.id);
+            }
+        }
+    }
+    #setOverflowButtonsState() {
+        if (this.#tabListElementRef.value) {
+            this.isShowOverflowButtons =
+                this.#tabListElementRef.value.scrollWidth >
+                    this.#tabListElementRef.value.clientWidth;
+            this.isDisableOverflowStartButton =
+                this.#tabListElementRef.value.scrollLeft <= 0;
+            this.isDisableOverflowEndButton =
+                // Rounded because `scrollLeft` is a float and `clientWidth` and `scrollWidth`
+                // are integers rounded up.
+                Math.round(this.#tabListElementRef.value.scrollLeft) +
+                    this.#tabListElementRef.value.clientWidth >=
+                    this.#tabListElementRef.value.scrollWidth;
+        }
+    }
+    #updateSelectedTabIndicator() {
+        if (this.#lastSelectedTab &&
+            this.#tabElements.length > 0 &&
+            this.#selectedTabIndicatorElementRef.value) {
+            const isFirstTab = this.#lastSelectedTab === this.#tabElements.at(0);
+            const isLastTab = this.#lastSelectedTab === this.#tabElements.at(-1);
+            const selectedTabInlinePadding = isFirstTab
+                ? Number.parseInt(window
+                    .getComputedStyle(this.#lastSelectedTab)
+                    .getPropertyValue('padding-inline-start'))
+                : isLastTab
+                    ? Number.parseInt(window
+                        .getComputedStyle(this.#lastSelectedTab)
+                        .getPropertyValue('padding-inline-end'))
+                    : 0;
+            const selectedTabIndicatorTranslateLeft = this.#lastSelectedTab === this.#tabElements.at(0)
+                ? selectedTabInlinePadding
+                : this.#lastSelectedTab.offsetLeft -
+                    // `this.#tabElements.at(0)` is guaranteed to be defined by the guard at the
+                    // top of this function.
+                    //
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    this.#tabElements.at(0).offsetLeft;
+            this.#selectedTabIndicatorElementRef.value.style.setProperty('--private-selected-tab-indicator-translate', `${selectedTabIndicatorTranslateLeft}px`);
+            const { width: selectedTabWidth } = this.#lastSelectedTab.getBoundingClientRect();
+            this.#selectedTabIndicatorElementRef.value.style.setProperty('--private-selected-tab-indicator-width', `${selectedTabWidth - selectedTabInlinePadding}px`);
+        }
+    }
+};
+__decorate([
+    property({ reflect: true })
+], 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

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     :host {
       --tabs-padding-block-end: 0rem;
       --tabs-padding-block-start: 0rem;
@@ -102,4 +104,5 @@ import{css}from"lit";export default[css`
     ::slotted([slot='nav']:last-of-type) {
       padding-inline-end: 0.1875rem;
     }
-  `];
+  `,
+];

package/dist/tab.js

@@ -1 +1,133 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,a=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,s);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(i<3?r(a):i>3?r(t,o,a):r(t,o))||a);return i>3&&a&&Object.defineProperty(t,o,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let Tab=class Tab extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.version=packageJson.version,this.id=uniqueId(),this.role="tab",this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#e}set selected(e){const t=e!==this.#e;this.#e=e,t&&this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div class="${classMap({component:!0,disabled:this.disabled,selected:this.selected})}" data-test="component"><div class="container"><slot name="icon"></slot><slot></slot></div></div>`}updated(e){e.has("selected")&&this.setAttribute("aria-selected",this.selected?"true":"false"),e.has("disabled")&&(this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("tabindex","-1")):this.removeAttribute("aria-disabled"))}#e};__decorate([property({reflect:!0}),required],Tab.prototype,"panel",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],Tab.prototype,"selected",null),__decorate([property({reflect:!0})],Tab.prototype,"version",void 0),__decorate([property({reflect:!0})],Tab.prototype,"id",void 0),__decorate([property({reflect:!0})],Tab.prototype,"role",void 0),Tab=__decorate([customElement("glide-core-tab"),final],Tab);export default Tab;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './tab.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+import uniqueId from './library/unique-id.js';
+/**
+ * @attr {string} panel
+ * @attr {boolean} [disabled=false]
+ *
+ * @readonly
+ * @attr {string} [id]
+ *
+ * @readonly
+ * @attr {string} [role='tab']
+ *
+ * @attr {boolean} [selected=false]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} - A label
+ * @slot {Element} [icon]
+ *
+ * @fires {Event} selected
+ */
+let Tab = class Tab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.version = packageJson.version;
+        this.id = uniqueId();
+        this.role = 'tab';
+        this.#isSelected = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default false
+     */
+    get selected() {
+        return this.#isSelected;
+    }
+    set selected(isSelected) {
+        const hasChanged = isSelected !== this.#isSelected;
+        this.#isSelected = isSelected;
+        if (hasChanged) {
+            this.dispatchEvent(new Event('private-selected', {
+                bubbles: true,
+            }));
+        }
+    }
+    privateSelect() {
+        this.selected = true;
+        this.dispatchEvent(new Event('selected', { bubbles: true, composed: true }));
+    }
+    render() {
+        return html `<div
+      class=${classMap({
+            component: true,
+            disabled: this.disabled,
+            selected: this.selected,
+        })}
+      data-test="component"
+    >
+      <div class="container">
+        <slot name="icon">
+          <!--
+            @type {Element}
+          -->
+        </slot>
+
+        <slot>
+          <!--
+            A label
+            @type {Element | string}
+          -->
+        </slot>
+      </div>
+    </div>`;
+    }
+    updated(changes) {
+        if (changes.has('selected')) {
+            this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+        }
+        if (changes.has('disabled')) {
+            if (this.disabled) {
+                this.setAttribute('aria-disabled', 'true');
+                this.setAttribute('tabindex', '-1');
+            }
+            else {
+                this.removeAttribute('aria-disabled');
+            }
+        }
+    }
+    #isSelected;
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Tab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "selected", null);
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "version", void 0);
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "id", void 0);
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "role", void 0);
+Tab = __decorate([
+    customElement('glide-core-tab'),
+    final
+], Tab);
+export default Tab;

package/dist/tab.panel.js

@@ -1 +1,93 @@
-var __decorate=this&&this.__decorate||function(e,t,r,o){var a,i=arguments.length,s=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(s=(i<3?a(s):i>3?a(t,r,s):a(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tab.panel.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let TabPanel=class TabPanel extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.role="tabpanel",this.id=uniqueId(),this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get privateIsSelected(){return this.#e}set privateIsSelected(e){this.setAttribute("aria-hidden",e?"false":"true"),this.#e=e}render(){return html`<div class="${classMap({component:!0,hidden:!this.privateIsSelected,selected:this.privateIsSelected})}" data-test="tab-panel"><slot></slot></div>`}#e};__decorate([property({reflect:!0}),required],TabPanel.prototype,"name",void 0),__decorate([property({type:Boolean})],TabPanel.prototype,"privateIsSelected",null),__decorate([property({reflect:!0})],TabPanel.prototype,"version",void 0),__decorate([property({reflect:!0})],TabPanel.prototype,"role",void 0),__decorate([property({reflect:!0})],TabPanel.prototype,"id",void 0),TabPanel=__decorate([customElement("glide-core-tab-panel"),final],TabPanel);export default TabPanel;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import packageJson from '../package.json' with { type: 'json' };
+import styles from './tab.panel.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+import uniqueId from './library/unique-id.js';
+/**
+ * @attr {string} name - The corresponding Tab should have a `panel` attribute with this name
+ *
+ * @readonly
+ * @attr {string} [id]
+ *
+ * @readonly
+ * @attr {string} [role='tabpanel']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} - The content of the panel
+ *
+ * @cssprop [--padding-inline-end=0rem]
+ * @cssprop [--padding-inline-start=0rem]
+ */
+let TabPanel = class TabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.version = packageJson.version;
+        this.role = 'tabpanel';
+        this.id = uniqueId();
+        this.#isSelected = false;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    // Private because it's only meant to be used by Tab Group.
+    get privateIsSelected() {
+        return this.#isSelected;
+    }
+    set privateIsSelected(isSelected) {
+        this.setAttribute('aria-hidden', isSelected ? 'false' : 'true');
+        this.#isSelected = isSelected;
+    }
+    render() {
+        return html `<div
+      class=${classMap({
+            component: true,
+            hidden: !this.privateIsSelected,
+            selected: this.privateIsSelected,
+        })}
+      data-test="tab-panel"
+    >
+      <slot>
+        <!--
+          The content of the panel
+          @type {Element | string}
+        -->
+      </slot>
+    </div>`;
+    }
+    #isSelected;
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], TabPanel.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], TabPanel.prototype, "privateIsSelected", null);
+__decorate([
+    property({ reflect: true })
+], TabPanel.prototype, "version", void 0);
+__decorate([
+    property({ reflect: true })
+], TabPanel.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], TabPanel.prototype, "id", void 0);
+TabPanel = __decorate([
+    customElement('glide-core-tab-panel'),
+    final
+], TabPanel);
+export default TabPanel;

package/dist/tab.panel.styles.js

@@ -1,7 +1,12 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${focusOutline(":host(:focus-visible) .component")}
-    ${visuallyHidden(".hidden")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${focusOutline(':host(:focus-visible) .component')}
+    ${visuallyHidden('.hidden')}
+  `,
+    css `
     :host {
       --padding-inline-end: 0rem;
       --padding-inline-start: 0rem;
@@ -33,4 +38,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         block-size: 100%;
       }
     }
-  `];
+  `,
+];