@hpe-web/components 0.0.1 → 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-input.d.ts","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-input/hpe-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAU;IAChC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAC7B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuC;IAG/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAW;IAGhB,QAAQ,UAAQ;IAGhB,SAAS,UAAQ;IAGjB,eAAe,SAA4B;IAG3C,eAAe,UAAQ;IAGvB,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAa;IAG5E,QAAQ,UAAS;IAER,MAAM;IAkDf,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,QAAQ;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,161 @@
+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;
+};
+var HpeInput_1;
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./hpe-input.styles.js";
+/**
+ * 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
+ */
+let HpeInput = HpeInput_1 = class HpeInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.inputId = `hpe-input-${HpeInput_1.idCounter++}`;
+        this.value = "";
+        this.placeholder = "";
+        this.label = "Label";
+        this.required = true;
+        this.showLabel = true;
+        this.descriptionText = "Description (Optional)";
+        this.showDescription = true;
+        this.state = "enabled";
+        this.disabled = false;
+    }
+    render() {
+        const isDisabled = this.disabled || this.state === "disabled";
+        return html `
+      <div part="container" class="container">
+        <div part="input-group" class="input-group">
+          ${this.showLabel
+            ? html `
+                <label part="label" class="label" for=${this.inputId}>
+                  <span part="label-text" class="label-text"
+                    >${this.label}</span
+                  >
+                  ${this.required
+                ? html `<span
+                        part="required-indicator"
+                        class="required-indicator"
+                      >
+                        *
+                      </span>`
+                : ""}
+                </label>
+              `
+            : ""}
+          <input
+            id=${this.inputId}
+            part="field input"
+            class="input"
+            type="text"
+            name=${this.name || ""}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${isDisabled}
+            aria-invalid=${this.state === "error" ? "true" : "false"}
+            aria-disabled=${isDisabled ? "true" : "false"}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+          />
+        </div>
+        ${this.showDescription
+            ? html `
+              <div part="description" class="description">
+                <p class="description-text">${this.descriptionText}</p>
+              </div>
+            `
+            : ""}
+      </div>
+    `;
+    }
+    _onInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        if (this.state !== "error" && this.state !== "disabled") {
+            this.state = "typing";
+        }
+    }
+    _onBlur() {
+        if (this.state === "error" || this.state === "disabled") {
+            return;
+        }
+        if (this.value.trim()) {
+            this.state = "complete";
+            return;
+        }
+        this.state = "enabled";
+    }
+    _onFocus() {
+        if (this.state !== "error" && this.state !== "disabled") {
+            this.state = "typing";
+        }
+    }
+};
+HpeInput.styles = styles;
+HpeInput.idCounter = 0;
+__decorate([
+    property({ reflect: true })
+], HpeInput.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeInput.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeInput.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeInput.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-label", type: Boolean })
+], HpeInput.prototype, "showLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "description-text" })
+], HpeInput.prototype, "descriptionText", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-description", type: Boolean })
+], HpeInput.prototype, "showDescription", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeInput.prototype, "state", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeInput.prototype, "disabled", void 0);
+HpeInput = HpeInput_1 = __decorate([
+    customElement("hpe-input")
+], HpeInput);
+export { HpeInput };
+//# sourceMappingURL=hpe-input.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,135 @@
+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;
+  }
+
+  .input {
+    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);
+    padding: var(--spacing-xxsmall, 12px) var(--spacing-small, 24px);
+    width: 100%;
+    min-height: 56px;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  .input::placeholder {
+    color: var(--hpe-web-color-text-default, #3e4550);
+    opacity: 1;
+  }
+
+  .input:disabled {
+    cursor: not-allowed;
+  }
+
+  :host([state="typing"]) .input {
+    border-color: var(--hpe-web-color-border-selected, #006750);
+  }
+
+  :host([state="complete"]) .input {
+    border-color: var(--hpe-web-color-border-strong, #535c66);
+  }
+
+  :host([state="error"]) .input {
+    border-color: var(--hpe-web-color-border-critical, #cc1f1a);
+  }
+
+  :host([state="error"]) .label-text,
+  :host([state="error"]) .required-indicator,
+  :host([state="error"]) .input,
+  :host([state="error"]) .input::placeholder,
+  :host([state="error"]) .description-text {
+    color: var(--hpe-web-color-text-critical, #cc1f1a);
+  }
+
+  :host([state="typing"]) .input,
+  :host([state="complete"]) .input,
+  :host([state="typing"]) .input::placeholder,
+  :host([state="complete"]) .input::placeholder {
+    color: var(--hpe-web-color-text-strong, #292d3a);
+  }
+
+  :host([state="disabled"]) .input {
+    border-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  :host([state="disabled"]) .label-text,
+  :host([state="disabled"]) .required-indicator,
+  :host([state="disabled"]) .input,
+  :host([state="disabled"]) .input::placeholder,
+  :host([state="disabled"]) .description-text {
+    color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+
+  .description {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .description-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;
+    white-space: nowrap;
+  }
+`;
+//# sourceMappingURL=hpe-input.styles.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-radio.d.ts","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-radio/hpe-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAU;IAGhC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,UAAS;IAGhB,KAAK,SAAiB;IAGtB,QAAQ,UAAS;IAER,MAAM;IAwBf,OAAO,CAAC,cAAc;CAIvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,83 @@
+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-radio.styles.js";
+/**
+ * A radio button input component with label and state management.
+ * Supports checked/unchecked states with enabled/disabled variants.
+ *
+ * @tag hpe-radio
+ * @summary A customizable radio button field with label support.
+ *
+ * @attr {string} name - Radio button name attribute
+ * @attr {string} value - Radio button value attribute
+ * @attr {boolean} checked - Whether radio button is checked
+ * @attr {string} label - Label text displayed next to radio button
+ * @attr {boolean} disabled - Whether radio button is disabled
+ *
+ * @csspart container - The component container
+ * @csspart radio-group - The radio button and label container
+ * @csspart input - The actual radio input element
+ * @csspart radio - The custom radio button circle
+ * @csspart label - The label text
+ */
+let HpeRadio = class HpeRadio extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.label = "Radio Label";
+        this.disabled = false;
+    }
+    render() {
+        const inputId = `${this.name || "radio"}-${this.value || this.label}`;
+        return html `
+      <label part="container" class="container" for=${inputId}>
+        <div part="radio-group" class="radio-group">
+          <input
+            part="input"
+            class="radio-input"
+            id=${inputId}
+            type="radio"
+            name=${this.name || ""}
+            value=${this.value || ""}
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            @change=${this._onRadioChange}
+          />
+          <span part="radio" class="radio"></span>
+        </div>
+        <span part="label" class="label">${this.label}</span>
+      </label>
+    `;
+    }
+    _onRadioChange(e) {
+        const target = e.target;
+        this.checked = target.checked;
+    }
+};
+HpeRadio.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeRadio.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeRadio.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeRadio.prototype, "checked", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeRadio.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeRadio.prototype, "disabled", void 0);
+HpeRadio = __decorate([
+    customElement("hpe-radio")
+], HpeRadio);
+export { HpeRadio };
+//# sourceMappingURL=hpe-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-radio.js","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-radio/hpe-radio.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,uBAAuB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAUL,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,aAAa,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;IA8BnB,CAAC;IA5BU,MAAM;QACb,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QAEtE,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,cAAc;;;;2CAIE,IAAI,CAAC,KAAK;;KAEhD,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;IAChC,CAAC;;AA5Ce,eAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACd;AAGd;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACb;AAGf;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACN;AAGtB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAC1B;AAhBN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8CpB"}

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

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

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

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

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

@@ -0,0 +1,119 @@
+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;
+  }
+
+  .radio-group {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  .radio-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+    z-index: 1;
+  }
+
+  .radio {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--hpe-web-color-border-default, #b1b9be);
+    border-radius: 50%;
+    background-color: var(--hpe-web-color-background-default, #ffffff);
+    pointer-events: none;
+    box-sizing: border-box;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .radio::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--hpe-web-color-background-primary, #01a982);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
+
+  .radio-input:checked ~ .radio::after {
+    opacity: 1;
+  }
+
+  .radio-input:checked ~ .radio {
+    border-color: var(--hpe-web-color-border-selected, #006750);
+  }
+
+  .container:hover .radio-input:not(:disabled):checked ~ .radio::after {
+    background-color: var(--hpe-web-color-background-primary-strong, #068667);
+  }
+
+  .container:hover .radio-input:not(:disabled):not(:checked) ~ .radio {
+    background-color: var(
+      --hpe-web-color-background-contrast,
+      rgba(0, 0, 0, 0.04)
+    );
+  }
+
+  .radio-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .radio-input:disabled ~ .radio {
+    background-color: var(--hpe-web-color-background-neutral-weak, #d4d8db);
+    border-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  .radio-input:disabled ~ .radio::after {
+    opacity: 1;
+    background-color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+
+  .radio-input:focus-visible ~ .radio {
+    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;
+  }
+
+  .radio-input:disabled ~ .label {
+    cursor: not-allowed;
+    color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+`;
+//# sourceMappingURL=hpe-radio.styles.js.map

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

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

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

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+/**
+ * A select dropdown component with label, description, and state management.
+ * Supports multiple states: Enabled, Error, Typing, Complete, and Disabled.
+ *
+ * @tag hpe-select
+ * @summary A customizable select field with dropdown affordance and description support.
+ *
+ * @attr {string} name - Select name attribute
+ * @attr {string} value - Selected value
+ * @attr {string} label - Label text displayed above select
+ * @attr {boolean} required - Whether select is required (shows asterisk)
+ * @attr {boolean} show-label - Whether to show the label
+ * @attr {string} description-text - Helper/description text below select
+ * @attr {boolean} show-description - Whether to show the description
+ * @attr {string} state - Select state: "enabled" | "error" | "typing" | "complete" | "disabled"
+ * @attr {boolean} disabled - Whether select is disabled
+ *
+ * @slot default - Option elements for the select
+ *
+ * @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 select field element
+ * @csspart select - The actual select element
+ * @csspart icon - The dropdown icon
+ * @csspart description - The description/helper text container
+ */
+export declare class HpeSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    private static idCounter;
+    private readonly selectId;
+    private parsedOptions;
+    private parsedOptGroups;
+    name?: string;
+    value: string;
+    label: string;
+    required: boolean;
+    showLabel: boolean;
+    descriptionText: string;
+    showDescription: boolean;
+    state: "enabled" | "error" | "typing" | "complete" | "disabled";
+    disabled: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onOptionsSlotChange;
+    private updateOptionCollections;
+    private _onInput;
+    private _onBlur;
+    private _onFocus;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-select": HpeSelect;
+    }
+}
+//# sourceMappingURL=hpe-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-select.d.ts","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-select/hpe-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAChC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAC7B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAyC;IAGlE,OAAO,CAAC,aAAa,CAA2B;IAGhD,OAAO,CAAC,eAAe,CAA6B;IAGpD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,SAAM;IAGX,KAAK,SAAW;IAGhB,QAAQ,UAAQ;IAGhB,SAAS,UAAQ;IAGjB,eAAe,SAA4B;IAG3C,eAAe,UAAQ;IAGvB,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAa;IAG5E,QAAQ,UAAS;IAER,YAAY;IAIZ,MAAM;IAoGf,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;IAc/B,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,QAAQ;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}