@phcdevworks/spectre-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PHCDevworks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# @phcdevworks/spectre-components
+
+[![GitHub issues](https://img.shields.io/github/issues/phcdevworks/spectre-components)](https://github.com/phcdevworks/spectre-components/issues)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/phcdevworks/spectre-components)](https://github.com/phcdevworks/spectre-components/pulls)
+[![License](https://img.shields.io/github/license/phcdevworks/spectre-components)](LICENSE)
+
+`@phcdevworks/spectre-components` is the Lit-based component layer of the
+Spectre suite.
+
+Maintained by PHCDevworks, it turns Spectre tokens and Spectre UI contracts
+into reusable, accessible, framework-agnostic web components. It is the
+canonical component implementation layer for Spectre, built on platform
+standards and designed to be consumed directly or wrapped later by adapter
+packages.
+
+## Key capabilities
+
+- Ships reusable web components implemented with Lit
+- Consumes `@phcdevworks/spectre-tokens` as the source of visual meaning
+- Consumes `@phcdevworks/spectre-ui` as the styling contract layer
+- Keeps component delivery framework-agnostic through custom elements
+- Builds accessibility into the initial component patterns
+- Exposes a small, explicit API surface suitable for long-term growth
+
+## Installation
+
+```bash
+npm install @phcdevworks/spectre-components @phcdevworks/spectre-ui @phcdevworks/spectre-tokens
+```
+
+## Quick start
+
+Import the Spectre CSS layers first, then register the custom elements you want
+to use:
+
+```ts
+import "@phcdevworks/spectre-tokens/index.css";
+import "@phcdevworks/spectre-ui/index.css";
+
+import { defineSpectreComponents } from "@phcdevworks/spectre-components";
+
+defineSpectreComponents();
+```
+
+Use the components in markup:
+
+```html
+<sp-button variant="primary" size="md">Save</sp-button>
+<sp-button variant="ghost" size="sm">Cancel</sp-button>
+<sp-input name="email" type="email" placeholder="Email address"></sp-input>
+```
+
+Register only the button when you want a narrower entry point:
+
+```ts
+import { defineSpectreButton } from "@phcdevworks/spectre-components/button";
+
+defineSpectreButton();
+```
+
+Register only the input when you want the input-only entry point:
+
+```ts
+import { defineSpectreInput } from "@phcdevworks/spectre-components/input";
+
+defineSpectreInput();
+```
+
+## What this package owns
+
+- Lit-based web component implementation for Spectre
+- Accessible component behavior and DOM structure
+- Public custom element registration helpers
+- Component-level TypeScript APIs for future adapters to build on
+
+Golden rule: implement components from Spectre contracts, do not redefine those
+contracts locally.
+
+## What this package does not own
+
+- Design-token values or semantic visual meaning That belongs to
+  [`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens).
+- CSS utilities, class recipes, or styling contracts That belongs to
+  [`@phcdevworks/spectre-ui`](https://github.com/phcdevworks/spectre-ui).
+- Framework adapters such as React, Vue, Astro, or app-specific wrappers Those
+  belong in downstream adapter packages.
+- Routing, shell logic, manifest behavior, or startup orchestration Those are
+  outside the scope of this package.
+
+## Package exports / API surface
+
+### Root package
+
+`@phcdevworks/spectre-components` exports:
+
+- `defineSpectreComponents()`
+- `defineSpectreButton()`
+- `defineSpectreInput()`
+- `SpectreButtonElement`
+- `SpectreInputElement`
+- `spectreButtonVariants`
+- `spectreButtonSizes`
+- `spectreButtonTypes`
+- `spectreInputTypes`
+- `spectreInputSizes`
+- `SpectreButtonProps` and related button types
+- `SpectreInputProps` and related input types
+
+### Button entry point
+
+`@phcdevworks/spectre-components/button` exports the button-only API so
+consumers can register a single component without importing the full package
+entry.
+
+### Input entry point
+
+`@phcdevworks/spectre-components/input` exports the input-only API so
+consumers can register just `sp-input` when they do not need the broader
+component bundle.
+
+## Relationship to the rest of Spectre
+
+Spectre keeps responsibilities separate:
+
+- [`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens)
+  defines design values and semantic meaning
+- [`@phcdevworks/spectre-ui`](https://github.com/phcdevworks/spectre-ui)
+  provides CSS, Tailwind helpers, recipes, and styling contracts
+- `@phcdevworks/spectre-components` turns those layers into Lit-based reusable
+  web components
+
+That separation keeps visual meaning centralized, styling contracts stable, and
+component behavior reusable across frameworks.
+
+## Current foundation
+
+This v0 foundation includes:
+
+- a publishable TypeScript package build
+- root and subpath exports
+- a Lit-based `sp-button` starter component
+- a Lit-based `sp-input` foundation component
+- explicit registration helpers instead of implicit global side effects
+- Vitest coverage for baseline rendering and accessibility behavior
+
+## Development
+
+Install dependencies, then run the package checks:
+
+```bash
+npm run build
+npm test
+npm run lint
+```
+
+Key source areas:
+
+- `src/components/` for custom elements
+- `src/index.ts` for the root public API
+- `tests/` for component behavior coverage
+
+## Contributing
+
+PHCDevworks maintains this package as part of the Spectre suite.
+
+When contributing:
+
+- treat `@phcdevworks/spectre-tokens` as the source of visual meaning
+- treat `@phcdevworks/spectre-ui` as the styling contract layer
+- avoid redefining visual primitives locally
+- keep components accessible by default
+- run `npm run build`, `npm test`, and `npm run lint` before opening a pull
+  request
+
+## License
+
+MIT © PHCDevworks. See [LICENSE](LICENSE).

package/dist/button.cjs

@@ -0,0 +1,288 @@
+'use strict';
+
+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
+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);
+}
+function hasMeaningfulContent(nodes) {
+  return nodes.some((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return true;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      return (node.textContent?.trim().length ?? 0) > 0;
+    }
+    return false;
+  });
+}
+var SpectreButtonElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.ariaLabelledBy = null;
+    this.ariaDescribedBy = null;
+    this.autofocus = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.loadingLabel = "Loading";
+    this.pill = false;
+    this.size = "md";
+    this.title = "";
+    this.type = "button";
+    this.variant = "primary";
+    // Native slot projection is a Shadow DOM feature, so in light DOM we keep
+    // host-provided content reactive by tracking and reusing the host nodes.
+    this.projectedContent = [];
+  }
+  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;
+    }
+    this.syncProjectedContent();
+    this.startContentObserver();
+  }
+  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);
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("variant") && !isButtonVariant(this.variant)) {
+      this.variant = "primary";
+    }
+    if (changedProperties.has("size") && !isButtonSize(this.size)) {
+      this.size = "md";
+    }
+    if (changedProperties.has("type") && !isButtonType(this.type)) {
+      this.type = "button";
+    }
+    if (changedProperties.has("loadingLabel")) {
+      if (this.loadingLabel == null || this.loadingLabel.trim() === "") {
+        this.loadingLabel = "Loading";
+      }
+    }
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  get buttonClasses() {
+    return spectreUi.getButtonClasses({
+      disabled: this.isDisabled,
+      fullWidth: this.fullWidth,
+      loading: this.loading,
+      pill: this.pill,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return this.disabled || this.loading;
+  }
+  get hasProjectedContent() {
+    return hasMeaningfulContent(this.projectedContent);
+  }
+  get visibleLabelFallback() {
+    const trimmedLabel = this.label?.trim();
+    return trimmedLabel ? trimmedLabel : void 0;
+  }
+  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;
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver((mutations) => {
+      const isInternalMovement = mutations.every((mutation) => {
+        return Array.from(mutation.removedNodes).every(
+          (node) => this.isInternalButtonNode(node) || this.contains(node)
+        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalButtonNode(node));
+      });
+      if (isInternalMovement) {
+        return;
+      }
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, {
+      childList: true
+    });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  syncProjectedContent() {
+    const nextProjectedContent = [];
+    Array.from(this.childNodes).forEach((node) => {
+      if (this.isInternalButtonNode(node)) {
+        this.projectedContent.forEach((pNode) => {
+          if (pNode.parentNode !== this && this.contains(pNode)) {
+            nextProjectedContent.push(pNode);
+          }
+        });
+      } else {
+        nextProjectedContent.push(node);
+      }
+    });
+    const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
+    if (hasChanged) {
+      this.projectedContent = nextProjectedContent;
+    }
+    return hasChanged;
+  }
+  isInternalButtonNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-button-native");
+  }
+  get nativeButton() {
+    return this.querySelector("[data-sp-button-native]");
+  }
+  focus(options) {
+    this.nativeButton?.focus(options);
+  }
+  blur() {
+    this.nativeButton?.blur();
+  }
+  renderButtonContent() {
+    if (this.loading) {
+      return this.loadingLabel;
+    }
+    if (this.hasProjectedContent) {
+      return this.projectedContent;
+    }
+    return this.visibleLabelFallback ?? "";
+  }
+  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}
+        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>
+    `;
+  }
+};
+SpectreButtonElement.properties = {
+  ariaLabel: { attribute: "aria-label", type: String },
+  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
+  ariaDescribedBy: { attribute: "aria-describedby", type: String },
+  autofocus: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", 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 }
+};
+function defineSpectreButton(tagName = "sp-button") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreButtonElement);
+  return SpectreButtonElement;
+}
+
+exports.SpectreButtonElement = SpectreButtonElement;
+exports.defineSpectreButton = defineSpectreButton;
+exports.spectreButtonSizes = spectreButtonSizes;
+exports.spectreButtonTypes = spectreButtonTypes;
+exports.spectreButtonVariants = spectreButtonVariants;
+//# sourceMappingURL=button.cjs.map
+//# sourceMappingURL=button.cjs.map

package/dist/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/sp-button.ts"],"names":["LitElement","getButtonClasses","html","ifDefined","nothing"],"mappings":"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","file":"button.cjs","sourcesContent":["import { LitElement, html, nothing, type TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n  getButtonClasses,\n  type ButtonSize,\n  type ButtonVariant,\n} from '@phcdevworks/spectre-ui';\n\nexport const spectreButtonVariants = [\n  'primary',\n  'secondary',\n  'ghost',\n  'danger',\n  'success',\n  'cta',\n  'accent',\n] as const;\n\nexport const spectreButtonSizes = ['sm', 'md', 'lg'] as const;\nexport const spectreButtonTypes = ['button', 'submit', 'reset'] as const;\n\nexport type SpectreButtonVariant = (typeof spectreButtonVariants)[number];\nexport type SpectreButtonSize = (typeof spectreButtonSizes)[number];\nexport type SpectreButtonType = (typeof spectreButtonTypes)[number];\n\nexport interface SpectreButtonProps {\n  autofocus?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  label?: string;\n  loading?: boolean;\n  loadingLabel?: string;\n  name?: string;\n  pill?: boolean;\n  size?: SpectreButtonSize;\n  title?: string;\n  type?: SpectreButtonType;\n  variant?: SpectreButtonVariant;\n  value?: string;\n}\n\nfunction isButtonVariant(value: string): value is ButtonVariant {\n  return (spectreButtonVariants as readonly string[]).includes(value);\n}\n\nfunction isButtonSize(value: string): value is ButtonSize {\n  return (spectreButtonSizes as readonly string[]).includes(value);\n}\n\nfunction isButtonType(value: string): value is SpectreButtonType {\n  return (spectreButtonTypes as readonly string[]).includes(value);\n}\n\nfunction hasMeaningfulContent(nodes: readonly Node[]): boolean {\n  return nodes.some((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      return true;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      return (node.textContent?.trim().length ?? 0) > 0;\n    }\n\n    return false;\n  });\n}\n\nexport class SpectreButtonElement extends LitElement implements SpectreButtonProps {\n  static properties = {\n    ariaLabel: { attribute: 'aria-label', type: String },\n    ariaLabelledBy: { attribute: 'aria-labelledby', type: String },\n    ariaDescribedBy: { attribute: 'aria-describedby', type: String },\n    autofocus: { type: Boolean, reflect: true },\n    disabled: { type: Boolean, reflect: true },\n    fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n    label: { type: String, reflect: true },\n    loading: { type: Boolean, reflect: true },\n    loadingLabel: { attribute: 'loading-label', type: String, reflect: true },\n    name: { type: String, reflect: true },\n    pill: { type: Boolean, reflect: true },\n    size: { type: String, reflect: true },\n    title: { type: String, reflect: true },\n    type: { type: String, reflect: true },\n    variant: { type: String, reflect: true },\n    value: { type: String, reflect: true },\n  };\n\n  ariaLabel: string | null = null;\n  ariaLabelledBy: string | null = null;\n  ariaDescribedBy: string | null = null;\n  autofocus = false;\n  disabled = false;\n  fullWidth = false;\n  label?: string;\n  loading = false;\n  loadingLabel = 'Loading';\n  name?: string;\n  pill = false;\n  size: SpectreButtonSize = 'md';\n  override title = '';\n  type: SpectreButtonType = 'button';\n  variant: SpectreButtonVariant = 'primary';\n  value?: string;\n  private _id?: string;\n\n  override get id(): string {\n    return this._id ?? '';\n  }\n\n  override set id(value: string) {\n    if ((this._id ?? '') === value) {\n      return;\n    }\n\n    this._id = value;\n\n    const host = this as unknown as HTMLElement;\n    if (HTMLElement.prototype.hasAttribute.call(host, 'id')) {\n      HTMLElement.prototype.removeAttribute.call(host, 'id');\n    }\n\n    this.requestUpdate();\n  }\n\n  // Native slot projection is a Shadow DOM feature, so in light DOM we keep\n  // host-provided content reactive by tracking and reusing the host nodes.\n  private projectedContent: Node[] = [];\n  private contentObserver?: MutationObserver | undefined;\n\n  createRenderRoot(): this {\n    // Spectre components intentionally render in light DOM so the global\n    // `@phcdevworks/spectre-ui` styling contract can apply directly.\n    return this;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    const hostId = super.getAttribute('id');\n\n    if (hostId !== null) {\n      this.id = hostId;\n    }\n\n    this.syncProjectedContent();\n    this.startContentObserver();\n  }\n\n  override getAttribute(qualifiedName: string): string | null {\n    if (qualifiedName === 'id') {\n      return this.id || null;\n    }\n\n    return super.getAttribute(qualifiedName);\n  }\n\n  override hasAttribute(qualifiedName: string): boolean {\n    if (qualifiedName === 'id') {\n      return this.id !== '';\n    }\n\n    return super.hasAttribute(qualifiedName);\n  }\n\n  override setAttribute(qualifiedName: string, value: string): void {\n    if (qualifiedName === 'id') {\n      this.id = value;\n      return;\n    }\n\n    super.setAttribute(qualifiedName, value);\n  }\n\n  override removeAttribute(qualifiedName: string): void {\n    if (qualifiedName === 'id') {\n      this.id = '';\n      return;\n    }\n\n    super.removeAttribute(qualifiedName);\n  }\n\n  override disconnectedCallback(): void {\n    this.stopContentObserver();\n    super.disconnectedCallback();\n  }\n\n  protected override willUpdate(changedProperties: Map<PropertyKey, unknown>): void {\n    if (changedProperties.has('variant') && !isButtonVariant(this.variant)) {\n      this.variant = 'primary';\n    }\n\n    if (changedProperties.has('size') && !isButtonSize(this.size)) {\n      this.size = 'md';\n    }\n\n    if (changedProperties.has('type') && !isButtonType(this.type)) {\n      this.type = 'button';\n    }\n\n    if (changedProperties.has('loadingLabel')) {\n      if (this.loadingLabel == null || this.loadingLabel.trim() === '') {\n        this.loadingLabel = 'Loading';\n      }\n    }\n  }\n\n  protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n    this.stopContentObserver();\n    super.update(changedProperties);\n    this.startContentObserver();\n  }\n\n  private get buttonClasses(): string {\n    return getButtonClasses({\n      disabled: this.isDisabled,\n      fullWidth: this.fullWidth,\n      loading: this.loading,\n      pill: this.pill,\n      size: this.size,\n      variant: this.variant,\n    });\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.loading;\n  }\n\n  private get hasProjectedContent(): boolean {\n    return hasMeaningfulContent(this.projectedContent);\n  }\n\n  private get visibleLabelFallback(): string | undefined {\n    const trimmedLabel = this.label?.trim();\n    return trimmedLabel ? trimmedLabel : undefined;\n  }\n\n  private get forwardedAriaLabel(): string | undefined {\n    const ariaLabel = this.ariaLabel?.trim();\n    return ariaLabel ? ariaLabel : undefined;\n  }\n\n  private get forwardedAriaLabelledBy(): string | undefined {\n    const ariaLabelledBy = this.ariaLabelledBy?.trim();\n    return ariaLabelledBy ? ariaLabelledBy : undefined;\n  }\n\n  private get forwardedAriaDescribedBy(): string | undefined {\n    const ariaDescribedBy = this.ariaDescribedBy?.trim();\n    return ariaDescribedBy ? ariaDescribedBy : undefined;\n  }\n\n  private startContentObserver(): void {\n    if (this.contentObserver) {\n      return;\n    }\n\n    this.contentObserver = new MutationObserver((mutations) => {\n      const isInternalMovement = mutations.every((mutation) => {\n        return (\n          Array.from(mutation.removedNodes).every(\n            (node) => this.isInternalButtonNode(node) || this.contains(node),\n          ) &&\n          Array.from(mutation.addedNodes).every((node) => this.isInternalButtonNode(node))\n        );\n      });\n\n      if (isInternalMovement) {\n        return;\n      }\n\n      if (this.syncProjectedContent()) {\n        this.requestUpdate();\n      }\n    });\n\n    this.contentObserver.observe(this, {\n      childList: true,\n    });\n  }\n\n  private stopContentObserver(): void {\n    this.contentObserver?.disconnect();\n    this.contentObserver = undefined;\n  }\n\n  private syncProjectedContent(): boolean {\n    const nextProjectedContent: Node[] = [];\n\n    Array.from(this.childNodes).forEach((node) => {\n      if (this.isInternalButtonNode(node)) {\n        this.projectedContent.forEach((pNode) => {\n          if (pNode.parentNode !== this && this.contains(pNode)) {\n            nextProjectedContent.push(pNode);\n          }\n        });\n      } else {\n        nextProjectedContent.push(node);\n      }\n    });\n\n    const hasChanged =\n      nextProjectedContent.length !== this.projectedContent.length ||\n      nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);\n\n    if (hasChanged) {\n      this.projectedContent = nextProjectedContent;\n    }\n\n    return hasChanged;\n  }\n\n  private isInternalButtonNode(node: Node): boolean {\n    return (\n      node.nodeType === Node.ELEMENT_NODE && (node as Element).hasAttribute('data-sp-button-native')\n    );\n  }\n\n  private get nativeButton(): HTMLButtonElement | null {\n    return this.querySelector('[data-sp-button-native]');\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.nativeButton?.focus(options);\n  }\n\n  override blur(): void {\n    this.nativeButton?.blur();\n  }\n\n  private renderButtonContent(): TemplateResult | Node[] | string {\n    if (this.loading) {\n      return this.loadingLabel;\n    }\n\n    if (this.hasProjectedContent) {\n      return this.projectedContent;\n    }\n\n    return this.visibleLabelFallback ?? '';\n  }\n\n  override render() {\n    return html`\n      <button\n        aria-busy=${this.loading ? 'true' : 'false'}\n        aria-describedby=${ifDefined(this.forwardedAriaDescribedBy)}\n        aria-label=${ifDefined(this.forwardedAriaLabel)}\n        aria-labelledby=${ifDefined(this.forwardedAriaLabelledBy)}\n        ?autofocus=${this.autofocus}\n        class=${this.buttonClasses}\n        data-sp-button-native\n        ?disabled=${this.isDisabled}\n        id=${ifDefined(this.id || undefined)}\n        name=${ifDefined(this.name)}\n        title=${ifDefined(this.title || undefined)}\n        type=${this.type}\n        value=${ifDefined(this.value)}\n      >\n        ${this.renderButtonContent() || nothing}\n      </button>\n    `;\n  }\n}\n\nexport function defineSpectreButton(tagName = 'sp-button'): typeof SpectreButtonElement {\n  const existingElement = customElements.get(tagName);\n\n  if (existingElement) {\n    return existingElement as unknown as typeof SpectreButtonElement;\n  }\n\n  customElements.define(tagName, SpectreButtonElement);\n  return SpectreButtonElement;\n}\n"]}

package/dist/button.d.cts

@@ -0,0 +1,142 @@
+import { LitElement, TemplateResult } from 'lit';
+
+declare const spectreButtonVariants: readonly ["primary", "secondary", "ghost", "danger", "success", "cta", "accent"];
+declare const spectreButtonSizes: readonly ["sm", "md", "lg"];
+declare const spectreButtonTypes: readonly ["button", "submit", "reset"];
+type SpectreButtonVariant = (typeof spectreButtonVariants)[number];
+type SpectreButtonSize = (typeof spectreButtonSizes)[number];
+type SpectreButtonType = (typeof spectreButtonTypes)[number];
+interface SpectreButtonProps {
+    autofocus?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    label?: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    name?: string;
+    pill?: boolean;
+    size?: SpectreButtonSize;
+    title?: string;
+    type?: SpectreButtonType;
+    variant?: SpectreButtonVariant;
+    value?: string;
+}
+declare class SpectreButtonElement extends LitElement implements SpectreButtonProps {
+    static properties: {
+        ariaLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        ariaLabelledBy: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        ariaDescribedBy: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        fullWidth: {
+            attribute: string;
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        loading: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        loadingLabel: {
+            attribute: string;
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        pill: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        title: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    ariaLabel: string | null;
+    ariaLabelledBy: string | null;
+    ariaDescribedBy: string | null;
+    autofocus: boolean;
+    disabled: boolean;
+    fullWidth: boolean;
+    label?: string;
+    loading: boolean;
+    loadingLabel: string;
+    name?: string;
+    pill: boolean;
+    size: SpectreButtonSize;
+    title: string;
+    type: SpectreButtonType;
+    variant: SpectreButtonVariant;
+    value?: string;
+    private _id?;
+    get id(): string;
+    set id(value: string);
+    private projectedContent;
+    private contentObserver?;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    getAttribute(qualifiedName: string): string | null;
+    hasAttribute(qualifiedName: string): boolean;
+    setAttribute(qualifiedName: string, value: string): void;
+    removeAttribute(qualifiedName: string): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: Map<PropertyKey, unknown>): void;
+    protected update(changedProperties: Map<PropertyKey, unknown>): void;
+    private get buttonClasses();
+    private get isDisabled();
+    private get hasProjectedContent();
+    private get visibleLabelFallback();
+    private get forwardedAriaLabel();
+    private get forwardedAriaLabelledBy();
+    private get forwardedAriaDescribedBy();
+    private startContentObserver;
+    private stopContentObserver;
+    private syncProjectedContent;
+    private isInternalButtonNode;
+    private get nativeButton();
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private renderButtonContent;
+    render(): TemplateResult<1>;
+}
+declare function defineSpectreButton(tagName?: string): typeof SpectreButtonElement;
+
+export { SpectreButtonElement, type SpectreButtonProps, type SpectreButtonSize, type SpectreButtonType, type SpectreButtonVariant, defineSpectreButton, spectreButtonSizes, spectreButtonTypes, spectreButtonVariants };