@phcdevworks/spectre-components 1.17.0 → 1.19.0

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridAlign, k as SpectreGridColumns, l as SpectreGridGap, S as SpectreIconBoxSize, m as SpectreIconBoxVariant, S as SpectreInputSize, n as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, o as SpectreSpinnerVariant, p as SpectreStackAlign, q as SpectreStackBasis, r as SpectreStackDirection, s as SpectreStackGap, S as SpectreTagSize, t as SpectreTagVariant, u as SpectreTestimonialVariant, v as SpectreTextFamily, w as SpectreTextLevel, x as SpectreTextSize, y as SpectreTextVariant, z as SpectreToastVariant, A as SpectreTooltipPlacement, B as spectreAlertSizes, C as spectreAlertVariants, D as spectreAvatarShapes, E as spectreAvatarSizes, B as spectreBadgeSizes, F as spectreBadgeVariants, B as spectreButtonSizes, G as spectreButtonTypes, H as spectreButtonVariants, I as spectreCardVariants, J as spectreContainerMaxWidths, K as spectreDropdownPlacements, L as spectreGridAligns, M as spectreGridColumns, N as spectreGridGaps, B as spectreIconBoxSizes, O as spectreIconBoxVariants, B as spectreInputSizes, P as spectreInputTypes, B as spectreRatingSizes, B as spectreSpinnerSizes, Q as spectreSpinnerVariants, R as spectreStackAligns, T as spectreStackBases, U as spectreStackDirections, V as spectreStackGaps, B as spectreTagSizes, W as spectreTagVariants, X as spectreTestimonialVariants, Y as spectreTextFamilies, Z as spectreTextLevels, _ as spectreTextSizes, $ as spectreTextVariants, a0 as spectreToastVariants, a1 as spectreTooltipPlacements } from './form-CVRAWo0Q.cjs';
+export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridAlign, k as SpectreGridColumns, l as SpectreGridGap, S as SpectreIconBoxSize, m as SpectreIconBoxVariant, S as SpectreInputSize, n as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, o as SpectreSpinnerVariant, p as SpectreStackAlign, q as SpectreStackBasis, r as SpectreStackDirection, s as SpectreStackGap, S as SpectreTagSize, t as SpectreTagVariant, u as SpectreTestimonialVariant, v as SpectreTextFamily, w as SpectreTextLevel, x as SpectreTextSize, y as SpectreTextVariant, z as SpectreToastVariant, A as SpectreTooltipPlacement, B as spectreAlertSizes, C as spectreAlertVariants, D as spectreAvatarShapes, E as spectreAvatarSizes, B as spectreBadgeSizes, F as spectreBadgeVariants, B as spectreButtonSizes, G as spectreButtonTypes, H as spectreButtonVariants, I as spectreCardVariants, J as spectreContainerMaxWidths, K as spectreDropdownPlacements, L as spectreGridAligns, M as spectreGridColumns, N as spectreGridGaps, B as spectreIconBoxSizes, O as spectreIconBoxVariants, B as spectreInputSizes, P as spectreInputTypes, B as spectreRatingSizes, B as spectreSpinnerSizes, Q as spectreSpinnerVariants, R as spectreStackAligns, T as spectreStackBases, U as spectreStackDirections, V as spectreStackGaps, B as spectreTagSizes, W as spectreTagVariants, X as spectreTestimonialVariants, Y as spectreTextFamilies, Z as spectreTextLevels, _ as spectreTextSizes, $ as spectreTextVariants, a0 as spectreToastVariants, a1 as spectreTooltipPlacements } from './form-TvtLcoW0.cjs';
 export { SpectreButtonElement, SpectreButtonProps, SpectreButtonTarget, defineSpectreButton } from './button.cjs';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.cjs';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridAlign, k as SpectreGridColumns, l as SpectreGridGap, S as SpectreIconBoxSize, m as SpectreIconBoxVariant, S as SpectreInputSize, n as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, o as SpectreSpinnerVariant, p as SpectreStackAlign, q as SpectreStackBasis, r as SpectreStackDirection, s as SpectreStackGap, S as SpectreTagSize, t as SpectreTagVariant, u as SpectreTestimonialVariant, v as SpectreTextFamily, w as SpectreTextLevel, x as SpectreTextSize, y as SpectreTextVariant, z as SpectreToastVariant, A as SpectreTooltipPlacement, B as spectreAlertSizes, C as spectreAlertVariants, D as spectreAvatarShapes, E as spectreAvatarSizes, B as spectreBadgeSizes, F as spectreBadgeVariants, B as spectreButtonSizes, G as spectreButtonTypes, H as spectreButtonVariants, I as spectreCardVariants, J as spectreContainerMaxWidths, K as spectreDropdownPlacements, L as spectreGridAligns, M as spectreGridColumns, N as spectreGridGaps, B as spectreIconBoxSizes, O as spectreIconBoxVariants, B as spectreInputSizes, P as spectreInputTypes, B as spectreRatingSizes, B as spectreSpinnerSizes, Q as spectreSpinnerVariants, R as spectreStackAligns, T as spectreStackBases, U as spectreStackDirections, V as spectreStackGaps, B as spectreTagSizes, W as spectreTagVariants, X as spectreTestimonialVariants, Y as spectreTextFamilies, Z as spectreTextLevels, _ as spectreTextSizes, $ as spectreTextVariants, a0 as spectreToastVariants, a1 as spectreTooltipPlacements } from './form-CVRAWo0Q.js';
+export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridAlign, k as SpectreGridColumns, l as SpectreGridGap, S as SpectreIconBoxSize, m as SpectreIconBoxVariant, S as SpectreInputSize, n as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, o as SpectreSpinnerVariant, p as SpectreStackAlign, q as SpectreStackBasis, r as SpectreStackDirection, s as SpectreStackGap, S as SpectreTagSize, t as SpectreTagVariant, u as SpectreTestimonialVariant, v as SpectreTextFamily, w as SpectreTextLevel, x as SpectreTextSize, y as SpectreTextVariant, z as SpectreToastVariant, A as SpectreTooltipPlacement, B as spectreAlertSizes, C as spectreAlertVariants, D as spectreAvatarShapes, E as spectreAvatarSizes, B as spectreBadgeSizes, F as spectreBadgeVariants, B as spectreButtonSizes, G as spectreButtonTypes, H as spectreButtonVariants, I as spectreCardVariants, J as spectreContainerMaxWidths, K as spectreDropdownPlacements, L as spectreGridAligns, M as spectreGridColumns, N as spectreGridGaps, B as spectreIconBoxSizes, O as spectreIconBoxVariants, B as spectreInputSizes, P as spectreInputTypes, B as spectreRatingSizes, B as spectreSpinnerSizes, Q as spectreSpinnerVariants, R as spectreStackAligns, T as spectreStackBases, U as spectreStackDirections, V as spectreStackGaps, B as spectreTagSizes, W as spectreTagVariants, X as spectreTestimonialVariants, Y as spectreTextFamilies, Z as spectreTextLevels, _ as spectreTextSizes, $ as spectreTextVariants, a0 as spectreToastVariants, a1 as spectreTooltipPlacements } from './form-TvtLcoW0.js';
 export { SpectreButtonElement, SpectreButtonProps, SpectreButtonTarget, defineSpectreButton } from './button.js';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.js';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.js';

package/dist/index.js

@@ -16,7 +16,8 @@ var spectreButtonVariants = [
   "danger",
   "success",
   "cta",
-  "accent"
+  "accent",
+  "inverse"
 ];
 function isButtonVariant(value) {
   return spectreButtonVariants.includes(value);
@@ -53,7 +54,8 @@ var spectreBadgeVariants = [
   "ghost",
   "outline",
   "accent",
-  "cta"
+  "cta",
+  "inverse"
 ];
 function isBadgeVariant(value) {
   return spectreBadgeVariants.includes(value);
@@ -77,6 +79,12 @@ var spectreCardVariants = [
 function isCardVariant(value) {
   return spectreCardVariants.includes(value);
 }
+var spectreCardPaddingSizes = ["sm", "md", "lg"];
+function isCardPaddingSize(value) {
+  return spectreCardPaddingSizes.includes(
+    value
+  );
+}
 var spectreIconBoxVariants = [
   "primary",
   "secondary",
@@ -371,7 +379,9 @@ var spectreTextVariants = [
   "muted",
   "subtle",
   "meta",
-  "brand"
+  "brand",
+  "onInverse",
+  "onInverseMuted"
 ];
 function isTextVariant(value) {
   return spectreTextVariants.includes(value);
@@ -1700,7 +1710,7 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if ((changedProperties.has("checked") || changedProperties.has("name")) && this.checked && this.name) {
+    if ((changedProperties.has("checked") || changedProperties.has("name") || changedProperties.has("form")) && this.checked && this.name) {
       this.syncGroup();
     }
   }
@@ -1712,8 +1722,9 @@ var SpectreRadioElement = class extends SpectreProjectableElement {
     const radios = root.querySelectorAll(
       "sp-radio"
     );
+    const form = this.nativeInput?.form;
     radios.forEach((radio) => {
-      if (radio !== this && radio.name === this.name && radio.checked) {
+      if (radio !== this && radio.name === this.name && radio.nativeInput?.form === form && radio.checked) {
         radio.checked = false;
       }
     });
@@ -2058,10 +2069,22 @@ function defineSpectreBadge(tagName = "sp-badge") {
 }
 var paddedConverter = {
   fromAttribute(value) {
-    return value !== "false";
+    if (value === "false") {
+      return false;
+    }
+    if (value != null && isCardPaddingSize(value)) {
+      return value;
+    }
+    return true;
   },
   toAttribute(value) {
-    return value ? null : "false";
+    if (value === false) {
+      return "false";
+    }
+    if (value === true) {
+      return null;
+    }
+    return value;
   }
 };
 var SpectreCardElement = class extends SpectreProjectableElement {
@@ -2110,7 +2133,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     if (changedProperties.has("loading") && this.loading == null) {
       this.loading = false;
     }
-    if (changedProperties.has("padded") && this.padded == null) {
+    if (changedProperties.has("padded") && (this.padded == null || typeof this.padded !== "boolean" && !isCardPaddingSize(this.padded))) {
       this.padded = true;
     }
     if (changedProperties.has("variant") && (this.variant == null || !isCardVariant(this.variant))) {
@@ -2999,6 +3022,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     this.innerClass = void 0;
     this.leadingTracks = void 0;
     this.rowGap = void 0;
+    this._role = null;
   }
   get id() {
     return super.id;
@@ -3012,9 +3036,56 @@ var SpectreGridElement = class extends SpectreProjectableElement {
   set title(value) {
     super.title = value;
   }
+  get role() {
+    return this._role;
+  }
+  set role(value) {
+    const normalizedValue = value?.trim() || null;
+    if (this._role === normalizedValue) {
+      return;
+    }
+    this._role = normalizedValue;
+    if (HTMLElement.prototype.hasAttribute.call(this, "role")) {
+      HTMLElement.prototype.removeAttribute.call(this, "role");
+    }
+    this.requestUpdate();
+  }
+  getAttribute(qualifiedName) {
+    if (qualifiedName === "role") {
+      return this.role;
+    }
+    return super.getAttribute(qualifiedName);
+  }
+  hasAttribute(qualifiedName) {
+    if (qualifiedName === "role") {
+      return this.role !== null;
+    }
+    return super.hasAttribute(qualifiedName);
+  }
+  setAttribute(qualifiedName, value) {
+    if (qualifiedName === "role") {
+      this.role = value;
+      return;
+    }
+    super.setAttribute(qualifiedName, value);
+  }
+  removeAttribute(qualifiedName) {
+    if (qualifiedName === "role") {
+      this.role = null;
+      return;
+    }
+    super.removeAttribute(qualifiedName);
+  }
   connectedCallback() {
     var _a;
+    const initialRole = HTMLElement.prototype.getAttribute.call(this, "role");
+    if (initialRole !== null) {
+      HTMLElement.prototype.removeAttribute.call(this, "role");
+    }
     super.connectedCallback();
+    if (initialRole !== null) {
+      this.role = initialRole;
+    }
     (_a = this.style).display || (_a.display = "block");
   }
   getContentContainer() {
@@ -3114,6 +3185,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
       class="${this.gridClasses}"
       data-sp-grid-native
       id="${ifDefined(this.id || void 0)}"
+      role="${ifDefined(this.role ?? void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
       ${this.hasProjectedContent ? this.projectedContent : nothing}
@@ -3337,13 +3409,20 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
       return false;
     }
     const el = node;
-    return el.hasAttribute("data-sp-dropdown-menu") || el.hasAttribute("data-sp-dropdown-trigger");
+    return el.hasAttribute("data-sp-dropdown-native") || el.hasAttribute("data-sp-dropdown-menu") || el.hasAttribute("data-sp-dropdown-trigger");
   }
   syncProjectedContent() {
     const nextTriggerContent = [];
     const nextMenuContent = [];
-    this.childNodes.forEach((node) => {
-      if (this.isInternalNode(node)) {
+    const sourceNodes = [
+      ...this.triggerContent.filter((node) => this.contains(node)),
+      ...this.menuContent.filter((node) => this.contains(node)),
+      ...Array.from(this.childNodes).filter(
+        (node) => !this.hasUpdated || node.nodeType !== Node.TEXT_NODE || node.textContent?.trim()
+      )
+    ];
+    new Set(sourceNodes).forEach((node) => {
+      if (node.nodeType === Node.COMMENT_NODE || this.isInternalNode(node)) {
         return;
       }
       const isTriggerSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "trigger";
@@ -3456,6 +3535,7 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   render() {
     return html`<div
       class="${this.dropdownClasses}"
+      data-sp-dropdown-native
       id="${ifDefined(this.id || void 0)}"
       title="${ifDefined(this.title || void 0)}"
     >
@@ -4686,8 +4766,15 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   syncProjectedContent() {
     const nextTooltipContent = [];
     const nextTriggerContent = [];
-    this.childNodes.forEach((node) => {
-      if (this.isInternalNode(node)) {
+    const sourceNodes = [
+      ...this.triggerContent.filter((node) => this.contains(node)),
+      ...this.tooltipContent.filter((node) => this.contains(node)),
+      ...Array.from(this.childNodes).filter(
+        (node) => !this.hasUpdated || node.nodeType !== Node.TEXT_NODE || node.textContent?.trim()
+      )
+    ];
+    new Set(sourceNodes).forEach((node) => {
+      if (node.nodeType === Node.COMMENT_NODE || this.isInternalNode(node)) {
         return;
       }
       const isTooltipSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "tooltip";