@phcdevworks/spectre-components 1.16.0 → 1.17.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 SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-bHrr2vl7.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-CVRAWo0Q.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 SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-bHrr2vl7.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-CVRAWo0Q.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

@@ -157,6 +157,16 @@ var spectreGridGaps = ["sm", "md", "lg"];
 function isGridGap(value) {
   return spectreGridGaps.includes(value);
 }
+var spectreGridAligns = [
+  "start",
+  "center",
+  "end",
+  "baseline",
+  "stretch"
+];
+function isGridAlign(value) {
+  return spectreGridAligns.includes(value);
+}
 var spectreGridSpans = [
   1,
   2,
@@ -300,6 +310,10 @@ var spectreStackAligns = ["center", "stretch"];
 function isStackAlign(value) {
   return spectreStackAligns.includes(value);
 }
+var spectreStackGaps = ["sm", "md", "lg"];
+function isStackGap(value) {
+  return spectreStackGaps.includes(value);
+}
 var spectreDropdownPlacements = [
   "bottom-start",
   "bottom-end",
@@ -394,7 +408,7 @@ function normalizeInt(value, fallback, min = 0) {
   }
   return value;
 }
-var spectreUtilityClassPattern = /^sp-[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var spectreUtilityClassPattern = /^sp-[a-z0-9]+(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?$/;
 function sanitizeUtilityClasses(value) {
   if (!value) {
     return "";
@@ -748,6 +762,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     this.disabled = false;
     this.fullWidth = false;
     this.iconOnly = false;
+    this.innerClass = void 0;
     this.loading = false;
     this.loadingLabel = "Loading";
     this.pill = false;
@@ -825,7 +840,7 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
     }
   }
   get buttonClasses() {
-    return getButtonClasses({
+    const recipeClasses = getButtonClasses({
       compact: this.compact ?? false,
       disabled: this.isDisabled,
       fullWidth: this.fullWidth ?? false,
@@ -835,6 +850,8 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
       size: this.size,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   get visibleLabelFallback() {
     const trimmedLabel = this.label?.trim();
@@ -909,6 +926,7 @@ SpectreButtonElement.properties = {
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
   href: { type: String, reflect: true },
   iconOnly: { attribute: "icon-only", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
@@ -2038,11 +2056,20 @@ function defineSpectreBadge(tagName = "sp-badge") {
   customElements.define(tagName, SpectreBadgeElement);
   return SpectreBadgeElement;
 }
+var paddedConverter = {
+  fromAttribute(value) {
+    return value !== "false";
+  },
+  toAttribute(value) {
+    return value ? null : "false";
+  }
+};
 var SpectreCardElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
     this.disabled = false;
     this.fullHeight = false;
+    this.innerClass = void 0;
     this.interactive = false;
     this.loading = false;
     this.padded = true;
@@ -2091,7 +2118,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
     }
   }
   get cardClasses() {
-    return getCardClasses({
+    const recipeClasses = getCardClasses({
       disabled: this.isDisabled,
       fullHeight: this.fullHeight ?? false,
       interactive: this.interactive ?? false,
@@ -2099,6 +2126,8 @@ var SpectreCardElement = class extends SpectreProjectableElement {
       padded: this.padded ?? true,
       variant: this.variant
     });
+    const utilityClasses = sanitizeUtilityClasses(this.innerClass);
+    return utilityClasses ? `${recipeClasses} ${utilityClasses}` : recipeClasses;
   }
   render() {
     return html`<div
@@ -2119,9 +2148,10 @@ var SpectreCardElement = class extends SpectreProjectableElement {
 SpectreCardElement.properties = {
   disabled: { type: Boolean, reflect: true },
   fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
+  innerClass: { attribute: "inner-class", type: String },
   interactive: { type: Boolean, reflect: true },
   loading: { type: Boolean, reflect: true },
-  padded: { type: Boolean, reflect: true },
+  padded: { converter: paddedConverter, reflect: true },
   variant: { type: String, reflect: true }
 };
 function defineSpectreCard(tagName = "sp-card") {
@@ -2960,6 +2990,7 @@ function defineSpectreContainer(tagName = "sp-container") {
 var SpectreGridElement = class extends SpectreProjectableElement {
   constructor() {
     super(...arguments);
+    this.align = void 0;
     this.columns = 1;
     this.columnGap = void 0;
     this.explicitTemplate = void 0;
@@ -2997,6 +3028,9 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     return el.hasAttribute("data-sp-grid-native");
   }
   willUpdate(changedProperties) {
+    if (changedProperties.has("align") && this.align != null && !isGridAlign(this.align)) {
+      this.align = void 0;
+    }
     if (changedProperties.has("columns")) {
       const normalized = normalizeInt(this.columns, void 0, 1);
       this.columns = normalized != null && isGridColumns(normalized) ? normalized : 1;
@@ -3039,6 +3073,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     const recipeClasses = getGridClasses({
       columns: this.columns,
       gap: this.gap,
+      ...this.align !== void 0 && { align: this.align },
       ...this.columnGap !== void 0 && {
         columnGap: this.columnGap
       },
@@ -3086,6 +3121,7 @@ var SpectreGridElement = class extends SpectreProjectableElement {
   }
 };
 SpectreGridElement.properties = {
+  align: { type: String, reflect: true },
   columns: { type: Number, reflect: true },
   columnGap: { attribute: "column-gap", type: String, reflect: true },
   explicitTemplate: { attribute: "explicit-template", type: Object },
@@ -3176,6 +3212,7 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     this.align = "center";
     this.basis = void 0;
     this.direction = "vertical";
+    this.gap = "md";
     this.innerClass = void 0;
   }
   get id() {
@@ -3215,11 +3252,15 @@ var SpectreStackElement = class extends SpectreProjectableElement {
     if (changedProperties.has("align") && (this.align == null || !isStackAlign(this.align))) {
       this.align = "center";
     }
+    if (changedProperties.has("gap") && (this.gap == null || !isStackGap(this.gap))) {
+      this.gap = "md";
+    }
   }
   get stackClasses() {
     const recipeClasses = getStackClasses({
       align: this.align,
       direction: this.direction,
+      gap: this.gap,
       ...this.basis != null ? { basis: this.basis } : {}
     });
     const utilityClasses = sanitizeUtilityClasses(this.innerClass);
@@ -3243,6 +3284,7 @@ SpectreStackElement.properties = {
   align: { type: String, reflect: true },
   basis: { type: String, reflect: true },
   direction: { type: String, reflect: true },
+  gap: { type: String, reflect: true },
   innerClass: { attribute: "inner-class", type: String }
 };
 function defineSpectreStack(tagName = "sp-stack") {
@@ -4889,6 +4931,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, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, 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, 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