@hpe-web/components 0.0.1 → 1.0.0

package/dist/elements/hpe-table/hpe-table.d.ts

@@ -0,0 +1,110 @@
+import { LitElement } from "lit";
+/**
+ * A table heading cell used within table header rows.
+ *
+ * @tag hpe-table-header-cell
+ * @summary Displays heading text for a table column.
+ *
+ * @slot - Header cell content
+ *
+ * @csspart header-cell - The header cell container
+ * @csspart header-cell-content - The header cell content wrapper
+ */
+export declare class HpeTableHeaderCell extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A table body cell used within table body rows.
+ *
+ * @tag hpe-table-body-cell
+ * @summary Displays body text content for a table row cell.
+ *
+ * @slot - Body cell content
+ *
+ * @csspart body-cell - The body cell container
+ * @csspart body-cell-content - The body cell content wrapper
+ */
+export declare class HpeTableBodyCell extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A table header row wrapper for grouping heading cells.
+ *
+ * @tag hpe-table-header-row
+ * @summary Groups one or more table heading cells with a themed row surface.
+ *
+ * @attr {string} type - Header row theme: "default" | "gray" | "dark"
+ *
+ * @slot - Header cell elements, typically `<hpe-table-header-cell>`
+ *
+ * @csspart header-row - The header row container
+ */
+export declare class HpeTableHeaderRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: "default" | "gray" | "dark";
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A table body row wrapper for grouping body cells.
+ *
+ * @tag hpe-table-body-row
+ * @summary Groups one or more table body cells in horizontal or stacked layouts.
+ *
+ * @attr {string} orientation - Body row layout: "horizontal" | "vertical"
+ * @attr {string} type - Body row theme: "default" | "stripped"
+ *
+ * @slot - Body cell elements, typically `<hpe-table-body-cell>`
+ *
+ * @csspart body-row - The body row container
+ * @csspart body-row-cells - The body row cells wrapper
+ */
+export declare class HpeTableBodyRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: "horizontal" | "vertical";
+    type: "default" | "stripped";
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A composite table component with slotted header and body rows.
+ *
+ * @tag hpe-table
+ * @summary Displays coordinated table header and body rows with responsive mobile overflow treatment.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ *
+ * @slot header-row - Header row elements, typically `<hpe-table-header-row>`
+ * @slot body-row - Body row elements, typically `<hpe-table-body-row>`
+ *
+ * @csspart container - The outer table container
+ * @csspart table - The scrollable table surface
+ * @csspart header-rows - The header rows wrapper
+ * @csspart body-rows - The body rows wrapper
+ * @csspart overflow-gradient - The mobile overflow gradient hint
+ */
+export declare class HpeTable extends LitElement {
+    static styles: import("lit").CSSResult;
+    private structureObserver;
+    private headerRows;
+    private bodyRows;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private handleSlotChange;
+    private observeStructureChanges;
+    private renderHeaderRow;
+    private renderBodyRow;
+    private renderCellContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-table": HpeTable;
+        "hpe-table-header-row": HpeTableHeaderRow;
+        "hpe-table-header-cell": HpeTableHeaderCell;
+        "hpe-table-body-row": HpeTableBodyRow;
+        "hpe-table-body-cell": HpeTableBodyCell;
+    }
+}
+//# sourceMappingURL=hpe-table.d.ts.map

package/dist/elements/hpe-table/hpe-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-table.d.ts","sourceRoot":"","sources":["../../../elements/hpe-table/hpe-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAQhD;;;;;;;;;;GAUG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAU;IAEvB,MAAM;CAShB;AAED;;;;;;;;;;GAUG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAU;IAEvB,MAAM;CAShB;AAED;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAGhC,IAAI,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAa;IAErC,MAAM;CAOhB;AAED;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAGhC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,IAAI,EAAE,SAAS,GAAG,UAAU,CAAa;IAEhC,MAAM;CAShB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,iBAAiB,CAEtB;IAGH,OAAO,CAAC,UAAU,CAAuB;IAGzC,OAAO,CAAC,QAAQ,CAAqB;IAE5B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO;IAIP,MAAM;IA4Bf,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,iBAAiB;CAY1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,sBAAsB,EAAE,iBAAiB,CAAC;QAC1C,uBAAuB,EAAE,kBAAkB,CAAC;QAC5C,oBAAoB,EAAE,eAAe,CAAC;QACtC,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/dist/elements/hpe-table/hpe-table.js

@@ -0,0 +1,262 @@
+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, nothing } from "lit";
+import { customElement, property, queryAssignedElements, } from "lit/decorators.js";
+import { styles } from "./hpe-table.styles.js";
+/**
+ * A table heading cell used within table header rows.
+ *
+ * @tag hpe-table-header-cell
+ * @summary Displays heading text for a table column.
+ *
+ * @slot - Header cell content
+ *
+ * @csspart header-cell - The header cell container
+ * @csspart header-cell-content - The header cell content wrapper
+ */
+let HpeTableHeaderCell = class HpeTableHeaderCell extends LitElement {
+    render() {
+        return html `
+      <th part="header-cell" class="header-cell" scope="col">
+        <div part="header-cell-content" class="header-cell-content">
+          <slot>Table Heading Cell</slot>
+        </div>
+      </th>
+    `;
+    }
+};
+HpeTableHeaderCell.styles = styles;
+HpeTableHeaderCell = __decorate([
+    customElement("hpe-table-header-cell")
+], HpeTableHeaderCell);
+export { HpeTableHeaderCell };
+/**
+ * A table body cell used within table body rows.
+ *
+ * @tag hpe-table-body-cell
+ * @summary Displays body text content for a table row cell.
+ *
+ * @slot - Body cell content
+ *
+ * @csspart body-cell - The body cell container
+ * @csspart body-cell-content - The body cell content wrapper
+ */
+let HpeTableBodyCell = class HpeTableBodyCell extends LitElement {
+    render() {
+        return html `
+      <td part="body-cell" class="body-cell">
+        <div part="body-cell-content" class="body-cell-content">
+          <slot>Table Body Cell</slot>
+        </div>
+      </td>
+    `;
+    }
+};
+HpeTableBodyCell.styles = styles;
+HpeTableBodyCell = __decorate([
+    customElement("hpe-table-body-cell")
+], HpeTableBodyCell);
+export { HpeTableBodyCell };
+/**
+ * A table header row wrapper for grouping heading cells.
+ *
+ * @tag hpe-table-header-row
+ * @summary Groups one or more table heading cells with a themed row surface.
+ *
+ * @attr {string} type - Header row theme: "default" | "gray" | "dark"
+ *
+ * @slot - Header cell elements, typically `<hpe-table-header-cell>`
+ *
+ * @csspart header-row - The header row container
+ */
+let HpeTableHeaderRow = class HpeTableHeaderRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = "default";
+    }
+    render() {
+        return html `
+      <tr part="header-row" class="header-row">
+        <slot></slot>
+      </tr>
+    `;
+    }
+};
+HpeTableHeaderRow.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeTableHeaderRow.prototype, "type", void 0);
+HpeTableHeaderRow = __decorate([
+    customElement("hpe-table-header-row")
+], HpeTableHeaderRow);
+export { HpeTableHeaderRow };
+/**
+ * A table body row wrapper for grouping body cells.
+ *
+ * @tag hpe-table-body-row
+ * @summary Groups one or more table body cells in horizontal or stacked layouts.
+ *
+ * @attr {string} orientation - Body row layout: "horizontal" | "vertical"
+ * @attr {string} type - Body row theme: "default" | "stripped"
+ *
+ * @slot - Body cell elements, typically `<hpe-table-body-cell>`
+ *
+ * @csspart body-row - The body row container
+ * @csspart body-row-cells - The body row cells wrapper
+ */
+let HpeTableBodyRow = class HpeTableBodyRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = "horizontal";
+        this.type = "default";
+    }
+    render() {
+        return html `
+      <tr part="body-row" class="body-row">
+        <div part="body-row-cells" class="body-row-cells">
+          <slot></slot>
+        </div>
+      </tr>
+    `;
+    }
+};
+HpeTableBodyRow.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeTableBodyRow.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTableBodyRow.prototype, "type", void 0);
+HpeTableBodyRow = __decorate([
+    customElement("hpe-table-body-row")
+], HpeTableBodyRow);
+export { HpeTableBodyRow };
+/**
+ * A composite table component with slotted header and body rows.
+ *
+ * @tag hpe-table
+ * @summary Displays coordinated table header and body rows with responsive mobile overflow treatment.
+ *
+ * Provide an accessible name with `aria-label` or `aria-labelledby`.
+ *
+ * @slot header-row - Header row elements, typically `<hpe-table-header-row>`
+ * @slot body-row - Body row elements, typically `<hpe-table-body-row>`
+ *
+ * @csspart container - The outer table container
+ * @csspart table - The scrollable table surface
+ * @csspart header-rows - The header rows wrapper
+ * @csspart body-rows - The body rows wrapper
+ * @csspart overflow-gradient - The mobile overflow gradient hint
+ */
+let HpeTable = class HpeTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.structureObserver = new MutationObserver(() => {
+            this.requestUpdate();
+        });
+        this.handleSlotChange = () => {
+            this.observeStructureChanges();
+            this.requestUpdate();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.observeStructureChanges();
+    }
+    disconnectedCallback() {
+        this.structureObserver.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.observeStructureChanges();
+    }
+    render() {
+        return html `
+      <div part="container" class="container">
+        <div class="source-slots" aria-hidden="true">
+          <slot name="header-row" @slotchange=${this.handleSlotChange}></slot>
+          <slot name="body-row" @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div part="table" class="table">
+          <table>
+            ${this.headerRows.length > 0
+            ? html `
+                  <thead part="header-rows" class="header-rows">
+                    ${this.headerRows.map((row) => this.renderHeaderRow(row))}
+                  </thead>
+                `
+            : nothing}
+            <tbody part="body-rows" class="body-rows">
+              ${this.bodyRows.map((row, index) => this.renderBodyRow(row, index))}
+            </tbody>
+          </table>
+        </div>
+        <div part="overflow-gradient" class="overflow-gradient"></div>
+      </div>
+    `;
+    }
+    observeStructureChanges() {
+        this.structureObserver.disconnect();
+        for (const row of [...this.headerRows, ...this.bodyRows]) {
+            this.structureObserver.observe(row, {
+                attributes: true,
+                attributeFilter: ["type", "orientation"],
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+    }
+    renderHeaderRow(row) {
+        const cells = Array.from(row.querySelectorAll("hpe-table-header-cell"));
+        return html `
+      <tr class=${`header-row ${row.type}`}>
+        ${cells.map((cell) => html `
+            <th scope="col" class=${`header-cell ${row.type}`}>
+              <div class="header-cell-content">
+                ${this.renderCellContent(cell, "Table Heading Cell")}
+              </div>
+            </th>
+          `)}
+      </tr>
+    `;
+    }
+    renderBodyRow(row, index) {
+        const cells = Array.from(row.querySelectorAll("hpe-table-body-cell"));
+        const rowTypeClass = row.type === "stripped" && index % 2 === 1 ? "stripped" : "default";
+        return html `
+      <tr class=${`body-row ${rowTypeClass} ${row.orientation}`}>
+        ${cells.map((cell) => html `
+            <td class=${`body-cell ${row.orientation}`}>
+              <div class="body-cell-content">
+                ${this.renderCellContent(cell, "Table Body Cell")}
+              </div>
+            </td>
+          `)}
+      </tr>
+    `;
+    }
+    renderCellContent(cell, fallbackText) {
+        const nodes = Array.from(cell.childNodes);
+        if (nodes.length === 0) {
+            return fallbackText;
+        }
+        return nodes.map((node) => node.cloneNode(true));
+    }
+};
+HpeTable.styles = styles;
+__decorate([
+    queryAssignedElements({ slot: "header-row", flatten: true })
+], HpeTable.prototype, "headerRows", void 0);
+__decorate([
+    queryAssignedElements({ slot: "body-row", flatten: true })
+], HpeTable.prototype, "bodyRows", void 0);
+HpeTable = __decorate([
+    customElement("hpe-table")
+], HpeTable);
+export { HpeTable };
+//# sourceMappingURL=hpe-table.js.map

package/dist/elements/hpe-table/hpe-table.js.map

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

package/dist/elements/hpe-table/hpe-table.styles.d.ts

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

package/dist/elements/hpe-table/hpe-table.styles.d.ts.map

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

package/dist/elements/hpe-table/hpe-table.styles.js

@@ -0,0 +1,214 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    --hpe-table-header-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-table-body-font-family: var(
+      --hpe-web-paragraph-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-table-header-font-size: var(
+      --hpe-web-heading-h5-medium-font-size,
+      1.25rem
+    );
+    --hpe-table-header-font-weight: var(
+      --hpe-web-heading-h5-medium-font-weight,
+      500
+    );
+    --hpe-table-header-line-height: var(
+      --hpe-web-heading-h5-medium-line-height,
+      1.3
+    );
+    --hpe-table-header-letter-spacing: var(
+      --hpe-web-heading-h5-medium-letter-spacing,
+      0
+    );
+    --hpe-table-body-font-size: var(
+      --hpe-web-paragraph-body-copy-font-size,
+      1.25rem
+    );
+    --hpe-table-body-font-weight: var(
+      --hpe-web-paragraph-body-copy-font-weight,
+      400
+    );
+    --hpe-table-body-line-height: var(
+      --hpe-web-paragraph-body-copy-line-height,
+      1.5
+    );
+    --hpe-table-body-letter-spacing: var(
+      --hpe-web-paragraph-body-copy-letter-spacing,
+      -0.01em
+    );
+    --hpe-table-row-gap: var(--hpe-web-spacing-none, 0px);
+    --hpe-table-cell-padding-block: var(--hpe-web-spacing-medium, 2rem);
+    --hpe-table-cell-padding-inline: var(--hpe-web-spacing-small, 1.5rem);
+    --hpe-table-mobile-cell-width: 11.875rem;
+    --hpe-table-mobile-overflow-width: 7.25rem;
+    --hpe-table-header-border-width: 0.25rem;
+    --hpe-table-header-text-color: var(--hpe-web-color-text-strong, #292d3a);
+    --hpe-table-body-text-color: var(--hpe-web-color-text-default, #3e4550);
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .container {
+    position: relative;
+    width: 100%;
+  }
+
+  .source-slots {
+    display: none;
+  }
+
+  .table {
+    width: 100%;
+    overflow-x: hidden;
+    background: var(--hpe-web-color-background-default, #ffffff);
+  }
+
+  .table > table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    table-layout: fixed;
+    background: var(--hpe-web-color-background-default, #ffffff);
+  }
+
+  .header-rows,
+  .body-rows {
+    width: 100%;
+  }
+
+  .overflow-gradient {
+    display: none;
+  }
+
+  .header-row {
+    width: 100%;
+    border-bottom: var(--hpe-table-header-border-width) solid
+      var(--hpe-web-color-border-default, #b1b9be);
+    background: transparent;
+  }
+
+  .header-row.gray {
+    background: var(--hpe-web-color-background-card, #f7f7f7);
+    border-bottom-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  .header-row.dark {
+    background: var(--hpe-web-color-background-neutral-strong, #1d1f27);
+    border-bottom-color: var(--hpe-web-base-color-white-opacity12, #ffffff1f);
+  }
+
+  .header-cell {
+    box-sizing: border-box;
+    min-height: 5.625rem;
+    padding: var(--hpe-table-cell-padding-block)
+      var(--hpe-table-cell-padding-inline);
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .header-cell-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--hpe-table-header-text-color, #292d3a);
+    font-family: var(--hpe-table-header-font-family);
+    font-size: var(--hpe-table-header-font-size);
+    font-weight: var(--hpe-table-header-font-weight);
+    line-height: var(--hpe-table-header-line-height);
+    letter-spacing: var(--hpe-table-header-letter-spacing);
+    text-align: center;
+  }
+
+  .header-cell.dark .header-cell-content {
+    color: var(--hpe-web-color-text-on-strong, #ffffff);
+  }
+
+  .body-row {
+    width: 100%;
+    border-top: 1px solid var(--hpe-web-color-border-weak, #d4d8db);
+    border-bottom: 1px solid var(--hpe-web-color-border-weak, #d4d8db);
+    background: var(--hpe-web-color-background-default, #ffffff);
+  }
+
+  .body-row.stripped {
+    background: var(--hpe-web-color-background-card, #f7f7f7);
+  }
+
+  .body-cell {
+    box-sizing: border-box;
+    min-height: 5.875rem;
+    padding: var(--hpe-table-cell-padding-block)
+      var(--hpe-table-cell-padding-inline);
+    vertical-align: middle;
+  }
+
+  .body-cell-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    color: var(--hpe-table-body-text-color);
+    font-family: var(--hpe-table-body-font-family);
+    font-size: var(--hpe-table-body-font-size);
+    font-weight: var(--hpe-table-body-font-weight);
+    line-height: var(--hpe-table-body-line-height);
+    letter-spacing: var(--hpe-table-body-letter-spacing);
+    text-align: left;
+  }
+
+  .body-row.vertical .body-cell {
+    display: block;
+    width: 100%;
+    min-width: 100%;
+  }
+
+  @media (max-width: 48rem) {
+    .table {
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .table::-webkit-scrollbar {
+      display: none;
+    }
+
+    .table > table {
+      width: max-content;
+      min-width: 100%;
+    }
+
+    .overflow-gradient {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      z-index: 1;
+      width: var(--hpe-table-mobile-overflow-width);
+      pointer-events: none;
+      background: linear-gradient(
+        270deg,
+        var(--hpe-web-color-gradient-content-overlay-stop50) 50%,
+        var(--hpe-web-color-gradient-content-overlay-stop0) 100%
+      );
+    }
+
+    .header-cell,
+    .body-cell {
+      min-width: var(--hpe-table-mobile-cell-width);
+      width: var(--hpe-table-mobile-cell-width);
+    }
+  }
+`;
+//# sourceMappingURL=hpe-table.styles.js.map

package/dist/elements/hpe-table/hpe-table.styles.js.map

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

package/dist/elements/hpe-table/index.d.ts

@@ -0,0 +1,2 @@
+export { HpeTable, HpeTableHeaderRow, HpeTableHeaderCell, HpeTableBodyRow, HpeTableBodyCell, } from "./hpe-table.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/hpe-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}

package/dist/elements/hpe-table/index.js

@@ -0,0 +1,2 @@
+export { HpeTable, HpeTableHeaderRow, HpeTableHeaderCell, HpeTableBodyRow, HpeTableBodyCell, } from "./hpe-table.js";
+//# sourceMappingURL=index.js.map

package/dist/elements/hpe-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,gBAAgB,CAAC"}

package/dist/foundation/hpe-columns/hpe-columns.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+type ColumnsVariant = "1" | "2" | "3" | "4" | "5" | "40:60" | "60:40" | "33:66" | "66:33" | "20:80" | "80:20";
+type Orientation = "horizontal" | "vertical";
+type Order = "default" | "reverse";
+/**
+ * A layout primitive that arranges slotted content into configurable columns.
+ *
+ * @tag hpe-columns
+ * @summary Distributes content into horizontal or vertical column layouts with optional reverse order.
+ *
+ * @attr {string} columns - Layout variant: '1' | '2' | '3' | '4' | '5' | '40:60' | '60:40' | '33:66' | '66:33' | '20:80' | '80:20'
+ * @attr {string} orientation - Layout direction: 'horizontal' | 'vertical'
+ * @attr {string} order - Item order: 'default' | 'reverse'
+ *
+ * @slot column-1 - Content for the first column
+ * @slot column-2 - Content for the second column
+ * @slot column-3 - Content for the third column
+ * @slot column-4 - Content for the fourth column
+ * @slot column-5 - Content for the fifth column
+ *
+ * @csspart columns - The columns layout container
+ * @csspart column - A column wrapper element
+ */
+export declare class HpeColumns extends LitElement {
+    static styles: import("lit").CSSResult;
+    columns: ColumnsVariant;
+    orientation: Orientation;
+    order: Order;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderColumn;
+    private shouldRenderColumn;
+    private get columnCount();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-columns": HpeColumns;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-columns.d.ts.map

package/dist/foundation/hpe-columns/hpe-columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-columns.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-columns/hpe-columns.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,KAAK,cAAc,GACf,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,GACP,OAAO,CAAC;AAEZ,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7C,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;AAEnC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,cAAc,CAAO;IAG9B,WAAW,EAAE,WAAW,CAAgB;IAGxC,KAAK,EAAE,KAAK,CAAa;IAEhB,MAAM;IAYf,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,KAAK,WAAW,GAMtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}