@hpe-web/components 0.0.1 → 1.0.0

package/dist/elements/hpe-pull-quote/index.d.ts

@@ -0,0 +1,2 @@
+export { HpePullQuote } from './hpe-pull-quote.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/hpe-pull-quote/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-pull-quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/elements/hpe-pull-quote/index.js

@@ -0,0 +1,2 @@
+export { HpePullQuote } from './hpe-pull-quote.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/hpe-pull-quote/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-pull-quote/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/elements/hpe-tab-group/hpe-tab-group.d.ts

@@ -0,0 +1,86 @@
+import { LitElement } from "lit";
+/**
+ * A tab element that serves as a label for one of the tab panels.
+ *
+ * @tag hpe-tab
+ * @summary A selectable label within a tab group that activates its associated panel
+ *
+ * @attr {string} activation-mode - Tab activation mode: "automatic" | "manual"
+ *
+ * @attr {string} orientation - Tab orientation: "horizontal" | "vertical"
+ *
+ * @attr {boolean} disabled - Whether the tab is disabled
+ *
+ * @slot - Tab label text
+ *
+ * @fires tab-selected - Emitted when the tab is selected
+ *
+ * @csspart tab - The tab container element
+ */
+export declare class HpeTab extends LitElement {
+    static styles: import("lit").CSSResult;
+    activationMode: "automatic" | "manual";
+    orientation: "horizontal" | "vertical";
+    active: boolean;
+    disabled: boolean;
+    focus(options?: FocusOptions): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleClick;
+    private handleKeydown;
+    selectTab(): void;
+}
+/**
+ * A tab panel component that contains content for a specific tab.
+ *
+ * @tag hpe-tab-panel
+ * @summary A container for tab panel content that corresponds to an active tab
+ *
+ * @slot - Tab panel content
+ *
+ * @csspart tab-panel - The tab panel container element
+ */
+export declare class HpeTabPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    active: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A tab group component for organizing related content.
+ *
+ * @tag hpe-tab-group
+ * @summary Tab groups organize related content and allow navigation between groups of information
+ *
+ * @attr {string} activation-mode - Tab activation mode: "automatic" | "manual"
+ *
+ * @attr {string} orientation - Tab orientation: "horizontal" | "vertical"
+ *
+ * @slot tab - The tab elements (use `<hpe-tab>` elements)
+ * @slot panel - The tab panel elements (use `<hpe-tab-panel>` elements)
+ *
+ * @csspart tabs - The main tab group container
+ * @csspart tab-group - The tab group wrapper
+ * @csspart tab-panels - The tab panels container
+ */
+export declare class HpeTabGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    activationMode: "automatic" | "manual";
+    orientation: "horizontal" | "vertical";
+    activeTabIndex: number;
+    private tabs;
+    private panels;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private updateTabsAndPanels;
+    private handleTabSelected;
+    private setActiveTab;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-tab-group": HpeTabGroup;
+        "hpe-tab": HpeTab;
+        "hpe-tab-panel": HpeTabPanel;
+    }
+}
+//# sourceMappingURL=hpe-tab-group.d.ts.map

package/dist/elements/hpe-tab-group/hpe-tab-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-tab-group.d.ts","sourceRoot":"","sources":["../../../elements/hpe-tab-group/hpe-tab-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAU;IAGhC,cAAc,EAAE,WAAW,GAAG,QAAQ,CAAe;IAGrD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,MAAM,UAAS;IAGf,QAAQ,UAAS;IAER,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,MAAM;IAiBf,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAmDrB,SAAS;CASV;AAED;;;;;;;;;GASG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,MAAM,UAAS;IAEN,MAAM;CAYhB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,cAAc,EAAE,WAAW,GAAG,QAAQ,CAAe;IAGrD,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,cAAc,SAAK;IAEnB,OAAO,CAAC,IAAI,CAAgB;IAC5B,OAAO,CAAC,MAAM,CAAqB;IAE1B,iBAAiB;IAQjB,oBAAoB;IAQpB,OAAO;IAIP,MAAM;IAkBf,OAAO,CAAC,mBAAmB;IAyB3B,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,YAAY;CAerB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;QAC7B,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/elements/hpe-tab-group/hpe-tab-group.js

@@ -0,0 +1,275 @@
+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 { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./hpe-tab-group.styles.js";
+/**
+ * A tab element that serves as a label for one of the tab panels.
+ *
+ * @tag hpe-tab
+ * @summary A selectable label within a tab group that activates its associated panel
+ *
+ * @attr {string} activation-mode - Tab activation mode: "automatic" | "manual"
+ *
+ * @attr {string} orientation - Tab orientation: "horizontal" | "vertical"
+ *
+ * @attr {boolean} disabled - Whether the tab is disabled
+ *
+ * @slot - Tab label text
+ *
+ * @fires tab-selected - Emitted when the tab is selected
+ *
+ * @csspart tab - The tab container element
+ */
+let HpeTab = class HpeTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activationMode = "automatic";
+        this.orientation = "horizontal";
+        this.active = false;
+        this.disabled = false;
+    }
+    focus(options) {
+        this.shadowRoot?.querySelector("button")?.focus(options);
+    }
+    render() {
+        return html `
+      <button
+        part="tab"
+        class="tab"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeydown}
+        role="tab"
+        aria-selected=${this.active ? "true" : "false"}
+        tabindex=${this.disabled ? -1 : this.active ? 0 : -1}
+        ?disabled=${this.disabled}
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+    handleClick() {
+        if (!this.disabled) {
+            this.selectTab();
+        }
+    }
+    handleKeydown(e) {
+        if (this.disabled)
+            return;
+        const tablist = this.parentElement;
+        if (!tablist)
+            return;
+        const tabs = Array.from(tablist.querySelectorAll("hpe-tab"));
+        const currentIndex = tabs.indexOf(this);
+        const isVertical = this.orientation === "vertical";
+        let targetTab;
+        switch (e.key) {
+            case "ArrowLeft":
+                if (isVertical)
+                    return;
+                e.preventDefault();
+                targetTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+                break;
+            case "ArrowRight":
+                if (isVertical)
+                    return;
+                e.preventDefault();
+                targetTab = tabs[currentIndex + 1] || tabs[0];
+                break;
+            case "ArrowUp":
+                if (!isVertical)
+                    return;
+                e.preventDefault();
+                targetTab = tabs[currentIndex - 1] || tabs[tabs.length - 1];
+                break;
+            case "ArrowDown":
+                if (!isVertical)
+                    return;
+                e.preventDefault();
+                targetTab = tabs[currentIndex + 1] || tabs[0];
+                break;
+            case "Home":
+                e.preventDefault();
+                targetTab = tabs[0];
+                break;
+            case "End":
+                e.preventDefault();
+                targetTab = tabs[tabs.length - 1];
+                break;
+        }
+        if (targetTab && !targetTab.disabled) {
+            targetTab.focus();
+            if (this.activationMode === "automatic") {
+                targetTab.selectTab();
+            }
+        }
+    }
+    selectTab() {
+        this.dispatchEvent(new CustomEvent("tab-selected", {
+            detail: { tab: this },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+HpeTab.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: "activation-mode" })
+], HpeTab.prototype, "activationMode", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTab.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeTab.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeTab.prototype, "disabled", void 0);
+HpeTab = __decorate([
+    customElement("hpe-tab")
+], HpeTab);
+export { HpeTab };
+/**
+ * A tab panel component that contains content for a specific tab.
+ *
+ * @tag hpe-tab-panel
+ * @summary A container for tab panel content that corresponds to an active tab
+ *
+ * @slot - Tab panel content
+ *
+ * @csspart tab-panel - The tab panel container element
+ */
+let HpeTabPanel = class HpeTabPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+    }
+    render() {
+        return html `
+      <div
+        part="tab-panel"
+        class="tab-panel"
+        role="tabpanel"
+        ?hidden=${!this.active}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+HpeTabPanel.styles = styles;
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeTabPanel.prototype, "active", void 0);
+HpeTabPanel = __decorate([
+    customElement("hpe-tab-panel")
+], HpeTabPanel);
+export { HpeTabPanel };
+/**
+ * A tab group component for organizing related content.
+ *
+ * @tag hpe-tab-group
+ * @summary Tab groups organize related content and allow navigation between groups of information
+ *
+ * @attr {string} activation-mode - Tab activation mode: "automatic" | "manual"
+ *
+ * @attr {string} orientation - Tab orientation: "horizontal" | "vertical"
+ *
+ * @slot tab - The tab elements (use `<hpe-tab>` elements)
+ * @slot panel - The tab panel elements (use `<hpe-tab-panel>` elements)
+ *
+ * @csspart tabs - The main tab group container
+ * @csspart tab-group - The tab group wrapper
+ * @csspart tab-panels - The tab panels container
+ */
+let HpeTabGroup = class HpeTabGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.activationMode = "automatic";
+        this.orientation = "horizontal";
+        this.activeTabIndex = 0;
+        this.tabs = [];
+        this.panels = [];
+        this.handleTabSelected = (e) => {
+            const customEvent = e;
+            const selectedTab = customEvent.detail.tab;
+            const index = this.tabs.indexOf(selectedTab);
+            if (index !== -1) {
+                this.setActiveTab(index);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("tab-selected", this.handleTabSelected);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("tab-selected", this.handleTabSelected);
+    }
+    updated() {
+        this.updateTabsAndPanels();
+    }
+    render() {
+        return html `
+      <div part="tab-group" class="tab-group">
+        <div
+          role="tablist"
+          aria-orientation=${this.orientation}
+          part="tabs"
+          class="tabs"
+        >
+          <slot name="tab" @slotchange=${this.updateTabsAndPanels}></slot>
+        </div>
+        <div class="tab-panels" part="tab-panels">
+          <slot name="panel" @slotchange=${this.updateTabsAndPanels}></slot>
+        </div>
+      </div>
+    `;
+    }
+    updateTabsAndPanels() {
+        const tabSlot = this.shadowRoot?.querySelector('slot[name="tab"]');
+        const panelSlot = this.shadowRoot?.querySelector('slot[name="panel"]');
+        if (!tabSlot || !panelSlot)
+            return;
+        this.tabs = tabSlot.assignedElements().filter((el) => el instanceof HpeTab);
+        this.panels = panelSlot.assignedElements().filter((el) => el instanceof HpeTabPanel);
+        this.tabs.forEach((tab) => {
+            tab.orientation = this.orientation;
+            tab.activationMode = this.activationMode;
+        });
+        this.setActiveTab(this.activeTabIndex);
+    }
+    setActiveTab(index) {
+        if (this.tabs.length === 0)
+            return;
+        const validIndex = Math.max(0, Math.min(index, this.tabs.length - 1));
+        this.activeTabIndex = validIndex;
+        this.tabs.forEach((tab, i) => {
+            const isActive = i === validIndex;
+            tab.active = isActive;
+        });
+        this.panels.forEach((panel, i) => {
+            panel.active = i === validIndex;
+        });
+    }
+};
+HpeTabGroup.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: "activation-mode" })
+], HpeTabGroup.prototype, "activationMode", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTabGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], HpeTabGroup.prototype, "activeTabIndex", void 0);
+HpeTabGroup = __decorate([
+    customElement("hpe-tab-group")
+], HpeTabGroup);
+export { HpeTabGroup };
+//# sourceMappingURL=hpe-tab-group.js.map

package/dist/elements/hpe-tab-group/hpe-tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-tab-group.js","sourceRoot":"","sources":["../../../elements/hpe-tab-group/hpe-tab-group.ts"],"names":[],"mappings":"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"}

package/dist/elements/hpe-tab-group/hpe-tab-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=hpe-tab-group.styles.d.ts.map

package/dist/elements/hpe-tab-group/hpe-tab-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-tab-group.styles.d.ts","sourceRoot":"","sources":["../../../elements/hpe-tab-group/hpe-tab-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+LlB,CAAC"}

package/dist/elements/hpe-tab-group/hpe-tab-group.styles.js

@@ -0,0 +1,194 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    --hpe-tab-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-tab-horizontal-font-size: var(
+      --hpe-web-heading-h5-default-font-size,
+      20px
+    );
+    --hpe-tab-horizontal-line-height: var(
+      --hpe-web-heading-h5-default-line-height,
+      26px
+    );
+    --hpe-tab-horizontal-font-weight: var(
+      --hpe-web-heading-h5-default-font-weight,
+      500
+    );
+    --hpe-tab-horizontal-letter-spacing: var(
+      --hpe-web-heading-h5-default-letter-spacing,
+      0px
+    );
+
+    --hpe-tab-vertical-font-size: var(
+      --hpe-web-heading-h6-default-font-size,
+      16px
+    );
+    --hpe-tab-vertical-line-height: var(
+      --hpe-web-heading-h6-default-line-height,
+      22px
+    );
+    --hpe-tab-vertical-font-weight: var(
+      --hpe-web-heading-h6-default-font-weight,
+      500
+    );
+    --hpe-tab-vertical-letter-spacing: var(
+      --hpe-web-heading-h6-default-letter-spacing,
+      0px
+    );
+
+    --hpe-tab-horizontal-padding: 24px 0;
+    --hpe-tab-vertical-padding: 8px 32px;
+    --hpe-tab-content-gap: var(--spacing-none, 0px);
+    --hpe-tab-horizontal-list-gap: var(--spacing-medium, 32px);
+    --hpe-tab-vertical-list-gap: var(--spacing-3xsmall, 8px);
+    --hpe-tab-horizontal-indicator-width: 4px;
+    --hpe-tab-vertical-indicator-width: 6px;
+    --hpe-tab-vertical-layout-gap: var(--spacing-large, 40px);
+    --hpe-tab-transition: all 0.2s ease-in-out;
+    --hpe-tab-enabled-text-color: var(--hpe-web-color-text-default, #3e4550);
+    --hpe-tab-active-text-color: var(--hpe-web-color-text-strong, #292d3a);
+    --hpe-tab-active-border-color: var(
+      --hpe-web-color-border-selected,
+      #006750
+    );
+    --hpe-tab-hover-border-color: var(--hpe-web-color-border-weak, #d4d8db);
+    --hpe-tab-panels-padding-top: var(--spacing-large, 40px);
+  }
+
+  .tab-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0;
+  }
+
+  [role="tablist"] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--hpe-tab-horizontal-list-gap);
+  }
+
+  .tab-panels {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: var(--hpe-tab-panels-padding-top);
+  }
+
+  .tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hpe-tab-horizontal-padding);
+    gap: var(--hpe-tab-content-gap);
+    border: none;
+    border-bottom: var(--hpe-tab-horizontal-indicator-width) solid transparent;
+    cursor: pointer;
+    transition: var(--hpe-tab-transition);
+    font-family: var(--hpe-tab-font-family);
+    font-size: var(--hpe-tab-horizontal-font-size);
+    font-weight: var(--hpe-tab-horizontal-font-weight);
+    line-height: var(--hpe-tab-horizontal-line-height);
+    letter-spacing: var(--hpe-tab-horizontal-letter-spacing);
+    color: var(--hpe-tab-enabled-text-color);
+    background: transparent;
+    min-width: 40px;
+    white-space: nowrap;
+  }
+
+  :host([active]) .tab {
+    color: var(--hpe-tab-active-text-color);
+    border-bottom-color: var(--hpe-tab-active-border-color);
+  }
+
+  .tab:hover:not(:disabled) {
+    color: var(--hpe-tab-enabled-text-color);
+    border-bottom-color: var(--hpe-tab-hover-border-color);
+  }
+
+  :host([active]) .tab:hover:not(:disabled) {
+    color: var(--hpe-tab-active-text-color);
+    border-bottom-color: var(--hpe-tab-active-border-color);
+  }
+
+  :host([orientation="vertical"]) .tab-group {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--hpe-tab-vertical-layout-gap);
+  }
+
+  :host([orientation="vertical"]) [role="tablist"] {
+    flex-direction: column;
+    align-items: stretch;
+    flex: 0 0 25%;
+    gap: var(--hpe-tab-vertical-list-gap);
+  }
+
+  :host([orientation="vertical"]) .tab-panels {
+    flex: 1;
+    padding-top: 0;
+  }
+
+  :host([orientation="vertical"]) .tab {
+    width: 100%;
+    min-width: 0;
+    align-items: flex-start;
+    padding: var(--hpe-tab-vertical-padding);
+    border-left: var(--hpe-tab-vertical-indicator-width) solid transparent;
+    border-bottom: none;
+    font-size: var(--hpe-tab-vertical-font-size);
+    font-weight: var(--hpe-tab-vertical-font-weight);
+    line-height: var(--hpe-tab-vertical-line-height);
+    letter-spacing: var(--hpe-tab-vertical-letter-spacing);
+    text-align: left;
+  }
+
+  :host([orientation="vertical"][active]) .tab {
+    border-left-color: var(--hpe-tab-active-border-color);
+    border-bottom-color: transparent;
+  }
+
+  :host([orientation="vertical"]) .tab:hover:not(:disabled) {
+    border-left-color: var(--hpe-tab-hover-border-color);
+    border-bottom-color: transparent;
+  }
+
+  :host([orientation="vertical"][active]) .tab:hover:not(:disabled) {
+    border-left-color: var(--hpe-tab-active-border-color);
+  }
+
+  :host([disabled]) .tab {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .tab-panel {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    animation: fadeIn 0.2s ease-in-out;
+  }
+
+  .tab-panel[hidden] {
+    display: none;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+//# sourceMappingURL=hpe-tab-group.styles.js.map

package/dist/elements/hpe-tab-group/hpe-tab-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-tab-group.styles.js","sourceRoot":"","sources":["../../../elements/hpe-tab-group/hpe-tab-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LxB,CAAC"}

package/dist/elements/hpe-tab-group/index.d.ts

@@ -0,0 +1,2 @@
+export { HpeTabGroup, HpeTab, HpeTabPanel } from "./hpe-tab-group.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/hpe-tab-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-tab-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/elements/hpe-tab-group/index.js

@@ -0,0 +1,2 @@
+export { HpeTabGroup, HpeTab, HpeTabPanel } from "./hpe-tab-group.js";
+//# sourceMappingURL=index.js.map

package/dist/elements/hpe-tab-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-tab-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}