@hpe-web/components 0.0.1 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+/**
+ * A button group component for organizing multiple buttons in a layout.
+ *
+ * @tag hpe-button-group
+ * @summary Organizes buttons horizontally or vertically with consistent spacing.
+ *
+ * @attr {string} orientation - Layout orientation: "horizontal" | "vertical"
+ *
+ * @slot - Button elements to be grouped
+ *
+ * @csspart group - The button group container
+ */
+export declare class HpeButtonGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: "horizontal" | "vertical";
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-button-group": HpeButtonGroup;
+    }
+}
+//# sourceMappingURL=hpe-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button-group.d.ts","sourceRoot":"","sources":["../../../elements/hpe-button-group/hpe-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAU;IAGhC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAE7C,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/elements/hpe-button-group/hpe-button-group.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-button-group.styles.js";
+/**
+ * A button group component for organizing multiple buttons in a layout.
+ *
+ * @tag hpe-button-group
+ * @summary Organizes buttons horizontally or vertically with consistent spacing.
+ *
+ * @attr {string} orientation - Layout orientation: "horizontal" | "vertical"
+ *
+ * @slot - Button elements to be grouped
+ *
+ * @csspart group - The button group container
+ */
+let HpeButtonGroup = class HpeButtonGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = "horizontal";
+    }
+    render() {
+        return html `
+      <div part="button-group" class="button-group">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+HpeButtonGroup.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeButtonGroup.prototype, "orientation", void 0);
+HpeButtonGroup = __decorate([
+    customElement("hpe-button-group")
+], HpeButtonGroup);
+export { HpeButtonGroup };
+//# sourceMappingURL=hpe-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button-group.js","sourceRoot":"","sources":["../../../elements/hpe-button-group/hpe-button-group.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,8BAA8B,CAAC;AAEtD;;;;;;;;;;;GAWG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIL,gBAAW,GAA8B,YAAY,CAAC;IASxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAXe,qBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC0B;AAJ3C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAa1B"}

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    --button-group-spacing: var(--spacing-medium, 16px);
+    display: contents;
+  }
+
+  .button-group {
+    display: flex;
+    gap: var(--button-group-spacing);
+  }
+
+  /* Horizontal layout (default) */
+  :host([orientation="horizontal"]) .button-group {
+    flex-direction: row;
+    align-items: center;
+    width: max-content;
+  }
+
+  /* Vertical layout */
+  :host([orientation="vertical"]) .button-group {
+    flex-direction: column;
+    align-items: flex-start;
+    width: max-content;
+  }
+`;
+//# sourceMappingURL=hpe-button-group.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+/**
+ * A card component for displaying content in a contained, visually
+ * distinct surface. Supports vertical and horizontal layouts with
+ * flexible slot-based composition.
+ *
+ * @tag hpe-card
+ * @summary Displays content in a card surface with media, heading, body, and CTA slots.
+ *
+ * @attr {string} layout - Layout direction: "vertical" | "horizontal"
+ *
+ * @slot media - Hero image, avatar, icon, logo, or accent bar
+ * @slot eyebrow - Optional small label above the heading
+ * @slot heading - Headline text
+ * @slot - Body text content
+ * @slot cta - Call-to-action link(s) at the bottom
+ *
+ * @csspart card - The outer card container element
+ * @csspart media - The media area wrapper
+ * @csspart content - The text content area wrapper
+ */
+export declare class HpeCard extends LitElement {
+    static styles: import("lit").CSSResult;
+    layout: "vertical" | "horizontal";
+    private _hasMedia;
+    private _onMediaSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-card": HpeCard;
+    }
+}
+//# sourceMappingURL=hpe-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-card.d.ts","sourceRoot":"","sources":["../../../elements/hpe-card/hpe-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,MAAM,EAAE,UAAU,GAAG,YAAY,CAAc;IAG/C,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,kBAAkB;IAKjB,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,71 @@
+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, state } from "lit/decorators.js";
+import { styles } from "./hpe-card.styles.js";
+/**
+ * A card component for displaying content in a contained, visually
+ * distinct surface. Supports vertical and horizontal layouts with
+ * flexible slot-based composition.
+ *
+ * @tag hpe-card
+ * @summary Displays content in a card surface with media, heading, body, and CTA slots.
+ *
+ * @attr {string} layout - Layout direction: "vertical" | "horizontal"
+ *
+ * @slot media - Hero image, avatar, icon, logo, or accent bar
+ * @slot eyebrow - Optional small label above the heading
+ * @slot heading - Headline text
+ * @slot - Body text content
+ * @slot cta - Call-to-action link(s) at the bottom
+ *
+ * @csspart card - The outer card container element
+ * @csspart media - The media area wrapper
+ * @csspart content - The text content area wrapper
+ */
+let HpeCard = class HpeCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layout = "vertical";
+        this._hasMedia = false;
+    }
+    _onMediaSlotChange(e) {
+        const slot = e.target;
+        this._hasMedia = slot.assignedNodes({ flatten: true }).length > 0;
+    }
+    render() {
+        return html `
+      <div part="card" class="card">
+        <div part="media" class="media" ?hidden=${!this._hasMedia}>
+          <slot name="media" @slotchange=${this._onMediaSlotChange}></slot>
+        </div>
+        <div part="content" class="content">
+          <div class="text-block">
+            <slot name="eyebrow"></slot>
+            <slot name="heading"></slot>
+            <slot></slot>
+          </div>
+          <div class="cta-group">
+            <slot name="cta"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+HpeCard.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeCard.prototype, "layout", void 0);
+__decorate([
+    state()
+], HpeCard.prototype, "_hasMedia", void 0);
+HpeCard = __decorate([
+    customElement("hpe-card")
+], HpeCard);
+export { HpeCard };
+//# sourceMappingURL=hpe-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-card.js","sourceRoot":"","sources":["../../../elements/hpe-card/hpe-card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIL,WAAM,GAA8B,UAAU,CAAC;QAGvC,cAAS,GAAG,KAAK,CAAC;IA0B5B,CAAC;IAxBS,kBAAkB,CAAC,CAAQ;QACjC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;kDAEmC,CAAC,IAAI,CAAC,SAAS;2CACtB,IAAI,CAAC,kBAAkB;;;;;;;;;;;;;KAa7D,CAAC;IACJ,CAAC;;AA/Be,cAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACmB;AAGvC;IADP,KAAK,EAAE;0CACkB;AAPf,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAiCnB"}

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

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

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

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

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

@@ -0,0 +1,270 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    --hpe-card-background: var(--hpe-web-color-background-card);
+    --hpe-card-heading-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-card-heading-font-size: var(--hpe-web-heading-h4-default-font-size);
+    --hpe-card-heading-font-weight: var(
+      --hpe-web-heading-h4-default-font-weight
+    );
+    --hpe-card-heading-line-height: var(
+      --hpe-web-heading-h4-default-line-height
+    );
+    --hpe-card-heading-letter-spacing: var(
+      --hpe-web-heading-h4-default-letter-spacing
+    );
+    --hpe-card-body-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-card-body-font-size: var(
+      --hpe-web-paragraph-small-body-copy-font-size
+    );
+    --hpe-card-body-font-weight: var(
+      --hpe-web-paragraph-small-body-copy-font-weight
+    );
+    --hpe-card-body-line-height: var(
+      --hpe-web-paragraph-small-body-copy-line-height
+    );
+    --hpe-card-body-letter-spacing: var(
+      --hpe-web-paragraph-small-body-copy-letter-spacing
+    );
+    --hpe-card-eyebrow-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-card-eyebrow-font-size: var(
+      --hpe-web-paragraph-small-body-copy-font-size
+    );
+    --hpe-card-eyebrow-font-weight: var(
+      --hpe-web-paragraph-small-body-copy-font-weight
+    );
+    --hpe-card-eyebrow-line-height: var(
+      --hpe-web-paragraph-small-body-copy-line-height
+    );
+    --hpe-card-eyebrow-letter-spacing: var(
+      --hpe-web-paragraph-small-body-copy-letter-spacing
+    );
+    --hpe-card-eyebrow-color: var(--hpe-web-color-text-default);
+    --hpe-card-heading-color: var(--hpe-web-color-text-strong);
+    --hpe-card-body-color: var(--hpe-web-color-text-default);
+    --hpe-card-cta-color: var(--hpe-web-button-link-primary-rest-text-color);
+    --hpe-card-cta-hover-color: var(
+      --hpe-web-button-link-primary-hover-text-color
+    );
+    --hpe-card-cta-font-weight: var(
+      --hpe-web-button-link-primary-rest-font-weight
+    );
+    --hpe-card-cta-font-size: var(--hpe-web-button-link-medium-font-size);
+    --hpe-card-cta-line-height: var(--hpe-web-button-link-medium-line-height);
+    --hpe-card-cta-gap: var(--hpe-web-button-link-medium-gap-x);
+    --hpe-card-content-padding: var(--hpe-web-spacing-medium);
+    --hpe-card-content-gap: var(--hpe-web-spacing-small);
+    --hpe-card-text-gap: var(--hpe-web-spacing-xxsmall);
+    --hpe-card-cta-group-gap: var(--hpe-web-spacing-medium);
+    --hpe-card-hover-background: linear-gradient(
+      180deg,
+      var(--hpe-card-background) 0%,
+      var(--hpe-card-background) 72%,
+      color-mix(
+          in srgb,
+          var(--hpe-web-color-decorative-green) 30%,
+          var(--hpe-card-background)
+        )
+        100%
+    );
+  }
+
+  /* ── Card container ─────────────────────────────────── */
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    background: var(--hpe-card-background);
+  }
+
+  /* ── Media area ─────────────────────────────────────── */
+
+  .media {
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .media[hidden] {
+    display: none;
+  }
+
+  /* Hero images */
+  ::slotted(img[slot="media"]) {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 10;
+    object-fit: cover;
+  }
+
+  /* Avatar — consumer adds class="avatar" */
+  ::slotted(.avatar) {
+    display: block;
+    width: 96px;
+    height: 96px;
+    border-radius: 10000px;
+    object-fit: cover;
+    margin: var(--hpe-web-spacing-medium) var(--hpe-web-spacing-medium) 0;
+  }
+
+  /* Small icon container */
+  ::slotted(.icon-small) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    overflow: hidden;
+    margin: var(--hpe-web-spacing-medium) var(--hpe-web-spacing-medium) 0;
+  }
+
+  /* Large icon container */
+  ::slotted(.icon-large) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    overflow: hidden;
+    margin: var(--hpe-web-spacing-medium) var(--hpe-web-spacing-medium) 0;
+  }
+
+  /* Logo */
+  ::slotted(.logo) {
+    display: block;
+    height: 64px;
+    width: auto;
+    object-fit: contain;
+    margin: var(--hpe-web-spacing-medium) var(--hpe-web-spacing-medium) 0;
+  }
+
+  /* Accent bar — colored strip at top of card */
+  ::slotted(.accent-bar) {
+    display: block;
+    width: 100%;
+    height: 8px;
+  }
+
+  /* ── Content area ───────────────────────────────────── */
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-card-content-gap);
+    padding: var(--hpe-card-content-padding);
+    background: var(--hpe-card-background);
+    flex: 1;
+  }
+
+  :host(:hover) .content {
+    background: var(--hpe-card-hover-background);
+  }
+
+  .text-block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-card-text-gap);
+  }
+
+  /* ── Slotted typography ─────────────────────────────── */
+
+  ::slotted([slot="eyebrow"]) {
+    font-family: var(--hpe-card-eyebrow-font-family);
+    font-size: var(--hpe-card-eyebrow-font-size);
+    font-weight: var(--hpe-card-eyebrow-font-weight);
+    line-height: var(--hpe-card-eyebrow-line-height);
+    letter-spacing: var(--hpe-card-eyebrow-letter-spacing);
+    color: var(--hpe-card-eyebrow-color);
+    margin: 0;
+  }
+
+  ::slotted([slot="heading"]) {
+    font-family: var(--hpe-card-heading-font-family);
+    font-weight: var(--hpe-card-heading-font-weight);
+    font-size: var(--hpe-card-heading-font-size);
+    line-height: var(--hpe-card-heading-line-height);
+    letter-spacing: var(--hpe-card-heading-letter-spacing);
+    color: var(--hpe-card-heading-color);
+    margin: 0;
+  }
+
+  ::slotted(p) {
+    font-family: var(--hpe-card-body-font-family);
+    font-size: var(--hpe-card-body-font-size);
+    font-weight: var(--hpe-card-body-font-weight);
+    line-height: var(--hpe-card-body-line-height);
+    letter-spacing: var(--hpe-card-body-letter-spacing);
+    color: var(--hpe-card-body-color);
+    margin: 0;
+  }
+
+  /* ── CTA group ──────────────────────────────────────── */
+
+  .cta-group {
+    display: flex;
+    gap: var(--hpe-card-cta-group-gap);
+    align-items: center;
+  }
+
+  ::slotted([slot="cta"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hpe-card-cta-gap);
+    font-family: var(--hpe-card-heading-font-family);
+    font-size: var(--hpe-card-cta-font-size);
+    font-weight: var(--hpe-card-cta-font-weight);
+    line-height: var(--hpe-card-cta-line-height);
+    color: var(--hpe-card-cta-color);
+    text-decoration: none;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  ::slotted([slot="cta"]:hover) {
+    color: var(--hpe-card-cta-hover-color);
+    text-decoration: none;
+  }
+
+  /* ── Horizontal layout ──────────────────────────────── */
+
+  :host([layout="horizontal"]) .card {
+    flex-direction: row;
+  }
+
+  :host([layout="horizontal"]) .media {
+    width: 50%;
+    flex-shrink: 0;
+  }
+
+  :host([layout="horizontal"]) ::slotted(img[slot="media"]) {
+    max-height: none;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  :host([layout="horizontal"]) .content {
+    width: 50%;
+    justify-content: center;
+  }
+`;
+//# sourceMappingURL=hpe-card.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { LitElement } from "lit";
+/**
+ * A reusable carousel element that displays slotted slides with optional
+ * previous and next navigation controls.
+ *
+ * @tag hpe-carousel
+ * @summary Displays slotted content as horizontally scrollable slides with circular navigation controls.
+ *
+ * @attr {number} visible-slides - Number of visible slides at once.
+ * @attr {boolean} show-controls - Whether navigation controls are shown.
+ * @attr {boolean} show-slide-count - Whether to render the slide count label alongside controls.
+ *
+ * @fires hpe-carousel-change - Dispatched when the current slide or page count changes.
+ *
+ * @slot - Carousel slide content.
+ *
+ * @csspart container - The outer carousel wrapper.
+ * @csspart slides - The slide viewport and track wrapper.
+ * @csspart controls - The navigation controls wrapper.
+ * @csspart prev-button - The previous navigation button.
+ * @csspart next-button - The next navigation button.
+ */
+export declare class HpeCarousel extends LitElement {
+    static styles: import("lit").CSSResult;
+    visibleSlides: number;
+    showControls: boolean;
+    showSlideCount: boolean;
+    private currentIndex;
+    private totalSlides;
+    private slidesElement;
+    get currentSlideIndex(): number;
+    get pageCount(): number;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private get totalPages();
+    private syncSlides;
+    private updateSlideWidth;
+    goTo(index: number): void;
+    goToPrevious(): void;
+    goToNext(): void;
+    private handleSlotChange;
+    private notifyStateChange;
+    private renderIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-carousel": HpeCarousel;
+    }
+}
+//# sourceMappingURL=hpe-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-carousel.d.ts","sourceRoot":"","sources":["../../../elements/hpe-carousel/hpe-carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,aAAa,SAAK;IAGlB,YAAY,UAAQ;IAGpB,cAAc,UAAS;IAGvB,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,WAAW,CAAK;IAGxB,OAAO,CAAC,aAAa,CAAe;IAEpC,IAAI,iBAAiB,WAEpB;IAED,IAAI,SAAS,WAEZ;IAEQ,YAAY;IAKZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQxD,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,gBAAgB;IAUxB,IAAI,CAAC,KAAK,EAAE,MAAM;IAsBlB,YAAY;IAIZ,QAAQ;IAIR,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,UAAU;IAcT,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}