@hpe-web/components 0.0.1 → 1.0.0

package/dist/elements/hpe-inputs/hpe-textarea/hpe-textarea.styles.js

@@ -0,0 +1,149 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 352px;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3xsmall, 8px);
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: var(--spacing-3xsmall, 8px);
+  }
+
+  .label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-hair, 1px);
+    width: 100%;
+  }
+
+  .label-text {
+    font-family: var(--heading-font, "HPE_Graphik", sans-serif);
+    font-size: var(--paragraph-disclaimer-fontsize, 14px);
+    font-weight: var(--paragraph-disclaimer-fontweight, 400);
+    line-height: var(--paragraph-disclaimer-lineheight, 20px);
+    letter-spacing: var(--paragraph-disclaimer-letterspacing, 0);
+    color: var(--hpe-web-color-text-default, #3e4550);
+    margin: 0;
+  }
+
+  .required-indicator {
+    font-family: var(--heading-font, "HPE_Graphik", sans-serif);
+    font-size: var(--paragraph-disclaimer-fontsize, 14px);
+    font-weight: var(--paragraph-disclaimer-fontweight, 400);
+    line-height: var(--paragraph-disclaimer-lineheight, 20px);
+    letter-spacing: var(--paragraph-disclaimer-letterspacing, 0);
+    color: var(--hpe-web-color-text-critical, #cc1f1a);
+    margin: 0;
+  }
+
+  .textarea {
+    border: 1px solid var(--hpe-web-color-border-default, #b1b9be);
+    outline: none;
+    background: transparent;
+    font-family: var(--heading-font, "HPE_Graphik", sans-serif);
+    font-size: var(--paragraph-small-body-copy-fontsize, 16px);
+    font-weight: var(--paragraph-small-body-copy-fontweight, 400);
+    line-height: var(--paragraph-small-body-copy-lineheight, 24px);
+    letter-spacing: var(--paragraph-small-body-copy-letterspacing, 0);
+    color: var(--hpe-web-color-text-default, #3e4550);
+    width: 100%;
+    min-height: 128px;
+    padding: var(--spacing-small, 24px);
+    box-sizing: border-box;
+    resize: vertical;
+    display: block;
+  }
+
+  .textarea::placeholder {
+    color: var(--hpe-web-color-text-default, #3e4550);
+    opacity: 1;
+  }
+
+  .textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  .textarea:focus {
+    outline: none;
+  }
+
+  :host([state="typing"]) .textarea {
+    border-color: var(--hpe-web-color-border-selected, #006750);
+  }
+
+  :host([state="complete"]) .textarea {
+    border-color: var(--hpe-web-color-border-strong, #535c66);
+  }
+
+  :host([state="error"]) .textarea {
+    border-color: var(--hpe-web-color-border-critical, #cc1f1a);
+  }
+
+  :host([state="error"]) .label-text,
+  :host([state="error"]) .required-indicator,
+  :host([state="error"]) .textarea,
+  :host([state="error"]) .textarea::placeholder,
+  :host([state="error"]) .description {
+    color: var(--hpe-web-color-text-critical, #cc1f1a);
+  }
+
+  .description {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: flex-start;
+    width: 100%;
+    font-family: var(--heading-font, "HPE_Graphik", sans-serif);
+    font-size: var(--paragraph-disclaimer-fontsize, 14px);
+    font-weight: var(--paragraph-disclaimer-fontweight, 400);
+    line-height: var(--paragraph-disclaimer-lineheight, 20px);
+    letter-spacing: var(--paragraph-disclaimer-letterspacing, 0);
+    color: var(--hpe-web-color-text-default, #3e4550);
+  }
+
+  .description-text {
+    flex: 1;
+    margin: 0;
+    min-height: 20px;
+  }
+
+  .char-counter {
+    margin: 0;
+    white-space: nowrap;
+    text-align: right;
+  }
+
+  :host([state="typing"]) .textarea,
+  :host([state="complete"]) .textarea,
+  :host([state="typing"]) .textarea::placeholder,
+  :host([state="complete"]) .textarea::placeholder {
+    color: var(--hpe-web-color-text-strong, #292d3a);
+  }
+
+  :host([state="disabled"]) .textarea {
+    border-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  :host([state="disabled"]) .label-text,
+  :host([state="disabled"]) .required-indicator,
+  :host([state="disabled"]) .textarea,
+  :host([state="disabled"]) .textarea::placeholder,
+  :host([state="disabled"]) .description {
+    color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+`;
+//# sourceMappingURL=hpe-textarea.styles.js.map

package/dist/elements/hpe-inputs/hpe-textarea/hpe-textarea.styles.js.map

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

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

@@ -0,0 +1,6 @@
+export { HpeCheckbox } from "./hpe-checkbox/hpe-checkbox.js";
+export { HpeInput } from "./hpe-input/hpe-input.js";
+export { HpeRadio } from "./hpe-radio/hpe-radio.js";
+export { HpeSelect } from "./hpe-select/hpe-select.js";
+export { HpeTextarea } from "./hpe-textarea/hpe-textarea.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,6 @@
+export { HpeCheckbox } from "./hpe-checkbox/hpe-checkbox.js";
+export { HpeInput } from "./hpe-input/hpe-input.js";
+export { HpeRadio } from "./hpe-radio/hpe-radio.js";
+export { HpeSelect } from "./hpe-select/hpe-select.js";
+export { HpeTextarea } from "./hpe-textarea/hpe-textarea.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+import "../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.js";
+type BulletType = "checkmark" | "bullet-point";
+type ListBulletType = BulletType | "mixed";
+/**
+ * A list item component with configurable bullet marker.
+ *
+ * @tag hpe-list-item
+ * @summary Renders one list row with a checkmark or square bullet marker.
+ *
+ * @attr {string} bullet-type - Marker type: "checkmark" | "bullet-point"
+ *
+ * @slot - List item text/content
+ *
+ * @csspart item - The list item row container
+ * @csspart bullet - The bullet marker container
+ * @csspart checkmark - The checkmark icon
+ * @csspart point - The square point marker
+ * @csspart text - The text container
+ */
+export declare class HpeListItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    bulletType: BulletType;
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * A composite list component that coordinates bullet style across child list items.
+ *
+ * @tag hpe-list
+ * @summary Groups list items and applies consistent bullet behavior.
+ *
+ * @attr {string} bullet-type - Marker mode: "checkmark" | "bullet-point" | "mixed"
+ *
+ * @slot - Slotted `<hpe-list-item>` children
+ *
+ * @csspart list - The list container element
+ */
+export declare class HpeList extends LitElement {
+    static styles: import("lit").CSSResult;
+    bulletType: ListBulletType;
+    updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private syncItemBulletTypes;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-list": HpeList;
+        "hpe-list-item": HpeListItem;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-list.d.ts","sourceRoot":"","sources":["../../../elements/hpe-list/hpe-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,gEAAgE,CAAC;AAExE,KAAK,UAAU,GAAG,WAAW,GAAG,cAAc,CAAC;AAC/C,KAAK,cAAc,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,UAAU,EAAE,UAAU,CAAe;IAE5B,MAAM;CAuBhB;AAED;;;;;;;;;;;GAWG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,UAAU,EAAE,cAAc,CAAe;IAEhC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,MAAM;IAQf,OAAO,CAAC,mBAAmB,CAmBzB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;QACpB,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,117 @@
+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-list.styles.js";
+import "../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.js";
+/**
+ * A list item component with configurable bullet marker.
+ *
+ * @tag hpe-list-item
+ * @summary Renders one list row with a checkmark or square bullet marker.
+ *
+ * @attr {string} bullet-type - Marker type: "checkmark" | "bullet-point"
+ *
+ * @slot - List item text/content
+ *
+ * @csspart item - The list item row container
+ * @csspart bullet - The bullet marker container
+ * @csspart checkmark - The checkmark icon
+ * @csspart point - The square point marker
+ * @csspart text - The text container
+ */
+let HpeListItem = class HpeListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.bulletType = "checkmark";
+    }
+    render() {
+        return html `
+      <div part="item" class="item">
+        <div part="bullet" class="bullet" aria-hidden="true">
+          ${this.bulletType === "checkmark"
+            ? html `
+                <svg
+                  part="checkmark"
+                  class="checkmark"
+                  viewBox="0 0 16 16"
+                  focusable="false"
+                >
+                  <path d="M3.5 8.25 6.5 11.25 12.5 4.75" />
+                </svg>
+              `
+            : html `<span part="point" class="point"></span>`}
+        </div>
+        <hpe-paragraph part="text" class="text" size="md">
+          <slot></slot>
+        </hpe-paragraph>
+      </div>
+    `;
+    }
+};
+HpeListItem.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: "bullet-type" })
+], HpeListItem.prototype, "bulletType", void 0);
+HpeListItem = __decorate([
+    customElement("hpe-list-item")
+], HpeListItem);
+export { HpeListItem };
+/**
+ * A composite list component that coordinates bullet style across child list items.
+ *
+ * @tag hpe-list
+ * @summary Groups list items and applies consistent bullet behavior.
+ *
+ * @attr {string} bullet-type - Marker mode: "checkmark" | "bullet-point" | "mixed"
+ *
+ * @slot - Slotted `<hpe-list-item>` children
+ *
+ * @csspart list - The list container element
+ */
+let HpeList = class HpeList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.bulletType = "checkmark";
+        this.syncItemBulletTypes = () => {
+            if (this.bulletType === "mixed") {
+                return;
+            }
+            const slot = this.shadowRoot?.querySelector("slot");
+            if (!slot) {
+                return;
+            }
+            const items = slot
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof HpeListItem);
+            items.forEach((item) => {
+                item.bulletType = this.bulletType;
+            });
+        };
+    }
+    updated(changed) {
+        if (changed.has("bulletType")) {
+            this.syncItemBulletTypes();
+        }
+    }
+    render() {
+        return html `
+      <div part="list" class="list">
+        <slot @slotchange=${this.syncItemBulletTypes}></slot>
+      </div>
+    `;
+    }
+};
+HpeList.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: "bullet-type" })
+], HpeList.prototype, "bulletType", void 0);
+HpeList = __decorate([
+    customElement("hpe-list")
+], HpeList);
+export { HpeList };
+//# sourceMappingURL=hpe-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-list.js","sourceRoot":"","sources":["../../../elements/hpe-list/hpe-list.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,sBAAsB,CAAC;AAC9C,OAAO,gEAAgE,CAAC;AAKxE;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL,eAAU,GAAe,WAAW,CAAC;IAyBvC,CAAC;IAvBU,MAAM;QACb,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,UAAU,KAAK,WAAW;YAC/B,CAAC,CAAC,IAAI,CAAA;;;;;;;;;eASH;YACH,CAAC,CAAC,IAAI,CAAA,0CAA0C;;;;;;KAMvD,CAAC;IACJ,CAAC;;AA3Be,kBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CACjB;AAJ1B,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA6BvB;;AAED;;;;;;;;;;;GAWG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIL,eAAU,GAAmB,WAAW,CAAC;QAgBjC,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,IAAI,CAAC,UAAU,KAAK,OAAO,EAAE,CAAC;gBAChC,OAAO;YACT,CAAC;YAED,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACzC,MAAM,CACmB,CAAC;YAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO;YACT,CAAC;YAED,MAAM,KAAK,GAAG,IAAI;iBACf,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iBACnC,MAAM,CAAC,CAAC,EAAE,EAAqB,EAAE,CAAC,EAAE,YAAY,WAAW,CAAC,CAAC;YAEhE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAwB,CAAC;YAClD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;IAlCU,OAAO,CAAC,OAA6B;QAC5C,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,mBAAmB;;KAE/C,CAAC;IACJ,CAAC;;AAjBe,cAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CACb;AAJ9B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAwCnB"}

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

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

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

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

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

@@ -0,0 +1,68 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-list-item-gap: var(--hpe-web-spacing-small, 1.5rem);
+    --hpe-list-gap: var(--hpe-web-spacing-xsmall, 1rem);
+    --hpe-list-bullet-color: var(--hpe-web-color-background-primary, #01a982);
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-list-gap);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  ::slotted(hpe-list-item) {
+    width: 100%;
+  }
+
+  .item {
+    position: relative;
+    display: block;
+    padding-left: var(--hpe-list-item-gap);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .bullet {
+    position: absolute;
+    left: 0;
+    top: 7px;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .checkmark {
+    width: 16px;
+    height: 16px;
+    color: var(--hpe-list-bullet-color);
+  }
+
+  .checkmark path {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.75;
+  }
+
+  .point {
+    width: 7px;
+    height: 7px;
+    background: var(--hpe-list-bullet-color);
+    display: block;
+  }
+
+  .text {
+    display: block;
+    min-width: 0;
+  }
+`;
+//# sourceMappingURL=hpe-list.styles.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/elements/hpe-pull-quote/hpe-pull-quote.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * A pull quote component for highlighting notable quotes with optional attribution.
+ *
+ * @tag hpe-pull-quote
+ * @summary Displays a highlighted pull quote with a decorative opening quote mark and optional attribution.
+ *
+ * @attr {boolean} hide-quote-sign - When present, hides the decorative opening quote mark.
+ *
+ * @slot - The quote body text.
+ * @slot attribution-name - The name of the person being quoted.
+ * @slot attribution-role - The role or title of the person being quoted.
+ *
+ * @csspart quote-sign - The decorative SVG quote mark.
+ * @csspart quote-body - The wrapper containing the quote text and attribution.
+ * @csspart attribution - The attribution section.
+ * @csspart attribution-name - The attribution name element.
+ * @csspart attribution-role - The attribution role element.
+ */
+export declare class HpePullQuote extends LitElement {
+    static styles: import("lit").CSSResult;
+    hideQuoteSign: boolean;
+    private _hasAttribution;
+    private _onAttributionSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-pull-quote": HpePullQuote;
+    }
+}
+//# sourceMappingURL=hpe-pull-quote.d.ts.map

package/dist/elements/hpe-pull-quote/hpe-pull-quote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-pull-quote.d.ts","sourceRoot":"","sources":["../../../elements/hpe-pull-quote/hpe-pull-quote.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAU;IAGhC,aAAa,UAAS;IAGtB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,wBAAwB;IAgBvB,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/elements/hpe-pull-quote/hpe-pull-quote.js

@@ -0,0 +1,102 @@
+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-pull-quote.styles.js";
+/**
+ * A pull quote component for highlighting notable quotes with optional attribution.
+ *
+ * @tag hpe-pull-quote
+ * @summary Displays a highlighted pull quote with a decorative opening quote mark and optional attribution.
+ *
+ * @attr {boolean} hide-quote-sign - When present, hides the decorative opening quote mark.
+ *
+ * @slot - The quote body text.
+ * @slot attribution-name - The name of the person being quoted.
+ * @slot attribution-role - The role or title of the person being quoted.
+ *
+ * @csspart quote-sign - The decorative SVG quote mark.
+ * @csspart quote-body - The wrapper containing the quote text and attribution.
+ * @csspart attribution - The attribution section.
+ * @csspart attribution-name - The attribution name element.
+ * @csspart attribution-role - The attribution role element.
+ */
+let HpePullQuote = class HpePullQuote extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hideQuoteSign = false;
+        this._hasAttribution = false;
+    }
+    _onAttributionSlotChange() {
+        const attributionNameSlot = this.shadowRoot?.querySelector('slot[name="attribution-name"]');
+        const attributionRoleSlot = this.shadowRoot?.querySelector('slot[name="attribution-role"]');
+        const hasAttributionName = (attributionNameSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        const hasAttributionRole = (attributionRoleSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        this._hasAttribution = hasAttributionName || hasAttributionRole;
+    }
+    render() {
+        return html `
+      ${!this.hideQuoteSign
+            ? html `<span part="quote-sign" class="quote-sign" aria-hidden="true">
+            <svg
+              width="29"
+              height="22"
+              viewBox="0 0 29 22"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <path
+                d="M2.55469 2.02832C2.97 0.815027 4.11115 0 5.39355 0H6.97461C9.05306 0 10.5019 2.06236 9.79688 4.01758L8.30622 8.15098C8.07118 8.80274 8.55408 9.49023 9.24692 9.49023H11.667C13.3238 9.49023 14.667 10.8334 14.667 12.4902L14.667 19C14.667 20.6569 13.3238 22 11.667 22L3 22C1.34316 22 0 20.6568 0 19L0 9.4908C0 9.49049 0.000254631 9.49023 0.000569344 9.49023C0.000812531 9.49023 0.00102997 9.49008 0.00110817 9.48985L2.55469 2.02832Z"
+                fill="currentColor"
+              />
+              <path
+                d="M18.667 22C17.0101 22 15.667 20.6568 15.667 19L15.667 9.48982C15.667 9.48951 15.6672 9.48926 15.6676 9.48926C15.6678 9.48926 15.668 9.4891 15.6681 9.48886L17.8896 2.13281C18.2721 0.8666 19.439 0.000104904 20.7617 0H21.4873C23.5173 0.000297546 24.9609 1.97462 24.3457 3.90918L22.9849 8.18607C22.7797 8.83101 23.2611 9.48926 23.9379 9.48926H25.6084C27.265 9.48931 28.6081 10.8327 28.6084 12.4893L28.6084 19C28.6084 20.6568 27.2652 21.9999 25.6084 22L18.667 22Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>`
+            : ""}
+      <div part="quote-body" class="quote-body">
+        <p class="quote-text">
+          <slot></slot>
+        </p>
+        <footer
+          part="attribution"
+          class="attribution"
+          ?hidden=${!this._hasAttribution}
+        >
+          <strong part="attribution-name" class="attribution-name">
+            <slot
+              name="attribution-name"
+              @slotchange=${this._onAttributionSlotChange}
+            ></slot>
+          </strong>
+          <span part="attribution-role" class="attribution-role">
+            <slot
+              name="attribution-role"
+              @slotchange=${this._onAttributionSlotChange}
+            ></slot>
+          </span>
+        </footer>
+      </div>
+    `;
+    }
+};
+HpePullQuote.styles = styles;
+__decorate([
+    property({ type: Boolean, attribute: "hide-quote-sign", reflect: true })
+], HpePullQuote.prototype, "hideQuoteSign", void 0);
+__decorate([
+    state()
+], HpePullQuote.prototype, "_hasAttribution", void 0);
+HpePullQuote = __decorate([
+    customElement("hpe-pull-quote")
+], HpePullQuote);
+export { HpePullQuote };
+//# sourceMappingURL=hpe-pull-quote.js.map

package/dist/elements/hpe-pull-quote/hpe-pull-quote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-pull-quote.js","sourceRoot":"","sources":["../../../elements/hpe-pull-quote/hpe-pull-quote.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,4BAA4B,CAAC;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIL,kBAAa,GAAG,KAAK,CAAC;QAGd,oBAAe,GAAG,KAAK,CAAC;IAmElC,CAAC;IAjES,wBAAwB;QAC9B,MAAM,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACxD,+BAA+B,CAChC,CAAC;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CACxD,+BAA+B,CAChC,CAAC;QAEF,MAAM,kBAAkB,GACtB,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QAC1E,MAAM,kBAAkB,GACtB,CAAC,mBAAmB,EAAE,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,eAAe,GAAG,kBAAkB,IAAI,kBAAkB,CAAC;IAClE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;kBAmBI;YACV,CAAC,CAAC,EAAE;;;;;;;;oBAQQ,CAAC,IAAI,CAAC,eAAe;;;;;4BAKb,IAAI,CAAC,wBAAwB;;;;;;4BAM7B,IAAI,CAAC,wBAAwB;;;;;KAKpD,CAAC;IACJ,CAAC;;AAxEe,mBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACnD;AAGd;IADP,KAAK,EAAE;qDACwB;AAPrB,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA0ExB"}

package/dist/elements/hpe-pull-quote/hpe-pull-quote.styles.d.ts

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

package/dist/elements/hpe-pull-quote/hpe-pull-quote.styles.d.ts.map

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

package/dist/elements/hpe-pull-quote/hpe-pull-quote.styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--hpe-web-spacing-small);
+    font-family: var(--hpe-web-base-font-family-primary);
+  }
+
+  .quote-sign {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--hpe-web-color-text-primary);
+  }
+
+  .quote-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-web-spacing-small);
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ── Quote text ──────────────────────────────────── */
+
+  .quote-text {
+    margin: 0;
+    color: var(--hpe-web-color-text-default);
+    font-size: var(--hpe-web-paragraph-large-body-copy-font-size);
+    line-height: var(--hpe-web-paragraph-large-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-large-body-copy-letter-spacing);
+    font-weight: 400;
+  }
+
+  /* ── Attribution ─────────────────────────────────── */
+
+  .attribution {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .attribution-name {
+    display: block;
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+    font-weight: 700;
+    color: var(--hpe-web-color-text-default);
+  }
+
+  .attribution-role {
+    display: block;
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+    font-weight: 400;
+    color: var(--hpe-web-color-text-default);
+  }
+`;
+//# sourceMappingURL=hpe-pull-quote.styles.js.map

package/dist/elements/hpe-pull-quote/hpe-pull-quote.styles.js.map

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