@hpe-web/components 0.0.1 → 1.0.0

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+/**
+ * An image container component with flexible aspect ratio support.
+ * Supports six aspect ratio variants optimized for different use cases.
+ *
+ * @tag hpe-image
+ * @summary Displays an image with configurable aspect ratio options.
+ *
+ * @attr {string} src - Image source URL
+ * @attr {string} alt - Alternative text for accessibility
+ * @attr {string} aspect-ratio - Aspect ratio: "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5" (default: "4:3")
+ *
+ * @slot - Fallback content if image fails to load or for placeholder
+ *
+ * @csspart container - The image container element
+ * @csspart image - The img element
+ */
+export declare class HpeImage extends LitElement {
+    static styles: import("lit").CSSResult;
+    src?: string;
+    alt: string;
+    aspectRatio: "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5";
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-image": HpeImage;
+    }
+}
+//# sourceMappingURL=hpe-image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-image.d.ts","sourceRoot":"","sources":["../../../elements/hpe-image/hpe-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;GAeG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,GAAG,SAAW;IAGd,WAAW,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAS;IAE7D,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,61 @@
+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-image.styles";
+/**
+ * An image container component with flexible aspect ratio support.
+ * Supports six aspect ratio variants optimized for different use cases.
+ *
+ * @tag hpe-image
+ * @summary Displays an image with configurable aspect ratio options.
+ *
+ * @attr {string} src - Image source URL
+ * @attr {string} alt - Alternative text for accessibility
+ * @attr {string} aspect-ratio - Aspect ratio: "16:9" | "4:3" | "1:1" | "9:16" | "3:4" | "18:5" (default: "4:3")
+ *
+ * @slot - Fallback content if image fails to load or for placeholder
+ *
+ * @csspart container - The image container element
+ * @csspart image - The img element
+ */
+let HpeImage = class HpeImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.alt = "Image";
+        this.aspectRatio = "4:3";
+    }
+    render() {
+        return html `
+      <div part="image-container" class="image-container">
+        ${this.src
+            ? html `<img
+              part="image"
+              class="image"
+              src=${this.src}
+              alt=${this.alt}
+            />`
+            : html `<slot></slot>`}
+      </div>
+    `;
+    }
+};
+HpeImage.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeImage.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeImage.prototype, "alt", void 0);
+__decorate([
+    property({ reflect: true, attribute: "aspect-ratio" })
+], HpeImage.prototype, "aspectRatio", void 0);
+HpeImage = __decorate([
+    customElement("hpe-image")
+], HpeImage);
+export { HpeImage };
+//# sourceMappingURL=hpe-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-image.js","sourceRoot":"","sources":["../../../elements/hpe-image/hpe-image.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,oBAAoB,CAAC;AAE5C;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAOL,QAAG,GAAG,OAAO,CAAC;QAGd,gBAAW,GAAqD,KAAK,CAAC;IAgBxE,CAAC;IAdU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,GAAG;YACR,CAAC,CAAC,IAAI,CAAA;;;oBAGI,IAAI,CAAC,GAAG;oBACR,IAAI,CAAC,GAAG;eACb;YACL,CAAC,CAAC,IAAI,CAAA,eAAe;;KAE1B,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACf;AAGb;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CACe;AAV3D,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0BpB"}

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

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

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

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

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

@@ -0,0 +1,64 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    --hpe-image-background: var(
+      --image-background,
+      var(--hpe-web-color-transparent)
+    );
+    display: block;
+  }
+
+  .image-container {
+    position: relative;
+    width: 100%;
+    background-color: var(--hpe-image-background);
+    overflow: hidden;
+  }
+
+  .image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* 16:9 aspect ratio (default) */
+  :host([aspect-ratio="16:9"]) .image-container {
+    aspect-ratio: 16 / 9;
+  }
+
+  /* 4:3 aspect ratio */
+  :host([aspect-ratio="4:3"]) .image-container {
+    aspect-ratio: 4 / 3;
+  }
+
+  /* 1:1 aspect ratio (square) */
+  :host([aspect-ratio="1:1"]) .image-container {
+    aspect-ratio: 1 / 1;
+  }
+
+  /* 9:16 aspect ratio (tall) */
+  :host([aspect-ratio="9:16"]) .image-container {
+    aspect-ratio: 9 / 16;
+  }
+
+  /* 3:4 aspect ratio (tall) */
+  :host([aspect-ratio="3:4"]) .image-container {
+    aspect-ratio: 3 / 4;
+  }
+
+  /* 18:5 aspect ratio (ultra-wide) */
+  :host([aspect-ratio="18:5"]) .image-container {
+    aspect-ratio: 18 / 5;
+  }
+
+  /* Slot (fallback content) styling */
+  ::slotted(*) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+//# sourceMappingURL=hpe-image.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-input-group.js","sourceRoot":"","sources":["../../../elements/hpe-input-group/hpe-input-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,6BAA6B,CAAC;AAErD;;;;;;;;;;;GAWG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIL,gBAAW,GAA8B,YAAY,CAAC;IASxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAXe,oBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC0B;AAJ3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAazB"}

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    --input-group-horizontal-spacing: var(--hpe-web-spacing-large);
+    --input-group-vertical-spacing: var(--hpe-web-spacing-xsmall);
+    display: contents;
+  }
+
+  .input-group {
+    display: flex;
+  }
+
+  :host([orientation="horizontal"]) .input-group {
+    flex-direction: row;
+    gap: var(--input-group-horizontal-spacing);
+    flex-wrap: wrap;
+    align-items: center;
+    width: max-content;
+  }
+
+  :host([orientation="vertical"]) .input-group {
+    flex-direction: column;
+    gap: var(--input-group-vertical-spacing);
+    align-items: flex-start;
+    width: max-content;
+  }
+`;
+//# sourceMappingURL=hpe-input-group.styles.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,36 @@
+import { LitElement } from "lit";
+/**
+ * A checkbox input component with label and state management.
+ * Supports checked/unchecked states with enabled/disabled variants.
+ *
+ * @tag hpe-checkbox
+ * @summary A customizable checkbox field with label support.
+ *
+ * @attr {string} name - Checkbox name attribute
+ * @attr {string} value - Checkbox value attribute
+ * @attr {boolean} checked - Whether checkbox is checked
+ * @attr {string} label - Label text displayed next to checkbox
+ * @attr {boolean} disabled - Whether checkbox is disabled
+ *
+ * @csspart container - The component container
+ * @csspart checkbox-group - The checkbox and label container
+ * @csspart input - The actual checkbox input element
+ * @csspart checkmark - The custom checkmark icon
+ * @csspart label - The label text
+ */
+export declare class HpeCheckbox extends LitElement {
+    static styles: import("lit").CSSResult;
+    name?: string;
+    value?: string;
+    checked: boolean;
+    label: string;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onCheckboxChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-checkbox": HpeCheckbox;
+    }
+}
+//# sourceMappingURL=hpe-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-checkbox.d.ts","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-checkbox/hpe-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAGhC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,UAAS;IAGhB,KAAK,SAAoB;IAGzB,QAAQ,UAAS;IAER,MAAM;IA4Bf,OAAO,CAAC,iBAAiB;CAI1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,87 @@
+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-checkbox.styles.js";
+/**
+ * A checkbox input component with label and state management.
+ * Supports checked/unchecked states with enabled/disabled variants.
+ *
+ * @tag hpe-checkbox
+ * @summary A customizable checkbox field with label support.
+ *
+ * @attr {string} name - Checkbox name attribute
+ * @attr {string} value - Checkbox value attribute
+ * @attr {boolean} checked - Whether checkbox is checked
+ * @attr {string} label - Label text displayed next to checkbox
+ * @attr {boolean} disabled - Whether checkbox is disabled
+ *
+ * @csspart container - The component container
+ * @csspart checkbox-group - The checkbox and label container
+ * @csspart input - The actual checkbox input element
+ * @csspart checkmark - The custom checkmark icon
+ * @csspart label - The label text
+ */
+let HpeCheckbox = class HpeCheckbox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.label = "Checkbox Label";
+        this.disabled = false;
+    }
+    render() {
+        const inputId = this.name || "checkbox";
+        return html `
+      <label part="container" class="container" for=${inputId}>
+        <div part="checkbox-group" class="checkbox-group">
+          <input
+            part="input"
+            class="checkbox-input"
+            id=${inputId}
+            type="checkbox"
+            name=${this.name || ""}
+            value=${this.value || ""}
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            @change=${this._onCheckboxChange}
+          />
+          <span part="checkmark" class="checkmark" aria-hidden="true">
+            <svg viewBox="0 0 16 16" focusable="false">
+              <path d="M3.5 8.25 6.5 11.25 12.5 4.75" />
+            </svg>
+          </span>
+        </div>
+        <span part="label" class="label">${this.label}</span>
+      </label>
+    `;
+    }
+    _onCheckboxChange(e) {
+        const target = e.target;
+        this.checked = target.checked;
+    }
+};
+HpeCheckbox.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeCheckbox.prototype, "disabled", void 0);
+HpeCheckbox = __decorate([
+    customElement("hpe-checkbox")
+], HpeCheckbox);
+export { HpeCheckbox };
+//# sourceMappingURL=hpe-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-checkbox.js","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-checkbox/hpe-checkbox.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,0BAA0B,CAAC;AAElD;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAUL,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,gBAAgB,CAAC;QAGzB,aAAQ,GAAG,KAAK,CAAC;IAkCnB,CAAC;IAhCU,MAAM;QACb,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC;QAExC,OAAO,IAAI,CAAA;sDACuC,OAAO;;;;;iBAK5C,OAAO;;mBAEL,IAAI,CAAC,IAAI,IAAI,EAAE;oBACd,IAAI,CAAC,KAAK,IAAI,EAAE;uBACb,IAAI,CAAC,OAAO;wBACX,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,iBAAiB;;;;;;;;2CAQD,IAAI,CAAC,KAAK;;KAEhD,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,CAAC;;AAhDe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACd;AAGd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACb;AAGf;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACH;AAGzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAC1B;AAhBN,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkDvB"}

package/dist/elements/hpe-inputs/hpe-checkbox/hpe-checkbox.styles.d.ts

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

package/dist/elements/hpe-inputs/hpe-checkbox/hpe-checkbox.styles.d.ts.map

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

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

@@ -0,0 +1,124 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xxsmall, 12px);
+    align-items: center;
+    width: fit-content;
+    cursor: pointer;
+  }
+
+  .checkbox-group {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  .checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+    z-index: 1;
+  }
+
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--hpe-web-color-background-default, #ffffff);
+    border: 1px solid var(--hpe-web-color-border-default, #b1b9be);
+    border-radius: var(--checkbox-default-medium-control-borderradius, 6px);
+    pointer-events: none;
+    box-sizing: border-box;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .checkmark svg {
+    width: 16px;
+    height: 16px;
+    opacity: 0;
+  }
+
+  .checkmark path {
+    fill: none;
+    stroke: var(--hpe-web-color-text-on-strong, #ffffff);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1.75;
+  }
+
+  .checkbox-input:checked ~ .checkmark {
+    background-color: var(--hpe-web-color-background-primary, #01a982);
+    border-color: var(--hpe-web-color-border-selected, #006750);
+  }
+
+  .checkbox-input:checked ~ .checkmark svg {
+    opacity: 1;
+  }
+
+  .container:hover .checkbox-input:not(:disabled):checked ~ .checkmark {
+    background-color: var(--hpe-web-color-background-primary-strong, #068667);
+    border-color: var(--hpe-web-color-background-primary-strong, #068667);
+  }
+
+  .container:hover .checkbox-input:not(:disabled):not(:checked) ~ .checkmark {
+    background-color: var(
+      --hpe-web-color-background-contrast,
+      rgba(0, 0, 0, 0.04)
+    );
+  }
+
+  .checkbox-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .checkbox-input:disabled ~ .checkmark {
+    background-color: var(--hpe-web-color-background-neutral-weak, #d4d8db);
+    border-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  .checkbox-input:disabled ~ .checkmark path {
+    stroke: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+
+  .checkbox-input:focus-visible ~ .checkmark {
+    outline: 2px solid var(--hpe-web-color-border-selected, #006750);
+    outline-offset: 2px;
+  }
+
+  .label {
+    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);
+    cursor: pointer;
+    margin: 0;
+    user-select: none;
+  }
+
+  .checkbox-input:disabled ~ .label {
+    cursor: not-allowed;
+    color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+`;
+//# sourceMappingURL=hpe-checkbox.styles.js.map

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

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

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

@@ -0,0 +1,55 @@
+import { LitElement } from "lit";
+/**
+ * A text input field component with label, helper text, and state management.
+ * Supports multiple states: Enabled, Error, Typing, Complete, and Disabled.
+ *
+ * @tag hpe-input
+ * @summary A customizable text input field with label and description support.
+ *
+ * @attr {string} name - Input name attribute
+ * @attr {string} value - Input value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} label - Label text displayed above input
+ * @attr {boolean} required - Whether input is required (shows asterisk)
+ * @attr {boolean} show-label - Whether to show the label
+ * @attr {string} description-text - Helper/description text below input
+ * @attr {boolean} show-description - Whether to show the description
+ * @attr {string} state - Input state: "enabled" | "error" | "typing" | "complete" | "disabled"
+ * @attr {boolean} disabled - Whether input is disabled
+ *
+ * @slot - Input field wrapper slot
+ *
+ * @csspart container - The component container
+ * @csspart input-group - The input label and field container
+ * @csspart label - The label element
+ * @csspart label-text - The label text
+ * @csspart required-indicator - The required asterisk
+ * @csspart field - The input field element
+ * @csspart input - The actual input element
+ * @csspart description - The description/helper text container
+ */
+export declare class HpeInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    private static idCounter;
+    private readonly inputId;
+    name?: string;
+    value: string;
+    placeholder: string;
+    label: string;
+    required: boolean;
+    showLabel: boolean;
+    descriptionText: string;
+    showDescription: boolean;
+    state: "enabled" | "error" | "typing" | "complete" | "disabled";
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    private _onInput;
+    private _onBlur;
+    private _onFocus;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-input": HpeInput;
+    }
+}
+//# sourceMappingURL=hpe-input.d.ts.map