@hpe-web/components 0.0.1 → 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export { HpeAccordion, HpeAccordionItem, } from "./elements/hpe-accordion/index.js";
+export { HpeAgenda, HpeAgendaRow } from "./elements/hpe-agenda/index.js";
+export { HpeButton } from "./elements/hpe-button/index.js";
+export { HpeForm } from "./elements/hpe-form/index.js";
+export { HpeInputGroup } from "./elements/hpe-input-group/index.js";
+export { HpePullQuote } from "./elements/hpe-pull-quote/index.js";
+export { HpeButtonGroup } from "./elements/hpe-button-group/index.js";
+export { HpeCarousel } from "./elements/hpe-carousel/index.js";
+export { HpeCard } from "./elements/hpe-card/index.js";
+export { HpeButtonOnly } from "./templates/hpe-button-only/index.js";
+export { HpeCardCarousel } from "./templates/hpe-card-carousel/index.js";
+export { HpeCardGrid } from "./templates/hpe-card-grid/index.js";
+export { HpeImageOnly } from "./templates/hpe-image-only/index.js";
+export { HpeTextOnly } from "./templates/hpe-text-only/index.js";
+export { HpeTextRecipe } from "./templates/hpe-text-recipe/index.js";
+export { HpeColumns } from "./foundation/hpe-columns/index.js";
+export { HpeImage } from "./elements/hpe-image/index.js";
+export { HpeList, HpeListItem } from "./elements/hpe-list/index.js";
+export { HpeCheckbox, HpeRadio, HpeSelect, HpeInput, HpeTextarea, } from "./elements/hpe-inputs/index.js";
+export { HpeCondensedHeading, HpeParagraph, HpeHeading, } from "./foundation/hpe-typography/index.js";
+export { HpeSection } from "./foundation/hpe-section/index.js";
+export { HpeXStack, HpeYStack } from "./foundation/hpe-stacks/index.js";
+export { HpeTab, HpeTabPanel, HpeTabGroup, } from "./elements/hpe-tab-group/index.js";
+export { HpeTable, HpeTableHeaderRow, HpeTableHeaderCell, HpeTableBodyRow, HpeTableBodyCell, } from "./elements/hpe-table/index.js";
+export { HpeHorizontalRule } from "./elements/hpe-horizontal-rule/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,GACX,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,GACZ,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC"}

package/dist/index.js

@@ -0,0 +1,27 @@
+// Barrel export — add component re-exports here as they are created.
+export { HpeAccordion, HpeAccordionItem, } from "./elements/hpe-accordion/index.js";
+export { HpeAgenda, HpeAgendaRow } from "./elements/hpe-agenda/index.js";
+export { HpeButton } from "./elements/hpe-button/index.js";
+export { HpeForm } from "./elements/hpe-form/index.js";
+export { HpeInputGroup } from "./elements/hpe-input-group/index.js";
+export { HpePullQuote } from "./elements/hpe-pull-quote/index.js";
+export { HpeButtonGroup } from "./elements/hpe-button-group/index.js";
+export { HpeCarousel } from "./elements/hpe-carousel/index.js";
+export { HpeCard } from "./elements/hpe-card/index.js";
+export { HpeButtonOnly } from "./templates/hpe-button-only/index.js";
+export { HpeCardCarousel } from "./templates/hpe-card-carousel/index.js";
+export { HpeCardGrid } from "./templates/hpe-card-grid/index.js";
+export { HpeImageOnly } from "./templates/hpe-image-only/index.js";
+export { HpeTextOnly } from "./templates/hpe-text-only/index.js";
+export { HpeTextRecipe } from "./templates/hpe-text-recipe/index.js";
+export { HpeColumns } from "./foundation/hpe-columns/index.js";
+export { HpeImage } from "./elements/hpe-image/index.js";
+export { HpeList, HpeListItem } from "./elements/hpe-list/index.js";
+export { HpeCheckbox, HpeRadio, HpeSelect, HpeInput, HpeTextarea, } from "./elements/hpe-inputs/index.js";
+export { HpeCondensedHeading, HpeParagraph, HpeHeading, } from "./foundation/hpe-typography/index.js";
+export { HpeSection } from "./foundation/hpe-section/index.js";
+export { HpeXStack, HpeYStack } from "./foundation/hpe-stacks/index.js";
+export { HpeTab, HpeTabPanel, HpeTabGroup, } from "./elements/hpe-tab-group/index.js";
+export { HpeTable, HpeTableHeaderRow, HpeTableHeaderCell, HpeTableBodyRow, HpeTableBodyCell, } from "./elements/hpe-table/index.js";
+export { HpeHorizontalRule } from "./elements/hpe-horizontal-rule/index.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,GACZ,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,UAAU,GACX,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,GACZ,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC"}

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

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../../elements/hpe-button/hpe-button.js";
+import "../../elements/hpe-button-group/hpe-button-group.js";
+type Padding = "default" | "none" | "top" | "bottom" | "left-right-only";
+type ButtonGroupOrientation = "horizontal" | "vertical";
+/**
+ * A button-only section template that composes a button group inside the shared section layout.
+ *
+ * @tag hpe-button-only
+ * @summary Renders a section-scoped CTA group with a default primary action and optional projected custom actions.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} button-label - Primary CTA label text
+ * @attr {string} button-group-orientation - Button group orientation: "horizontal" | "vertical"
+ * @attr {boolean} show-icon - Whether to show the primary button trailing icon
+ *
+ * @slot - Optional custom action buttons. When provided, these replace the default fallback primary action.
+ *
+ * @csspart section - The inner hpe-section element
+ * @csspart actions - The button group wrapper
+ * @csspart default-button - The default primary hpe-button element
+ */
+export declare class HpeButtonOnly extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: Padding;
+    buttonLabel: string;
+    buttonGroupOrientation: ButtonGroupOrientation;
+    buttonIcon: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-button-only": HpeButtonOnly;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-button-only.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button-only.d.ts","sourceRoot":"","sources":["../../../templates/hpe-button-only/hpe-button-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qDAAqD,CAAC;AAE7D,KAAK,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AACzE,KAAK,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,OAAO,CAAa;IAG7B,WAAW,SAAW;IAGtB,sBAAsB,EAAE,sBAAsB,CAAgB;IAG9D,UAAU,UAAQ;IAET,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,77 @@
+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-button-only.styles.js";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../../elements/hpe-button/hpe-button.js";
+import "../../elements/hpe-button-group/hpe-button-group.js";
+/**
+ * A button-only section template that composes a button group inside the shared section layout.
+ *
+ * @tag hpe-button-only
+ * @summary Renders a section-scoped CTA group with a default primary action and optional projected custom actions.
+ *
+ * @attr {string} padding - Section padding variant: "default" | "none" | "top" | "bottom" | "left-right-only"
+ * @attr {string} button-label - Primary CTA label text
+ * @attr {string} button-group-orientation - Button group orientation: "horizontal" | "vertical"
+ * @attr {boolean} show-icon - Whether to show the primary button trailing icon
+ *
+ * @slot - Optional custom action buttons. When provided, these replace the default fallback primary action.
+ *
+ * @csspart section - The inner hpe-section element
+ * @csspart actions - The button group wrapper
+ * @csspart default-button - The default primary hpe-button element
+ */
+let HpeButtonOnly = class HpeButtonOnly extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+        this.buttonLabel = "Label";
+        this.buttonGroupOrientation = "horizontal";
+        this.buttonIcon = true;
+    }
+    render() {
+        return html `
+      <hpe-section part="section" class="section" padding=${this.padding}>
+        <hpe-button-group
+          part="actions"
+          orientation=${this.buttonGroupOrientation}
+        >
+          <slot>
+            <hpe-button
+              part="default-button"
+              type="primary"
+              size="default"
+              ?show-icon=${this.buttonIcon}
+            >
+              ${this.buttonLabel}
+            </hpe-button>
+          </slot>
+        </hpe-button-group>
+      </hpe-section>
+    `;
+    }
+};
+HpeButtonOnly.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeButtonOnly.prototype, "padding", void 0);
+__decorate([
+    property({ reflect: true, attribute: "button-label" })
+], HpeButtonOnly.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "button-group-orientation" })
+], HpeButtonOnly.prototype, "buttonGroupOrientation", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-icon", type: Boolean })
+], HpeButtonOnly.prototype, "buttonIcon", void 0);
+HpeButtonOnly = __decorate([
+    customElement("hpe-button-only")
+], HpeButtonOnly);
+export { HpeButtonOnly };
+//# sourceMappingURL=hpe-button-only.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button-only.js","sourceRoot":"","sources":["../../../templates/hpe-button-only/hpe-button-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,6BAA6B,CAAC;AACrD,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;AACjD,OAAO,qDAAqD,CAAC;AAK7D;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIL,YAAO,GAAY,SAAS,CAAC;QAG7B,gBAAW,GAAG,OAAO,CAAC;QAGtB,2BAAsB,GAA2B,YAAY,CAAC;QAG9D,eAAU,GAAG,IAAI,CAAC;IAuBpB,CAAC;IArBU,MAAM;QACb,OAAO,IAAI,CAAA;4DAC6C,IAAI,CAAC,OAAO;;;wBAGhD,IAAI,CAAC,sBAAsB;;;;;;;2BAOxB,IAAI,CAAC,UAAU;;gBAE1B,IAAI,CAAC,WAAW;;;;;KAK3B,CAAC;IACJ,CAAC;;AAlCe,oBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACC;AAG7B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kDACjC;AAGtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC;6DACL;AAG9D;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACjD;AAbP,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAoCzB"}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=hpe-button-only.styles.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/templates/hpe-card-carousel/hpe-card-carousel.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../hpe-text-recipe/hpe-text-recipe.js";
+import "../../elements/hpe-carousel/hpe-carousel.js";
+type TextRecipeFormat = "h2" | "h3" | "h4" | "h5";
+/**
+ * A card-carousel pattern that composes optional intro copy and a horizontal carousel of cards.
+ *
+ * @tag hpe-card-carousel
+ * @summary Displays card elements in a horizontally scrollable carousel with an optional lead text recipe.
+ *
+ * @attr {string} padding - Section padding variant: 'default' | 'none' | 'top' | 'bottom' | 'left-right-only'
+ * @attr {string} heading - Optional intro heading text (kept for backward compatibility)
+ * @attr {number} visible-cards - How many cards are visible at once (default 4)
+ * @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 carousel
+ * @slot intro-secondary-action - Optional secondary CTA for the intro text recipe
+ *
+ * @csspart section - The outer section wrapper element
+ * @csspart intro - The intro text recipe wrapper
+ * @csspart carousel - The delegated carousel element
+ */
+export declare class HpeCardCarousel extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: "default" | "none" | "top" | "bottom" | "left-right-only";
+    heading: string;
+    visibleCards: number;
+    showIntro: boolean;
+    introFormat: TextRecipeFormat;
+    introEyebrow: string;
+    introHeading: string;
+    introBody: string;
+    introButtonLabel: string;
+    showIntroButton: boolean;
+    private get shouldRenderIntro();
+    private get resolvedIntroHeading();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-card-carousel": HpeCardCarousel;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-card-carousel.d.ts.map

package/dist/templates/hpe-card-carousel/hpe-card-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-card-carousel.d.ts","sourceRoot":"","sources":["../../../templates/hpe-card-carousel/hpe-card-carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6CAA6C,CAAC;AAErD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CACtD;IAGZ,OAAO,SAAM;IAGb,YAAY,SAAK;IAGjB,SAAS,UAAQ;IAGjB,WAAW,EAAE,gBAAgB,CAAQ;IAGrC,YAAY,SAA8B;IAG1C,YAAY,SAAgC;IAG5C,SAAS,SAAsB;IAG/B,gBAAgB,SAAW;IAG3B,eAAe,UAAQ;IAEvB,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAEQ,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

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

@@ -0,0 +1,129 @@
+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-carousel.styles.js";
+import "../../foundation/hpe-section/hpe-section.js";
+import "../hpe-text-recipe/hpe-text-recipe.js";
+import "../../elements/hpe-carousel/hpe-carousel.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-carousel pattern that composes optional intro copy and a horizontal carousel of cards.
+ *
+ * @tag hpe-card-carousel
+ * @summary Displays card elements in a horizontally scrollable carousel with an optional lead text recipe.
+ *
+ * @attr {string} padding - Section padding variant: 'default' | 'none' | 'top' | 'bottom' | 'left-right-only'
+ * @attr {string} heading - Optional intro heading text (kept for backward compatibility)
+ * @attr {number} visible-cards - How many cards are visible at once (default 4)
+ * @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 carousel
+ * @slot intro-secondary-action - Optional secondary CTA for the intro text recipe
+ *
+ * @csspart section - The outer section wrapper element
+ * @csspart intro - The intro text recipe wrapper
+ * @csspart carousel - The delegated carousel element
+ */
+let HpeCardCarousel = class HpeCardCarousel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.padding = "default";
+        this.heading = "";
+        this.visibleCards = 4;
+        this.showIntro = true;
+        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}
+
+        <hpe-carousel
+          part="carousel"
+          class="carousel"
+          .visibleSlides=${this.visibleCards}
+          ?show-controls=${true}
+          ?show-slide-count=${false}
+        >
+          <slot></slot>
+        </hpe-carousel>
+      </hpe-section>
+    `;
+    }
+};
+HpeCardCarousel.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeCardCarousel.prototype, "padding", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCardCarousel.prototype, "heading", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: "visible-cards" })
+], HpeCardCarousel.prototype, "visibleCards", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-intro", type: Boolean })
+], HpeCardCarousel.prototype, "showIntro", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-format" })
+], HpeCardCarousel.prototype, "introFormat", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-eyebrow" })
+], HpeCardCarousel.prototype, "introEyebrow", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-heading" })
+], HpeCardCarousel.prototype, "introHeading", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-body" })
+], HpeCardCarousel.prototype, "introBody", void 0);
+__decorate([
+    property({ reflect: true, attribute: "intro-button-label" })
+], HpeCardCarousel.prototype, "introButtonLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-intro-button", type: Boolean })
+], HpeCardCarousel.prototype, "showIntroButton", void 0);
+HpeCardCarousel = __decorate([
+    customElement("hpe-card-carousel")
+], HpeCardCarousel);
+export { HpeCardCarousel };
+//# sourceMappingURL=hpe-card-carousel.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .section {
+    width: 100%;
+  }
+
+  .intro {
+    --hpe-text-recipe-max-width: 100%;
+  }
+
+  .carousel {
+    --hpe-carousel-slide-gap: var(--hpe-web-spacing-large, 40px);
+    --hpe-carousel-stack-gap: var(--hpe-web-spacing-large, 40px);
+    --hpe-carousel-nav-size: 56px;
+    --_hpe-carousel-slide-width: 370px;
+  }
+
+  ::slotted(*) {
+    min-width: 0;
+  }
+
+  @media (max-width: 1599px) {
+    .carousel {
+      --_hpe-carousel-slide-width: calc(
+        (100% - (var(--hpe-web-spacing-large, 40px) * 2)) / 3
+      );
+    }
+  }
+
+  @media (max-width: 1023px) {
+    .carousel {
+      --_hpe-carousel-slide-width: calc(
+        (100% - var(--hpe-web-spacing-large, 40px)) / 2
+      );
+    }
+  }
+
+  @media (max-width: 767px) {
+    .carousel {
+      --_hpe-carousel-slide-width: 100%;
+      --hpe-carousel-nav-size: 40px;
+      --hpe-carousel-controls-gap: 12px;
+      --hpe-carousel-stack-gap: var(--hpe-web-spacing-medium, 32px);
+      --hpe-carousel-slide-gap: var(--hpe-web-spacing-medium, 32px);
+    }
+  }
+`;
+//# sourceMappingURL=hpe-card-carousel.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+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 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
+ */
+export declare class HpeCardGrid extends LitElement {
+    static styles: import("lit").CSSResult;
+    padding: "default" | "none" | "top" | "bottom" | "left-right-only";
+    heading?: string;
+    columns: 1 | 2 | 3 | 4;
+    showIntro: boolean;
+    introFormat: TextRecipeFormat;
+    introEyebrow: string;
+    introHeading: string;
+    introBody: string;
+    introButtonLabel: string;
+    showIntroButton: boolean;
+    private get shouldRenderIntro();
+    private get resolvedIntroHeading();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-card-grid": HpeCardGrid;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-card-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-card-grid.d.ts","sourceRoot":"","sources":["../../../templates/hpe-card-grid/hpe-card-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAGhD,OAAO,6CAA6C,CAAC;AACrD,OAAO,uCAAuC,CAAC;AAE/C,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,iBAAiB,CACtD;IAGZ,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAG3B,SAAS,UAAS;IAGlB,WAAW,EAAE,gBAAgB,CAAQ;IAGrC,YAAY,SAA8B;IAG1C,YAAY,SAAgC;IAG5C,SAAS,SAAsB;IAG/B,gBAAgB,SAAW;IAG3B,eAAe,UAAQ;IAEvB,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAEQ,MAAM;CA6BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}