@phcdevworks/spectre-components 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1600 @@
+'use strict';
+
+var lit = require('lit');
+var ifDefined_js = require('lit/directives/if-defined.js');
+var spectreUi = require('@phcdevworks/spectre-ui');
+var live_js = require('lit/directives/live.js');
+
+// 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;
+}
+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 lit.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 = "";
+  }
+  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("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;
+      }
+    }
+  }
+  get inputClasses() {
+    return spectreUi.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;
+  }
+  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 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 lit.html`
+      <input
+        aria-busy=${this.loading ? "true" : "false"}
+        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+        autocomplete=${ifDefined_js.ifDefined(this.autocomplete)}
+        ?autofocus=${this.autofocus}
+        class=${this.inputClasses}
+        data-sp-input-native
+        ?disabled=${this.isDisabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        id=${ifDefined_js.ifDefined(this.id || void 0)}
+        inputmode=${ifDefined_js.ifDefined(this.inputmode)}
+        max=${ifDefined_js.ifDefined(this.max)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        min=${ifDefined_js.ifDefined(this.min)}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        name=${ifDefined_js.ifDefined(this.name)}
+        placeholder=${ifDefined_js.ifDefined(this.placeholder)}
+        step=${ifDefined_js.ifDefined(this.step)}
+        title=${ifDefined_js.ifDefined(this.title || void 0)}
+        type=${this.type}
+        .value=${live_js.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 }
+};
+function defineSpectreInput(tagName = "sp-input") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreInputElement);
+  return SpectreInputElement;
+}
+var DEFAULT_ROWS = 2;
+var SpectreTextareaElement = 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.invalid = false;
+    this.loading = false;
+    this.pill = false;
+    this.readonly = false;
+    this.required = false;
+    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;
+      }
+    }
+    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;
+      }
+    }
+  }
+  get textareaClasses() {
+    return spectreUi.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 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;
+  }
+  handleChange(event) {
+    const textarea = event.currentTarget;
+    this.value = textarea.value;
+  }
+  focus(options) {
+    this.nativeTextarea?.focus(options);
+  }
+  blur() {
+    this.nativeTextarea?.blur();
+  }
+  render() {
+    return lit.html`
+      <textarea
+        aria-busy=${this.loading ? "true" : "false"}
+        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+        autocomplete=${ifDefined_js.ifDefined(this.autocomplete)}
+        ?autofocus=${this.autofocus}
+        class=${this.textareaClasses}
+        data-sp-textarea-native
+        ?disabled=${this.isDisabled}
+        inputmode=${ifDefined_js.ifDefined(this.inputmode)}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        id=${ifDefined_js.ifDefined(this.id || void 0)}
+        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
+        minlength=${ifDefined_js.ifDefined(this.minlength)}
+        name=${ifDefined_js.ifDefined(this.name)}
+        placeholder=${ifDefined_js.ifDefined(this.placeholder)}
+        rows=${this.rows}
+        title=${ifDefined_js.ifDefined(this.title || void 0)}
+        .value=${live_js.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 },
+  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 },
+  maxlength: { type: Number },
+  minlength: { type: Number },
+  name: { type: String },
+  pill: { type: Boolean, reflect: true },
+  placeholder: { type: String },
+  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") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreTextareaElement);
+  return SpectreTextareaElement;
+}
+var spectreSelectSizes = ["sm", "md", "lg"];
+function isSelectSize(value) {
+  return spectreSelectSizes.includes(value);
+}
+function isSelectableContent(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const tagName = node.tagName;
+    return tagName === "OPTION" || tagName === "OPTGROUP";
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    return (node.textContent?.trim().length ?? 0) > 0;
+  }
+  return false;
+}
+var SpectreSelectElement = 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.invalid = false;
+    this.loading = false;
+    this.pill = false;
+    this.required = false;
+    this.size = "md";
+    this.success = false;
+    this.title = "";
+    this.value = "";
+    this.projectedOptions = [];
+  }
+  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.syncProjectedOptions();
+    this.startContentObserver();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  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") && !isSelectSize(this.size)) {
+      this.size = "md";
+    }
+    if (changedProperties.has("value") && this.value == null) {
+      this.value = "";
+    }
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const nativeSelect = this.nativeSelect;
+    if (!nativeSelect) {
+      return;
+    }
+    if (this.value !== "" && nativeSelect.value !== this.value) {
+      nativeSelect.value = this.value;
+      return;
+    }
+    if (this.value === "" && !this.hasAttribute("value")) {
+      const nativeValue = nativeSelect.value ?? "";
+      if (nativeValue !== "") {
+        this.value = nativeValue;
+      }
+    }
+  }
+  get selectClasses() {
+    return spectreUi.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 nativeSelect() {
+    return this.querySelector("[data-sp-select-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;
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver((mutations) => {
+      const isInternalMovement = mutations.every((mutation) => {
+        return Array.from(mutation.removedNodes).every(
+          (node) => this.isInternalSelectNode(node) || this.contains(node)
+        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalSelectNode(node));
+      });
+      if (isInternalMovement) {
+        return;
+      }
+      if (this.syncProjectedOptions()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, {
+      childList: true
+    });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+  syncProjectedOptions() {
+    const nextProjectedOptions = [];
+    Array.from(this.childNodes).forEach((node) => {
+      if (this.isInternalSelectNode(node)) {
+        this.projectedOptions.forEach((projectedNode) => {
+          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
+            nextProjectedOptions.push(projectedNode);
+          }
+        });
+        return;
+      }
+      if (isSelectableContent(node)) {
+        nextProjectedOptions.push(node);
+      }
+    });
+    const hasChanged = nextProjectedOptions.length !== this.projectedOptions.length || nextProjectedOptions.some((node, index) => node !== this.projectedOptions[index]);
+    if (hasChanged) {
+      this.projectedOptions = nextProjectedOptions;
+    }
+    return hasChanged;
+  }
+  isInternalSelectNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE && node.hasAttribute("data-sp-select-native");
+  }
+  handleInput(event) {
+    const select = event.currentTarget;
+    this.value = select.value;
+  }
+  handleChange(event) {
+    const select = event.currentTarget;
+    this.value = select.value;
+  }
+  focus(options) {
+    this.nativeSelect?.focus(options);
+  }
+  blur() {
+    this.nativeSelect?.blur();
+  }
+  render() {
+    return lit.html`
+      <select
+        aria-busy=${this.loading ? "true" : "false"}
+        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+        aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+        ?autofocus=${this.autofocus}
+        class=${this.selectClasses}
+        data-sp-select-native
+        ?disabled=${this.isDisabled}
+        id=${ifDefined_js.ifDefined(this.id || void 0)}
+        name=${ifDefined_js.ifDefined(this.name)}
+        ?required=${this.required}
+        title=${ifDefined_js.ifDefined(this.title || void 0)}
+        .value=${live_js.live(this.value)}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      >
+        ${this.projectedOptions.length > 0 ? this.projectedOptions : lit.nothing}
+      </select>
+    `;
+  }
+};
+SpectreSelectElement.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 },
+  invalid: { type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  name: { type: String },
+  pill: { type: Boolean, reflect: true },
+  required: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  success: { type: Boolean, reflect: true },
+  title: { type: String, reflect: true },
+  value: { type: String }
+};
+function defineSpectreSelect(tagName = "sp-select") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreSelectElement);
+  return SpectreSelectElement;
+}
+var SpectreCheckboxElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.ariaLabelledBy = null;
+    this.ariaDescribedBy = null;
+    this.autofocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.invalid = false;
+    this.label = "";
+    this.required = false;
+    this.title = "";
+    this.value = "on";
+  }
+  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("value") && this.value == null) {
+      this.value = "on";
+    }
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-checkbox-native]");
+  }
+  get forwardedAriaLabel() {
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaLabelledBy() {
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaDescribedBy() {
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : void 0;
+  }
+  handleInput(event) {
+    const input = event.currentTarget;
+    this.checked = input.checked;
+  }
+  handleChange(event) {
+    const input = event.currentTarget;
+    this.checked = input.checked;
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  render() {
+    return lit.html`
+      <label>
+        <input
+          aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+          aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
+          aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+          aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+          ?autofocus=${this.autofocus}
+          data-sp-checkbox-native
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          id=${ifDefined_js.ifDefined(this.id || void 0)}
+          name=${ifDefined_js.ifDefined(this.name)}
+          ?required=${this.required}
+          title=${ifDefined_js.ifDefined(this.title || void 0)}
+          type='checkbox'
+          value=${ifDefined_js.ifDefined(this.value || void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+        />
+        <span class='sp-label'>${this.label}</span>
+      </label>
+    `;
+  }
+};
+SpectreCheckboxElement.properties = {
+  ariaLabel: { attribute: "aria-label", type: String },
+  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
+  ariaDescribedBy: { attribute: "aria-describedby", type: String },
+  autofocus: { type: Boolean, reflect: true },
+  checked: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  invalid: { type: Boolean, reflect: true },
+  label: { type: String, reflect: true },
+  name: { type: String },
+  required: { type: Boolean, reflect: true },
+  title: { type: String, reflect: true },
+  value: { type: String }
+};
+function defineSpectreCheckbox(tagName = "sp-checkbox") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreCheckboxElement);
+  return SpectreCheckboxElement;
+}
+var SpectreRadioElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.ariaLabelledBy = null;
+    this.ariaDescribedBy = null;
+    this.autofocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.invalid = false;
+    this.label = "";
+    this.required = false;
+    this.title = "";
+    this.value = "on";
+  }
+  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("value") && this.value == null) {
+      this.value = "on";
+    }
+  }
+  get nativeInput() {
+    return this.querySelector("[data-sp-radio-native]");
+  }
+  get forwardedAriaLabel() {
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaLabelledBy() {
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaDescribedBy() {
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : void 0;
+  }
+  handleInput(event) {
+    const input = event.currentTarget;
+    this.checked = input.checked;
+  }
+  handleChange(event) {
+    const input = event.currentTarget;
+    this.checked = input.checked;
+  }
+  focus(options) {
+    this.nativeInput?.focus(options);
+  }
+  blur() {
+    this.nativeInput?.blur();
+  }
+  render() {
+    return lit.html`
+      <label>
+        <input
+          aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+          aria-invalid=${ifDefined_js.ifDefined(this.invalid ? "true" : void 0)}
+          aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+          aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+          ?autofocus=${this.autofocus}
+          data-sp-radio-native
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          id=${ifDefined_js.ifDefined(this.id || void 0)}
+          name=${ifDefined_js.ifDefined(this.name)}
+          ?required=${this.required}
+          title=${ifDefined_js.ifDefined(this.title || void 0)}
+          type='radio'
+          value=${ifDefined_js.ifDefined(this.value || void 0)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+        />
+        <span class='sp-label'>${this.label}</span>
+      </label>
+    `;
+  }
+};
+SpectreRadioElement.properties = {
+  ariaLabel: { attribute: "aria-label", type: String },
+  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
+  ariaDescribedBy: { attribute: "aria-describedby", type: String },
+  autofocus: { type: Boolean, reflect: true },
+  checked: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  invalid: { type: Boolean, reflect: true },
+  label: { type: String, reflect: true },
+  name: { type: String },
+  required: { type: Boolean, reflect: true },
+  title: { type: String, reflect: true },
+  value: { type: String }
+};
+function defineSpectreRadio(tagName = "sp-radio") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreRadioElement);
+  return SpectreRadioElement;
+}
+var SpectreLabelElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    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();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  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);
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  get nativeLabel() {
+    return this.querySelector("[data-sp-label-native]");
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver((mutations) => {
+      const isInternalMovement = mutations.every((mutation) => {
+        return Array.from(mutation.removedNodes).every(
+          (node) => this.isInternalLabelNode(node) || this.contains(node)
+        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalLabelNode(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.isInternalLabelNode(node)) {
+        this.projectedContent.forEach((projectedNode) => {
+          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
+            nextProjectedContent.push(projectedNode);
+          }
+        });
+        return;
+      }
+      nextProjectedContent.push(node);
+    });
+    if (nextProjectedContent.length === this.projectedContent.length && nextProjectedContent.every((node, index) => node === this.projectedContent[index])) {
+      return false;
+    }
+    this.projectedContent = nextProjectedContent;
+    return true;
+  }
+  isInternalLabelNode(node) {
+    return node === this.nativeLabel;
+  }
+  focus(options) {
+    this.nativeLabel?.focus(options);
+  }
+  blur() {
+    this.nativeLabel?.blur();
+  }
+  render() {
+    return lit.html`
+      <label
+        class='sp-label'
+        data-sp-label-native
+        for=${ifDefined_js.ifDefined(this.htmlFor)}
+        id=${ifDefined_js.ifDefined(this.id || void 0)}
+        tabindex='-1'
+      >
+        ${this.projectedContent.length > 0 ? this.projectedContent : lit.nothing}
+      </label>
+    `;
+  }
+};
+SpectreLabelElement.properties = {
+  htmlFor: { attribute: "for", type: String }
+};
+function defineSpectreLabel(tagName = "sp-label") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreLabelElement);
+  return SpectreLabelElement;
+}
+var SpectreFieldsetElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.ariaLabelledBy = null;
+    this.ariaDescribedBy = null;
+    this.disabled = false;
+    this.legend = "";
+    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();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  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);
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  get nativeFieldset() {
+    return this.querySelector("[data-sp-fieldset-native]");
+  }
+  get forwardedAriaLabel() {
+    const value = this.ariaLabel?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaLabelledBy() {
+    const value = this.ariaLabelledBy?.trim();
+    return value ? value : void 0;
+  }
+  get forwardedAriaDescribedBy() {
+    const value = this.ariaDescribedBy?.trim();
+    return value ? value : 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.isInternalFieldsetNode(node) || this.contains(node)
+        ) && Array.from(mutation.addedNodes).every((node) => this.isInternalFieldsetNode(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.isInternalFieldsetNode(node)) {
+        this.projectedContent.forEach((projectedNode) => {
+          if (projectedNode.parentNode !== this && this.contains(projectedNode)) {
+            nextProjectedContent.push(projectedNode);
+          }
+        });
+        return;
+      }
+      nextProjectedContent.push(node);
+    });
+    if (nextProjectedContent.length === this.projectedContent.length && nextProjectedContent.every((node, index) => node === this.projectedContent[index])) {
+      return false;
+    }
+    this.projectedContent = nextProjectedContent;
+    return true;
+  }
+  isInternalFieldsetNode(node) {
+    return node === this.nativeFieldset;
+  }
+  focus(options) {
+    this.nativeFieldset?.focus(options);
+  }
+  blur() {
+    this.nativeFieldset?.blur();
+  }
+  render() {
+    return lit.html`
+      <fieldset
+        aria-describedby=${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}
+        aria-label=${ifDefined_js.ifDefined(this.forwardedAriaLabel)}
+        aria-labelledby=${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}
+        data-sp-fieldset-native
+        ?disabled=${this.disabled}
+        id=${ifDefined_js.ifDefined(this.id || void 0)}
+      >
+        ${this.legend ? lit.html`<legend class='sp-label'>${this.legend}</legend>` : lit.nothing}
+        ${this.projectedContent.length > 0 ? this.projectedContent : lit.nothing}
+      </fieldset>
+    `;
+  }
+};
+SpectreFieldsetElement.properties = {
+  ariaLabel: { attribute: "aria-label", type: String },
+  ariaLabelledBy: { attribute: "aria-labelledby", type: String },
+  ariaDescribedBy: { attribute: "aria-describedby", type: String },
+  disabled: { type: Boolean, reflect: true },
+  legend: { type: String, reflect: true }
+};
+function defineSpectreFieldset(tagName = "sp-fieldset") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreFieldsetElement);
+  return SpectreFieldsetElement;
+}
+
+// src/index.ts
+function defineSpectreComponents() {
+  defineSpectreButton();
+  defineSpectreInput();
+  defineSpectreTextarea();
+  defineSpectreSelect();
+  defineSpectreCheckbox();
+  defineSpectreRadio();
+  defineSpectreLabel();
+  defineSpectreFieldset();
+}
+
+exports.SpectreButtonElement = SpectreButtonElement;
+exports.SpectreCheckboxElement = SpectreCheckboxElement;
+exports.SpectreFieldsetElement = SpectreFieldsetElement;
+exports.SpectreInputElement = SpectreInputElement;
+exports.SpectreLabelElement = SpectreLabelElement;
+exports.SpectreRadioElement = SpectreRadioElement;
+exports.SpectreSelectElement = SpectreSelectElement;
+exports.SpectreTextareaElement = SpectreTextareaElement;
+exports.defineSpectreButton = defineSpectreButton;
+exports.defineSpectreCheckbox = defineSpectreCheckbox;
+exports.defineSpectreComponents = defineSpectreComponents;
+exports.defineSpectreFieldset = defineSpectreFieldset;
+exports.defineSpectreInput = defineSpectreInput;
+exports.defineSpectreLabel = defineSpectreLabel;
+exports.defineSpectreRadio = defineSpectreRadio;
+exports.defineSpectreSelect = defineSpectreSelect;
+exports.defineSpectreTextarea = defineSpectreTextarea;
+exports.spectreButtonSizes = spectreButtonSizes;
+exports.spectreButtonTypes = spectreButtonTypes;
+exports.spectreButtonVariants = spectreButtonVariants;
+exports.spectreInputSizes = spectreInputSizes;
+exports.spectreInputTypes = spectreInputTypes;
+exports.spectreSelectSizes = spectreSelectSizes;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map