@hpe-web/components 0.0.1 → 1.0.0

package/dist/foundation/hpe-columns/hpe-columns.js

@@ -0,0 +1,78 @@
+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-columns.styles.js";
+/**
+ * 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
+ */
+let HpeColumns = class HpeColumns extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = "2";
+        this.orientation = "horizontal";
+        this.order = "default";
+    }
+    render() {
+        return html `
+      <div part="columns" class="columns">
+        ${this.renderColumn("column-1")}
+        ${this.shouldRenderColumn(2) ? this.renderColumn("column-2") : ""}
+        ${this.shouldRenderColumn(3) ? this.renderColumn("column-3") : ""}
+        ${this.shouldRenderColumn(4) ? this.renderColumn("column-4") : ""}
+        ${this.shouldRenderColumn(5) ? this.renderColumn("column-5") : ""}
+      </div>
+    `;
+    }
+    renderColumn(slotName) {
+        return html `
+      <div part="column" class="column ${slotName}">
+        <slot name=${slotName}></slot>
+      </div>
+    `;
+    }
+    shouldRenderColumn(columnNumber) {
+        return columnNumber <= this.columnCount;
+    }
+    get columnCount() {
+        if (this.columns.includes(":")) {
+            return 2;
+        }
+        return Number(this.columns);
+    }
+};
+HpeColumns.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeColumns.prototype, "columns", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeColumns.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeColumns.prototype, "order", void 0);
+HpeColumns = __decorate([
+    customElement("hpe-columns")
+], HpeColumns);
+export { HpeColumns };
+//# sourceMappingURL=hpe-columns.js.map

package/dist/foundation/hpe-columns/hpe-columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-columns.js","sourceRoot":"","sources":["../../../foundation/hpe-columns/hpe-columns.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAkBjD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIL,YAAO,GAAmB,GAAG,CAAC;QAG9B,gBAAW,GAAgB,YAAY,CAAC;QAGxC,UAAK,GAAU,SAAS,CAAC;IAiC3B,CAAC;IA/BU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;UAC7B,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;UAC/D,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;UAC/D,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;UAC/D,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE;;KAEpE,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,OAAO,IAAI,CAAA;yCAC0B,QAAQ;qBAC5B,QAAQ;;KAExB,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,YAAoB;QAC7C,OAAO,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC;IAC1C,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,CAAC,CAAC;QACX,CAAC;QAED,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;;AAzCe,iBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACE;AAG9B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACY;AAGxC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACH;AAVd,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA2CtB"}

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

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

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

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

package/dist/foundation/hpe-columns/hpe-columns.styles.js

@@ -0,0 +1,110 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-columns-gap-horizontal: var(--hpe-web-spacing-large);
+    --hpe-columns-gap-vertical: var(--hpe-web-spacing-small);
+  }
+
+  .columns {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .column {
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  ::slotted(*) {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  :host([orientation="horizontal"]) .columns {
+    display: grid;
+    gap: var(--hpe-columns-gap-horizontal);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :host([orientation="horizontal"][order="reverse"]) .column-1 {
+    order: 5;
+  }
+
+  :host([orientation="horizontal"][order="reverse"]) .column-2 {
+    order: 4;
+  }
+
+  :host([orientation="horizontal"][order="reverse"]) .column-3 {
+    order: 3;
+  }
+
+  :host([orientation="horizontal"][order="reverse"]) .column-4 {
+    order: 2;
+  }
+
+  :host([orientation="horizontal"][order="reverse"]) .column-5 {
+    order: 1;
+  }
+
+  :host([orientation="vertical"]) .columns {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-columns-gap-vertical);
+  }
+
+  :host([orientation="vertical"][order="reverse"]) .columns {
+    flex-direction: column-reverse;
+  }
+
+  :host([orientation="vertical"]) .column {
+    width: 100%;
+  }
+
+  :host([orientation="horizontal"][columns="1"]) .columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :host([orientation="horizontal"][columns="2"]) .columns {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :host([orientation="horizontal"][columns="3"]) .columns {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  :host([orientation="horizontal"][columns="4"]) .columns {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  :host([orientation="horizontal"][columns="5"]) .columns {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  :host([orientation="horizontal"][columns="40:60"]) .columns {
+    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
+  }
+
+  :host([orientation="horizontal"][columns="60:40"]) .columns {
+    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
+  }
+
+  :host([orientation="horizontal"][columns="33:66"]) .columns {
+    grid-template-columns: minmax(0, 33fr) minmax(0, 66fr);
+  }
+
+  :host([orientation="horizontal"][columns="66:33"]) .columns {
+    grid-template-columns: minmax(0, 66fr) minmax(0, 33fr);
+  }
+
+  :host([orientation="horizontal"][columns="20:80"]) .columns {
+    grid-template-columns: minmax(0, 20fr) minmax(0, 80fr);
+  }
+
+  :host([orientation="horizontal"][columns="80:20"]) .columns {
+    grid-template-columns: minmax(0, 80fr) minmax(0, 20fr);
+  }
+`;
+//# sourceMappingURL=hpe-columns.styles.js.map

package/dist/foundation/hpe-columns/hpe-columns.styles.js.map

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

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

@@ -0,0 +1,2 @@
+export { HpeColumns } from "./hpe-columns.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/foundation/hpe-columns/index.js

@@ -0,0 +1,2 @@
+export { HpeColumns } from "./hpe-columns.js";
+//# sourceMappingURL=index.js.map

package/dist/foundation/hpe-columns/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../foundation/hpe-columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * A structural container that constrains content width and applies section padding.
+ *
+ * @tag hpe-section
+ * @summary Groups related content into a distinct area with configurable vertical padding.
+ *
+ * @attr {string} padding - Padding variant: 'default' | 'none' | 'top' | 'bottom' | 'left-right-only'
+ *
+ * @slot - Section content
+ *
+ * @csspart section - The outer section element
+ * @csspart container - The inner content-width container
+ */
+export declare class HpeSection extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: "default" | "none" | "top" | "bottom" | "left-right-only";
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-section": HpeSection;
+    }
+}
+//# sourceMappingURL=hpe-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-section.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-section/hpe-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CACtD;IAEH,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/foundation/hpe-section/hpe-section.js

@@ -0,0 +1,46 @@
+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-section.styles.js";
+/**
+ * A structural container that constrains content width and applies section padding.
+ *
+ * @tag hpe-section
+ * @summary Groups related content into a distinct area with configurable vertical padding.
+ *
+ * @attr {string} padding - Padding variant: 'default' | 'none' | 'top' | 'bottom' | 'left-right-only'
+ *
+ * @slot - Section content
+ *
+ * @csspart section - The outer section element
+ * @csspart container - The inner content-width container
+ */
+let HpeSection = class HpeSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+    }
+    render() {
+        return html `
+      <section part="section" class="section">
+        <div part="container" class="container">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+    }
+};
+HpeSection.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeSection.prototype, "padding", void 0);
+HpeSection = __decorate([
+    customElement("hpe-section")
+], HpeSection);
+export { HpeSection };
+//# sourceMappingURL=hpe-section.js.map

package/dist/foundation/hpe-section/hpe-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-section.js","sourceRoot":"","sources":["../../../foundation/hpe-section/hpe-section.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD;;;;;;;;;;;;GAYG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIL,YAAO,GACL,SAAS,CAAC;IAWd,CAAC;IATU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;;AAde,iBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAEhB;AALD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgBtB"}

package/dist/foundation/hpe-section/hpe-section.styles.d.ts

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

package/dist/foundation/hpe-section/hpe-section.styles.d.ts.map

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

package/dist/foundation/hpe-section/hpe-section.styles.js

@@ -0,0 +1,50 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    background: var(--hpe-web-color-background-default);
+    --hpe-section-inline-padding: var(--hpe-web-spacing-4xlarge);
+    --hpe-section-block-padding: var(--hpe-web-spacing-xxlarge);
+    --hpe-section-max-width: 1600px;
+  }
+
+  .section {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--hpe-section-block-padding) var(--hpe-section-inline-padding);
+    background: var(--hpe-web-color-background-default);
+  }
+
+  .container {
+    width: 100%;
+    max-width: var(--hpe-section-max-width);
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-web-spacing-large);
+  }
+
+  :host([padding="none"]) .section {
+    padding: 0;
+  }
+
+  :host([padding="none"]) .container {
+    max-width: none;
+  }
+
+  :host([padding="top"]) .section {
+    padding-bottom: 0;
+  }
+
+  :host([padding="bottom"]) .section {
+    padding-top: 0;
+  }
+
+  :host([padding="left-right-only"]) .section {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+`;
+//# sourceMappingURL=hpe-section.styles.js.map

package/dist/foundation/hpe-section/hpe-section.styles.js.map

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

package/dist/foundation/hpe-section/index.d.ts

@@ -0,0 +1,2 @@
+export { HpeSection } from "./hpe-section.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/foundation/hpe-section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/foundation/hpe-section/index.js

@@ -0,0 +1,2 @@
+export { HpeSection } from "./hpe-section.js";
+//# sourceMappingURL=index.js.map

package/dist/foundation/hpe-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../foundation/hpe-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+type StackGap = "xs" | "sm" | "md" | "lg";
+/**
+ * A horizontal layout primitive that arranges slotted content in a row with token-based gap variants.
+ *
+ * @tag hpe-x-stack
+ * @summary Organizes content horizontally with configurable stack spacing.
+ *
+ * @attr {string} gap - Gap variant: 'xs' | 'sm' | 'md' | 'lg'
+ *
+ * @slot - Stack content
+ *
+ * @csspart stack - The stack container element
+ */
+export declare class HpeXStack extends LitElement {
+    static styles: import("lit").CSSResult;
+    gap: StackGap;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-x-stack": HpeXStack;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-x-stack.d.ts.map

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-x-stack.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,EAAE,QAAQ,CAAQ;IAEZ,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.js

@@ -0,0 +1,43 @@
+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-x-stack.styles.js";
+/**
+ * A horizontal layout primitive that arranges slotted content in a row with token-based gap variants.
+ *
+ * @tag hpe-x-stack
+ * @summary Organizes content horizontally with configurable stack spacing.
+ *
+ * @attr {string} gap - Gap variant: 'xs' | 'sm' | 'md' | 'lg'
+ *
+ * @slot - Stack content
+ *
+ * @csspart stack - The stack container element
+ */
+let HpeXStack = class HpeXStack extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.gap = "xs";
+    }
+    render() {
+        return html `
+      <div part="stack" class="stack">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+HpeXStack.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeXStack.prototype, "gap", void 0);
+HpeXStack = __decorate([
+    customElement("hpe-x-stack")
+], HpeXStack);
+export { HpeXStack };
+//# sourceMappingURL=hpe-x-stack.js.map

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-x-stack.js","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAIjD;;;;;;;;;;;GAWG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIL,QAAG,GAAa,IAAI,CAAC;IASvB,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAXe,gBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACP;AAJV,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAarB"}

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.styles.d.ts

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

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-x-stack.styles.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.styles.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-stack-gap-xs: var(--hpe-web-spacing-xsmall, 1rem);
+    --hpe-stack-gap-sm: var(--hpe-web-spacing-small, 1.5rem);
+    --hpe-stack-gap-md: var(--hpe-web-spacing-medium, 2rem);
+    --hpe-stack-gap-lg: var(--hpe-web-spacing-large, 2.5rem);
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+    box-sizing: border-box;
+    gap: var(--hpe-stack-gap-xs);
+  }
+
+  :host([gap="sm"]) .stack {
+    gap: var(--hpe-stack-gap-sm);
+  }
+
+  :host([gap="md"]) .stack {
+    gap: var(--hpe-stack-gap-md);
+  }
+
+  :host([gap="lg"]) .stack {
+    gap: var(--hpe-stack-gap-lg);
+  }
+`;
+//# sourceMappingURL=hpe-x-stack.styles.js.map

package/dist/foundation/hpe-stacks/hpe-x-stack/hpe-x-stack.styles.js.map

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

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+type StackGap = "xs" | "sm" | "md" | "lg";
+/**
+ * A vertical layout primitive that arranges slotted content in a column with token-based gap variants.
+ *
+ * @tag hpe-y-stack
+ * @summary Organizes content vertically with configurable stack spacing.
+ *
+ * @attr {string} gap - Gap variant: 'xs' | 'sm' | 'md' | 'lg'
+ *
+ * @slot - Stack content
+ *
+ * @csspart stack - The stack container element
+ */
+export declare class HpeYStack extends LitElement {
+    static styles: import("lit").CSSResult;
+    gap: StackGap;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-y-stack": HpeYStack;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-y-stack.d.ts.map

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-y-stack.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,EAAE,QAAQ,CAAQ;IAEZ,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.js

@@ -0,0 +1,43 @@
+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-y-stack.styles.js";
+/**
+ * A vertical layout primitive that arranges slotted content in a column with token-based gap variants.
+ *
+ * @tag hpe-y-stack
+ * @summary Organizes content vertically with configurable stack spacing.
+ *
+ * @attr {string} gap - Gap variant: 'xs' | 'sm' | 'md' | 'lg'
+ *
+ * @slot - Stack content
+ *
+ * @csspart stack - The stack container element
+ */
+let HpeYStack = class HpeYStack extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.gap = "xs";
+    }
+    render() {
+        return html `
+      <div part="stack" class="stack">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+HpeYStack.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeYStack.prototype, "gap", void 0);
+HpeYStack = __decorate([
+    customElement("hpe-y-stack")
+], HpeYStack);
+export { HpeYStack };
+//# sourceMappingURL=hpe-y-stack.js.map

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-y-stack.js","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAIjD;;;;;;;;;;;GAWG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIL,QAAG,GAAa,IAAI,CAAC;IASvB,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAXe,gBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACP;AAJV,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAarB"}

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.styles.d.ts

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

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-y-stack.styles.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.styles.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-stack-gap-xs: var(--hpe-web-spacing-xsmall, 1rem);
+    --hpe-stack-gap-sm: var(--hpe-web-spacing-small, 1.5rem);
+    --hpe-stack-gap-md: var(--hpe-web-spacing-medium, 2rem);
+    --hpe-stack-gap-lg: var(--hpe-web-spacing-large, 2.5rem);
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    box-sizing: border-box;
+    gap: var(--hpe-stack-gap-xs);
+  }
+
+  :host([gap="sm"]) .stack {
+    gap: var(--hpe-stack-gap-sm);
+  }
+
+  :host([gap="md"]) .stack {
+    gap: var(--hpe-stack-gap-md);
+  }
+
+  :host([gap="lg"]) .stack {
+    gap: var(--hpe-stack-gap-lg);
+  }
+`;
+//# sourceMappingURL=hpe-y-stack.styles.js.map

package/dist/foundation/hpe-stacks/hpe-y-stack/hpe-y-stack.styles.js.map

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

package/dist/foundation/hpe-stacks/index.d.ts

@@ -0,0 +1,3 @@
+export { HpeXStack } from "./hpe-x-stack/hpe-x-stack.js";
+export { HpeYStack } from "./hpe-y-stack/hpe-y-stack.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/foundation/hpe-stacks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-stacks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/foundation/hpe-stacks/index.js

@@ -0,0 +1,3 @@
+export { HpeXStack } from "./hpe-x-stack/hpe-x-stack.js";
+export { HpeYStack } from "./hpe-y-stack/hpe-y-stack.js";
+//# sourceMappingURL=index.js.map

package/dist/foundation/hpe-stacks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../foundation/hpe-stacks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC"}