@patternfly/elements 2.2.2 → 2.3.1

package/pf-tabs/BaseTabs.js

@@ -1,5 +1,4 @@
-var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_tabindex, _BaseTabs_overflow, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_firstLastClasses, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
-import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -23,50 +22,73 @@ const styles = css `:host{display:block}[part=tabs-container]{position:relative;
 class BaseTabs extends LitElement {
     constructor() {
         super(...arguments);
-        _BaseTabs_instances.add(this);
-        _BaseTabs_tabindex.set(this, new RovingTabindexController(this));
-        _BaseTabs_overflow.set(this, new OverflowController(this));
-        _BaseTabs_logger.set(this, new Logger(this));
-        _BaseTabs__allTabs.set(this, []);
-        _BaseTabs__allPanels.set(this, []);
-        _BaseTabs_activeIndex.set(this, 0);
+        this.#tabindex = new RovingTabindexController(this);
+        this.#overflow = new OverflowController(this);
+        this.#logger = new Logger(this);
+        this.#_allTabs = [];
+        this.#_allPanels = [];
+        this.#activeIndex = 0;
         /**
          * Tab activation
          * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated
          * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)
          */
         this.manual = false;
-        _BaseTabs_onTabExpand.set(this, (event) => {
+        this.#onTabExpand = (event) => {
             if (!(event instanceof TabExpandEvent) ||
-                !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length ||
-                !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) {
+                !this.#allTabs.length ||
+                !this.#allPanels.length) {
                 return;
             }
             if (event.active) {
-                if (event.tab !== __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").activeItem) {
-                    __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(event.tab);
+                if (event.tab !== this.#tabindex.activeItem) {
+                    this.#tabindex.updateActiveItem(event.tab);
                 }
-                this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab === event.tab);
+                this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);
             }
-        });
+        };
     }
+    static { this.styles = [styles]; }
     static isTab(element) {
         return element instanceof BaseTab;
     }
     static isPanel(element) {
         return element instanceof BaseTabPanel;
     }
+    /** Time in milliseconds to debounce between scroll events and updating scroll button state */
+    static { this.scrollTimeoutDelay = 0; }
+    /** Icon name to use for the scroll left button */
+    static { this.scrollIconLeft = 'angle-left'; }
+    /** Icon name to use for the scroll right button */
+    static { this.scrollIconRight = 'angle-right'; }
+    /** Icon set to use for the scroll buttons */
+    static { this.scrollIconSet = 'fas'; }
+    static #instances = new Set();
+    static {
+        // on resize check for overflows to add or remove scroll buttons
+        window.addEventListener('resize', () => {
+            for (const instance of this.#instances) {
+                instance.#overflow.onScroll();
+            }
+        }, { capture: false });
+    }
+    #tabindex;
+    #overflow;
+    #logger;
+    #_allTabs;
+    #_allPanels;
+    #activeIndex;
     get activeIndex() {
-        return __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f");
+        return this.#activeIndex;
     }
     set activeIndex(index) {
         const oldIndex = this.activeIndex;
-        const tab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get)[index];
+        const tab = this.#allTabs[index];
         if (tab) {
             if (tab.disabled) {
-                __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
-                __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
-                index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
+                this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);
+                this.#tabindex.updateActiveItem(this.#firstFocusable);
+                index = this.#activeItemIndex;
             }
             else if (!tab.active) {
                 // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
@@ -75,141 +97,138 @@ class BaseTabs extends LitElement {
             }
         }
         if (index === -1) {
-            __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
-            const first = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
-            __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(first);
-            index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
+            this.#logger.warn(`No active tab found, setting first focusable tab to active`);
+            const first = this.#tabindex.firstItem;
+            this.#tabindex.updateActiveItem(first);
+            index = this.#activeItemIndex;
         }
-        __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
+        this.#activeIndex = index;
         this.requestUpdate('activeIndex', oldIndex);
-        __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[__classPrivateFieldGet(this, _BaseTabs_activeIndex, "f")].hidden = false;
+        this.#allPanels[this.#activeIndex].hidden = false;
         // close all tabs that are not the activeIndex
-        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_deactivateExcept).call(this, __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f"));
+        this.#deactivateExcept(this.#activeIndex);
+    }
+    get #activeTab() {
+        const [tab] = this.#_allTabs.filter(tab => tab.active);
+        return tab;
+    }
+    get #allTabs() {
+        return this.#_allTabs;
+    }
+    set #allTabs(tabs) {
+        this.#_allTabs = tabs.filter(tab => this.constructor.isTab(tab));
+    }
+    get #allPanels() {
+        return this.#_allPanels;
+    }
+    set #allPanels(panels) {
+        this.#_allPanels = panels.filter(panel => this.constructor.isPanel(panel));
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id || (this.id = getRandomId(this.localName));
-        this.addEventListener('expand', __classPrivateFieldGet(this, _BaseTabs_onTabExpand, "f"));
-        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).add(this);
+        this.id ||= getRandomId(this.localName);
+        this.addEventListener('expand', this.#onTabExpand);
+        BaseTabs.#instances.add(this);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).delete(this);
+        BaseTabs.#instances.delete(this);
     }
     willUpdate() {
-        const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
+        const { activeItem } = this.#tabindex;
         // If RTI has an activeItem, update the roving tabindex controller
         if (!this.manual &&
             activeItem &&
-            activeItem !== __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get) &&
+            activeItem !== this.#activeTab &&
             activeItem.ariaDisabled !== 'true') {
             activeItem.active = true;
         }
     }
     async firstUpdated() {
-        this.tabList.addEventListener('scroll', __classPrivateFieldGet(this, _BaseTabs_overflow, "f").onScroll.bind(this));
+        this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));
     }
     render() {
         const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor;
         return html `
-      <div part="container" class="${classMap({ overflow: __classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons })}">
-        <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
+      <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
+        <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html `
           <button id="previousTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
-              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowLeft}"
-              @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollLeft)}">
+              ?disabled="${!this.#overflow.overflowLeft}"
+              @click="${this.#scrollLeft}">
             <pf-icon icon="${scrollIconLeft}" set="${scrollIconSet}" loading="eager"></pf-icon>
           </button>`}
           <slot name="tab"
                 part="tabs"
                 role="tablist"
-                @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
+                @slotchange="${this.#onSlotchange}"></slot> ${!this.#overflow.showScrollButtons ? '' : html `
           <button id="nextTab" tabindex="-1"
               aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
-              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowRight}"
-              @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollRight)}">
+              ?disabled="${!this.#overflow.overflowRight}"
+              @click="${this.#scrollRight}">
             <pf-icon icon="${scrollIconRight}" set="${scrollIconSet}" loading="eager"></pf-icon>
           </button>`}
         </div>
-        <slot part="panels" @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot>
+        <slot part="panels" @slotchange="${this.#onSlotchange}"></slot>
       </div>
     `;
     }
-}
-_a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
-    const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
-    return tab;
-}, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
-    return __classPrivateFieldGet(this, _BaseTabs__allTabs, "f");
-}, _BaseTabs_allTabs_set = function _BaseTabs_allTabs_set(tabs) {
-    __classPrivateFieldSet(this, _BaseTabs__allTabs, tabs.filter(tab => this.constructor.isTab(tab)), "f");
-}, _BaseTabs_allPanels_get = function _BaseTabs_allPanels_get() {
-    return __classPrivateFieldGet(this, _BaseTabs__allPanels, "f");
-}, _BaseTabs_allPanels_set = function _BaseTabs_allPanels_set(panels) {
-    __classPrivateFieldSet(this, _BaseTabs__allPanels, panels.filter(panel => this.constructor.isPanel(panel)), "f");
-}, _BaseTabs_onSlotchange = function _BaseTabs_onSlotchange(event) {
-    if (event.target.name === 'tab') {
-        __classPrivateFieldSet(this, _BaseTabs_instances, this.tabs, "a", _BaseTabs_allTabs_set);
-    }
-    else {
-        __classPrivateFieldSet(this, _BaseTabs_instances, this.panels, "a", _BaseTabs_allPanels_set);
-    }
-    if ((__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) &&
-        (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
-        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
-        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
-        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
-        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
-        __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
-        __classPrivateFieldGet(this, _BaseTabs_overflow, "f").init(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
-    }
-}, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
-        const panel = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[index];
-        if (!panel.hasAttribute('aria-labelledby')) {
-            panel.setAttribute('aria-labelledby', tab.id);
+    #onSlotchange(event) {
+        if (event.target.name === 'tab') {
+            this.#allTabs = this.tabs;
         }
-        tab.setAttribute('aria-controls', panel.id);
-    });
-}, _BaseTabs_deactivateExcept = function _BaseTabs_deactivateExcept(index) {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
-}, _BaseTabs_firstFocusable_get = function _BaseTabs_firstFocusable_get() {
-    return __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
-}, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
-    const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
-    return tab;
-}, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
-    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
-}, _BaseTabs_activeItemIndex_get = function _BaseTabs_activeItemIndex_get() {
-    const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
-    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === activeItem);
-}, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get)?.classList.add('first');
-    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get)?.classList.add('last');
-}, _BaseTabs_scrollLeft = function _BaseTabs_scrollLeft() {
-    __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollLeft();
-}, _BaseTabs_scrollRight = function _BaseTabs_scrollRight() {
-    __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollRight();
-};
-BaseTabs.styles = [styles];
-/** Time in milliseconds to debounce between scroll events and updating scroll button state */
-BaseTabs.scrollTimeoutDelay = 0;
-/** Icon name to use for the scroll left button */
-BaseTabs.scrollIconLeft = 'angle-left';
-/** Icon name to use for the scroll right button */
-BaseTabs.scrollIconRight = 'angle-right';
-/** Icon set to use for the scroll buttons */
-BaseTabs.scrollIconSet = 'fas';
-_BaseTabs_instances_1 = { value: new Set() };
-(() => {
-    // on resize check for overflows to add or remove scroll buttons
-    window.addEventListener('resize', () => {
-        for (const instance of __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1)) {
-            __classPrivateFieldGet(instance, _BaseTabs_overflow, "f").onScroll();
+        else {
+            this.#allPanels = this.panels;
         }
-    }, { capture: false });
-})();
+        if ((this.#allTabs.length === this.#allPanels.length) &&
+            (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {
+            this.#updateAccessibility();
+            this.#firstLastClasses();
+            this.#tabindex.initItems(this.#allTabs);
+            this.activeIndex = this.#allTabs.findIndex(tab => tab.active);
+            this.#tabindex.updateActiveItem(this.#activeTab);
+            this.#overflow.init(this.tabList, this.#allTabs);
+        }
+    }
+    #updateAccessibility() {
+        this.#allTabs.forEach((tab, index) => {
+            const panel = this.#allPanels[index];
+            if (!panel.hasAttribute('aria-labelledby')) {
+                panel.setAttribute('aria-labelledby', tab.id);
+            }
+            tab.setAttribute('aria-controls', panel.id);
+        });
+    }
+    #onTabExpand;
+    #deactivateExcept(index) {
+        this.#allTabs.forEach((tab, i) => tab.active = i === index);
+        this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);
+    }
+    get #firstFocusable() {
+        return this.#tabindex.firstItem;
+    }
+    get #firstTab() {
+        const [tab] = this.#allTabs;
+        return tab;
+    }
+    get #lastTab() {
+        return this.#allTabs.at(-1);
+    }
+    get #activeItemIndex() {
+        const { activeItem } = this.#tabindex;
+        return this.#allTabs.findIndex(t => t === activeItem);
+    }
+    #firstLastClasses() {
+        this.#firstTab?.classList.add('first');
+        this.#lastTab?.classList.add('last');
+    }
+    #scrollLeft() {
+        this.#overflow.scrollLeft();
+    }
+    #scrollRight() {
+        this.#overflow.scrollRight();
+    }
+}
 __decorate([
     queryAssignedElements({ slot: 'tab' })
 ], BaseTabs.prototype, "tabs", void 0);

package/pf-tabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#overflow.onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #tabindex = new RovingTabindexController<BaseTab>(this);\n\n  #overflow = new OverflowController(this);\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #activeIndex = 0;\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#tabindex.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#tabindex.firstItem;\n      this.#tabindex.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('expand', this.#onTabExpand);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override willUpdate(): void {\n    const { activeItem } = this.#tabindex;\n    // If RTI has an activeItem, update the roving tabindex controller\n    if (!this.manual &&\n        activeItem &&\n        activeItem !== this.#activeTab &&\n        activeItem.ariaDisabled !== 'true') {\n      activeItem.active = true;\n    }\n  }\n\n  async firstUpdated() {\n    this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n    return html`\n      <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  #onSlotchange(event: { target: { name: string } }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#tabindex.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#tabindex.updateActiveItem(this.#activeTab);\n      this.#overflow.init(this.tabList, this.#allTabs);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        !this.#allTabs.length ||\n        !this.#allPanels.length) {\n      return;\n    }\n\n    if (event.active) {\n      if (event.tab !== this.#tabindex.activeItem) {\n        this.#tabindex.updateActiveItem(event.tab);\n      }\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab | undefined {\n    return this.#tabindex.firstItem;\n  }\n\n  get #firstTab(): BaseTab | undefined {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab | undefined {\n    return this.#allTabs.at(-1);\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#tabindex;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #firstLastClasses() {\n    this.#firstTab?.classList.add('first');\n    this.#lastTab?.classList.add('last');\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n}\n"]}
+{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,kBAAkB,EAAE,MAAM,yDAAyD,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;;;AAIjD;;;;;;GAMG;AACH,MAAsB,QAAS,SAAQ,UAAU;IAAjD;;QAqCE,cAAS,GAAG,IAAI,wBAAwB,CAAU,IAAI,CAAC,CAAC;QAExD,cAAS,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAEzC,YAAO,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC;QAE3B,cAAS,GAAc,EAAE,CAAC;QAE1B,gBAAW,GAAmB,EAAE,CAAC;QAEjC,iBAAY,GAAG,CAAC,CAAC;QAEjB;;;;WAIG;QACyC,WAAM,GAAG,KAAK,CAAC;QA2I3D,iBAAY,GAAG,CAAC,KAAY,EAAQ,EAAE;YACpC,IAAI,CAAC,CAAC,KAAK,YAAY,cAAc,CAAC;gBAClC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM;gBACrB,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;gBAC3B,OAAO;aACR;YAED,IAAI,KAAK,CAAC,MAAM,EAAE;gBAChB,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE;oBAC3C,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;iBAC5C;gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC;aACtE;QACH,CAAC,CAAC;IAqCJ,CAAC;aAlPiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAElC,MAAM,CAAC,KAAK,CAAC,OAAgB;QAC3B,OAAO,OAAO,YAAY,OAAO,CAAC;IACpC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAqB;QAClC,OAAO,OAAO,YAAY,YAAY,CAAC;IACzC,CAAC;IAED,8FAA8F;aACpE,uBAAkB,GAAW,CAAC,AAAZ,CAAa;IACzD,kDAAkD;aACxB,mBAAc,GAAW,YAAY,AAAvB,CAAwB;IAChE,mDAAmD;aACzB,oBAAe,GAAW,aAAa,AAAxB,CAAyB;IAClE,6CAA6C;aACnB,kBAAa,GAAW,KAAK,AAAhB,CAAiB;IAExD,MAAM,CAAC,UAAU,GAAG,IAAI,GAAG,EAAY,CAAC;IAExC;QACE,gEAAgE;QAChE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE;gBACtC,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;aAC/B;QACH,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IACzB,CAAC;IAQD,SAAS,CAA+C;IAExD,SAAS,CAAgC;IAEzC,OAAO,CAAoB;IAE3B,SAAS,CAAiB;IAE1B,WAAW,CAAsB;IAEjC,YAAY,CAAK;IAUjB,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED,IAAI,WAAW,CAAC,KAAa;QAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,GAAG,EAAE;YACP,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,wEAAwE,CAAC,CAAC;gBAC5F,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBACtD,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC;aAC/B;iBAAM,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;gBACtB,sEAAsE;gBACtE,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;gBAClB,OAAO;aACR;SACF;QAED,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;YAChF,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACvC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC;SAC/B;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAE5C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC;QAClD,8CAA8C;QAC9C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,UAAU;QACZ,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACvD,OAAO,GAAG,CAAC;IACb,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,QAAQ,CAAC,IAAe;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAE,IAAI,CAAC,WAA+B,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,UAAU,CAAC,MAAsB;QACnC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAE,IAAI,CAAC,WAA+B,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAClG,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACnD,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,kEAAkE;QAClE,IAAI,CAAC,IAAI,CAAC,MAAM;YACZ,UAAU;YACV,UAAU,KAAK,IAAI,CAAC,UAAU;YAC9B,UAAU,CAAC,YAAY,KAAK,MAAM,EAAE;YACtC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;SAC1B;IACH,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC,WAA8B,CAAC;QAC/F,OAAO,IAAI,CAAA;qCACsB,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,iBAAiB,EAAE,CAAC;qCACxD,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;4BAEtD,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,IAAI,aAAa;2BACxD,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY;wBAC/B,IAAI,CAAC,WAAW;6BACX,cAAc,UAAU,aAAa;oBAC9C;;;;+BAIW,IAAI,CAAC,aAAa,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;4BAE/E,IAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,IAAI,cAAc;2BAC1D,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa;wBAChC,IAAI,CAAC,YAAY;6BACZ,eAAe,UAAU,aAAa;oBAC/C;;2CAEuB,IAAI,CAAC,aAAa;;KAExD,CAAC;IACJ,CAAC;IAED,aAAa,CAAC,KAAmC;QAC/C,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,KAAK,EAAE;YAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC;SAC/B;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;YACnD,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;YAC9D,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAC9D,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAClD;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE;gBAC1C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;aAC/C;YACD,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAaV;IAEF,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;IAClC,CAAC;IAED,IAAI,SAAS;QACX,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,OAAO,GAAG,CAAC;IACb,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QACtC,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC;IACxD,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;IAC9B,CAAC;IAED,YAAY;QACV,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;IAC/B,CAAC;;AAnN+C;IAA/C,qBAAqB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sCAA0B;AAEhC;IAAhC,qBAAqB,EAAE;wCAAiC;AAEzB;IAA/B,KAAK,CAAC,eAAe,CAAC;yCAA+B;AAmBV;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAgB;AAG3D;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2CAG9B;SA3DmB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#overflow.onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #tabindex = new RovingTabindexController<BaseTab>(this);\n\n  #overflow = new OverflowController(this);\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #activeIndex = 0;\n\n  /**\n   * Tab activation\n   * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n   * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n   */\n  @property({ reflect: true, type: Boolean }) manual = false;\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#tabindex.updateActiveItem(this.#firstFocusable);\n        index = this.#activeItemIndex;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      const first = this.#tabindex.firstItem;\n      this.#tabindex.updateActiveItem(first);\n      index = this.#activeItemIndex;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('expand', this.#onTabExpand);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override willUpdate(): void {\n    const { activeItem } = this.#tabindex;\n    // If RTI has an activeItem, update the roving tabindex controller\n    if (!this.manual &&\n        activeItem &&\n        activeItem !== this.#activeTab &&\n        activeItem.ariaDisabled !== 'true') {\n      activeItem.active = true;\n    }\n  }\n\n  async firstUpdated() {\n    this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n    return html`\n      <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n        <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"previousTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflow.overflowLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n          <button id=\"nextTab\" tabindex=\"-1\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflow.overflowRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  #onSlotchange(event: { target: { name: string } }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n\n    if ((this.#allTabs.length === this.#allPanels.length) &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.#firstLastClasses();\n      this.#tabindex.initItems(this.#allTabs);\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#tabindex.updateActiveItem(this.#activeTab);\n      this.#overflow.init(this.tabList, this.#allTabs);\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        !this.#allTabs.length ||\n        !this.#allPanels.length) {\n      return;\n    }\n\n    if (event.active) {\n      if (event.tab !== this.#tabindex.activeItem) {\n        this.#tabindex.updateActiveItem(event.tab);\n      }\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  get #firstFocusable(): BaseTab | undefined {\n    return this.#tabindex.firstItem;\n  }\n\n  get #firstTab(): BaseTab | undefined {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab | undefined {\n    return this.#allTabs.at(-1);\n  }\n\n  get #activeItemIndex() {\n    const { activeItem } = this.#tabindex;\n    return this.#allTabs.findIndex(t => t === activeItem);\n  }\n\n  #firstLastClasses() {\n    this.#firstTab?.classList.add('first');\n    this.#lastTab?.classList.add('last');\n  }\n\n  #scrollLeft() {\n    this.#overflow.scrollLeft();\n  }\n\n  #scrollRight() {\n    this.#overflow.scrollRight();\n  }\n}\n"]}

package/pf-tabs/pf-tab-panel.js

@@ -11,8 +11,8 @@ import { BaseTabPanel } from './BaseTabPanel.js';
  * @csspart container - container for the panel content
  */
 let PfTabPanel = class PfTabPanel extends BaseTabPanel {
+    static { this.styles = [...BaseTabPanel.styles, styles]; }
 };
-PfTabPanel.styles = [...BaseTabPanel.styles, styles];
 PfTabPanel = __decorate([
     customElement('pf-tab-panel')
 ], PfTabPanel);

package/pf-tabs/pf-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,YAAY;;AAC1B,iBAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends BaseTabPanel {\n  static readonly styles = [...BaseTabPanel.styles, styles];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,YAAY;aAC1B,WAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends BaseTabPanel {\n  static readonly styles = [...BaseTabPanel.styles, styles];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}

package/pf-tabs/pf-tab.js

@@ -71,8 +71,8 @@ let PfTab = class PfTab extends BaseTab {
         this.active = false;
         this.disabled = false;
     }
+    static { this.styles = [...BaseTab.styles, styles]; }
 };
-PfTab.styles = [...BaseTab.styles, styles];
 __decorate([
     observed,
     property({ reflect: true, type: Boolean })

package/pf-tabs/pf-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;;AAPiB,YAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires { TabExpandEvent } tab-expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n  static readonly styles = [...BaseTab.styles, styles];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}
+{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;aAPiB,WAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n *       Can contain an `<svg>` or `<pf-icon>`\n * @slot\n *       Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth  {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--BackgroundColor            {@default `#f0f0f0`}\n * @cssprop     {<color>} --pf-c-tabs__link--disabled--BackgroundColor  {@default `#d2d2d2`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderTopWidth    {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderLeftWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth  {@default `1px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--after--Top    {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Right  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--before--Left  {@default `0`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingTop    {@default `1rem`}\n * @cssprop     {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderTopColor     {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderRightColor   {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderBottomColor  {@default `#d2d2d2`}\n * @cssprop     {<color>} --pf-c-tabs__link--before--BorderLeftColor    {@default `#d2d2d2`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}\n * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}\n * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}\n * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}\n *\n * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}\n *\n * @fires { TabExpandEvent } tab-expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n  static readonly styles = [...BaseTab.styles, styles];\n\n  @observed\n  @property({ reflect: true, type: Boolean }) active = false;\n\n  @observed\n  @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab': PfTab;\n  }\n}\n"]}

package/pf-tabs/pf-tabs.js

@@ -65,6 +65,8 @@ let PfTabs = class PfTabs extends BaseTabs {
         this.fill = false;
         this.borderBottom = 'true';
     }
+    static { this.styles = [...BaseTabs.styles, styles]; }
+    static { this.scrollTimeoutDelay = 150; }
     static isTab(element) {
         return element instanceof PfTab;
     }
@@ -75,8 +77,6 @@ let PfTabs = class PfTabs extends BaseTabs {
         return !this.vertical;
     }
 };
-PfTabs.styles = [...BaseTabs.styles, styles];
-PfTabs.scrollTimeoutDelay = 150;
 __decorate([
     cascades('pf-tab', 'pf-tab-panel'),
     property({ reflect: true })

package/pf-tabs/pf-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAc+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;IAvBC,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AA1Be,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;AAE5B,yBAAkB,GAAG,GAAG,AAAN,CAAO;AAWtB;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AAvBvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4BlB;SA5BY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n *\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends BaseTabs {\n  static readonly styles = [...BaseTabs.styles, styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isTab(element: HTMLElement): element is PfTab {\n    return element instanceof PfTab;\n  }\n\n  static isPanel(element: HTMLElement): element is PfTabPanel {\n    return element instanceof PfTabPanel;\n  }\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @cascades('pf-tab')\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  @cascades('pf-tab')\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  protected get canShowScrollButtons(): boolean {\n    return !this.vertical;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}
+{"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAc+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;aA3BiB,WAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;aAE5B,uBAAkB,GAAG,GAAG,AAAN,CAAO;IAEnD,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AAb4B;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AAvBvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4BlB;SA5BY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop     {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop     {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs--before---BorderLeftWidth  {@default `0`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--MaxWidth      {@default `15.625rem`}\n *\n * @cssprop     {<color>}   --pf-c-tabs--m-vertical__list--before--BorderColor       {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderTopWidth    {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderRightWidth  {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical__list--before--BorderLeftWidth   {@default `1px`}\n *\n * @cssprop     {<length>}  --pf-c-tabs--m-vertical--m-box--inset  {@default `2rem`}\n *\n * @cssprop     {<display>} --pf-c-tabs__list--Display  {@default `flex`}\n *\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--Width                         {@default `3rem`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--Color                         {@default `#151515`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--BackgroundColor               {@default `#ffffff`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--OutlineOffset                 {@default `-0.25rem`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--margin    {@default `.125s`}\n * @cssprop     {<time>}    --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--hover--Color                  {@default `#06c`}\n *\n * @cssprop     {<color>}   --pf-c-tabs__scroll-button--before--BorderColor           {@default `#d2d2d2`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderRightWidth      {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderBottomWidth     {@default `1px`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--BorderLeftWidth       {@default `0`}\n * @cssprop     {<length>}  --pf-c-tabs__scroll-button--before--border-width--base    {@default `1px`}\n *\n * @cssprop     {<color>} --pf-c-tabs__scroll-button--disabled--Color                 {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends BaseTabs {\n  static readonly styles = [...BaseTabs.styles, styles];\n\n  protected static readonly scrollTimeoutDelay = 150;\n\n  static isTab(element: HTMLElement): element is PfTab {\n    return element instanceof PfTab;\n  }\n\n  static isPanel(element: HTMLElement): element is PfTabPanel {\n    return element instanceof PfTabPanel;\n  }\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n  @cascades('pf-tab', 'pf-tab-panel')\n  @property({ reflect: true, type: Boolean }) vertical = false;\n\n  @cascades('pf-tab')\n  @property({ reflect: true, type: Boolean }) fill = false;\n\n  @cascades('pf-tab')\n  @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n  protected get canShowScrollButtons(): boolean {\n    return !this.vertical;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tabs': PfTabs;\n  }\n}\n"]}

package/pf-tile/pf-tile.js

@@ -54,8 +54,8 @@ let PfTile = class PfTile extends BaseTile {
         super(...arguments);
         this.selected = false;
     }
+    static { this.styles = [styles]; }
 };
-PfTile.styles = [styles];
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfTile.prototype, "selected", void 0);

package/pf-tile/pf-tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB;SANY,MAAM","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}
+{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;aALiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB;SANY,MAAM","sourcesContent":["\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * A **tile** component is a form of selection that can be used in place of a\n * radio button and is commonly used in forms. A tile appears visually similar to a\n * [selectable card](../card/). However, tiles are used specifically when the user is selecting\n * a static option, whereas a selectable card triggers an action or opens a quickstart\n * or sidebar to provide additional information.\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}

package/pf-timestamp/pf-timestamp.d.ts

@@ -1,23 +1,26 @@
+import type { PropertyValues } from 'lit';
 import { LitElement } from 'lit';
+import { type DateTimeFormat } from '@patternfly/pfe-core/controllers/timestamp-controller.js';
 /**
  * A **timestamp** provides consistent formats for displaying date and time values.
  */
 export declare class PfTimestamp extends LitElement {
     #private;
     static readonly styles: import("lit").CSSResult[];
-    get date(): string;
-    set date(string: string);
-    dateFormat?: 'full' | 'long' | 'medium' | 'short';
-    timeFormat?: 'full' | 'long' | 'medium' | 'short';
+    dateFormat?: DateTimeFormat;
+    timeFormat?: DateTimeFormat;
     customFormat?: object;
     displaySuffix?: string;
     locale?: string;
     relative?: boolean;
     utc?: boolean;
     hour12?: boolean;
+    get date(): string;
+    set date(string: string);
     get isoString(): string;
     get time(): string;
-    willUpdate(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {