@phcdevworks/spectre-components 0.0.1 → 1.1.0

package/dist/textarea.js

@@ -4,227 +4,201 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { getInputClasses } from '@phcdevworks/spectre-ui';
 
 // src/components/textarea/sp-textarea.ts
-var spectreInputTypes = [
-  "text",
-  "email",
-  "password",
-  "search",
-  "tel",
-  "url",
-  "number",
-  "date",
-  "datetime-local",
-  "month",
-  "time",
-  "week"
-];
-var spectreInputSizes = ["sm", "md", "lg"];
-function isInputType(value) {
-  return spectreInputTypes.includes(value);
-}
-function isInputSize(value) {
-  return spectreInputSizes.includes(value);
-}
-var SpectreInputElement = class extends LitElement {
+var SpectreBaseElement = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
-    this.autofocus = false;
-    this.disabled = false;
-    this.fullWidth = false;
-    this.invalid = false;
-    this.loading = false;
-    this.pill = false;
-    this.readonly = false;
-    this.required = false;
-    this.size = "md";
-    this.success = false;
-    this.title = "";
-    this.type = "text";
-    this.value = "";
+    this._ariaLabel = null;
+    this._ariaLabelledBy = null;
+    this._ariaDescribedBy = null;
+    this._title = "";
+    this._id = "";
+  }
+  get ariaLabel() {
+    return this._ariaLabel;
+  }
+  set ariaLabel(value) {
+    if (this._ariaLabel === value) {
+      return;
+    }
+    this._ariaLabel = value;
+    this._removeHostAttribute("aria-label");
+    this.requestUpdate();
+  }
+  get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+  }
+  set ariaLabelledBy(value) {
+    if (this._ariaLabelledBy === value) {
+      return;
+    }
+    this._ariaLabelledBy = value;
+    this._removeHostAttribute("aria-labelledby");
+    this.requestUpdate();
+  }
+  get ariaDescribedBy() {
+    return this._ariaDescribedBy;
+  }
+  set ariaDescribedBy(value) {
+    if (this._ariaDescribedBy === value) {
+      return;
+    }
+    this._ariaDescribedBy = value;
+    this._removeHostAttribute("aria-describedby");
+    this.requestUpdate();
+  }
+  get title() {
+    return this._title;
+  }
+  set title(value) {
+    const normalizedValue = value ?? "";
+    if (this._title === normalizedValue) {
+      return;
+    }
+    this._title = normalizedValue;
+    this._removeHostAttribute("title");
+    this.requestUpdate();
   }
   get id() {
-    return this._id ?? "";
+    return this._id;
   }
   set id(value) {
-    if ((this._id ?? "") === value) {
+    const normalizedValue = value ?? "";
+    if (this._id === normalizedValue) {
       return;
     }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
+    this._id = normalizedValue;
+    this._removeHostAttribute("id");
     this.requestUpdate();
   }
+  // Spectre components intentionally render in light DOM so the global
+  // `@phcdevworks/spectre-ui` styling contract can apply directly.
   createRenderRoot() {
     return this;
   }
   connectedCallback() {
     super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
+    const proxiedAttributes = [
+      "id",
+      "title",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+    proxiedAttributes.forEach((attr) => {
+      const value = super.getAttribute(attr);
+      if (value !== null) {
+        this.setAttribute(attr, value);
+      }
+    });
   }
   getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
+    switch (qualifiedName) {
+      case "id":
+        return this.id || null;
+      case "title":
+        return this.title || null;
+      case "aria-label":
+        return this.ariaLabel;
+      case "aria-labelledby":
+        return this.ariaLabelledBy;
+      case "aria-describedby":
+        return this.ariaDescribedBy;
+      default:
+        return super.getAttribute(qualifiedName);
     }
-    return super.getAttribute(qualifiedName);
   }
   hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
+    switch (qualifiedName) {
+      case "id":
+        return this.id !== "";
+      case "title":
+        return this.title !== "";
+      case "aria-label":
+        return this.ariaLabel !== null;
+      case "aria-labelledby":
+        return this.ariaLabelledBy !== null;
+      case "aria-describedby":
+        return this.ariaDescribedBy !== null;
+      default:
+        return super.hasAttribute(qualifiedName);
     }
-    return super.hasAttribute(qualifiedName);
   }
   setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
+    switch (qualifiedName) {
+      case "id":
+        this.id = value;
+        break;
+      case "title":
+        this.title = value;
+        break;
+      case "aria-label":
+        this.ariaLabel = value;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = value;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = value;
+        break;
+      default:
+        super.setAttribute(qualifiedName, value);
     }
-    super.setAttribute(qualifiedName, value);
   }
   removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
+    switch (qualifiedName) {
+      case "id":
+        this.id = "";
+        break;
+      case "title":
+        this.title = "";
+        break;
+      case "aria-label":
+        this.ariaLabel = null;
+        break;
+      case "aria-labelledby":
+        this.ariaLabelledBy = null;
+        break;
+      case "aria-describedby":
+        this.ariaDescribedBy = null;
+        break;
+      default:
+        super.removeAttribute(qualifiedName);
     }
-    super.removeAttribute(qualifiedName);
   }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("size") && !isInputSize(this.size)) {
-      this.size = "md";
-    }
-    if (changedProperties.has("type") && !isInputType(this.type)) {
-      this.type = "text";
-    }
-    if (changedProperties.has("value") && this.value == null) {
-      this.value = "";
-    }
-    if (changedProperties.has("maxlength")) {
-      if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
-        this.maxlength = void 0;
-      }
-    }
-    if (changedProperties.has("minlength")) {
-      if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
-        this.minlength = void 0;
-      }
+  _removeHostAttribute(name) {
+    const host = this;
+    if (HTMLElement.prototype.hasAttribute.call(host, name)) {
+      HTMLElement.prototype.removeAttribute.call(host, name);
     }
   }
-  get inputClasses() {
-    return getInputClasses({
-      fullWidth: this.fullWidth,
-      pill: this.pill,
-      size: this.size,
-      state: this.isDisabled ? this.disabled ? "disabled" : "loading" : this.invalid ? "error" : this.success ? "success" : "default"
-    });
-  }
-  get isDisabled() {
-    return this.disabled || this.loading;
-  }
-  get nativeInput() {
-    return this.querySelector("[data-sp-input-native]");
-  }
   get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
   }
   get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
   }
   get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : void 0;
   }
-  handleInput(event) {
-    const input = event.currentTarget;
-    this.value = input.value;
-  }
-  handleChange(event) {
-    const input = event.currentTarget;
-    this.value = input.value;
-  }
-  focus(options) {
-    this.nativeInput?.focus(options);
-  }
-  blur() {
-    this.nativeInput?.blur();
-  }
-  render() {
-    return html`
-      <input
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.inputClasses}
-        data-sp-input-native
-        ?disabled=${this.isDisabled}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined(this.id || void 0)}
-        inputmode=${ifDefined(this.inputmode)}
-        max=${ifDefined(this.max)}
-        maxlength=${ifDefined(this.maxlength)}
-        min=${ifDefined(this.min)}
-        minlength=${ifDefined(this.minlength)}
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        step=${ifDefined(this.step)}
-        title=${ifDefined(this.title || void 0)}
-        type=${this.type}
-        .value=${live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      />
-    `;
-  }
-};
-SpectreInputElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
-  autocomplete: { type: String },
-  autofocus: { type: Boolean, reflect: true },
-  disabled: { type: Boolean, reflect: true },
-  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
-  inputmode: { type: String },
-  invalid: { type: Boolean, reflect: true },
-  loading: { type: Boolean, reflect: true },
-  max: { type: String },
-  maxlength: { type: Number },
-  min: { type: String },
-  minlength: { type: Number },
-  name: { type: String },
-  pill: { type: Boolean, reflect: true },
-  placeholder: { type: String },
-  readonly: { type: Boolean, reflect: true },
-  required: { type: Boolean, reflect: true },
-  size: { type: String, reflect: true },
-  step: { type: String },
-  success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
-  type: { type: String, reflect: true },
-  value: { type: String }
 };
-
-// src/components/textarea/sp-textarea.ts
+SpectreBaseElement.properties = {};
+var spectreInputSizes = ["sm", "md", "lg"];
+function isInputSize(value) {
+  return spectreInputSizes.includes(value);
+}
+function normalizeInt(value, fallback, min = 0) {
+  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
+    return fallback;
+  }
+  return value;
+}
 var DEFAULT_ROWS = 2;
-var SpectreTextareaElement = class extends LitElement {
+var SpectreTextareaElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
@@ -236,80 +210,23 @@ var SpectreTextareaElement = class extends LitElement {
     this.rows = DEFAULT_ROWS;
     this.size = "md";
     this.success = false;
-    this.title = "";
     this.value = "";
   }
-  get id() {
-    return this._id ?? "";
-  }
-  set id(value) {
-    if ((this._id ?? "") === value) {
-      return;
-    }
-    this._id = value;
-    const host = this;
-    if (HTMLElement.prototype.hasAttribute.call(host, "id")) {
-      HTMLElement.prototype.removeAttribute.call(host, "id");
-    }
-    this.requestUpdate();
-  }
-  createRenderRoot() {
-    return this;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
-  }
-  getAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id || null;
-    }
-    return super.getAttribute(qualifiedName);
-  }
-  hasAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      return this.id !== "";
-    }
-    return super.hasAttribute(qualifiedName);
-  }
-  setAttribute(qualifiedName, value) {
-    if (qualifiedName === "id") {
-      this.id = value;
-      return;
-    }
-    super.setAttribute(qualifiedName, value);
-  }
-  removeAttribute(qualifiedName) {
-    if (qualifiedName === "id") {
-      this.id = "";
-      return;
-    }
-    super.removeAttribute(qualifiedName);
-  }
   willUpdate(changedProperties) {
     if (changedProperties.has("size") && !isInputSize(this.size)) {
       this.size = "md";
     }
     if (changedProperties.has("rows")) {
-      if (this.rows == null || !Number.isInteger(this.rows) || this.rows < 1) {
-        this.rows = DEFAULT_ROWS;
-      }
+      this.rows = normalizeInt(this.rows, DEFAULT_ROWS, 1);
     }
     if (changedProperties.has("value") && this.value == null) {
       this.value = "";
     }
     if (changedProperties.has("maxlength")) {
-      if (this.maxlength == null || !Number.isInteger(this.maxlength) || this.maxlength < 0) {
-        this.maxlength = void 0;
-      }
+      this.maxlength = normalizeInt(this.maxlength, void 0);
     }
     if (changedProperties.has("minlength")) {
-      if (this.minlength == null || !Number.isInteger(this.minlength) || this.minlength < 0) {
-        this.minlength = void 0;
-      }
+      this.minlength = normalizeInt(this.minlength, void 0);
     }
   }
   get textareaClasses() {
@@ -326,18 +243,6 @@ var SpectreTextareaElement = class extends LitElement {
   get nativeTextarea() {
     return this.querySelector("[data-sp-textarea-native]");
   }
-  get forwardedAriaLabel() {
-    const ariaLabel = this.ariaLabel?.trim();
-    return ariaLabel ? ariaLabel : void 0;
-  }
-  get forwardedAriaLabelledBy() {
-    const ariaLabelledBy = this.ariaLabelledBy?.trim();
-    return ariaLabelledBy ? ariaLabelledBy : void 0;
-  }
-  get forwardedAriaDescribedBy() {
-    const ariaDescribedBy = this.ariaDescribedBy?.trim();
-    return ariaDescribedBy ? ariaDescribedBy : void 0;
-  }
   handleInput(event) {
     const textarea = event.currentTarget;
     this.value = textarea.value;
@@ -353,57 +258,53 @@ var SpectreTextareaElement = class extends LitElement {
     this.nativeTextarea?.blur();
   }
   render() {
-    return html`
-      <textarea
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}
-        aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
-        aria-label=${ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}
-        autocomplete=${ifDefined(this.autocomplete)}
-        ?autofocus=${this.autofocus}
-        class=${this.textareaClasses}
-        data-sp-textarea-native
-        ?disabled=${this.isDisabled}
-        inputmode=${ifDefined(this.inputmode)}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        id=${ifDefined(this.id || void 0)}
-        maxlength=${ifDefined(this.maxlength)}
-        minlength=${ifDefined(this.minlength)}
-        name=${ifDefined(this.name)}
-        placeholder=${ifDefined(this.placeholder)}
-        rows=${this.rows}
-        title=${ifDefined(this.title || void 0)}
-        .value=${live(this.value)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-      ></textarea>
-    `;
+    return html`<textarea
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-invalid="${ifDefined(this.invalid ? "true" : void 0)}"
+      aria-label="${ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+      autocomplete="${ifDefined(this.autocomplete || void 0)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.textareaClasses}"
+      data-sp-textarea-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined(this.form || void 0)}"
+      inputmode="${ifDefined(this.inputmode || void 0)}"
+      ?readonly="${this.readonly}"
+      ?required="${this.required}"
+      id="${ifDefined(this.id || void 0)}"
+      maxlength="${ifDefined(this.maxlength)}"
+      minlength="${ifDefined(this.minlength)}"
+      name="${ifDefined(this.name || void 0)}"
+      placeholder="${ifDefined(this.placeholder || void 0)}"
+      rows="${this.rows}"
+      title="${ifDefined(this.title || void 0)}"
+      .value="${live(this.value)}"
+      @change="${this.handleChange}"
+      @input="${this.handleInput}"
+    ></textarea>`;
   }
 };
 SpectreTextareaElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String },
-  autocomplete: { type: String },
+  autocomplete: { type: String, reflect: true },
   autofocus: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
+  form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
-  inputmode: { type: String },
+  inputmode: { type: String, reflect: true },
   invalid: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  maxlength: { type: Number },
-  minlength: { type: Number },
-  name: { type: String },
+  maxlength: { type: Number, reflect: true },
+  minlength: { type: Number, reflect: true },
+  name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
-  placeholder: { type: String },
+  placeholder: { type: String, reflect: true },
   readonly: { type: Boolean, reflect: true },
   required: { type: Boolean, reflect: true },
   rows: { type: Number },
   size: { type: String, reflect: true },
   success: { type: Boolean, reflect: true },
-  title: { type: String, reflect: true },
   value: { type: String }
 };
 function defineSpectreTextarea(tagName = "sp-textarea") {