@phcdevworks/spectre-components 1.12.0 → 1.14.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-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-JrKDonG4.cjs';
-export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.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 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-BGQjgJrL.cjs';
+export { SpectreButtonElement, SpectreButtonProps, SpectreButtonTarget, defineSpectreButton } from './button.cjs';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.cjs';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.cjs';
 export { SpectreSelectElement, SpectreSelectProps, defineSpectreSelect } from './select.cjs';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-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-JrKDonG4.js';
-export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.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 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-BGQjgJrL.js';
+export { SpectreButtonElement, SpectreButtonProps, SpectreButtonTarget, defineSpectreButton } from './button.js';
 export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.js';
 export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.js';
 export { SpectreSelectElement, SpectreSelectProps, defineSpectreSelect } from './select.js';

package/dist/index.js

@@ -157,6 +157,33 @@ var spectreGridGaps = ["sm", "md", "lg"];
 function isGridGap(value) {
   return spectreGridGaps.includes(value);
 }
+var spectreGridSpans = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  "full"
+];
+function isGridSpan(value) {
+  return spectreGridSpans.includes(
+    value
+  );
+}
+function isGridSpanOptions(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const candidate = value;
+  return (candidate.base === void 0 || isGridSpan(candidate.base)) && (candidate.md === void 0 || isGridSpan(candidate.md)) && (candidate.lg === void 0 || isGridSpan(candidate.lg));
+}
 var spectreStackDirections = ["vertical", "horizontal"];
 function isStackDirection(value) {
   return spectreStackDirections.includes(
@@ -244,6 +271,17 @@ var spectreTextLevels = [
 function isTextLevel(value) {
   return spectreTextLevels.includes(value);
 }
+var spectreTextTransforms = [
+  "none",
+  "uppercase",
+  "lowercase",
+  "capitalize"
+];
+function isTextTransform(value) {
+  return spectreTextTransforms.includes(
+    value
+  );
+}
 function normalizeInt(value, fallback, min = 0) {
   if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
     return fallback;
@@ -622,6 +660,9 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
   set autofocus(value) {
     super.autofocus = value;
   }
+  get isLink() {
+    return Boolean(this.href) && !this.isDisabled;
+  }
   getContentContainer() {
     return this.querySelector("[data-sp-button-native]");
   }
@@ -705,12 +746,30 @@ var SpectreButtonElement = class extends SpectreProjectableElement {
         >` : nothing;
   }
   render() {
+    if (this.isLink) {
+      return html`<a
+        aria-busy="${this.loading ? "true" : "false"}"
+        aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
+        aria-label="${ifDefined(this.forwardedAriaLabel)}"
+        aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
+        class="${this.buttonClasses}"
+        data-sp-button-native
+        href="${ifDefined(this.href)}"
+        id="${ifDefined(this.id || void 0)}"
+        rel="${ifDefined(this.rel || void 0)}"
+        target="${ifDefined(this.target || void 0)}"
+        title="${ifDefined(this.title || void 0)}"
+      >
+        ${this.renderButtonContent()}
+      </a>`;
+    }
     return html`<button
       aria-busy="${this.loading ? "true" : "false"}"
       aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
       aria-label="${ifDefined(this.forwardedAriaLabel)}"
       aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
       ?autofocus="${this.autofocus}"
+      aria-disabled="${ifDefined(this.href && this.isDisabled ? "true" : void 0)}"
       class="${this.buttonClasses}"
       data-sp-button-native
       ?disabled="${this.isDisabled}"
@@ -729,13 +788,16 @@ SpectreButtonElement.properties = {
   disabled: { type: Boolean, reflect: true },
   form: { type: String },
   fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
+  href: { type: String, reflect: true },
   iconOnly: { attribute: "icon-only", type: Boolean, reflect: true },
   label: { type: String, reflect: true },
   loading: { type: Boolean, reflect: true },
   loadingLabel: { attribute: "loading-label", type: String, reflect: true },
   name: { type: String, reflect: true },
   pill: { type: Boolean, reflect: true },
+  rel: { type: String },
   size: { type: String, reflect: true },
+  target: { type: String },
   type: { type: String, reflect: true },
   variant: { type: String, reflect: true },
   value: { type: String }
@@ -2803,11 +2865,17 @@ var SpectreGridElement = class extends SpectreProjectableElement {
     if (changedProperties.has("gap") && (this.gap == null || !isGridGap(this.gap))) {
       this.gap = "md";
     }
+    if (changedProperties.has("span") && this.span !== void 0 && !isGridSpan(this.span) && !isGridSpanOptions(this.span)) {
+      this.span = void 0;
+    }
   }
   get gridClasses() {
     return getGridClasses({
       columns: this.columns,
-      gap: this.gap
+      gap: this.gap,
+      ...this.span !== void 0 && {
+        span: this.span
+      }
     });
   }
   render() {
@@ -2826,7 +2894,8 @@ var SpectreGridElement = class extends SpectreProjectableElement {
 };
 SpectreGridElement.properties = {
   columns: { type: Number, reflect: true },
-  gap: { type: String, reflect: true }
+  gap: { type: String, reflect: true },
+  span: { type: Object }
 };
 function defineSpectreGrid(tagName = "sp-grid") {
   const existingElement = customElements.get(tagName);
@@ -4128,6 +4197,9 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     if (changedProperties.has("variant") && !isTextVariant(this.variant)) {
       this.variant = "default";
     }
+    if (changedProperties.has("transform") && this.transform !== void 0 && !isTextTransform(this.transform)) {
+      this.transform = void 0;
+    }
   }
   get id() {
     return super.id;
@@ -4156,6 +4228,7 @@ var SpectreTextElement = class extends SpectreProjectableElement {
     const textClasses = getTextClasses({
       ...this.family !== void 0 && { family: this.family },
       size: this.size ?? "md",
+      ...this.transform !== void 0 && { transform: this.transform },
       variant: this.variant ?? "default"
     });
     return html$1`<${tag}
@@ -4173,6 +4246,7 @@ SpectreTextElement.properties = {
   family: { type: String, reflect: true },
   level: { type: String, reflect: true },
   size: { type: String, reflect: true },
+  transform: { type: String, reflect: true },
   variant: { type: String, reflect: true }
 };
 function defineSpectreText(tagName = "sp-text") {