@phcdevworks/spectre-components 1.4.0 → 1.5.0

package/README.md

@@ -627,6 +627,133 @@ recipe.
 
 **Internal target** — `[data-sp-testimonial-native]` selects the native `<div>`.
 
+---
+
+### sp-alert
+
+Renders a `<div role="alert">` display primitive backed by the Spectre alert
+recipe.
+
+**Attributes**
+
+| Attribute                 | Type                                              | Default | Description                     |
+| ------------------------- | ------------------------------------------------- | ------- | ------------------------------- |
+| `variant`                 | `info \| success \| warning \| danger \| neutral` | `info`  | Visual style                    |
+| `size`                    | `sm \| md \| lg`                                  | `md`    | Alert size                      |
+| `dismissed`               | boolean                                           | `false` | Dismissed visual state          |
+| `disabled`                | boolean                                           | `false` | Disabled visual state           |
+| `loading`                 | boolean                                           | `false` | Busy visual state               |
+| `full-width`              | boolean                                           | `false` | Spans full container width      |
+| `id` / `title` / `aria-*` | string                                            | —       | Forwarded to the native `<div>` |
+
+**Content projection** — children become the alert content.
+
+**Accessibility** — renders `role="alert"` and reflects the `loading` state to
+`aria-busy`.
+
+**Internal target** — `[data-sp-alert-native]` selects the native `<div>`.
+
+---
+
+### sp-avatar
+
+Renders a `<div>` avatar container backed by the Spectre avatar recipe.
+
+**Attributes**
+
+| Attribute                 | Type                         | Default  | Description                      |
+| ------------------------- | ---------------------------- | -------- | -------------------------------- |
+| `size`                    | `xs \| sm \| md \| lg \| xl` | `md`     | Avatar size                      |
+| `shape`                   | `circle \| square`           | `circle` | Avatar shape                     |
+| `interactive`             | boolean                      | `false`  | Applies interactive styling      |
+| `disabled`                | boolean                      | `false`  | Disabled visual state            |
+| `loading`                 | boolean                      | `false`  | Busy visual state                |
+| `full-width`              | boolean                      | `false`  | Spans full container width       |
+| `placeholder`             | boolean                      | `false`  | Placeholder background and color |
+| `id` / `title` / `aria-*` | string                       | —        | Forwarded to the native `<div>`  |
+
+**Content projection** — children become the avatar content (an `<img>`,
+initials, or an icon).
+
+**Accessibility** — reflects the `loading` state to `aria-busy`.
+
+**Internal target** — `[data-sp-avatar-native]` selects the native `<div>`.
+
+---
+
+### sp-spinner
+
+Renders a `<div role="status">` loading indicator backed by the Spectre spinner
+recipe.
+
+**Attributes**
+
+| Attribute                 | Type                                                                                       | Default | Description                     |
+| ------------------------- | ------------------------------------------------------------------------------------------ | ------- | ------------------------------- |
+| `variant`                 | `primary \| secondary \| success \| warning \| danger \| info \| neutral \| accent \| cta` | —       | Arc color                       |
+| `size`                    | `sm \| md \| lg`                                                                           | `md`    | Spinner size                    |
+| `disabled`                | boolean                                                                                    | `false` | Disabled visual state           |
+| `loading`                 | boolean                                                                                    | `true`  | Busy visual state               |
+| `id` / `title` / `aria-*` | string                                                                                     | —       | Forwarded to the native `<div>` |
+
+**Accessibility** — renders `role="status"` and reflects the `loading` state to
+`aria-busy`. Defaults `aria-label` to `Loading` unless `aria-label` is provided.
+
+**Internal target** — `[data-sp-spinner-native]` selects the native `<div>`.
+
+---
+
+### sp-tag
+
+Renders a `<span>` tag/chip backed by the Spectre tag recipe.
+
+**Attributes**
+
+| Attribute                 | Type                                                                                                                      | Default   | Description                       |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------- | --------------------------------- |
+| `variant`                 | `default \| primary \| secondary \| success \| warning \| danger \| info \| neutral \| accent \| cta \| outline \| ghost` | `default` | Tag color                         |
+| `size`                    | `sm \| md \| lg`                                                                                                          | `md`      | Tag size                          |
+| `interactive`             | boolean                                                                                                                   | `false`   | Applies interactive styling       |
+| `selected`                | boolean                                                                                                                   | `false`   | Selected/active visual state      |
+| `dismissible`             | boolean                                                                                                                   | `false`   | Reserves space for a dismiss icon |
+| `disabled`                | boolean                                                                                                                   | `false`   | Disabled visual state             |
+| `loading`                 | boolean                                                                                                                   | `false`   | Busy visual state                 |
+| `full-width`              | boolean                                                                                                                   | `false`   | Spans full container width        |
+| `id` / `title` / `aria-*` | string                                                                                                                    | —         | Forwarded to the native `<span>`  |
+
+**Content projection** — children become the tag label (and any projected
+dismiss icon).
+
+**Accessibility** — reflects the `loading` state to `aria-busy`.
+
+**Internal target** — `[data-sp-tag-native]` selects the native `<span>`.
+
+---
+
+### sp-pricing-card
+
+Renders a `<div>` pricing card container backed by the Spectre pricing-card
+recipe.
+
+**Attributes**
+
+| Attribute                 | Type    | Default | Description                     |
+| ------------------------- | ------- | ------- | ------------------------------- |
+| `featured`                | boolean | `false` | Highlights the card as featured |
+| `interactive`             | boolean | `false` | Applies interactive styling     |
+| `disabled`                | boolean | `false` | Disabled visual state           |
+| `loading`                 | boolean | `false` | Busy visual state               |
+| `full-height`             | boolean | `false` | Spans full container height     |
+| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<div>` |
+
+**Content projection** — children become the pricing card content (heading,
+price, feature list, call-to-action, etc.).
+
+**Accessibility** — reflects the `loading` state to `aria-busy`.
+
+**Internal target** — `[data-sp-pricing-card-native]` selects the native
+`<div>`.
+
 ## Package exports / API surface
 
 ### Root — `@phcdevworks/spectre-components`
@@ -646,13 +773,16 @@ defineSpectreComponents() // registers all sp-* elements
 `defineSpectreSelect`, `defineSpectreCheckbox`, `defineSpectreRadio`,
 `defineSpectreLabel`, `defineSpectreFieldset`, `defineSpectreBadge`,
 `defineSpectreCard`, `defineSpectreIconBox`, `defineSpectreRating`,
-`defineSpectreTestimonial`
+`defineSpectreTestimonial`, `defineSpectreAlert`, `defineSpectreAvatar`,
+`defineSpectreSpinner`, `defineSpectreTag`, `defineSpectrePricingCard`
 
 **Element classes**: `SpectreButtonElement`, `SpectreInputElement`,
 `SpectreTextareaElement`, `SpectreSelectElement`, `SpectreCheckboxElement`,
 `SpectreRadioElement`, `SpectreLabelElement`, `SpectreFieldsetElement`,
 `SpectreBadgeElement`, `SpectreCardElement`, `SpectreIconBoxElement`,
-`SpectreRatingElement`, `SpectreTestimonialElement`
+`SpectreRatingElement`, `SpectreTestimonialElement`, `SpectreAlertElement`,
+`SpectreAvatarElement`, `SpectreSpinnerElement`, `SpectreTagElement`,
+`SpectrePricingCardElement`
 
 **Button constants and types**: `spectreButtonVariants`, `spectreButtonSizes`,
 `spectreButtonTypes`, `SpectreButtonVariant`, `SpectreButtonSize`,
@@ -668,31 +798,43 @@ defineSpectreComponents() // registers all sp-* elements
 
 **Display constants and types**: `spectreBadgeVariants`, `spectreBadgeSizes`,
 `spectreCardVariants`, `spectreIconBoxVariants`, `spectreIconBoxSizes`,
-`spectreRatingSizes`, `spectreTestimonialVariants`, `SpectreBadgeVariant`,
-`SpectreBadgeSize`, `SpectreCardVariant`, `SpectreIconBoxVariant`,
-`SpectreIconBoxSize`, `SpectreRatingSize`, `SpectreTestimonialVariant`,
-`SpectreBadgeProps`, `SpectreCardProps`, `SpectreIconBoxProps`,
-`SpectreRatingProps`, `SpectreTestimonialProps`
+`spectreRatingSizes`, `spectreTestimonialVariants`, `spectreAlertVariants`,
+`spectreAlertSizes`, `spectreAvatarShapes`, `spectreAvatarSizes`,
+`spectreSpinnerVariants`, `spectreSpinnerSizes`, `spectreTagVariants`,
+`spectreTagSizes`, `SpectreBadgeVariant`, `SpectreBadgeSize`,
+`SpectreCardVariant`, `SpectreIconBoxVariant`, `SpectreIconBoxSize`,
+`SpectreRatingSize`, `SpectreTestimonialVariant`, `SpectreAlertVariant`,
+`SpectreAlertSize`, `SpectreAvatarShape`, `SpectreAvatarSize`,
+`SpectreSpinnerVariant`, `SpectreSpinnerSize`, `SpectreTagVariant`,
+`SpectreTagSize`, `SpectreBadgeProps`, `SpectreCardProps`,
+`SpectreIconBoxProps`, `SpectreRatingProps`, `SpectreTestimonialProps`,
+`SpectreAlertProps`, `SpectreAvatarProps`, `SpectreSpinnerProps`,
+`SpectreTagProps`, `SpectrePricingCardProps`
 
 ### Subpath entry points
 
 Each entry point registers only that component and exports only its surface:
 
-| Entry point       | Registers        | Key exports                                                                              |
-| ----------------- | ---------------- | ---------------------------------------------------------------------------------------- |
-| `.../button`      | `sp-button`      | `defineSpectreButton`, `SpectreButtonElement`, button constants and types                |
-| `.../input`       | `sp-input`       | `defineSpectreInput`, `SpectreInputElement`, input constants and types                   |
-| `.../textarea`    | `sp-textarea`    | `defineSpectreTextarea`, `SpectreTextareaElement`, `SpectreTextareaProps`                |
-| `.../select`      | `sp-select`      | `defineSpectreSelect`, `SpectreSelectElement`, `SpectreSelectProps`                      |
-| `.../checkbox`    | `sp-checkbox`    | `defineSpectreCheckbox`, `SpectreCheckboxElement`, `SpectreCheckboxProps`                |
-| `.../radio`       | `sp-radio`       | `defineSpectreRadio`, `SpectreRadioElement`, `SpectreRadioProps`                         |
-| `.../label`       | `sp-label`       | `defineSpectreLabel`, `SpectreLabelElement`, `SpectreLabelProps`                         |
-| `.../fieldset`    | `sp-fieldset`    | `defineSpectreFieldset`, `SpectreFieldsetElement`, `SpectreFieldsetProps`                |
-| `.../badge`       | `sp-badge`       | `defineSpectreBadge`, `SpectreBadgeElement`, badge constants and types                   |
-| `.../card`        | `sp-card`        | `defineSpectreCard`, `SpectreCardElement`, card constants and types                      |
-| `.../icon-box`    | `sp-icon-box`    | `defineSpectreIconBox`, `SpectreIconBoxElement`, icon-box constants and types            |
-| `.../rating`      | `sp-rating`      | `defineSpectreRating`, `SpectreRatingElement`, rating constants and types                |
-| `.../testimonial` | `sp-testimonial` | `defineSpectreTestimonial`, `SpectreTestimonialElement`, testimonial constants and types |
+| Entry point        | Registers         | Key exports                                                                              |
+| ------------------ | ----------------- | ---------------------------------------------------------------------------------------- |
+| `.../button`       | `sp-button`       | `defineSpectreButton`, `SpectreButtonElement`, button constants and types                |
+| `.../input`        | `sp-input`        | `defineSpectreInput`, `SpectreInputElement`, input constants and types                   |
+| `.../textarea`     | `sp-textarea`     | `defineSpectreTextarea`, `SpectreTextareaElement`, `SpectreTextareaProps`                |
+| `.../select`       | `sp-select`       | `defineSpectreSelect`, `SpectreSelectElement`, `SpectreSelectProps`                      |
+| `.../checkbox`     | `sp-checkbox`     | `defineSpectreCheckbox`, `SpectreCheckboxElement`, `SpectreCheckboxProps`                |
+| `.../radio`        | `sp-radio`        | `defineSpectreRadio`, `SpectreRadioElement`, `SpectreRadioProps`                         |
+| `.../label`        | `sp-label`        | `defineSpectreLabel`, `SpectreLabelElement`, `SpectreLabelProps`                         |
+| `.../fieldset`     | `sp-fieldset`     | `defineSpectreFieldset`, `SpectreFieldsetElement`, `SpectreFieldsetProps`                |
+| `.../badge`        | `sp-badge`        | `defineSpectreBadge`, `SpectreBadgeElement`, badge constants and types                   |
+| `.../card`         | `sp-card`         | `defineSpectreCard`, `SpectreCardElement`, card constants and types                      |
+| `.../icon-box`     | `sp-icon-box`     | `defineSpectreIconBox`, `SpectreIconBoxElement`, icon-box constants and types            |
+| `.../rating`       | `sp-rating`       | `defineSpectreRating`, `SpectreRatingElement`, rating constants and types                |
+| `.../testimonial`  | `sp-testimonial`  | `defineSpectreTestimonial`, `SpectreTestimonialElement`, testimonial constants and types |
+| `.../alert`        | `sp-alert`        | `defineSpectreAlert`, `SpectreAlertElement`, alert constants and types                   |
+| `.../avatar`       | `sp-avatar`       | `defineSpectreAvatar`, `SpectreAvatarElement`, avatar constants and types                |
+| `.../spinner`      | `sp-spinner`      | `defineSpectreSpinner`, `SpectreSpinnerElement`, spinner constants and types             |
+| `.../tag`          | `sp-tag`          | `defineSpectreTag`, `SpectreTagElement`, tag constants and types                         |
+| `.../pricing-card` | `sp-pricing-card` | `defineSpectrePricingCard`, `SpectrePricingCardElement`, `SpectrePricingCardProps`       |
 
 Size constants are shared between input, textarea, and select. Import
 `spectreInputSizes` / `SpectreInputSize` from `.../input` when needed alongside

package/dist/alert.cjs

@@ -0,0 +1,455 @@
+'use strict';
+
+var spectreUi = require('@phcdevworks/spectre-ui');
+var lit = require('lit');
+var ifDefined_js = require('lit/directives/if-defined.js');
+
+// src/utils/form.ts
+var spectreInputSizes = ["sm", "md", "lg"];
+function isInputSize(value) {
+  return spectreInputSizes.includes(value);
+}
+var spectreAlertVariants = [
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "neutral"
+];
+function isAlertVariant(value) {
+  return spectreAlertVariants.includes(value);
+}
+var SpectreBaseElement = class extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._ariaLabel = null;
+    this._ariaLabelledBy = null;
+    this._ariaDescribedBy = null;
+    this._autocapitalize = "";
+    this._autofocus = false;
+    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;
+  }
+  set id(value) {
+    const normalizedValue = value ?? "";
+    if (this._id === normalizedValue) {
+      return;
+    }
+    this._id = normalizedValue;
+    this._removeHostAttribute("id");
+    this.requestUpdate();
+  }
+  get autofocus() {
+    return this._autofocus;
+  }
+  set autofocus(value) {
+    const normalizedValue = !!value;
+    if (this._autofocus === normalizedValue) {
+      return;
+    }
+    this._autofocus = normalizedValue;
+    this._removeHostAttribute("autofocus");
+    this.requestUpdate();
+  }
+  // Spectre components intentionally render in light DOM so the global
+  // `@phcdevworks/spectre-ui` styling contract can apply directly.
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const proxiedAttributes = [
+      "id",
+      "title",
+      "autocapitalize",
+      "autofocus",
+      "spellcheck",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby"
+    ];
+    proxiedAttributes.forEach((attr) => {
+      const value = super.getAttribute(attr);
+      if (value !== null) {
+        this.setAttribute(attr, value);
+      }
+    });
+  }
+  getAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id || null;
+      case "title":
+        return this.title || null;
+      case "autocapitalize":
+        return this.autocapitalize || null;
+      case "autofocus":
+        return this.autofocus ? "" : 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);
+    }
+  }
+  hasAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        return this.id !== "";
+      case "title":
+        return this.title !== "";
+      case "autocapitalize":
+        return this.autocapitalize !== "";
+      case "autofocus":
+        return this.autofocus;
+      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);
+    }
+  }
+  setAttribute(qualifiedName, value) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = value;
+        break;
+      case "title":
+        this.title = value;
+        break;
+      case "autocapitalize":
+        this.autocapitalize = value;
+        break;
+      case "autofocus":
+        this.autofocus = true;
+        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);
+    }
+  }
+  removeAttribute(qualifiedName) {
+    switch (qualifiedName) {
+      case "id":
+        this.id = "";
+        break;
+      case "title":
+        this.title = "";
+        break;
+      case "autocapitalize":
+        this.autocapitalize = "";
+        break;
+      case "autofocus":
+        this.autofocus = false;
+        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);
+    }
+  }
+  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;
+  }
+};
+SpectreBaseElement.properties = {};
+
+// src/utils/dom.ts
+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;
+  });
+}
+
+// src/utils/projectable.ts
+var SpectreProjectableElement = class extends SpectreBaseElement {
+  constructor() {
+    super(...arguments);
+    this.projectedContent = [];
+  }
+  get hasProjectedContent() {
+    return hasMeaningfulContent(this.projectedContent);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.syncProjectedContent();
+    this.startContentObserver();
+  }
+  disconnectedCallback() {
+    this.stopContentObserver();
+    super.disconnectedCallback();
+  }
+  update(changedProperties) {
+    this.stopContentObserver();
+    super.update(changedProperties);
+    this.startContentObserver();
+  }
+  syncProjectedContent() {
+    const nextProjectedContent = [];
+    const sourceNodes = [
+      ...this.childNodes,
+      ...this.getContentContainer()?.childNodes ?? []
+    ];
+    sourceNodes.forEach((node) => {
+      if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {
+        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;
+  }
+  startContentObserver() {
+    if (this.contentObserver) {
+      return;
+    }
+    this.contentObserver = new MutationObserver((mutations) => {
+      const isInternalMovement = mutations.every(
+        (mutation) => [...mutation.removedNodes].every(
+          (node) => this.isInternalNode(node) || this.contains(node)
+        ) && [...mutation.addedNodes].every((node) => this.isInternalNode(node))
+      );
+      if (isInternalMovement) {
+        return;
+      }
+      if (this.syncProjectedContent()) {
+        this.requestUpdate();
+      }
+    });
+    this.contentObserver.observe(this, { childList: true });
+  }
+  stopContentObserver() {
+    this.contentObserver?.disconnect();
+    this.contentObserver = void 0;
+  }
+};
+var SpectreAlertElement = class extends SpectreProjectableElement {
+  constructor() {
+    super(...arguments);
+    this.dismissed = false;
+    this.disabled = false;
+    this.fullWidth = false;
+    this.loading = false;
+    this.size = "md";
+    this.variant = "info";
+  }
+  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-alert-native]");
+  }
+  isInternalNode(node) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return false;
+    }
+    const el = node;
+    return el.hasAttribute("data-sp-alert-native");
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("dismissed") && this.dismissed == null) {
+      this.dismissed = false;
+    }
+    if (changedProperties.has("disabled") && this.disabled == null) {
+      this.disabled = false;
+    }
+    if (changedProperties.has("fullWidth") && this.fullWidth == null) {
+      this.fullWidth = false;
+    }
+    if (changedProperties.has("loading") && this.loading == null) {
+      this.loading = false;
+    }
+    if (changedProperties.has("variant") && (this.variant == null || !isAlertVariant(this.variant))) {
+      this.variant = "info";
+    }
+    if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
+      this.size = "md";
+    }
+  }
+  get alertClasses() {
+    return spectreUi.getAlertClasses({
+      disabled: this.isDisabled,
+      dismissed: this.dismissed ?? false,
+      fullWidth: this.fullWidth ?? false,
+      loading: this.loading ?? false,
+      size: this.size,
+      variant: this.variant
+    });
+  }
+  get isDisabled() {
+    return (this.disabled ?? false) || (this.loading ?? false);
+  }
+  render() {
+    return lit.html`<div
+      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)}"
+      class="${this.alertClasses}"
+      data-sp-alert-native
+      id="${ifDefined_js.ifDefined(this.id || void 0)}"
+      role="alert"
+      title="${ifDefined_js.ifDefined(this.title || void 0)}"
+    >
+      ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
+    </div>`;
+  }
+};
+SpectreAlertElement.properties = {
+  dismissed: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  loading: { type: Boolean, reflect: true },
+  size: { type: String, reflect: true },
+  variant: { type: String, reflect: true }
+};
+function defineSpectreAlert(tagName = "sp-alert") {
+  const existingElement = customElements.get(tagName);
+  if (existingElement) {
+    return existingElement;
+  }
+  customElements.define(tagName, SpectreAlertElement);
+  return SpectreAlertElement;
+}
+
+exports.SpectreAlertElement = SpectreAlertElement;
+exports.defineSpectreAlert = defineSpectreAlert;
+exports.spectreAlertSizes = spectreInputSizes;
+exports.spectreAlertVariants = spectreAlertVariants;
+//# sourceMappingURL=alert.cjs.map
+//# sourceMappingURL=alert.cjs.map