@phcdevworks/spectre-components 1.0.0 → 1.2.0

package/dist/base-B_9DJkh2.d.cts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyDeclarations } from 'lit';
+
+declare class SpectreBaseElement extends LitElement {
+    static properties: PropertyDeclarations;
+    private _ariaLabel;
+    private _ariaLabelledBy;
+    private _ariaDescribedBy;
+    private _autocapitalize;
+    private _spellcheck;
+    private _title;
+    private _id;
+    get ariaLabel(): string | null;
+    set ariaLabel(value: string | null);
+    get ariaLabelledBy(): string | null;
+    set ariaLabelledBy(value: string | null);
+    get ariaDescribedBy(): string | null;
+    set ariaDescribedBy(value: string | null);
+    get autocapitalize(): string;
+    set autocapitalize(value: string | undefined | null);
+    get spellcheck(): boolean;
+    set spellcheck(value: boolean | undefined | null);
+    get title(): string;
+    set title(value: string | undefined | null);
+    get id(): string;
+    set id(value: string | undefined | null);
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    getAttribute(qualifiedName: string): string | null;
+    hasAttribute(qualifiedName: string): boolean;
+    setAttribute(qualifiedName: string, value: string): void;
+    removeAttribute(qualifiedName: string): void;
+    private _removeHostAttribute;
+    protected get forwardedAriaLabel(): string | undefined;
+    protected get forwardedAriaLabelledBy(): string | undefined;
+    protected get forwardedAriaDescribedBy(): string | undefined;
+}
+
+export { SpectreBaseElement as S };

package/dist/base-B_9DJkh2.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyDeclarations } from 'lit';
+
+declare class SpectreBaseElement extends LitElement {
+    static properties: PropertyDeclarations;
+    private _ariaLabel;
+    private _ariaLabelledBy;
+    private _ariaDescribedBy;
+    private _autocapitalize;
+    private _spellcheck;
+    private _title;
+    private _id;
+    get ariaLabel(): string | null;
+    set ariaLabel(value: string | null);
+    get ariaLabelledBy(): string | null;
+    set ariaLabelledBy(value: string | null);
+    get ariaDescribedBy(): string | null;
+    set ariaDescribedBy(value: string | null);
+    get autocapitalize(): string;
+    set autocapitalize(value: string | undefined | null);
+    get spellcheck(): boolean;
+    set spellcheck(value: boolean | undefined | null);
+    get title(): string;
+    set title(value: string | undefined | null);
+    get id(): string;
+    set id(value: string | undefined | null);
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    getAttribute(qualifiedName: string): string | null;
+    hasAttribute(qualifiedName: string): boolean;
+    setAttribute(qualifiedName: string, value: string): void;
+    removeAttribute(qualifiedName: string): void;
+    private _removeHostAttribute;
+    protected get forwardedAriaLabel(): string | undefined;
+    protected get forwardedAriaLabelledBy(): string | undefined;
+    protected get forwardedAriaDescribedBy(): string | undefined;
+}
+
+export { SpectreBaseElement as S };

package/dist/button.cjs

@@ -1,29 +1,119 @@
 'use strict';
 
+var spectreUi = require('@phcdevworks/spectre-ui');
 var lit = require('lit');
 var ifDefined_js = require('lit/directives/if-defined.js');
-var spectreUi = require('@phcdevworks/spectre-ui');
 
-// src/components/button/sp-button.ts
+// src/utils/form.ts
+var spectreInputSizes = ["sm", "md", "lg"];
+function isInputSize(value) {
+  return spectreInputSizes.includes(value);
+}
+var spectreButtonVariants = [
+  "primary",
+  "secondary",
+  "ghost",
+  "danger",
+  "success",
+  "cta",
+  "accent"
+];
+function isButtonVariant(value) {
+  return spectreButtonVariants.includes(value);
+}
+var spectreButtonTypes = ["button", "submit", "reset"];
+function isButtonType(value) {
+  return spectreButtonTypes.includes(value);
+}
 var SpectreBaseElement = class extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
-    this.ariaLabelledBy = null;
-    this.ariaDescribedBy = null;
+    this._ariaLabel = null;
+    this._ariaLabelledBy = null;
+    this._ariaDescribedBy = null;
+    this._autocapitalize = "";
+    this._spellcheck = 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 autocapitalize() {
+    return this._autocapitalize;
+  }
+  set autocapitalize(value) {
+    const normalizedValue = value ?? "";
+    if (this._autocapitalize === normalizedValue) {
+      return;
+    }
+    this._autocapitalize = normalizedValue;
+    this._removeHostAttribute("autocapitalize");
+    this.requestUpdate();
+  }
+  get spellcheck() {
+    return this._spellcheck ?? super.spellcheck;
+  }
+  set spellcheck(value) {
+    if (this._spellcheck === value) {
+      return;
+    }
+    this._spellcheck = value ?? null;
+    this._removeHostAttribute("spellcheck");
+    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
@@ -33,36 +123,121 @@ var SpectreBaseElement = class extends lit.LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    const hostId = super.getAttribute("id");
-    if (hostId !== null) {
-      this.id = hostId;
-    }
+    const proxiedAttributes = [
+      "id",
+      "title",
+      "autocapitalize",
+      "spellcheck",
+      "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 "autocapitalize":
+        return this.autocapitalize || null;
+      case "spellcheck":
+        return this._spellcheck !== null ? String(this._spellcheck) : 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 "autocapitalize":
+        return this.autocapitalize !== "";
+      case "spellcheck":
+        return this._spellcheck !== null;
+      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 "autocapitalize":
+        this.autocapitalize = value;
+        break;
+      case "spellcheck":
+        this.spellcheck = value !== "false";
+        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 "autocapitalize":
+        this.autocapitalize = "";
+        break;
+      case "spellcheck":
+        this.spellcheck = null;
+        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);
+    }
+  }
+  _removeHostAttribute(name) {
+    const host = this;
+    if (HTMLElement.prototype.hasAttribute.call(host, name)) {
+      HTMLElement.prototype.removeAttribute.call(host, name);
     }
-    super.removeAttribute(qualifiedName);
   }
   get forwardedAriaLabel() {
     const value = this.ariaLabel?.trim();
@@ -77,11 +252,7 @@ var SpectreBaseElement = class extends lit.LitElement {
     return value ? value : void 0;
   }
 };
-SpectreBaseElement.properties = {
-  ariaLabel: { attribute: "aria-label", type: String },
-  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
-  ariaDescribedBy: { attribute: "aria-describedby", type: String }
-};
+SpectreBaseElement.properties = {};
 
 // src/utils/dom.ts
 function hasMeaningfulContent(nodes) {
@@ -142,9 +313,9 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
     }
     this.contentObserver = new MutationObserver((mutations) => {
       const isInternalMovement = mutations.every(
-        (mutation) => Array.from(mutation.removedNodes).every(
+        (mutation) => [...mutation.removedNodes].every(
           (node) => this.isInternalNode(node) || this.contains(node)
-        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalNode(node))
+        ) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
       );
       if (isInternalMovement) {
         return;
@@ -160,41 +331,33 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
 };
-var spectreButtonVariants = [
-  "primary",
-  "secondary",
-  "ghost",
-  "danger",
-  "success",
-  "cta",
-  "accent"
-];
-var spectreButtonSizes = ["sm", "md", "lg"];
-var spectreButtonTypes = ["button", "submit", "reset"];
-function isButtonVariant(value) {
-  return spectreButtonVariants.includes(value);
-}
-function isButtonSize(value) {
-  return spectreButtonSizes.includes(value);
-}
-function isButtonType(value) {
-  return spectreButtonTypes.includes(value);
-}
 var SpectreButtonElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.autofocus = false;
     this.disabled = false;
     this.fullWidth = false;
+    this.iconOnly = false;
     this.loading = false;
     this.loadingLabel = "Loading";
     this.pill = false;
     this.size = "md";
-    this.title = "";
     this.type = "button";
     this.variant = "primary";
     this.value = "";
   }
+  get id() {
+    return super.id;
+  }
+  set id(value) {
+    super.id = value;
+  }
+  get title() {
+    return super.title;
+  }
+  set title(value) {
+    super.title = value;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-button-native]");
   }
@@ -206,13 +369,13 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-button-native") || el.hasAttribute("data-sp-button-loading-label") || el.hasAttribute("data-sp-button-label-fallback");
   }
   willUpdate(changedProperties) {
-    if (changedProperties.has("variant") && !isButtonVariant(this.variant)) {
+    if (changedProperties.has("variant") && (this.variant == null || !isButtonVariant(this.variant))) {
       this.variant = "primary";
     }
-    if (changedProperties.has("size") && !isButtonSize(this.size)) {
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
       this.size = "md";
     }
-    if (changedProperties.has("type") && !isButtonType(this.type)) {
+    if (changedProperties.has("type") && (this.type == null || !isButtonType(this.type))) {
       this.type = "button";
     }
     if (changedProperties.has("loadingLabel")) {
@@ -227,15 +390,16 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   get buttonClasses() {
     return spectreUi.getButtonClasses({
       disabled: this.isDisabled,
-      fullWidth: this.fullWidth,
-      loading: this.loading,
-      pill: this.pill,
+      fullWidth: this.fullWidth ?? false,
+      iconOnly: this.iconOnly ?? false,
+      loading: this.loading ?? false,
+      pill: this.pill ?? false,
       size: this.size,
       variant: this.variant
     });
   }
   get isDisabled() {
-    return this.disabled || this.loading;
+    return (this.disabled ?? false) || (this.loading ?? false);
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -249,34 +413,32 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   }
   renderButtonContent() {
     if (this.loading) {
-      return lit.html`<span data-sp-button-loading-label>${this.loadingLabel}</span>`;
+      return lit.html`<span class="sp-label" data-sp-button-loading-label>${this.loadingLabel}</span>`;
     }
     if (this.hasProjectedContent) {
       return this.projectedContent;
     }
-    return this.visibleLabelFallback ? lit.html`<span data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
+    return this.visibleLabelFallback ? lit.html`<span class="sp-label" data-sp-button-label-fallback>${this.visibleLabelFallback}</span>` : lit.nothing;
   }
   render() {
-    return lit.html`
-      <button
-        aria-busy=${this.loading ? "true" : "false"}
-        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
-        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
-        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
-        ?autofocus=${this.autofocus}
-        class=${this.buttonClasses}
-        data-sp-button-native
-        ?disabled=${this.isDisabled}
-        form=${ifDefined_js.ifDefined(this.form)}
-        id=${ifDefined_js.ifDefined(this.id || void 0)}
-        name=${ifDefined_js.ifDefined(this.name)}
-        title=${ifDefined_js.ifDefined(this.title || void 0)}
-        type=${this.type}
-        value=${ifDefined_js.ifDefined(this.value)}
-      >
-        ${this.renderButtonContent() || lit.nothing}
-      </button>
-    `;
+    return lit.html`<button
+      aria-busy="${this.loading ? "true" : "false"}"
+      aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
+      aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
+      aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
+      ?autofocus="${this.autofocus}"
+      class="${this.buttonClasses}"
+      data-sp-button-native
+      ?disabled="${this.isDisabled}"
+      form="${ifDefined_js.ifDefined(this.form || void 0)}"
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      name="${ifDefined_js.ifDefined(this.name || void 0)}"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+      type="${this.type}"
+      value="${ifDefined_js.ifDefined(this.value)}"
+    >
+      ${this.renderButtonContent()}
+    </button>`;
   }
 };
 SpectreButtonElement.properties = {
@@ -284,16 +446,16 @@ SpectreButtonElement.properties = {
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  iconOnly: { attribute: "icon-only", type: Boolean, reflect: true },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
   name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
-  title: { type: String, reflect: true },
   type: { type: String, reflect: true },
   variant: { type: String, reflect: true },
-  value: { type: String, reflect: true }
+  value: { type: String }
 };
 function defineSpectreButton(tagName = "sp-button") {
   const existingElement = customElements.get(tagName);
@@ -306,7 +468,7 @@ function defineSpectreButton(tagName = "sp-button") {
 
 exports.SpectreButtonElement = SpectreButtonElement;
 exports.defineSpectreButton = defineSpectreButton;
-exports.spectreButtonSizes = spectreButtonSizes;
+exports.spectreButtonSizes = spectreInputSizes;
 exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
 //# sourceMappingURL=button.cjs.map