@phcdevworks/spectre-components 1.18.0 → 1.20.0

package/dist/index.cjs

@@ -87,6 +87,22 @@ function isCardPaddingSize(value) {
     value
   );
 }
+var spectreAccentEdges = ["top", "right", "bottom", "left"];
+function isAccentEdge(value) {
+  return spectreAccentEdges.includes(value);
+}
+var spectreAccentColors = [
+  "neutral",
+  "brand",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "cta"
+];
+function isAccentColor(value) {
+  return spectreAccentColors.includes(value);
+}
 var spectreIconBoxVariants = [
   "primary",
   "secondary",
@@ -1712,7 +1728,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();
     }
   }
@@ -1724,8 +1740,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;
       }
     });
@@ -1983,8 +2000,11 @@ function defineSpectreFieldset(tagName = "sp-fieldset") {
 var SpectreBadgeElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accentRail = void 0;
+    this.accentRailColor = void 0;
     this.disabled = false;
     this.fullWidth = false;
+    this.innerClass = void 0;
     this.loading = false;
     this.size = "md";
     this.variant = "primary";
@@ -2012,6 +2032,12 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-badge-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accentRail") && this.accentRail != null && !isAccentEdge(this.accentRail)) {
+      this.accentRail = void 0;
+    }
+    if (changedProperties.has("accentRailColor") && this.accentRailColor != null && !isAccentColor(this.accentRailColor)) {
+      this.accentRailColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2029,13 +2055,21 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
     }
   }
   get badgeClasses() {
-    return spectreUi.getBadgeClasses({
+    const recipeClasses = spectreUi.getBadgeClasses({
+      ...this.accentRail !== void 0 && {
+        accentRail: this.accentRail
+      },
+      ...this.accentRailColor !== void 0 && {
+        accentRailColor: this.accentRailColor
+      },
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
       loading: this.loading ?? false,
       size: this.size,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return lit.html`<span
@@ -2054,8 +2088,15 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
   }
 };
 SpectreBadgeElement.properties = {
+  accentRail: { attribute: "accent-rail", type: String, reflect: true },
+  accentRailColor: {
+    attribute: "accent-rail-color",
+    type: String,
+    reflect: true
+  },
   disabled: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   loading: { type: Boolean, reflect: true },
   size: { type: String, reflect: true },
   variant: { type: String, reflect: true }
@@ -2091,6 +2132,8 @@ var paddedConverter = {
 var SpectreCardElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.fullHeight = false;
     this.innerClass = void 0;
@@ -2122,6 +2165,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-card-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2143,6 +2192,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   get cardClasses() {
     const recipeClasses = spectreUi.getCardClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -2170,6 +2225,8 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
 };
 SpectreCardElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
   innerClass: { attribute: "inner-class", type: String },
@@ -2395,6 +2452,8 @@ function defineSpectreRating(tagName = "sp-rating") {
 var SpectreTestimonialElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.fullHeight = false;
     this.interactive = false;
@@ -2424,6 +2483,12 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-testimonial-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2442,6 +2507,12 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   get testimonialClasses() {
     return spectreUi.getTestimonialClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -2466,6 +2537,8 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
 };
 SpectreTestimonialElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
   interactive: { type: Boolean, reflect: true },
@@ -2855,6 +2928,8 @@ function defineSpectreTag(tagName = "sp-tag") {
 var SpectrePricingCardElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.disabled = false;
     this.featured = false;
     this.fullHeight = false;
@@ -2884,6 +2959,12 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-pricing-card-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("disabled") && this.disabled == null) {
       this.disabled = false;
     }
@@ -2902,6 +2983,12 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   }
   get pricingCardClasses() {
     return spectreUi.getPricingCardClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       disabled: this.isDisabled,
       featured: this.featured ?? false,
       fullHeight: this.fullHeight ?? false,
@@ -2926,6 +3013,8 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   }
 };
 SpectrePricingCardElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   disabled: { type: Boolean, reflect: true },
   featured: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
@@ -3371,11 +3460,14 @@ function defineSpectreStack(tagName = "sp-stack") {
 var SpectreDropdownElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.fullWidth = false;
     this.mega = false;
     this.open = false;
     this.placement = "bottom-start";
     this.triggerLabel = "Toggle menu";
+    this.viewport = false;
     this.triggerContent = [];
     this.menuContent = [];
     this.handleDocumentClick = (event) => {
@@ -3410,13 +3502,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";
@@ -3473,6 +3572,12 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("fullWidth") && this.fullWidth == null) {
       this.fullWidth = false;
     }
@@ -3488,6 +3593,9 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
     if (changedProperties.has("triggerLabel") && !this.triggerLabel) {
       this.triggerLabel = "Toggle menu";
     }
+    if (changedProperties.has("viewport") && this.viewport == null) {
+      this.viewport = false;
+    }
   }
   get triggerElement() {
     return this.querySelector("[data-sp-dropdown-trigger]");
@@ -3516,19 +3624,28 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   get dropdownClasses() {
     return spectreUi.getDropdownClasses({
       fullWidth: this.fullWidth ?? false,
-      mega: this.mega ?? false
+      mega: this.mega ?? false,
+      viewport: this.viewport ?? false
     });
   }
   get menuClasses() {
     return spectreUi.getDropdownMenuClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       mega: this.mega ?? false,
       open: this.open ?? false,
-      placement: this.placement
+      placement: this.placement,
+      viewport: this.viewport ?? false
     });
   }
   render() {
     return lit.html`<div
       class="${this.dropdownClasses}"
+      data-sp-dropdown-native
       id="${ifDefined_js.ifDefined(this.id || void 0)}"
       title="${ifDefined_js.ifDefined(this.title || void 0)}"
     >
@@ -3550,11 +3667,14 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   }
 };
 SpectreDropdownElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   mega: { type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true },
   placement: { type: String, reflect: true },
-  triggerLabel: { attribute: "trigger-label", type: String }
+  triggerLabel: { attribute: "trigger-label", type: String },
+  viewport: { type: Boolean, reflect: true }
 };
 function defineSpectreDropdown(tagName = "sp-dropdown") {
   const existingElement = customElements.get(tagName);
@@ -3567,6 +3687,8 @@ function defineSpectreDropdown(tagName = "sp-dropdown") {
 var SpectreFooterElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.bordered = false;
     this.fullWidth = false;
     this.innerClass = void 0;
@@ -3599,6 +3721,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-footer-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("bordered") && this.bordered == null) {
       this.bordered = false;
     }
@@ -3608,6 +3736,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   }
   get footerClasses() {
     const recipeClasses = spectreUi.getFooterClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
@@ -3627,6 +3761,8 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   }
 };
 SpectreFooterElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   bordered: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   innerClass: { attribute: "inner-class", type: String }
@@ -3781,6 +3917,8 @@ var FOCUSABLE_SELECTOR = [
 var SpectreModalElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.fullWidth = false;
     this.open = false;
     this.previouslyFocusedElement = null;
@@ -3820,6 +3958,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-modal-native") || el.hasAttribute("data-sp-modal-overlay");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("fullWidth") && this.fullWidth == null) {
       this.fullWidth = false;
     }
@@ -3891,6 +4035,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   }
   get modalClasses() {
     return spectreUi.getModalClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       open: this.open ?? false,
       fullWidth: this.fullWidth ?? false
     });
@@ -3926,6 +4076,8 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   }
 };
 SpectreModalElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   open: { type: Boolean, reflect: true }
 };
@@ -3940,6 +4092,8 @@ function defineSpectreModal(tagName = "sp-modal") {
 var SpectreNavElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.align = void 0;
     this.bordered = false;
     this.fullWidth = false;
@@ -3974,6 +4128,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-nav-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("bordered") && this.bordered == null) {
       this.bordered = false;
     }
@@ -3989,6 +4149,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
   get navClasses() {
     const recipeClasses = spectreUi.getNavClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false,
       sticky: this.sticky ?? false,
@@ -4010,6 +4176,8 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
 };
 SpectreNavElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   align: { type: String, reflect: true },
   bordered: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -4560,6 +4728,8 @@ function defineSpectreSidebarToggle(tagName = "sp-sidebar-toggle") {
 var SpectreToastElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.dismissed = false;
     this.fullWidth = false;
     this.variant = "info";
@@ -4643,6 +4813,12 @@ var SpectreToastElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("dismissed") && this.dismissed == null) {
       this.dismissed = false;
     }
@@ -4689,6 +4865,12 @@ var SpectreToastElement = class extends SpectreBaseElement {
   }
   get toastClasses() {
     return spectreUi.getToastClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       variant: this.variant,
       dismissed: this.dismissed ?? false,
       fullWidth: this.fullWidth ?? false
@@ -4716,6 +4898,8 @@ var SpectreToastElement = class extends SpectreBaseElement {
   }
 };
 SpectreToastElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   autoDismiss: { attribute: "auto-dismiss", type: Number },
   dismissed: { type: Boolean, reflect: true },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
@@ -4732,6 +4916,8 @@ function defineSpectreToast(tagName = "sp-toast") {
 var SpectreTooltipElement = class extends SpectreBaseElement {
   constructor() {
     super(...arguments);
+    this.accent = void 0;
+    this.accentColor = void 0;
     this.placement = "top";
     this.visible = false;
     this.triggerContent = [];
@@ -4759,8 +4945,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";
@@ -4813,6 +5006,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
     this.contentObserver = void 0;
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
+      this.accent = void 0;
+    }
+    if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
+      this.accentColor = void 0;
+    }
     if (changedProperties.has("placement") && (this.placement == null || !isTooltipPlacement(this.placement))) {
       this.placement = "top";
     }
@@ -4836,6 +5035,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   }
   get tooltipClasses() {
     return spectreUi.getTooltipClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       placement: this.placement,
       visible: this.visible ?? false
     });
@@ -4863,6 +5068,8 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   }
 };
 SpectreTooltipElement.properties = {
+  accent: { type: String, reflect: true },
+  accentColor: { attribute: "accent-color", type: String, reflect: true },
   placement: { type: String, reflect: true },
   visible: { type: Boolean, reflect: true }
 };
@@ -5084,6 +5291,8 @@ exports.spectreBadgeVariants = spectreBadgeVariants;
 exports.spectreButtonSizes = spectreInputSizes;
 exports.spectreButtonTypes = spectreButtonTypes;
 exports.spectreButtonVariants = spectreButtonVariants;
+exports.spectreCardAccentColors = spectreAccentColors;
+exports.spectreCardAccentEdges = spectreAccentEdges;
 exports.spectreCardVariants = spectreCardVariants;
 exports.spectreContainerMaxWidths = spectreContainerMaxWidths;
 exports.spectreDropdownPlacements = spectreDropdownPlacements;