@hpe-web/components 0.0.1 → 1.0.0

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.d.ts

@@ -0,0 +1,35 @@
+import { LitElement, nothing } from "lit";
+type CondensedHeadingLevel = "h1" | "h2";
+type CondensedHeadingSize = "auto" | "display";
+type CondensedHeadingWeight = "regular" | "bold" | "light";
+/**
+ * Condensed uppercase heading text for the display heading styles shown in the Figma typography spec.
+ *
+ * @tag hpe-condensed-heading
+ * @summary Renders token-backed condensed heading text for h1 and h2 display scales.
+ *
+ * @attr {string} level - Semantic heading level: "h1" | "h2"
+ * @attr {string} size - Visual size: "auto" | "display"
+ * @attr {string} weight - Condensed weight: "regular" | "bold" | "light"
+ *
+ * @slot - Heading content
+ *
+ * @csspart heading - The rendered condensed heading element
+ */
+export declare class HpeCondensedHeading extends LitElement {
+    static styles: import("lit").CSSResult;
+    level: CondensedHeadingLevel;
+    size: CondensedHeadingSize;
+    weight: CondensedHeadingWeight;
+    private get resolvedScale();
+    private get headingClass();
+    private renderTag;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-condensed-heading": HpeCondensedHeading;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-condensed-heading.d.ts.map

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-condensed-heading.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAIhD,KAAK,qBAAqB,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,oBAAoB,GAAG,MAAM,GAAG,SAAS,CAAC;AAC/C,KAAK,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D;;;;;;;;;;;;;GAaG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAGhC,KAAK,EAAE,qBAAqB,CAAQ;IAGpC,IAAI,EAAE,oBAAoB,CAAU;IAGpC,MAAM,EAAE,sBAAsB,CAAa;IAE3C,OAAO,KAAK,aAAa,GAMxB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,SAAS;IAiBR,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.js

@@ -0,0 +1,73 @@
+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-condensed-heading.styles.js";
+/**
+ * Condensed uppercase heading text for the display heading styles shown in the Figma typography spec.
+ *
+ * @tag hpe-condensed-heading
+ * @summary Renders token-backed condensed heading text for h1 and h2 display scales.
+ *
+ * @attr {string} level - Semantic heading level: "h1" | "h2"
+ * @attr {string} size - Visual size: "auto" | "display"
+ * @attr {string} weight - Condensed weight: "regular" | "bold" | "light"
+ *
+ * @slot - Heading content
+ *
+ * @csspart heading - The rendered condensed heading element
+ */
+let HpeCondensedHeading = class HpeCondensedHeading extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.level = "h1";
+        this.size = "auto";
+        this.weight = "regular";
+    }
+    get resolvedScale() {
+        if (this.level === "h1" && this.size === "display") {
+            return "display";
+        }
+        return this.level === "h2" ? "lg" : "xl";
+    }
+    get headingClass() {
+        return `heading ${this.resolvedScale}-${this.weight}`;
+    }
+    renderTag() {
+        const content = html `<slot></slot>`;
+        switch (this.level) {
+            case "h1":
+                return html `<h1 part="heading" class=${this.headingClass}>
+          ${content}
+        </h1>`;
+            case "h2":
+                return html `<h2 part="heading" class=${this.headingClass}>
+          ${content}
+        </h2>`;
+            default:
+                return nothing;
+        }
+    }
+    render() {
+        return this.renderTag();
+    }
+};
+HpeCondensedHeading.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeCondensedHeading.prototype, "level", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCondensedHeading.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCondensedHeading.prototype, "weight", void 0);
+HpeCondensedHeading = __decorate([
+    customElement("hpe-condensed-heading")
+], HpeCondensedHeading);
+export { HpeCondensedHeading };
+//# sourceMappingURL=hpe-condensed-heading.js.map

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-condensed-heading.js","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.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,mCAAmC,CAAC;AAM3D;;;;;;;;;;;;;GAaG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAIL,UAAK,GAA0B,IAAI,CAAC;QAGpC,SAAI,GAAyB,MAAM,CAAC;QAGpC,WAAM,GAA2B,SAAS,CAAC;IAkC7C,CAAC;IAhCC,IAAY,aAAa;QACvB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACnD,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3C,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,WAAW,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;IACxD,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAA,eAAe,CAAC;QAEpC,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT;gBACE,OAAO,OAAO,CAAC;QACnB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;;AA1Ce,0BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACQ;AAGpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACQ;AAGpC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACe;AAVhC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA4C/B"}

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.styles.d.ts

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

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.styles.d.ts.map

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

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.styles.js

@@ -0,0 +1,125 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    color: var(--hpe-condensed-heading-color, var(--hpe-web-color-text-header));
+    font-family: var(
+      --hpe-condensed-heading-font-family,
+      var(--hpe-web-base-font-family-condensed),
+      "HPE Graphik",
+      sans-serif
+    );
+  }
+
+  .heading {
+    margin: 0;
+    color: inherit;
+    text-transform: uppercase;
+  }
+
+  .display-bold {
+    font-size: var(--hpe-web-heading-h1-large-condensed-bold-font-size);
+    font-weight: var(--hpe-web-heading-h1-large-condensed-bold-font-weight);
+    line-height: var(--hpe-web-heading-h1-large-condensed-bold-line-height);
+    letter-spacing: var(
+      --hpe-web-heading-h1-large-condensed-bold-letter-spacing
+    );
+  }
+
+  .display-regular {
+    font-size: var(--hpe-web-heading-h1-large-condensed-medium-font-size);
+    font-weight: var(--hpe-web-heading-h1-large-condensed-medium-font-weight);
+    line-height: var(--hpe-web-heading-h1-large-condensed-medium-line-height);
+    letter-spacing: var(
+      --hpe-web-heading-h1-large-condensed-medium-letter-spacing
+    );
+  }
+
+  .display-light {
+    font-size: var(--hpe-web-heading-h1-large-condensed-medium-font-size);
+    font-weight: var(--hpe-web-heading-h1-large-condensed-light-font-weight);
+    line-height: var(--hpe-web-heading-h1-large-condensed-medium-line-height);
+    letter-spacing: var(
+      --hpe-web-heading-h1-large-condensed-medium-letter-spacing
+    );
+  }
+
+  .xl-bold {
+    font-size: var(--hpe-web-heading-h1-condensed-bold-font-size);
+    font-weight: var(--hpe-web-heading-h1-condensed-bold-font-weight);
+    line-height: var(--hpe-web-heading-h1-condensed-bold-line-height);
+    letter-spacing: var(--hpe-web-heading-h1-condensed-bold-letter-spacing);
+  }
+
+  .xl-regular {
+    font-size: var(--hpe-web-heading-h1-condensed-medium-font-size);
+    font-weight: var(--hpe-web-heading-h1-condensed-medium-font-weight);
+    line-height: var(--hpe-web-heading-h1-condensed-medium-line-height);
+    letter-spacing: var(--hpe-web-heading-h1-condensed-medium-letter-spacing);
+  }
+
+  .xl-light {
+    font-size: var(--hpe-web-heading-h1-condensed-medium-font-size);
+    font-weight: var(--hpe-web-heading-h1-condensed-light-font-weight);
+    line-height: var(--hpe-web-heading-h1-condensed-medium-line-height);
+    letter-spacing: var(--hpe-web-heading-h1-condensed-medium-letter-spacing);
+  }
+
+  .lg-bold {
+    font-size: var(
+      --hpe-web-heading-h2-condensed-bold-font-size,
+      var(--hpe-web-heading-h1-condensed-bold-font-size)
+    );
+    font-weight: var(
+      --hpe-web-heading-h2-condensed-bold-font-weight,
+      var(--hpe-web-heading-h1-condensed-bold-font-weight)
+    );
+    line-height: var(
+      --hpe-web-heading-h2-condensed-bold-line-height,
+      var(--hpe-web-heading-h1-condensed-bold-line-height)
+    );
+    letter-spacing: var(
+      --hpe-web-heading-h2-condensed-bold-letter-spacing,
+      var(--hpe-web-heading-h1-condensed-bold-letter-spacing)
+    );
+  }
+
+  .lg-regular {
+    font-size: var(
+      --hpe-web-heading-h2-condensed-medium-font-size,
+      var(--hpe-web-heading-h1-condensed-medium-font-size)
+    );
+    font-weight: var(
+      --hpe-web-heading-h2-condensed-medium-font-weight,
+      var(--hpe-web-heading-h1-condensed-medium-font-weight)
+    );
+    line-height: var(
+      --hpe-web-heading-h2-condensed-medium-line-height,
+      var(--hpe-web-heading-h1-condensed-medium-line-height)
+    );
+    letter-spacing: var(
+      --hpe-web-heading-h2-condensed-medium-letter-spacing,
+      var(--hpe-web-heading-h1-condensed-medium-letter-spacing)
+    );
+  }
+
+  .lg-light {
+    font-size: var(
+      --hpe-web-heading-h2-condensed-medium-font-size,
+      var(--hpe-web-heading-h1-condensed-medium-font-size)
+    );
+    font-weight: var(
+      --hpe-web-heading-h2-condensed-light-font-weight,
+      var(--hpe-web-heading-h1-condensed-light-font-weight)
+    );
+    line-height: var(
+      --hpe-web-heading-h2-condensed-medium-line-height,
+      var(--hpe-web-heading-h1-condensed-medium-line-height)
+    );
+    letter-spacing: var(
+      --hpe-web-heading-h2-condensed-medium-letter-spacing,
+      var(--hpe-web-heading-h1-condensed-medium-letter-spacing)
+    );
+  }
+`;
+//# sourceMappingURL=hpe-condensed-heading.styles.js.map

package/dist/foundation/hpe-typography/hpe-condensed-heading/hpe-condensed-heading.styles.js.map

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

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.d.ts

@@ -0,0 +1,32 @@
+import { LitElement, nothing } from "lit";
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "display";
+/**
+ * Semantic heading text with token-backed visual sizing for the default heading styles from the Figma typography spec.
+ *
+ * @tag hpe-heading
+ * @summary Renders semantic headings with the default heading scale.
+ *
+ * @attr {string} level - Semantic heading level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+ * @attr {string} size - Visual size: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "display"
+ *
+ * @slot - Heading content
+ *
+ * @csspart heading - The rendered heading element
+ */
+export declare class HpeHeading extends LitElement {
+    static styles: import("lit").CSSResult;
+    level: HeadingLevel;
+    size: HeadingSize;
+    private get resolvedScale();
+    private get headingClass();
+    private renderTag;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-heading": HpeHeading;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-heading.d.ts.map

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-heading.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-heading/hpe-heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAIhD,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5D,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAEzE;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAGhC,KAAK,EAAE,YAAY,CAAQ;IAG3B,IAAI,EAAE,WAAW,CAAU;IAE3B,OAAO,KAAK,aAAa,GAiBxB;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,SAAS;IAkCR,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.js

@@ -0,0 +1,100 @@
+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-heading.styles.js";
+/**
+ * Semantic heading text with token-backed visual sizing for the default heading styles from the Figma typography spec.
+ *
+ * @tag hpe-heading
+ * @summary Renders semantic headings with the default heading scale.
+ *
+ * @attr {string} level - Semantic heading level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+ * @attr {string} size - Visual size: "auto" | "xs" | "sm" | "md" | "lg" | "xl" | "display"
+ *
+ * @slot - Heading content
+ *
+ * @csspart heading - The rendered heading element
+ */
+let HpeHeading = class HpeHeading extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.level = "h2";
+        this.size = "auto";
+    }
+    get resolvedScale() {
+        switch (this.size) {
+            case "display":
+                return "h1-large";
+            case "xl":
+                return "h1";
+            case "lg":
+                return "h2";
+            case "md":
+                return "h3";
+            case "sm":
+                return "h4";
+            case "xs":
+                return "h5";
+            default:
+                return this.level;
+        }
+    }
+    get headingClass() {
+        const scale = this.resolvedScale;
+        return scale === "h1-large"
+            ? "heading default-h1-large"
+            : `heading default-${scale}`;
+    }
+    renderTag() {
+        const tagName = this.level;
+        const content = html `<slot></slot>`;
+        switch (tagName) {
+            case "h1":
+                return html `<h1 part="heading" class=${this.headingClass}>
+          ${content}
+        </h1>`;
+            case "h2":
+                return html `<h2 part="heading" class=${this.headingClass}>
+          ${content}
+        </h2>`;
+            case "h3":
+                return html `<h3 part="heading" class=${this.headingClass}>
+          ${content}
+        </h3>`;
+            case "h4":
+                return html `<h4 part="heading" class=${this.headingClass}>
+          ${content}
+        </h4>`;
+            case "h5":
+                return html `<h5 part="heading" class=${this.headingClass}>
+          ${content}
+        </h5>`;
+            case "h6":
+                return html `<h6 part="heading" class=${this.headingClass}>
+          ${content}
+        </h6>`;
+            default:
+                return nothing;
+        }
+    }
+    render() {
+        return this.renderTag();
+    }
+};
+HpeHeading.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeHeading.prototype, "level", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeHeading.prototype, "size", void 0);
+HpeHeading = __decorate([
+    customElement("hpe-heading")
+], HpeHeading);
+export { HpeHeading };
+//# sourceMappingURL=hpe-heading.js.map

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-heading.js","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-heading/hpe-heading.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,yBAAyB,CAAC;AAKjD;;;;;;;;;;;;GAYG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIL,UAAK,GAAiB,IAAI,CAAC;QAG3B,SAAI,GAAgB,MAAM,CAAC;IAiE7B,CAAC;IA/DC,IAAY,aAAa;QACvB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,SAAS;gBACZ,OAAO,UAAU,CAAC;YACpB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,IAAI,CAAC,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAED,IAAY,YAAY;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QACjC,OAAO,KAAK,KAAK,UAAU;YACzB,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,mBAAmB,KAAK,EAAE,CAAC;IACjC,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAA,eAAe,CAAC;QAEpC,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY;YACpD,OAAO;cACL,CAAC;YACT;gBACE,OAAO,OAAO,CAAC;QACnB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;;AAtEe,iBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACD;AAG3B;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACD;AAPhB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwEtB"}

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.styles.d.ts

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

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.styles.d.ts.map

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

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.styles.js

@@ -0,0 +1,63 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    color: var(--hpe-heading-color, var(--hpe-web-color-text-header));
+    font-family: var(--hpe-heading-font-family, "HPE Graphik", sans-serif);
+  }
+
+  .heading {
+    margin: 0;
+    color: inherit;
+  }
+
+  .default-h1-large {
+    font-size: var(--hpe-web-heading-h1-large-default-font-size);
+    font-weight: var(--hpe-web-heading-h1-large-default-font-weight);
+    line-height: var(--hpe-web-heading-h1-large-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h1-large-default-letter-spacing);
+  }
+
+  .default-h1 {
+    font-size: var(--hpe-web-heading-h1-default-font-size);
+    font-weight: var(--hpe-web-heading-h1-default-font-weight);
+    line-height: var(--hpe-web-heading-h1-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h1-default-letter-spacing);
+  }
+
+  .default-h2 {
+    font-size: var(--hpe-web-heading-h2-default-font-size);
+    font-weight: var(--hpe-web-heading-h2-default-font-weight);
+    line-height: var(--hpe-web-heading-h2-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h2-default-letter-spacing);
+  }
+
+  .default-h3 {
+    font-size: var(--hpe-web-heading-h3-default-font-size);
+    font-weight: var(--hpe-web-heading-h3-default-font-weight);
+    line-height: var(--hpe-web-heading-h3-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h3-default-letter-spacing);
+  }
+
+  .default-h4 {
+    font-size: var(--hpe-web-heading-h4-default-font-size);
+    font-weight: var(--hpe-web-heading-h4-default-font-weight);
+    line-height: var(--hpe-web-heading-h4-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h4-default-letter-spacing);
+  }
+
+  .default-h5 {
+    font-size: var(--hpe-web-heading-h5-default-font-size);
+    font-weight: var(--hpe-web-heading-h5-default-font-weight);
+    line-height: var(--hpe-web-heading-h5-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h5-default-letter-spacing);
+  }
+
+  .default-h6 {
+    font-size: var(--hpe-web-heading-h6-default-font-size);
+    font-weight: var(--hpe-web-heading-h6-default-font-weight);
+    line-height: var(--hpe-web-heading-h6-default-line-height);
+    letter-spacing: var(--hpe-web-heading-h6-default-letter-spacing);
+  }
+`;
+//# sourceMappingURL=hpe-heading.styles.js.map

package/dist/foundation/hpe-typography/hpe-heading/hpe-heading.styles.js.map

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

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+type ParagraphSize = "sm" | "md" | "lg" | "disclaimer";
+/**
+ * Paragraph text component covering the paragraph sizes shown in the Figma typography spec.
+ *
+ * @tag hpe-paragraph
+ * @summary Renders token-backed paragraph text with size variants.
+ *
+ * @attr {string} size - Paragraph size: "sm" | "md" | "lg" | "disclaimer"
+ *
+ * @slot - Paragraph content
+ *
+ * @csspart paragraph - The paragraph element
+ */
+export declare class HpeParagraph extends LitElement {
+    static styles: import("lit").CSSResult;
+    size: ParagraphSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-paragraph": HpeParagraph;
+    }
+}
+export {};
+//# sourceMappingURL=hpe-paragraph.d.ts.map

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-paragraph.d.ts","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAU;IAGhC,IAAI,EAAE,aAAa,CAAQ;IAElB,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.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-paragraph.styles.js";
+/**
+ * Paragraph text component covering the paragraph sizes shown in the Figma typography spec.
+ *
+ * @tag hpe-paragraph
+ * @summary Renders token-backed paragraph text with size variants.
+ *
+ * @attr {string} size - Paragraph size: "sm" | "md" | "lg" | "disclaimer"
+ *
+ * @slot - Paragraph content
+ *
+ * @csspart paragraph - The paragraph element
+ */
+let HpeParagraph = class HpeParagraph extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = "md";
+    }
+    render() {
+        return html `
+      <p part="paragraph" class=${`paragraph size-${this.size}`}>
+        <slot></slot>
+      </p>
+    `;
+    }
+};
+HpeParagraph.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeParagraph.prototype, "size", void 0);
+HpeParagraph = __decorate([
+    customElement("hpe-paragraph")
+], HpeParagraph);
+export { HpeParagraph };
+//# sourceMappingURL=hpe-paragraph.js.map

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-paragraph.js","sourceRoot":"","sources":["../../../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.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;AAInD;;;;;;;;;;;GAWG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIL,SAAI,GAAkB,IAAI,CAAC;IAS7B,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;kCACmB,kBAAkB,IAAI,CAAC,IAAI,EAAE;;;KAG1D,CAAC;IACJ,CAAC;;AAXe,mBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACD;AAJhB,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAaxB"}

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.styles.d.ts

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

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.styles.d.ts.map

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

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.styles.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    color: var(--hpe-paragraph-color, var(--hpe-web-color-text-default));
+    font-family: var(--hpe-paragraph-font-family, "HPE Graphik", sans-serif);
+  }
+
+  .paragraph {
+    margin: 0;
+    color: inherit;
+  }
+
+  .size-lg {
+    font-size: var(--hpe-web-paragraph-large-body-copy-font-size);
+    font-weight: var(--hpe-web-paragraph-large-body-copy-font-weight);
+    line-height: var(--hpe-web-paragraph-large-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-large-body-copy-letter-spacing);
+  }
+
+  .size-md {
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    font-weight: var(--hpe-web-paragraph-body-copy-font-weight);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+  }
+
+  .size-sm {
+    font-size: var(--hpe-web-paragraph-small-body-copy-font-size);
+    font-weight: var(--hpe-web-paragraph-small-body-copy-font-weight);
+    line-height: var(--hpe-web-paragraph-small-body-copy-line-height);
+    letter-spacing: var(--hpe-web-paragraph-small-body-copy-letter-spacing);
+  }
+
+  .size-disclaimer {
+    font-size: var(--hpe-web-paragraph-disclaimer-font-size);
+    font-weight: var(--hpe-web-paragraph-disclaimer-font-weight);
+    line-height: var(--hpe-web-paragraph-disclaimer-line-height);
+    letter-spacing: var(--hpe-web-paragraph-disclaimer-letter-spacing);
+  }
+`;
+//# sourceMappingURL=hpe-paragraph.styles.js.map

package/dist/foundation/hpe-typography/hpe-paragraph/hpe-paragraph.styles.js.map

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

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

@@ -0,0 +1,4 @@
+export { HpeCondensedHeading } from "./hpe-condensed-heading/hpe-condensed-heading.js";
+export { HpeHeading } from "./hpe-heading/hpe-heading.js";
+export { HpeParagraph } from "./hpe-paragraph/hpe-paragraph.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../foundation/hpe-typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC"}

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

@@ -0,0 +1,4 @@
+export { HpeCondensedHeading } from "./hpe-condensed-heading/hpe-condensed-heading.js";
+export { HpeHeading } from "./hpe-heading/hpe-heading.js";
+export { HpeParagraph } from "./hpe-paragraph/hpe-paragraph.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../foundation/hpe-typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kDAAkD,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC"}