@hpe-web/components 0.0.1 → 1.0.0

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

@@ -0,0 +1,224 @@
+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 HpeSelect_1;
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styles } from "./hpe-select.styles.js";
+/**
+ * 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
+ */
+let HpeSelect = HpeSelect_1 = class HpeSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectId = `hpe-select-${HpeSelect_1.idCounter++}`;
+        this.parsedOptions = [];
+        this.parsedOptGroups = [];
+        this.value = "";
+        this.label = "Label";
+        this.required = true;
+        this.showLabel = true;
+        this.descriptionText = "Description (Optional)";
+        this.showDescription = true;
+        this.state = "enabled";
+        this.disabled = false;
+    }
+    firstUpdated() {
+        this.updateOptionCollections();
+    }
+    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.selectId}>
+                  <span part="label-text" class="label-text"
+                    >${this.label}</span
+                  >
+                  ${this.required
+                ? html `<span
+                        part="required-indicator"
+                        class="required-indicator"
+                      >
+                        *
+                      </span>`
+                : ""}
+                </label>
+              `
+            : ""}
+          <slot @slotchange=${this.onOptionsSlotChange} hidden></slot>
+          <select
+            id=${this.selectId}
+            part="field select"
+            class="select"
+            name=${this.name || ""}
+            .value=${this.value}
+            ?disabled=${isDisabled}
+            aria-invalid=${this.state === "error" ? "true" : "false"}
+            aria-disabled=${isDisabled ? "true" : "false"}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+          >
+            ${this.parsedOptGroups.map((group) => html `
+                <optgroup label=${group.label} ?disabled=${group.disabled}>
+                  ${Array.from(group.children)
+            .filter((child) => {
+            return child instanceof HTMLOptionElement;
+        })
+            .map((option) => html `
+                        <option
+                          value=${option.value}
+                          ?disabled=${option.disabled}
+                          ?selected=${option.selected}
+                        >
+                          ${option.textContent || ""}
+                        </option>
+                      `)}
+                </optgroup>
+              `)}
+            ${this.parsedOptions.map((option) => html `
+                <option
+                  value=${option.value}
+                  ?disabled=${option.disabled}
+                  ?selected=${option.selected}
+                >
+                  ${option.textContent || ""}
+                </option>
+              `)}
+          </select>
+          <svg
+            part="icon"
+            class="icon"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M4 6L8 10L12 6"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+        ${this.showDescription
+            ? html `
+              <div part="description" class="description">
+                <p class="description-text">${this.descriptionText}</p>
+              </div>
+            `
+            : ""}
+      </div>
+    `;
+    }
+    onOptionsSlotChange() {
+        this.updateOptionCollections();
+    }
+    updateOptionCollections() {
+        const children = Array.from(this.children);
+        this.parsedOptions = children.filter((child) => {
+            return child instanceof HTMLOptionElement;
+        });
+        this.parsedOptGroups = children.filter((child) => {
+            return child instanceof HTMLOptGroupElement;
+        });
+    }
+    _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";
+        }
+    }
+};
+HpeSelect.styles = styles;
+HpeSelect.idCounter = 0;
+__decorate([
+    state()
+], HpeSelect.prototype, "parsedOptions", void 0);
+__decorate([
+    state()
+], HpeSelect.prototype, "parsedOptGroups", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeSelect.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeSelect.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeSelect.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeSelect.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-label", type: Boolean })
+], HpeSelect.prototype, "showLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "description-text" })
+], HpeSelect.prototype, "descriptionText", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-description", type: Boolean })
+], HpeSelect.prototype, "showDescription", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeSelect.prototype, "state", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeSelect.prototype, "disabled", void 0);
+HpeSelect = HpeSelect_1 = __decorate([
+    customElement("hpe-select")
+], HpeSelect);
+export { HpeSelect };
+//# sourceMappingURL=hpe-select.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,156 @@
+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);
+    position: relative;
+  }
+
+  .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;
+  }
+
+  .select {
+    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);
+    padding-right: calc(var(--spacing-small, 24px) + 28px);
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 100%;
+    min-height: 56px;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  .select:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+
+  .select:focus {
+    outline: none;
+  }
+
+  .icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: var(--hpe-web-color-text-default, #3e4550);
+    pointer-events: none;
+    transition: transform 150ms ease;
+    position: absolute;
+    right: var(--spacing-small, 24px);
+    bottom: 20px;
+  }
+
+  :host([state="typing"]) .select {
+    border-color: var(--hpe-web-color-border-selected, #006750);
+  }
+
+  :host([state="complete"]) .select {
+    border-color: var(--hpe-web-color-border-strong, #535c66);
+  }
+
+  :host([state="error"]) .select {
+    border-color: var(--hpe-web-color-border-critical, #cc1f1a);
+  }
+
+  :host([state="error"]) .label-text,
+  :host([state="error"]) .required-indicator,
+  :host([state="error"]) .select,
+  :host([state="error"]) .icon,
+  :host([state="error"]) .description-text {
+    color: var(--hpe-web-color-text-critical, #cc1f1a);
+  }
+
+  :host([state="typing"]) .select,
+  :host([state="complete"]) .select,
+  :host([state="typing"]) .icon,
+  :host([state="complete"]) .icon {
+    color: var(--hpe-web-color-text-strong, #292d3a);
+  }
+
+  :host([state="typing"]) .icon {
+    transform: rotate(180deg);
+  }
+
+  :host([state="disabled"]) .select {
+    border-color: var(--hpe-web-color-border-weak, #d4d8db);
+  }
+
+  .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;
+  }
+
+  :host([state="disabled"]) .label-text,
+  :host([state="disabled"]) .required-indicator,
+  :host([state="disabled"]) .select,
+  :host([state="disabled"]) .icon,
+  :host([state="disabled"]) .description-text {
+    color: var(--hpe-web-color-text-disabled, rgba(0, 0, 0, 0.24));
+  }
+`;
+//# sourceMappingURL=hpe-select.styles.js.map

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

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

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

@@ -0,0 +1,55 @@
+import { LitElement } from "lit";
+/**
+ * A multi-line text textarea component with label, character counter, and state management.
+ * Supports multiple states: Enabled, Error, Typing, Complete, and Disabled.
+ *
+ * @tag hpe-textarea
+ * @summary A customizable textarea field with character counter and description support.
+ *
+ * @attr {string} name - Textarea name attribute
+ * @attr {string} value - Textarea value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} label - Label text displayed above textarea
+ * @attr {boolean} required - Whether textarea is required (shows asterisk)
+ * @attr {boolean} show-label - Whether to show the label
+ * @attr {string} description-text - Helper/description text below textarea
+ * @attr {boolean} show-description - Whether to show the description
+ * @attr {number} max-length - Maximum character length (default: 3000)
+ * @attr {string} state - Textarea state: "enabled" | "error" | "typing" | "complete" | "disabled"
+ * @attr {boolean} disabled - Whether textarea is disabled
+ *
+ * @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 textarea field element
+ * @csspart textarea - The actual textarea element
+ * @csspart description - The description/helper text and counter container
+ */
+export declare class HpeTextarea extends LitElement {
+    static styles: import("lit").CSSResult;
+    private static idCounter;
+    private readonly textareaId;
+    name?: string;
+    value: string;
+    placeholder: string;
+    label: string;
+    required: boolean;
+    showLabel: boolean;
+    descriptionText: string;
+    showDescription: boolean;
+    maxLength: number;
+    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-textarea": HpeTextarea;
+    }
+}
+//# sourceMappingURL=hpe-textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-textarea.d.ts","sourceRoot":"","sources":["../../../../elements/hpe-inputs/hpe-textarea/hpe-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAChC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAC7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6C;IAGxE,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,SAAS,SAAQ;IAGjB,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAa;IAG5E,QAAQ,UAAS;IAER,MAAM;IAoDf,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,OAAO;IAaf,OAAO,CAAC,QAAQ;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,166 @@
+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 HpeTextarea_1;
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./hpe-textarea.styles.js";
+/**
+ * A multi-line text textarea component with label, character counter, and state management.
+ * Supports multiple states: Enabled, Error, Typing, Complete, and Disabled.
+ *
+ * @tag hpe-textarea
+ * @summary A customizable textarea field with character counter and description support.
+ *
+ * @attr {string} name - Textarea name attribute
+ * @attr {string} value - Textarea value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} label - Label text displayed above textarea
+ * @attr {boolean} required - Whether textarea is required (shows asterisk)
+ * @attr {boolean} show-label - Whether to show the label
+ * @attr {string} description-text - Helper/description text below textarea
+ * @attr {boolean} show-description - Whether to show the description
+ * @attr {number} max-length - Maximum character length (default: 3000)
+ * @attr {string} state - Textarea state: "enabled" | "error" | "typing" | "complete" | "disabled"
+ * @attr {boolean} disabled - Whether textarea is disabled
+ *
+ * @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 textarea field element
+ * @csspart textarea - The actual textarea element
+ * @csspart description - The description/helper text and counter container
+ */
+let HpeTextarea = HpeTextarea_1 = class HpeTextarea extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.textareaId = `hpe-textarea-${HpeTextarea_1.idCounter++}`;
+        this.value = "";
+        this.placeholder = "";
+        this.label = "Label";
+        this.required = true;
+        this.showLabel = true;
+        this.descriptionText = "Description (Optional)";
+        this.showDescription = true;
+        this.maxLength = 3000;
+        this.state = "enabled";
+        this.disabled = false;
+    }
+    render() {
+        const charCount = this.value.length;
+        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.textareaId}>
+                  <span part="label-text" class="label-text"
+                    >${this.label}</span
+                  >
+                  ${this.required
+                ? html `<span
+                        part="required-indicator"
+                        class="required-indicator"
+                      >
+                        *
+                      </span>`
+                : ""}
+                </label>
+              `
+            : ""}
+          <textarea
+            id=${this.textareaId}
+            part="field textarea"
+            class="textarea"
+            name=${this.name || ""}
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            maxlength=${this.maxLength}
+            ?disabled=${isDisabled}
+            aria-invalid=${this.state === "error" ? "true" : "false"}
+            aria-disabled=${isDisabled ? "true" : "false"}
+            @input=${this._onInput}
+            @blur=${this._onBlur}
+            @focus=${this._onFocus}
+          ></textarea>
+        </div>
+        ${this.showDescription
+            ? html `
+              <div part="description" class="description">
+                <p class="description-text">${this.descriptionText}</p>
+                <p class="char-counter">${charCount}/${this.maxLength}</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";
+        }
+    }
+};
+HpeTextarea.styles = styles;
+HpeTextarea.idCounter = 0;
+__decorate([
+    property({ reflect: true })
+], HpeTextarea.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextarea.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextarea.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeTextarea.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-label", type: Boolean })
+], HpeTextarea.prototype, "showLabel", void 0);
+__decorate([
+    property({ reflect: true, attribute: "description-text" })
+], HpeTextarea.prototype, "descriptionText", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-description", type: Boolean })
+], HpeTextarea.prototype, "showDescription", void 0);
+__decorate([
+    property({ reflect: true, attribute: "max-length", type: Number })
+], HpeTextarea.prototype, "maxLength", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeTextarea.prototype, "state", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeTextarea.prototype, "disabled", void 0);
+HpeTextarea = HpeTextarea_1 = __decorate([
+    customElement("hpe-textarea")
+], HpeTextarea);
+export { HpeTextarea };
+//# sourceMappingURL=hpe-textarea.js.map

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

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

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

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

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

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