@phcdevworks/spectre-components 1.19.0 → 1.20.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-TvtLcoW0.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 SpectreCardAccentColor, h as SpectreCardAccentEdge, i as SpectreCardVariant, j as SpectreContainerMaxWidth, k as SpectreDropdownPlacement, l as SpectreGridAlign, m as SpectreGridColumns, n as SpectreGridGap, S as SpectreIconBoxSize, o as SpectreIconBoxVariant, S as SpectreInputSize, p as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, q as SpectreSpinnerVariant, r as SpectreStackAlign, s as SpectreStackBasis, t as SpectreStackDirection, u as SpectreStackGap, S as SpectreTagSize, v as SpectreTagVariant, w as SpectreTestimonialVariant, x as SpectreTextFamily, y as SpectreTextLevel, z as SpectreTextSize, A as SpectreTextVariant, B as SpectreToastVariant, C as SpectreTooltipPlacement, D as spectreAlertSizes, E as spectreAlertVariants, F as spectreAvatarShapes, G as spectreAvatarSizes, D as spectreBadgeSizes, H as spectreBadgeVariants, D as spectreButtonSizes, I as spectreButtonTypes, J as spectreButtonVariants, K as spectreCardAccentColors, L as spectreCardAccentEdges, M as spectreCardVariants, N as spectreContainerMaxWidths, O as spectreDropdownPlacements, P as spectreGridAligns, Q as spectreGridColumns, R as spectreGridGaps, D as spectreIconBoxSizes, T as spectreIconBoxVariants, D as spectreInputSizes, U as spectreInputTypes, D as spectreRatingSizes, D as spectreSpinnerSizes, V as spectreSpinnerVariants, W as spectreStackAligns, X as spectreStackBases, Y as spectreStackDirections, Z as spectreStackGaps, D as spectreTagSizes, _ as spectreTagVariants, $ as spectreTestimonialVariants, a0 as spectreTextFamilies, a1 as spectreTextLevels, a2 as spectreTextSizes, a3 as spectreTextVariants, a4 as spectreToastVariants, a5 as spectreTooltipPlacements } from './form-DpPtizpY.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-TvtLcoW0.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 SpectreCardAccentColor, h as SpectreCardAccentEdge, i as SpectreCardVariant, j as SpectreContainerMaxWidth, k as SpectreDropdownPlacement, l as SpectreGridAlign, m as SpectreGridColumns, n as SpectreGridGap, S as SpectreIconBoxSize, o as SpectreIconBoxVariant, S as SpectreInputSize, p as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, q as SpectreSpinnerVariant, r as SpectreStackAlign, s as SpectreStackBasis, t as SpectreStackDirection, u as SpectreStackGap, S as SpectreTagSize, v as SpectreTagVariant, w as SpectreTestimonialVariant, x as SpectreTextFamily, y as SpectreTextLevel, z as SpectreTextSize, A as SpectreTextVariant, B as SpectreToastVariant, C as SpectreTooltipPlacement, D as spectreAlertSizes, E as spectreAlertVariants, F as spectreAvatarShapes, G as spectreAvatarSizes, D as spectreBadgeSizes, H as spectreBadgeVariants, D as spectreButtonSizes, I as spectreButtonTypes, J as spectreButtonVariants, K as spectreCardAccentColors, L as spectreCardAccentEdges, M as spectreCardVariants, N as spectreContainerMaxWidths, O as spectreDropdownPlacements, P as spectreGridAligns, Q as spectreGridColumns, R as spectreGridGaps, D as spectreIconBoxSizes, T as spectreIconBoxVariants, D as spectreInputSizes, U as spectreInputTypes, D as spectreRatingSizes, D as spectreSpinnerSizes, V as spectreSpinnerVariants, W as spectreStackAligns, X as spectreStackBases, Y as spectreStackDirections, Z as spectreStackGaps, D as spectreTagSizes, _ as spectreTagVariants, $ as spectreTestimonialVariants, a0 as spectreTextFamilies, a1 as spectreTextLevels, a2 as spectreTextSizes, a3 as spectreTextVariants, a4 as spectreToastVariants, a5 as spectreTooltipPlacements } from './form-DpPtizpY.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

@@ -85,6 +85,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",
@@ -1982,8 +1998,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";
@@ -2011,6 +2030,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;
     }
@@ -2028,13 +2053,21 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
     }
   }
   get badgeClasses() {
-    return getBadgeClasses({
+    const recipeClasses = 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 html`<span
@@ -2053,8 +2086,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 }
@@ -2090,6 +2130,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;
@@ -2121,6 +2163,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;
     }
@@ -2142,6 +2190,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
   }
   get cardClasses() {
     const recipeClasses = 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,
@@ -2169,6 +2223,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 },
@@ -2394,6 +2450,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;
@@ -2423,6 +2481,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;
     }
@@ -2441,6 +2505,12 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
   }
   get testimonialClasses() {
     return 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,
@@ -2465,6 +2535,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 },
@@ -2854,6 +2926,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;
@@ -2883,6 +2957,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;
     }
@@ -2901,6 +2981,12 @@ var SpectrePricingCardElement = class extends SpectreProjectableElement {
   }
   get pricingCardClasses() {
     return 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,
@@ -2925,6 +3011,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 },
@@ -3370,11 +3458,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) => {
@@ -3479,6 +3570,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;
     }
@@ -3494,6 +3591,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]");
@@ -3522,14 +3622,22 @@ var SpectreDropdownElement = class extends SpectreBaseElement {
   get dropdownClasses() {
     return getDropdownClasses({
       fullWidth: this.fullWidth ?? false,
-      mega: this.mega ?? false
+      mega: this.mega ?? false,
+      viewport: this.viewport ?? false
     });
   }
   get menuClasses() {
     return 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() {
@@ -3557,11 +3665,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);
@@ -3574,6 +3685,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;
@@ -3606,6 +3719,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;
     }
@@ -3615,6 +3734,12 @@ var SpectreFooterElement = class extends SpectreProjectableElement {
   }
   get footerClasses() {
     const recipeClasses = getFooterClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       bordered: this.bordered ?? false,
       fullWidth: this.fullWidth ?? false
     });
@@ -3634,6 +3759,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 }
@@ -3788,6 +3915,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;
@@ -3827,6 +3956,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;
     }
@@ -3898,6 +4033,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
   }
   get modalClasses() {
     return getModalClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       open: this.open ?? false,
       fullWidth: this.fullWidth ?? false
     });
@@ -3933,6 +4074,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 }
 };
@@ -3947,6 +4090,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;
@@ -3981,6 +4126,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;
     }
@@ -3996,6 +4147,12 @@ var SpectreNavElement = class extends SpectreProjectableElement {
   }
   get navClasses() {
     const recipeClasses = 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,
@@ -4017,6 +4174,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 },
@@ -4567,6 +4726,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";
@@ -4650,6 +4811,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;
     }
@@ -4696,6 +4863,12 @@ var SpectreToastElement = class extends SpectreBaseElement {
   }
   get toastClasses() {
     return 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
@@ -4723,6 +4896,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 },
@@ -4739,6 +4914,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 = [];
@@ -4827,6 +5004,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";
     }
@@ -4850,6 +5033,12 @@ var SpectreTooltipElement = class extends SpectreBaseElement {
   }
   get tooltipClasses() {
     return getTooltipClasses({
+      ...this.accent !== void 0 && {
+        accent: this.accent
+      },
+      ...this.accentColor !== void 0 && {
+        accentColor: this.accentColor
+      },
       placement: this.placement,
       visible: this.visible ?? false
     });
@@ -4877,6 +5066,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 }
 };
@@ -5018,6 +5209,6 @@ function defineSpectreComponents() {
   defineSpectreText();
 }
 
-export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterChipElement, SpectreFooterElement, SpectreFooterLinkElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarLinkElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreFooterChip, defineSpectreFooterLink, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarLink, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridAligns, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreStackGaps, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
+export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterChipElement, SpectreFooterElement, SpectreFooterLinkElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSidebarLinkElement, SpectreSidebarToggleElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreFooterChip, defineSpectreFooterLink, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSidebarLink, defineSpectreSidebarToggle, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreAccentColors as spectreCardAccentColors, spectreAccentEdges as spectreCardAccentEdges, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridAligns, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreStackGaps, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map