@hpe-web/components 0.0.1 → 1.0.0

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

@@ -0,0 +1,196 @@
+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, query, state } from "lit/decorators.js";
+import { styles } from "./hpe-carousel.styles.js";
+/**
+ * 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.
+ */
+let HpeCarousel = class HpeCarousel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visibleSlides = 1;
+        this.showControls = true;
+        this.showSlideCount = false;
+        this.currentIndex = 0;
+        this.totalSlides = 0;
+    }
+    get currentSlideIndex() {
+        return this.currentIndex;
+    }
+    get pageCount() {
+        return this.totalPages;
+    }
+    firstUpdated() {
+        this.syncSlides();
+        this.updateSlideWidth();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("visibleSlides")) {
+            this.currentIndex = 0;
+            this.updateSlideWidth();
+            this.goTo(0);
+        }
+    }
+    get totalPages() {
+        return Math.max(this.totalSlides - this.visibleSlides + 1, 1);
+    }
+    syncSlides() {
+        const slot = this.renderRoot.querySelector("slot");
+        if (!slot) {
+            return;
+        }
+        this.totalSlides = slot.assignedElements({ flatten: true }).length;
+        this.currentIndex = Math.min(this.currentIndex, this.totalPages - 1);
+        this.notifyStateChange();
+    }
+    updateSlideWidth() {
+        const safeVisibleSlides = Math.max(1, this.visibleSlides);
+        const gapCount = safeVisibleSlides - 1;
+        this.style.setProperty("--_hpe-carousel-slide-width", `calc((100% - (var(--hpe-carousel-slide-gap, 0px) * ${gapCount})) / ${safeVisibleSlides})`);
+    }
+    goTo(index) {
+        const clampedIndex = Math.max(0, Math.min(index, this.totalPages - 1));
+        this.currentIndex = clampedIndex;
+        const slot = this.renderRoot.querySelector("slot");
+        if (!slot || !this.slidesElement) {
+            return;
+        }
+        const slides = slot.assignedElements({ flatten: true });
+        const targetSlide = slides[clampedIndex];
+        if (targetSlide) {
+            this.slidesElement.scrollTo({
+                left: targetSlide.offsetLeft,
+                behavior: "smooth",
+            });
+        }
+        this.notifyStateChange();
+    }
+    goToPrevious() {
+        this.goTo(this.currentIndex - 1);
+    }
+    goToNext() {
+        this.goTo(this.currentIndex + 1);
+    }
+    handleSlotChange() {
+        this.syncSlides();
+        this.updateSlideWidth();
+    }
+    notifyStateChange() {
+        this.dispatchEvent(new CustomEvent("hpe-carousel-change", {
+            detail: {
+                currentIndex: this.currentIndex,
+                totalSlides: this.totalSlides,
+                totalPages: this.totalPages,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    renderIcon(direction) {
+        return direction === "left"
+            ? html `
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M14.5 6.5L9 12l5.5 5.5" />
+          </svg>
+        `
+            : html `
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M9.5 6.5L15 12l-5.5 5.5" />
+          </svg>
+        `;
+    }
+    render() {
+        const showNavigation = this.showControls && this.totalSlides > this.visibleSlides;
+        const slideCountText = `Slide ${this.currentIndex + 1} of ${this.totalSlides}`;
+        return html `
+      <div part="container" class="container">
+        <div part="slides" class="slides">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+
+        ${showNavigation
+            ? html `
+              <div part="controls" class="controls">
+                <button
+                  part="prev-button"
+                  class="nav-button"
+                  type="button"
+                  aria-label="Previous slide"
+                  ?disabled=${this.currentIndex === 0}
+                  @click=${this.goToPrevious}
+                >
+                  ${this.renderIcon("left")}
+                </button>
+
+                <button
+                  part="next-button"
+                  class="nav-button"
+                  type="button"
+                  aria-label="Next slide"
+                  ?disabled=${this.currentIndex >= this.totalPages - 1}
+                  @click=${this.goToNext}
+                >
+                  ${this.renderIcon("right")}
+                </button>
+
+                ${this.showSlideCount
+                ? html `
+                      <span part="slide-count" class="slide-count"
+                        >${slideCountText}</span
+                      >
+                    `
+                : nothing}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+HpeCarousel.styles = styles;
+__decorate([
+    property({ type: Number, reflect: true, attribute: "visible-slides" })
+], HpeCarousel.prototype, "visibleSlides", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "show-controls" })
+], HpeCarousel.prototype, "showControls", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "show-slide-count" })
+], HpeCarousel.prototype, "showSlideCount", void 0);
+__decorate([
+    state()
+], HpeCarousel.prototype, "currentIndex", void 0);
+__decorate([
+    state()
+], HpeCarousel.prototype, "totalSlides", void 0);
+__decorate([
+    query(".slides")
+], HpeCarousel.prototype, "slidesElement", void 0);
+HpeCarousel = __decorate([
+    customElement("hpe-carousel")
+], HpeCarousel);
+export { HpeCarousel };
+//# sourceMappingURL=hpe-carousel.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,106 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-carousel-stack-gap: 40px;
+    --hpe-carousel-controls-gap: 16px;
+    --hpe-carousel-slide-gap: 0px;
+    --hpe-carousel-nav-size: 56px;
+    --hpe-carousel-nav-rest-background: #535c66;
+    --hpe-carousel-nav-disabled-background: #b4b6ba;
+    --hpe-carousel-nav-icon-color: #ffffff;
+    --hpe-carousel-slide-count-color: #606a70;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--hpe-carousel-stack-gap);
+    width: 100%;
+  }
+
+  .slides {
+    display: flex;
+    align-items: center;
+    gap: var(--hpe-carousel-slide-gap);
+    width: 100%;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .slides::-webkit-scrollbar {
+    display: none;
+  }
+
+  ::slotted(*) {
+    flex: 0 0 var(--_hpe-carousel-slide-width, 100%);
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: var(--hpe-carousel-controls-gap);
+  }
+
+  .slide-count {
+    color: var(--hpe-carousel-slide-count-color);
+    font-family: var(--heading-font, sans-serif);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    white-space: nowrap;
+  }
+
+  .nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hpe-carousel-nav-size);
+    height: var(--hpe-carousel-nav-size);
+    padding: 0;
+    border: none;
+    border-radius: 9999px;
+    background: var(--hpe-carousel-nav-rest-background);
+    color: var(--hpe-carousel-nav-icon-color);
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+  }
+
+  .nav-button:hover:not(:disabled) {
+    opacity: 0.88;
+  }
+
+  .nav-button:disabled {
+    background: var(--hpe-carousel-nav-disabled-background);
+    cursor: not-allowed;
+  }
+
+  .nav-button svg {
+    width: 24px;
+    height: 24px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  @media (max-width: 766px) {
+    :host {
+      --hpe-carousel-controls-gap: 12px;
+      --hpe-carousel-nav-size: 40px;
+    }
+
+    .nav-button svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
+//# sourceMappingURL=hpe-carousel.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+import "../hpe-button/hpe-button.js";
+import "../hpe-button-group/hpe-button-group.js";
+import "../../foundation/hpe-typography/hpe-heading/hpe-heading.js";
+import "../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.js";
+/**
+ * A form container matching the Figma form layout with heading, body copy, field stack, and primary action.
+ *
+ * @tag hpe-form
+ * @summary Displays a token-backed form shell with slotted input controls, a submit action, and optional additional actions.
+ *
+ * @attr {string} heading - Heading text displayed at the top of the form
+ * @attr {string} description - Supporting body copy displayed below the heading
+ * @attr {string} submit-label - Label used for the default submit button
+ * @slot - Form fields and grouped controls
+ * @slot actions - Optional additional action buttons rendered alongside the default submit button
+ *
+ * @csspart container - The outer form container
+ * @csspart header - The heading and description area
+ * @csspart fields - The slotted field stack
+ * @csspart actions - The action row
+ */
+export declare class HpeForm extends LitElement {
+    static styles: import("lit").CSSResult;
+    heading: string;
+    description: string;
+    submitLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+    private onSubmitClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-form": HpeForm;
+    }
+}
+//# sourceMappingURL=hpe-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-form.d.ts","sourceRoot":"","sources":["../../../elements/hpe-form/hpe-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,4DAA4D,CAAC;AACpE,OAAO,gEAAgE,CAAC;AAExE;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,OAAO,SAAa;IAGpB,WAAW,SAC0F;IAGrG,WAAW,SAAY;IAEd,MAAM;IA2Bf,OAAO,CAAC,aAAa;CAQtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,85 @@
+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-form.styles.js";
+import "../hpe-button/hpe-button.js";
+import "../hpe-button-group/hpe-button-group.js";
+import "../../foundation/hpe-typography/hpe-heading/hpe-heading.js";
+import "../../foundation/hpe-typography/hpe-paragraph/hpe-paragraph.js";
+/**
+ * A form container matching the Figma form layout with heading, body copy, field stack, and primary action.
+ *
+ * @tag hpe-form
+ * @summary Displays a token-backed form shell with slotted input controls, a submit action, and optional additional actions.
+ *
+ * @attr {string} heading - Heading text displayed at the top of the form
+ * @attr {string} description - Supporting body copy displayed below the heading
+ * @attr {string} submit-label - Label used for the default submit button
+ * @slot - Form fields and grouped controls
+ * @slot actions - Optional additional action buttons rendered alongside the default submit button
+ *
+ * @csspart container - The outer form container
+ * @csspart header - The heading and description area
+ * @csspart fields - The slotted field stack
+ * @csspart actions - The action row
+ */
+let HpeForm = class HpeForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "Heading";
+        this.description = "Desription text providing context for the form and its fields. This can be a few sentences long.";
+        this.submitLabel = "Submit";
+    }
+    render() {
+        return html `
+      <section part="container" class="container">
+        <div part="header" class="header">
+          <hpe-heading level="h2">${this.heading}</hpe-heading>
+          <hpe-paragraph size="md">${this.description}</hpe-paragraph>
+        </div>
+        <div part="fields" class="fields">
+          <slot></slot>
+        </div>
+        <div part="actions" class="actions">
+          <hpe-button-group>
+            <hpe-button
+              type="primary"
+              size="small"
+              .showIcon=${false}
+              @click=${this.onSubmitClick}
+            >
+              ${this.submitLabel}
+            </hpe-button>
+            <slot name="actions"></slot>
+          </hpe-button-group>
+        </div>
+      </section>
+    `;
+    }
+    onSubmitClick() {
+        this.dispatchEvent(new CustomEvent("hpe-form-submit", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+HpeForm.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeForm.prototype, "heading", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeForm.prototype, "description", void 0);
+__decorate([
+    property({ reflect: true, attribute: "submit-label" })
+], HpeForm.prototype, "submitLabel", void 0);
+HpeForm = __decorate([
+    customElement("hpe-form")
+], HpeForm);
+export { HpeForm };
+//# sourceMappingURL=hpe-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-form.js","sourceRoot":"","sources":["../../../elements/hpe-form/hpe-form.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,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,4DAA4D,CAAC;AACpE,OAAO,gEAAgE,CAAC;AAExE;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIL,YAAO,GAAG,SAAS,CAAC;QAGpB,gBAAW,GACT,kGAAkG,CAAC;QAGrG,gBAAW,GAAG,QAAQ,CAAC;IAqCzB,CAAC;IAnCU,MAAM;QACb,OAAO,IAAI,CAAA;;;oCAGqB,IAAI,CAAC,OAAO;qCACX,IAAI,CAAC,WAAW;;;;;;;;;;0BAU3B,KAAK;uBACR,IAAI,CAAC,aAAa;;gBAEzB,IAAI,CAAC,WAAW;;;;;;KAM3B,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;;AA9Ce,cAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACR;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAEyE;AAGrG;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;4CAChC;AAXZ,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAgDnB"}

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

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

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

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

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

@@ -0,0 +1,67 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hpe-web-spacing-xlarge);
+    width: 100%;
+    padding: var(--hpe-web-spacing-xlarge);
+    box-sizing: border-box;
+    border: 1px solid var(--hpe-web-color-border-weak);
+    background: var(--hpe-web-color-background-card);
+  }
+
+  .header,
+  .fields,
+  .actions {
+    display: flex;
+    width: 100%;
+  }
+
+  .header,
+  .fields {
+    flex-direction: column;
+  }
+
+  .header {
+    gap: var(--hpe-web-spacing-xsmall);
+  }
+
+  .fields {
+    gap: var(--hpe-web-spacing-medium);
+  }
+
+  .actions {
+    align-items: center;
+  }
+
+  hpe-heading,
+  hpe-paragraph {
+    margin: 0;
+  }
+
+  ::slotted(*) {
+    box-sizing: border-box;
+  }
+
+  ::slotted(hpe-input),
+  ::slotted(hpe-input-group),
+  ::slotted(hpe-select),
+  ::slotted(hpe-textarea) {
+    display: block;
+    width: 100%;
+    max-width: none;
+  }
+
+  @media (max-width: 767px) {
+    .container {
+      gap: var(--hpe-web-spacing-large);
+      padding: var(--hpe-web-spacing-medium);
+    }
+  }
+`;
+//# sourceMappingURL=hpe-form.styles.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+/**
+ * A decorative horizontal rule used to visually separate sections of content.
+ *
+ * @tag hpe-horizontal-rule
+ * @summary A full-width horizontal divider styled with the design-system border token.
+ *
+ * @csspart rule - The underlying `<hr>` element.
+ */
+export declare class HpeHorizontalRule extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-horizontal-rule": HpeHorizontalRule;
+    }
+}
+//# sourceMappingURL=hpe-horizontal-rule.d.ts.map

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-horizontal-rule.d.ts","sourceRoot":"","sources":["../../../elements/hpe-horizontal-rule/hpe-horizontal-rule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;GAOG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAEvB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.js

@@ -0,0 +1,28 @@
+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 } from "lit/decorators.js";
+import { styles } from "./hpe-horizontal-rule.styles.js";
+/**
+ * A decorative horizontal rule used to visually separate sections of content.
+ *
+ * @tag hpe-horizontal-rule
+ * @summary A full-width horizontal divider styled with the design-system border token.
+ *
+ * @csspart rule - The underlying `<hr>` element.
+ */
+let HpeHorizontalRule = class HpeHorizontalRule extends LitElement {
+    render() {
+        return html `<hr part="rule" class="rule" />`;
+    }
+};
+HpeHorizontalRule.styles = styles;
+HpeHorizontalRule = __decorate([
+    customElement("hpe-horizontal-rule")
+], HpeHorizontalRule);
+export { HpeHorizontalRule };
+//# sourceMappingURL=hpe-horizontal-rule.js.map

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-horizontal-rule.js","sourceRoot":"","sources":["../../../elements/hpe-horizontal-rule/hpe-horizontal-rule.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD;;;;;;;GAOG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAGtC,MAAM;QACb,OAAO,IAAI,CAAA,iCAAiC,CAAC;IAC/C,CAAC;;AAJe,wBAAM,GAAG,MAAM,AAAT,CAAU;AADrB,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAM7B"}

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.styles.d.ts

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

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.styles.d.ts.map

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

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.styles.js

@@ -0,0 +1,18 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .rule {
+    display: block;
+    width: 100%;
+    height: 0;
+    margin: 0;
+    border: none;
+    border-top: var(--hpe-web-border-width-default) solid
+      var(--hpe-web-color-border-weak);
+  }
+`;
+//# sourceMappingURL=hpe-horizontal-rule.styles.js.map

package/dist/elements/hpe-horizontal-rule/hpe-horizontal-rule.styles.js.map

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

package/dist/elements/hpe-horizontal-rule/index.d.ts

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

package/dist/elements/hpe-horizontal-rule/index.d.ts.map

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