@phcdevworks/spectre-components 1.19.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",
@@ -1984,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";
@@ -2013,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;
     }
@@ -2030,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
@@ -2055,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 }
@@ -2092,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;
@@ -2123,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;
     }
@@ -2144,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,
@@ -2171,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 },
@@ -2396,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;
@@ -2425,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;
     }
@@ -2443,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,
@@ -2467,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 },
@@ -2856,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;
@@ -2885,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;
     }
@@ -2903,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,
@@ -2927,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 },
@@ -3372,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) => {
@@ -3481,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;
     }
@@ -3496,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]");
@@ -3524,14 +3624,22 @@ 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() {
@@ -3559,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);
@@ -3576,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;
@@ -3608,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;
     }
@@ -3617,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
     });
@@ -3636,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 }
@@ -3790,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;
@@ -3829,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;
     }
@@ -3900,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
     });
@@ -3935,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 }
 };
@@ -3949,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;
@@ -3983,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;
     }
@@ -3998,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,
@@ -4019,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 },
@@ -4569,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";
@@ -4652,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;
     }
@@ -4698,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
@@ -4725,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 },
@@ -4741,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 = [];
@@ -4829,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";
     }
@@ -4852,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
     });
@@ -4879,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 }
 };
@@ -5100,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;