@hpe-web/components 0.0.1 → 1.0.0

package/dist/templates/hpe-card-grid/hpe-card-grid.js

@@ -0,0 +1,122 @@
+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 } from "lit/decorators.js";
+import { styles } from "./hpe-card-grid.styles.js";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../hpe-text-recipe/hpe-text-recipe.js";
+const DEFAULT_INTRO_BODY = "No matter how unique your needs are, HPE's edge expertise, data management tools, and proven integration capabilities can help you scale across all your edge locations.";
+/**
+ * A card-grid pattern that composes optional intro copy and a responsive card grid.
+ *
+ * @tag hpe-card-grid
+ * @summary Arranges card elements in a responsive CSS Grid layout with an optional lead text recipe.
+ *
+ * @attr {string} padding - Section padding variant: 'default' | 'none' | 'top' | 'bottom' | 'left-right-only'
+ * @attr {number} columns - Number of columns: 1 | 2 | 3 | 4 (default: 3)
+ * @attr {string} heading - Optional intro heading text (kept for backward compatibility)
+ * @attr {boolean} show-intro - Whether to render the intro text recipe block
+ * @attr {string} intro-format - Intro text recipe format: 'h2' | 'h3' | 'h4' | 'h5'
+ * @attr {string} intro-eyebrow - Optional intro eyebrow text
+ * @attr {string} intro-heading - Intro heading text
+ * @attr {string} intro-body - Intro body copy
+ * @attr {string} intro-button-label - Intro CTA button label
+ * @attr {boolean} show-intro-button - Whether to show the intro CTA button
+ *
+ * @slot - Card elements to display in the grid
+ * @slot intro-secondary-action - Optional secondary CTA for the intro text recipe
+ *
+ * @csspart section - The outer section wrapper element
+ * @csspart container - The inner content wrapper
+ * @csspart intro - The intro text recipe wrapper
+ * @csspart grid - The CSS grid container element
+ */
+let HpeCardGrid = class HpeCardGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+        this.columns = 3;
+        this.showIntro = false;
+        this.introFormat = "h2";
+        this.introEyebrow = "Eyebrow label (optional)";
+        this.introHeading = "Content headline goes here";
+        this.introBody = DEFAULT_INTRO_BODY;
+        this.introButtonLabel = "Label";
+        this.showIntroButton = true;
+    }
+    get shouldRenderIntro() {
+        return this.showIntro || !!this.heading;
+    }
+    get resolvedIntroHeading() {
+        return this.heading ?? this.introHeading;
+    }
+    render() {
+        return html `
+      <hpe-section part="section" class="section" padding=${this.padding}>
+        ${this.shouldRenderIntro
+            ? html `
+              <hpe-text-recipe
+                part="intro"
+                class="intro"
+                format=${this.introFormat}
+                eyebrow=${this.introEyebrow}
+                heading=${this.resolvedIntroHeading}
+                body=${this.introBody}
+                button-label=${this.introButtonLabel}
+                ?show-button=${this.showIntroButton}
+              >
+                <slot
+                  slot="secondary-action"
+                  name="intro-secondary-action"
+                ></slot>
+              </hpe-text-recipe>
+            `
+            : nothing}
+
+        <div part="grid" class="grid">
+          <slot></slot>
+        </div>
+      </hpe-section>
+    `;
+    }
+};
+HpeCardGrid.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeCardGrid.prototype, "padding", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCardGrid.prototype, "heading", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], HpeCardGrid.prototype, "columns", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-intro", type: Boolean })
+], HpeCardGrid.prototype, "showIntro", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-format" })
+], HpeCardGrid.prototype, "introFormat", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-eyebrow" })
+], HpeCardGrid.prototype, "introEyebrow", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-heading" })
+], HpeCardGrid.prototype, "introHeading", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-body" })
+], HpeCardGrid.prototype, "introBody", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-button-label" })
+], HpeCardGrid.prototype, "introButtonLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-intro-button", type: Boolean })
+], HpeCardGrid.prototype, "showIntroButton", void 0);
+HpeCardGrid = __decorate([
+    customElement("hpe-card-grid")
+], HpeCardGrid);
+export { HpeCardGrid };
+//# sourceMappingURL=hpe-card-grid.js.map

package/dist/templates/hpe-card-grid/hpe-card-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-card-grid.js","sourceRoot":"","sources":["../../../templates/hpe-card-grid/hpe-card-grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAI/C,MAAM,kBAAkB,GACtB,0KAA0K,CAAC;AAE7K;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL,YAAO,GACL,SAAS,CAAC;QAMZ,YAAO,GAAkB,CAAC,CAAC;QAG3B,cAAS,GAAG,KAAK,CAAC;QAGlB,gBAAW,GAAqB,IAAI,CAAC;QAGrC,iBAAY,GAAG,0BAA0B,CAAC;QAG1C,iBAAY,GAAG,4BAA4B,CAAC;QAG5C,cAAS,GAAG,kBAAkB,CAAC;QAG/B,qBAAgB,GAAG,OAAO,CAAC;QAG3B,oBAAe,GAAG,IAAI,CAAC;IAuCzB,CAAC;IArCC,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IAC1C,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC;IAC3C,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;4DAC6C,IAAI,CAAC,OAAO;UAC9D,IAAI,CAAC,iBAAiB;YACtB,CAAC,CAAC,IAAI,CAAA;;;;yBAIS,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;0BACjB,IAAI,CAAC,oBAAoB;uBAC5B,IAAI,CAAC,SAAS;+BACN,IAAI,CAAC,gBAAgB;+BACrB,IAAI,CAAC,eAAe;;;;;;;aAOtC;YACH,CAAC,CAAC,OAAO;;;;;;KAMd,CAAC;IACJ,CAAC;;AArEe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAEhB;AAGZ;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACf;AAG3B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAClD;AAGlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDAClB;AAGrC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDACd;AAG1C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDACZ;AAG5C;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACtB;AAG/B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;qDAClC;AAG3B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACpD;AAhCZ,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAuEvB"}

package/dist/templates/hpe-card-grid/hpe-card-grid.styles.d.ts

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

package/dist/templates/hpe-card-grid/hpe-card-grid.styles.d.ts.map

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

package/dist/templates/hpe-card-grid/hpe-card-grid.styles.js

@@ -0,0 +1,63 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .section {
+    width: 100%;
+  }
+
+  .grid {
+    display: grid;
+    gap: var(--hpe-web-spacing-large);
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* ── Column variants ────────────────────────────────── */
+
+  :host([columns="1"]) .grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  :host([columns="2"]) .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  :host([columns="3"]) .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  :host([columns="4"]) .grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .intro {
+    --hpe-text-recipe-max-width: 100%;
+  }
+
+  /* ── Slotted children ───────────────────────────────── */
+
+  ::slotted(*) {
+    width: 100%;
+    min-width: 0;
+  }
+
+  @media (max-width: 1024px) {
+    :host([columns="3"]) .grid,
+    :host([columns="4"]) .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 767px) {
+    .grid,
+    :host([columns="2"]) .grid,
+    :host([columns="3"]) .grid,
+    :host([columns="4"]) .grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+`;
+//# sourceMappingURL=hpe-card-grid.styles.js.map

package/dist/templates/hpe-card-grid/hpe-card-grid.styles.js.map

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

package/dist/templates/hpe-card-grid/index.d.ts

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

package/dist/templates/hpe-card-grid/index.d.ts.map

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

package/dist/templates/hpe-card-grid/index.js

@@ -0,0 +1,2 @@
+export { HpeCardGrid } from './hpe-card-grid.js';
+//# sourceMappingURL=index.js.map

package/dist/templates/hpe-card-grid/index.js.map

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

package/dist/templates/hpe-image-only/hpe-image-only.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../../elements/hpe-image/hpe-image.js";
+type Padding = "default" | "none" | "top" | "bottom" | "left-right-only";
+type ImageAspectRatio = "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5";
+/**
+ * A stand-alone image template that composes an image inside the shared section layout.
+ *
+ * @tag hpe-image-only
+ * @summary Renders a section-constrained image using the shared section and image primitives.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} image-src - Image source URL
+ * @attr {string} image-alt - Alternative text for accessibility
+ * @attr {string} image-aspect-ratio - Image aspect ratio: "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5"
+ *
+ * @csspart section - The inner hpe-section element
+ * @csspart content - The image wrapper
+ * @csspart image - The delegated hpe-image element
+ */
+export declare class HpeImageOnly extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: Padding;
+    imageSrc: string;
+    imageAlt: string;
+    imageAspectRatio: ImageAspectRatio;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-image-only": HpeImageOnly;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-image-only.d.ts.map

package/dist/templates/hpe-image-only/hpe-image-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-image-only.d.ts","sourceRoot":"","sources":["../../../templates/hpe-image-only/hpe-image-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAE/C,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AACzE,KAAK,gBAAgB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAKzE;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,OAAO,CAAa;IAG7B,QAAQ,SAAqB;IAG7B,QAAQ,SAA2B;IAGnC,gBAAgB,EAAE,gBAAgB,CAAU;IAEnC,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/templates/hpe-image-only/hpe-image-only.js

@@ -0,0 +1,65 @@
+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-image-only.styles.js";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../../elements/hpe-image/hpe-image.js";
+const DEFAULT_IMAGE_SRC = "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80";
+/**
+ * A stand-alone image template that composes an image inside the shared section layout.
+ *
+ * @tag hpe-image-only
+ * @summary Renders a section-constrained image using the shared section and image primitives.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} image-src - Image source URL
+ * @attr {string} image-alt - Alternative text for accessibility
+ * @attr {string} image-aspect-ratio - Image aspect ratio: "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5"
+ *
+ * @csspart section - The inner hpe-section element
+ * @csspart content - The image wrapper
+ * @csspart image - The delegated hpe-image element
+ */
+let HpeImageOnly = class HpeImageOnly extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+        this.imageSrc = DEFAULT_IMAGE_SRC;
+        this.imageAlt = "Abstract blue texture";
+        this.imageAspectRatio = "16:9";
+    }
+    render() {
+        return html `
+      <hpe-section part="section" class="section" padding=${this.padding}>
+        <hpe-image
+          src=${this.imageSrc}
+          alt=${this.imageAlt}
+          aspect-ratio=${this.imageAspectRatio}
+        ></hpe-image>
+      </hpe-section>
+    `;
+    }
+};
+HpeImageOnly.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeImageOnly.prototype, "padding", void 0);
+__decorate([
+    property({ reflect: true, attribute: "image-src" })
+], HpeImageOnly.prototype, "imageSrc", void 0);
+__decorate([
+    property({ reflect: true, attribute: "image-alt" })
+], HpeImageOnly.prototype, "imageAlt", void 0);
+__decorate([
+    property({ reflect: true, attribute: "image-aspect-ratio" })
+], HpeImageOnly.prototype, "imageAspectRatio", void 0);
+HpeImageOnly = __decorate([
+    customElement("hpe-image-only")
+], HpeImageOnly);
+export { HpeImageOnly };
+//# sourceMappingURL=hpe-image-only.js.map

package/dist/templates/hpe-image-only/hpe-image-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-image-only.js","sourceRoot":"","sources":["../../../templates/hpe-image-only/hpe-image-only.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,4BAA4B,CAAC;AACpD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAK/C,MAAM,iBAAiB,GACrB,+FAA+F,CAAC;AAElG;;;;;;;;;;;;;;GAcG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIL,YAAO,GAAY,SAAS,CAAC;QAG7B,aAAQ,GAAG,iBAAiB,CAAC;QAG7B,aAAQ,GAAG,uBAAuB,CAAC;QAGnC,qBAAgB,GAAqB,MAAM,CAAC;IAa9C,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;4DAC6C,IAAI,CAAC,OAAO;;gBAExD,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ;yBACJ,IAAI,CAAC,gBAAgB;;;KAGzC,CAAC;IACJ,CAAC;;AAxBe,mBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACC;AAG7B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CACvB;AAG7B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CACjB;AAGnC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;sDACjB;AAbjC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA0BxB"}

package/dist/templates/hpe-image-only/hpe-image-only.styles.d.ts

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

package/dist/templates/hpe-image-only/hpe-image-only.styles.d.ts.map

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

package/dist/templates/hpe-image-only/hpe-image-only.styles.js

@@ -0,0 +1,12 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .image {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=hpe-image-only.styles.js.map

package/dist/templates/hpe-image-only/hpe-image-only.styles.js.map

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

package/dist/templates/hpe-image-only/index.d.ts

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

package/dist/templates/hpe-image-only/index.d.ts.map

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

package/dist/templates/hpe-image-only/index.js

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

package/dist/templates/hpe-image-only/index.js.map

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

package/dist/templates/hpe-text-only/hpe-text-only.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../hpe-text-recipe/hpe-text-recipe.js";
+type TextRecipeFormat = "h2" | "h3" | "h4" | "h5";
+/**
+ * A full-width section pattern that composes a text recipe inside the shared section layout.
+ *
+ * @tag hpe-text-only
+ * @summary Renders an optional eyebrow, heading, body copy, and CTA in a section constrained to the design-system content width.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} format - Text recipe format: "h2" | "h3" | "h4" | "h5"
+ * @attr {string} eyebrow - Optional eyebrow label text
+ * @attr {string} heading - Heading text
+ * @attr {string} body - Body copy text
+ * @attr {string} button-label - CTA label text
+ * @attr {string} button-group-orientation - Optional button group orientation: "horizontal" | "vertical"
+ * @attr {boolean} show-eyebrow - Whether to render the eyebrow text
+ * @attr {boolean} show-body - Whether to render the body copy
+ * @attr {boolean} show-button - Whether to render the CTA button
+ * @attr {boolean} use-button-group - Whether to wrap CTA actions in hpe-button-group
+ *
+ * @slot secondary-action - Optional secondary action passed through to hpe-text-recipe
+ *
+ * @csspart container - Pattern wrapper element
+ * @csspart section - Inner hpe-section element
+ * @csspart content - Inner hpe-text-recipe element
+ */
+export declare class HpeTextOnly extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: "default" | "none" | "top" | "bottom" | "left-right-only";
+    format: TextRecipeFormat;
+    eyebrow: string;
+    heading: string;
+    body: string;
+    buttonLabel: string;
+    buttonGroupOrientation: "horizontal" | "vertical";
+    showEyebrow: boolean;
+    showBody: boolean;
+    showButton: boolean;
+    useButtonGroup: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-text-only": HpeTextOnly;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-text-only.d.ts.map

package/dist/templates/hpe-text-only/hpe-text-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-text-only.d.ts","sourceRoot":"","sources":["../../../templates/hpe-text-only/hpe-text-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAE/C,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CACtD;IAGZ,MAAM,EAAE,gBAAgB,CAAQ;IAGhC,OAAO,SAA8B;IAGrC,OAAO,SAAe;IAGtB,IAAI,SAAgB;IAGpB,WAAW,SAAW;IAGtB,sBAAsB,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGjE,WAAW,UAAQ;IAGnB,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,cAAc,UAAS;IAEd,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/templates/hpe-text-only/hpe-text-only.js

@@ -0,0 +1,113 @@
+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-text-only.styles.js";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../hpe-text-recipe/hpe-text-recipe.js";
+const DEFAULT_BODY = "No matter how unique your needs are, HPE's edge expertise, data management tools, and proven integration capabilities can help you scale across all your edge locations.";
+/**
+ * A full-width section pattern that composes a text recipe inside the shared section layout.
+ *
+ * @tag hpe-text-only
+ * @summary Renders an optional eyebrow, heading, body copy, and CTA in a section constrained to the design-system content width.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} format - Text recipe format: "h2" | "h3" | "h4" | "h5"
+ * @attr {string} eyebrow - Optional eyebrow label text
+ * @attr {string} heading - Heading text
+ * @attr {string} body - Body copy text
+ * @attr {string} button-label - CTA label text
+ * @attr {string} button-group-orientation - Optional button group orientation: "horizontal" | "vertical"
+ * @attr {boolean} show-eyebrow - Whether to render the eyebrow text
+ * @attr {boolean} show-body - Whether to render the body copy
+ * @attr {boolean} show-button - Whether to render the CTA button
+ * @attr {boolean} use-button-group - Whether to wrap CTA actions in hpe-button-group
+ *
+ * @slot secondary-action - Optional secondary action passed through to hpe-text-recipe
+ *
+ * @csspart container - Pattern wrapper element
+ * @csspart section - Inner hpe-section element
+ * @csspart content - Inner hpe-text-recipe element
+ */
+let HpeTextOnly = class HpeTextOnly extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+        this.format = "h2";
+        this.eyebrow = "Eyebrow label (optional)";
+        this.heading = "Text Only";
+        this.body = DEFAULT_BODY;
+        this.buttonLabel = "Label";
+        this.buttonGroupOrientation = "horizontal";
+        this.showEyebrow = true;
+        this.showBody = true;
+        this.showButton = true;
+        this.useButtonGroup = false;
+    }
+    render() {
+        return html `
+      <hpe-section part="section" padding=${this.padding}>
+        <hpe-text-recipe
+          part="content"
+          class="content"
+          format=${this.format}
+          eyebrow=${this.eyebrow}
+          heading=${this.heading}
+          body=${this.body}
+          button-label=${this.buttonLabel}
+          button-group-orientation=${this.buttonGroupOrientation}
+          ?show-eyebrow=${this.showEyebrow}
+          ?show-body=${this.showBody}
+          ?show-button=${this.showButton}
+          ?use-button-group=${this.useButtonGroup}
+        >
+          <slot slot="secondary-action" name="secondary-action"></slot>
+        </hpe-text-recipe>
+      </hpe-section>
+    `;
+    }
+};
+HpeTextOnly.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeTextOnly.prototype, "padding", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextOnly.prototype, "format", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextOnly.prototype, "eyebrow", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextOnly.prototype, "heading", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextOnly.prototype, "body", void 0);
+__decorate([
+    property({ reflect: true, attribute: "button-label" })
+], HpeTextOnly.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "button-group-orientation" })
+], HpeTextOnly.prototype, "buttonGroupOrientation", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-eyebrow", type: Boolean })
+], HpeTextOnly.prototype, "showEyebrow", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-body", type: Boolean })
+], HpeTextOnly.prototype, "showBody", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-button", type: Boolean })
+], HpeTextOnly.prototype, "showButton", void 0);
+__decorate([
+    property({ reflect: true, attribute: "use-button-group", type: Boolean })
+], HpeTextOnly.prototype, "useButtonGroup", void 0);
+HpeTextOnly = __decorate([
+    customElement("hpe-text-only")
+], HpeTextOnly);
+export { HpeTextOnly };
+//# sourceMappingURL=hpe-text-only.js.map

package/dist/templates/hpe-text-only/hpe-text-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-text-only.js","sourceRoot":"","sources":["../../../templates/hpe-text-only/hpe-text-only.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,2BAA2B,CAAC;AACnD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAI/C,MAAM,YAAY,GAChB,0KAA0K,CAAC;AAE7K;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL,YAAO,GACL,SAAS,CAAC;QAGZ,WAAM,GAAqB,IAAI,CAAC;QAGhC,YAAO,GAAG,0BAA0B,CAAC;QAGrC,YAAO,GAAG,WAAW,CAAC;QAGtB,SAAI,GAAG,YAAY,CAAC;QAGpB,gBAAW,GAAG,OAAO,CAAC;QAGtB,2BAAsB,GAA8B,YAAY,CAAC;QAGjE,gBAAW,GAAG,IAAI,CAAC;QAGnB,aAAQ,GAAG,IAAI,CAAC;QAGhB,eAAU,GAAG,IAAI,CAAC;QAGlB,mBAAc,GAAG,KAAK,CAAC;IAwBzB,CAAC;IAtBU,MAAM;QACb,OAAO,IAAI,CAAA;4CAC6B,IAAI,CAAC,OAAO;;;;mBAIrC,IAAI,CAAC,MAAM;oBACV,IAAI,CAAC,OAAO;oBACZ,IAAI,CAAC,OAAO;iBACf,IAAI,CAAC,IAAI;yBACD,IAAI,CAAC,WAAW;qCACJ,IAAI,CAAC,sBAAsB;0BACtC,IAAI,CAAC,WAAW;uBACnB,IAAI,CAAC,QAAQ;yBACX,IAAI,CAAC,UAAU;8BACV,IAAI,CAAC,cAAc;;;;;KAK5C,CAAC;IACJ,CAAC;;AAzDe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAEhB;AAGZ;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACI;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACS;AAGrC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACN;AAGtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACR;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;gDACjC;AAGtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;2DACF;AAGjE;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACnD;AAGnB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACnD;AAGhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACnD;AAGlB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACnD;AAnCZ,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA2DvB"}

package/dist/templates/hpe-text-only/hpe-text-only.styles.d.ts

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

package/dist/templates/hpe-text-only/hpe-text-only.styles.d.ts.map

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

package/dist/templates/hpe-text-only/hpe-text-only.styles.js

@@ -0,0 +1,12 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .content {
+    --hpe-text-recipe-max-width: 100%;
+  }
+`;
+//# sourceMappingURL=hpe-text-only.styles.js.map

package/dist/templates/hpe-text-only/hpe-text-only.styles.js.map

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

package/dist/templates/hpe-text-only/index.d.ts

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

package/dist/templates/hpe-text-only/index.d.ts.map

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

package/dist/templates/hpe-text-only/index.js

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

package/dist/templates/hpe-text-only/index.js.map

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